/* =========================================================
   Temporada Nordestina — design tokens
   Direction "Mar de Dentro", adapted to the official hamsa logo:
   deep emerald + gold, with Majorelle blue from the villa's suites.
   ========================================================= */
:root {
  --ink: #08110D;
  --emerald-950: #061710;
  --emerald-900: #0A2419;
  --emerald-800: #0F3324;
  --emerald-700: #165038;
  --emerald-500: #23795A;
  --gold: #D2A54A;
  --gold-300: #E4C27C;
  --gold-100: #F3E6C6;
  --majorelle: #2944B8;
  --majorelle-700: #1C2F86;
  --sea: #2BA6A0;
  --sand: #F5EFE4;
  --sand-200: #EAE1D0;
  --concrete: #BDB5A6;
  --paper: #FBF8F2;
  --text: #15201A;
  --text-muted: #56635B;
  --on-dark: #F5EFE4;
  --on-dark-muted: rgba(245, 239, 228, .72);

  --font-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --font-brand: "Cormorant Garamond", "Cormorant", "Garamond", Georgia, serif;
  --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--1: clamp(.8rem, .78rem + .1vw, .875rem);
  --step-0: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --step-1: clamp(1.15rem, 1.05rem + .45vw, 1.35rem);
  --step-2: clamp(1.5rem, 1.25rem + 1vw, 2.1rem);
  --step-3: clamp(2rem, 1.5rem + 2.2vw, 3.4rem);
  --step-4: clamp(2.5rem, 1.6rem + 3.6vw, 4.8rem);

  --radius: 999px;   /* buttons: fully rounded */
  --radius-lg: 10px;
  --gutter: clamp(16px, 4vw, 56px);
  --container: 1240px;
  --header-h: 76px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Semantic tokens for the light sections (comparison, destinations, details, villa extras).
     Dark mode redefines only these; the always-dark parts (tour, catalogue, contact, footer) keep theirs. */
  --surface: var(--sand);            /* section background */
  --surface-raised: var(--paper);    /* lighter section / chips / cards */
  --line: var(--sand-200);           /* hairlines, placeholders */
  --accent-text: var(--emerald-700); /* eyebrows, links, table labels */
  --heading-text: var(--emerald-900);/* names, numbers, chip text */
  --row-hover: rgba(255, 255, 255, .55);
  --map-tiles: none;                 /* filter on the map tiles */
  /* Page-level parts (catalogue, contact, form, icon panel, header after the tour, menu, footer).
     Light here; the dark blocks below give them the deep-green look. Parts over photos stay dark. */
  --page-bg: var(--paper);
  --panel-bg: var(--surface);
  --panel-raised: #FFFDF8;
  --panel-text: var(--text);
  --panel-muted: var(--text-muted);
  --panel-line: rgba(21, 32, 26, .14);
  --panel-accent: #96702A;           /* deep gold: readable on cream */
  --field-bg: #FFFFFF;
  --field-scheme: light;
  --placeholder: rgba(21, 32, 26, .45);
  --option-bg: #FFFFFF; --option-text: var(--text);
  --header-solid: rgba(251, 248, 242, .94);
  --header-solid-text: var(--emerald-900);
  --header-solid-line: rgba(21, 32, 26, .1);
  --menu-bg: rgba(251, 248, 242, .98);
  --footer-bg: #EFE7D8;
  --section-alt: var(--surface);
  --error-text: #B3432B;
  --ev-bg: radial-gradient(120% 60% at 85% 0%, rgba(210, 165, 74, .14), transparent 60%), radial-gradient(90% 50% at 0% 100%, rgba(36, 92, 64, .07), transparent 70%), linear-gradient(160deg, #FFFDF8 0%, #FBF5EA 55%, #F4EBDA 100%); --ev-inner: rgba(255, 255, 255, .6); --ev-line: rgba(150, 112, 42, .3); --contact-veil: rgba(247, 241, 230, .9);
  color-scheme: light;
}
/* Dark mode: follows the device unless the visitor picked a theme (html[data-theme]) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #0C1813; --surface-raised: #12211A; --line: rgba(228, 194, 124, .16);
    --text: #ECE5D7; --text-muted: rgba(236, 229, 215, .7);
    --accent-text: var(--gold-300); --heading-text: var(--gold-100);
    --row-hover: rgba(228, 194, 124, .06);
    --map-tiles: invert(.92) hue-rotate(180deg) saturate(.6) brightness(.95) contrast(.92);
    --page-bg: var(--ink); --panel-bg: var(--ink); --panel-raised: var(--emerald-900); --panel-text: var(--on-dark); --panel-muted: var(--on-dark-muted);
    --panel-line: rgba(245, 239, 228, .2); --panel-accent: var(--gold); --field-bg: rgba(4, 16, 11, .72); --field-scheme: dark;
    --placeholder: rgba(245, 239, 228, .55); --option-bg: #0A2419; --option-text: #F5EFE4;
    --header-solid: rgba(6, 23, 16, .93); --header-solid-text: var(--on-dark); --header-solid-line: rgba(210, 165, 74, .22);
    --menu-bg: rgba(6, 23, 16, .97); --footer-bg: var(--emerald-950); --section-alt: var(--emerald-900); --error-text: #F2A38F;
  --ev-bg: radial-gradient(120% 60% at 85% 0%, rgba(210, 165, 74, .16), transparent 60%), radial-gradient(90% 50% at 0% 100%, rgba(36, 92, 64, .45), transparent 70%), linear-gradient(160deg, #0B2A1D 0%, #061A11 55%, #04110B 100%); --ev-inner: rgba(4, 16, 11, .35); --ev-line: rgba(210, 165, 74, .22); --contact-veil: rgba(6, 18, 12, .88);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface: #0C1813; --surface-raised: #12211A; --line: rgba(228, 194, 124, .16);
  --text: #ECE5D7; --text-muted: rgba(236, 229, 215, .7);
  --accent-text: var(--gold-300); --heading-text: var(--gold-100);
  --row-hover: rgba(228, 194, 124, .06);
  --map-tiles: invert(.92) hue-rotate(180deg) saturate(.6) brightness(.95) contrast(.92);
  --page-bg: var(--ink); --panel-bg: var(--ink); --panel-raised: var(--emerald-900); --panel-text: var(--on-dark); --panel-muted: var(--on-dark-muted);
  --panel-line: rgba(245, 239, 228, .2); --panel-accent: var(--gold); --field-bg: rgba(4, 16, 11, .72); --field-scheme: dark;
  --placeholder: rgba(245, 239, 228, .55); --option-bg: #0A2419; --option-text: #F5EFE4;
  --header-solid: rgba(6, 23, 16, .93); --header-solid-text: var(--on-dark); --header-solid-line: rgba(210, 165, 74, .22);
  --menu-bg: rgba(6, 23, 16, .97); --footer-bg: var(--emerald-950); --section-alt: var(--emerald-900); --error-text: #F2A38F;
  --ev-bg: radial-gradient(120% 60% at 85% 0%, rgba(210, 165, 74, .16), transparent 60%), radial-gradient(90% 50% at 0% 100%, rgba(36, 92, 64, .45), transparent 70%), linear-gradient(160deg, #0B2A1D 0%, #061A11 55%, #04110B 100%); --ev-inner: rgba(4, 16, 11, .35); --ev-line: rgba(210, 165, 74, .22); --contact-veil: rgba(6, 18, 12, .88);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
/* the page never pans sideways on phones: nothing may be wider than the screen */
.page-home, .page-property, main, section, footer { max-width: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.is-locked, html.is-locked body { overflow: hidden; }
body {
  margin: 0; background: var(--page-bg); color: var(--text);
  font: 400 var(--step-0)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
/* Bodoni Moda: use its text-size cut at every size, so the hairlines stay visible in big titles
   (the display cut the browser picks for large sizes is too thin). Fonts without the axis ignore this. */
body { font-optical-sizing: none; font-variation-settings: "opsz" 16; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -.01em; margin: 0; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; padding: 0 !important; margin: -1px !important; border: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 16px;
  background: var(--gold); color: var(--ink); font-weight: 600; border-radius: var(--radius); text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 1.5em; border: 1px solid transparent; border-radius: var(--radius);
  font: 600 .95rem/1 var(--font-body); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-300); }
.btn--ghost { border-color: rgba(245, 239, 228, .5); color: var(--on-dark); background: rgba(6, 23, 16, .2); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-100); }
.btn--outline { border-color: var(--accent-text); color: var(--heading-text); }
.btn--outline:hover { background: var(--heading-text); color: var(--surface); }
.btn--sm { min-height: 40px; padding: 0 1.1em; font-size: .875rem; }
.btn--block { width: 100%; }
.link {
  color: var(--accent-text); font-weight: 600; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px;
  transition: background-size .3s var(--ease), color .2s;
}
.link:hover { color: var(--majorelle); background-size: 0 1px; background-position: 100% 100%; }

.eyebrow {
  font: 600 var(--step--1)/1.2 var(--font-body); letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: 1rem; display: flex; align-items: center; gap: .75em;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.eyebrow--gold { color: var(--panel-accent); }
.band .eyebrow--gold { color: var(--gold); }   /* over a photo: always bright gold */
.mobile-menu .lang { border-color: var(--panel-line); }
.lede { font-size: var(--step-1); line-height: 1.55; color: var(--text-muted); max-width: 60ch; margin-top: 1.1rem; }

/* ---------- Header: glass over the tour, solid after it ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; color: var(--on-dark);
  padding-top: env(safe-area-inset-top);
  transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
.site-header[data-state="glass"] {
  background: linear-gradient(to bottom, rgba(6, 23, 16, .72) 0%, rgba(6, 23, 16, .38) 55%, rgba(6, 23, 16, 0) 100%);
  background-origin: border-box;   /* don't let the gradient repeat into the 1px border (dark line) */
}
/* Header after the tour (and with the menu open) follows the theme */
.site-header[data-state="solid"] .brand__name, .site-header.is-menu-open .brand__name,
.site-header[data-state="solid"] .site-nav a, .site-header.is-menu-open .site-nav a { text-shadow: none; }
.site-header[data-state="solid"] .brand__name em, .site-header.is-menu-open .brand__name em { color: var(--panel-accent); }
.site-header[data-state="solid"] .lang, .site-header.is-menu-open .lang,
.site-header[data-state="solid"] .theme-toggle, .site-header.is-menu-open .theme-toggle { border-color: var(--panel-line); }
.site-header[data-state="solid"], .site-header.is-menu-open {
  background: var(--header-solid); color: var(--header-solid-text);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom-color: var(--header-solid-line);
}
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
.site-header__inner {
  height: var(--header-h); display: flex; align-items: center; gap: 24px;
  width: min(100% - 2 * var(--gutter), 1400px); margin-inline: auto;
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; }
.brand__mark { width: 44px; height: 44px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(210, 165, 74, .35); }
/* Wordmark: "Temporada" in a smooth serif, "NORDESTINA" in fine tracked caps beneath. */
.brand__name {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px;
  font: 600 1.5rem/0.9 var(--font-brand); letter-spacing: .015em; white-space: nowrap;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .3); -webkit-font-smoothing: antialiased;
}
.brand__name em {
  font: 600 .58rem/1 var(--font-body); font-style: normal; letter-spacing: .5em; text-transform: uppercase;
  color: var(--gold-300); padding-left: .12em; margin-right: -.5em;
}
.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; display: flex; gap: clamp(14px, 1.6vw, 28px); margin: 0; padding: 0; }
.site-nav a {
  text-decoration: none; font-size: .9rem; font-weight: 500; letter-spacing: .02em; padding: 10px 0; position: relative;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.site-nav a:hover::after, .site-nav a[aria-current="true"]::after { transform: scaleX(1); }
.site-header__actions { display: flex; align-items: center; gap: 14px; }
.lang { display: flex; border: 1px solid rgba(245, 239, 228, .35); border-radius: 999px; padding: 2px; }
.lang__btn {
  min-width: 36px; min-height: 30px; border: 0; border-radius: 999px; background: none; color: inherit;
  font: 600 .75rem/1 var(--font-body); letter-spacing: .08em; cursor: pointer;
}
.lang__btn[aria-pressed="true"] { background: var(--gold); color: var(--ink); }
.menu-toggle { display: none; }
/* Light / dark switch: the icon shows the current mode (sun = light, moon = dark) */
.theme-toggle {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; flex: none;
  border: 1px solid rgba(245, 239, 228, .35); border-radius: 50%; background: none; color: inherit; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.theme-toggle:hover { border-color: var(--gold); color: var(--gold-300); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle__moon, .theme-toggle[aria-pressed="true"] .theme-toggle__sun { display: none; }
.theme-toggle[aria-pressed="true"] .theme-toggle__moon { display: block; }
@media (max-width: 767px) { .theme-toggle { width: 44px; height: 44px; border-color: transparent; } }

/* ---------- Mobile menu (styled fully in the mobile pass) ---------- */
.mobile-menu[hidden] { display: none; }

/* ---------- Tour ---------- */
.tour { position: relative; background: var(--ink); }
.tour__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.tour__poster, .tour__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tour__poster { object-fit: cover; object-position: 52% 56%; }
.tour__canvas { opacity: 0; transition: opacity .4s ease; }
.tour.is-ready .tour__canvas { opacity: 1; }
.tour__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(6, 23, 16, var(--shade-l, .55)) 0%, rgba(6, 23, 16, 0) 52%),
    linear-gradient(to left, rgba(6, 23, 16, var(--shade-r, 0)) 0%, rgba(6, 23, 16, 0) 52%),
    radial-gradient(ellipse 70% 60% at 50% 52%, rgba(6, 23, 16, var(--shade-c, 0)) 0%, rgba(6, 23, 16, calc(var(--shade-c, 0) * .55)) 60%, rgba(6, 23, 16, 0) 100%),
    linear-gradient(to top, rgba(6, 23, 16, .45) 0%, rgba(6, 23, 16, 0) 30%);
}
.tour__chapters { position: absolute; inset: 0; pointer-events: none; }
/* Chapters are centred with flexbox, not translate(-50%): percentage transforms land text on
   half pixels and blur it. Only a whole-pixel lift (--lift, rounded in tour.js) is animated. */
.chapter {
  position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center;
  transform: translateY(var(--lift, 0px));
  width: min(520px, 42vw); color: var(--on-dark); opacity: 0; visibility: hidden; pointer-events: none;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.chapter.is-visible { visibility: visible; pointer-events: auto; }
.chapter--left { left: max(var(--gutter), calc((100vw - 1400px) / 2)); }
.chapter--right { right: max(var(--gutter), calc((100vw - 1400px) / 2)); }
/* Centred chapters (home intro) */
.chapter--center { left: 0; right: 0; margin-inline: auto; width: min(880px, calc(100vw - 2 * var(--gutter))); text-align: center; }
.chapter--center .eyebrow { justify-content: center; }
.chapter--center .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.chapter--center .chapter__body { margin-inline: auto; }
.chapter--center .chapter__actions { justify-content: center; }
/* The brand name in the intro uses the same wordmark lettering as the header. */
.tour--intro .chapter--hero .chapter__title { font-family: var(--font-brand); font-weight: 500; font-size: clamp(3.4rem, 1.6rem + 6vw, 8rem); letter-spacing: .005em; line-height: .95; }
.chapter--word .eyebrow { font-family: var(--font-display); font-size: 1rem; letter-spacing: .3em; }
.chapter--word .chapter__title { font-size: clamp(3.6rem, 1.6rem + 7vw, 9.5rem); line-height: .95; letter-spacing: -.02em; }
.chapter--word .chapter__body { font-size: var(--step-1); }
.story-frame--center { justify-content: center; text-align: center; }
.story-frame--center::before { background: radial-gradient(ellipse at center, rgba(6, 23, 16, .7), rgba(6, 23, 16, .25)); }

/* Badge (e.g. monthly rental) */
.badge {
  display: inline-block; padding: 6px 10px; border-radius: 999px; background: var(--gold); color: var(--ink);
  font: 700 .68rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags--panel { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 2; gap: 4px; }
.tags--panel .badge { padding: 5px 8px; font-size: .6rem; letter-spacing: .08em; }
.chapter .eyebrow { color: var(--gold-300); }
.chapter__title { font-size: var(--step-4); line-height: 1.02; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.chapter--hero { width: min(640px, 48vw); }
.chapter--hero .chapter__title { font-size: clamp(2.6rem, 1.4rem + 3.3vw, 4.6rem); }
.chapter__body { margin-top: 1.2rem; font-size: var(--step-1); line-height: 1.55; color: rgba(245, 239, 228, .9); text-shadow: 0 1px 16px rgba(0, 0, 0, .45); max-width: 44ch; }
.chapter__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
.tour__skip {
  position: absolute; left: max(var(--gutter), calc((100vw - 1400px) / 2)); bottom: 28px; z-index: 3; color: var(--on-dark);
  font-size: .85rem; font-weight: 600; letter-spacing: .06em; text-decoration: none; padding: 12px 4px;
  border-bottom: 1px solid rgba(210, 165, 74, .6);
}
.tour__skip:hover { color: var(--gold-300); }
.tour__cue {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); color: var(--on-dark-muted);
  font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; display: grid; justify-items: center; gap: 10px;
  transition: opacity .4s;
}
.tour__cue i { width: 1px; height: 36px; background: linear-gradient(var(--gold), transparent); animation: cue 2s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.tour__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(245, 239, 228, .12); }
.tour__progress i { display: block; height: 100%; width: 100%; background: var(--gold); transform: scaleX(var(--p, 0)); transform-origin: left; }
.tour__static { display: none; }

/* Static storyboard (reduced motion, constrained devices, no canvas) */
.tour.is-static { height: auto !important; }
.tour.is-static .tour__stage { display: none; }
.tour.is-static .tour__static { display: block; }
.story-frame { position: relative; min-height: 88vh; display: flex; align-items: center; overflow: hidden; color: var(--on-dark); }
.story-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-frame::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(6, 23, 16, .72), rgba(6, 23, 16, .1) 70%); }
.story-frame .chapter { position: relative; z-index: 2; display: block; opacity: 1; visibility: visible; pointer-events: auto; transform: none; top: auto; bottom: auto; left: auto; right: auto; margin: 120px var(--gutter) 64px; }
.story-frame--center .chapter { margin-inline: auto; }

/* ---------- Sections ---------- */
.section { padding: clamp(80px, 11vw, 160px) 0; }
.section--sand { background: var(--surface); color: var(--text); }
.section--light { background: var(--surface-raised); color: var(--text); }
.section--emerald { background: var(--section-alt); color: var(--panel-text); }
.section--emerald .lede { color: var(--panel-muted); }
.section--emerald .eyebrow { color: var(--panel-accent); }
.section--ink { background: var(--panel-bg); color: var(--panel-text); }
.section--ink .lede { color: var(--panel-muted); }
.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 72px); }
.subhead { font-size: var(--step-2); margin: clamp(56px, 7vw, 96px) 0 28px; display: flex; align-items: center; gap: 20px; }
.subhead--first { margin-top: 0; }
.subhead::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.note { margin-top: 28px; color: var(--text-muted); font-size: .95rem; }

/* ---------- Home: every stay up front ---------- */
.options {
  position: relative; min-height: 100vh; min-height: 100svh; background: var(--panel-bg); color: var(--panel-text);
  display: grid; grid-template-rows: auto minmax(380px, 1fr);
  padding-top: calc(var(--header-h) + env(safe-area-inset-top));
}
.options__intro {
  width: min(100% - 2 * var(--gutter), 1400px); margin: 0 auto; padding: clamp(20px, 4vh, 48px) 0 clamp(20px, 3vh, 36px);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px 64px; align-items: end;
}
.options__intro .eyebrow { grid-column: 1 / -1; margin: 0; }
.options__title { font-size: clamp(2.6rem, 1.4rem + 3.4vw, 4.8rem); line-height: 1; }
.options__body { color: var(--panel-muted); font-size: var(--step-1); max-width: 46ch; }
.options__list {
  list-style: none; margin: 0; display: flex; gap: 10px;
  padding: 0 max(var(--gutter), calc((100vw - 1400px) / 2)) var(--gutter);
}
.option { flex: 1 1 0; min-width: 0; transition: flex-grow .6s var(--ease); animation: rise .9s var(--ease) both; animation-delay: calc(var(--i) * 90ms + 150ms); }
.options__list:hover .option, .options__list:focus-within .option { flex-grow: .8; }
.options__list .option:hover, .options__list .option:focus-within { flex-grow: 2.2; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.option__link { position: relative; display: block; height: 100%; min-height: 380px; border-radius: var(--radius-lg); overflow: hidden; color: var(--on-dark); text-decoration: none; background: var(--emerald-900); }
.option__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 1.2s var(--ease); }
.option:hover .option__img, .option:focus-within .option__img { transform: scale(1); }
.option__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 23, 16, .92) 0%, rgba(6, 23, 16, .3) 48%, rgba(6, 23, 16, .05) 100%); }
.option__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; display: grid; gap: 6px; }
.option__place { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-300); font-weight: 600; }
.option__name { font: 500 clamp(1.35rem, .9rem + 1vw, 2rem)/1.05 var(--font-display); }
.option__meta { font-size: .85rem; color: var(--on-dark-muted); }
.option__cta { margin-top: 10px; font-size: .85rem; font-weight: 600; color: var(--gold); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s var(--ease); }
.option:hover .option__cta, .option:focus-within .option__cta { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .option { animation: none; transition: none; } .option__img { transition: none; } }

/* Compare */
.compare { overflow-x: auto; }
.compare__table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .95rem; }
.compare__table th, .compare__table td { padding: 18px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.compare__table thead th { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; }
.compare__table tbody th { font: 500 1.25rem/1.1 var(--font-display); color: var(--heading-text); }
.compare__table td { color: var(--text-muted); }
.compare__table tbody tr { transition: background-color .2s; }
.compare__table tbody tr:hover { background: var(--row-hover); }

/* Destinations */
.destinations { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.destination img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); }
.destination__body { padding: 22px 4px 0; display: grid; gap: 10px; }
.destination h3 { font-size: var(--step-2); }
.destination p { color: var(--text-muted); max-width: 52ch; }
.destination__stays { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* Property page: details */
.details { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
/* The text scrolls with the page; only the booking card follows alongside the photos (like Airbnb) */
.details__text { display: grid; gap: 16px; align-self: stretch; align-content: start; }
.details__text > .book { position: sticky; top: calc(var(--header-h) + 24px); }
.details__text .lede { margin-top: 0; }
.details__kind { color: var(--text-muted); font-size: .9rem; letter-spacing: .04em; }
.details__cta { margin-top: 8px; }
.details__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.photo { margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--line); }
.photo--lead { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.stay__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.stay__facts li { font-size: .8rem; font-weight: 600; padding: 6px 10px; border-radius: 999px; background: var(--surface-raised); color: var(--heading-text); border: 1px solid var(--line); }
.stay__detail { font-size: .92rem; color: var(--text-muted); line-height: 1.55; }
.stay__detail strong { color: var(--heading-text); font-weight: 600; }

/* Property page: info icons — a dark, poster-style panel (same in light and dark mode) */
.features {
  margin-top: clamp(40px, 5vw, 72px); padding: clamp(24px, 3.2vw, 44px);
  background: var(--panel-raised); color: var(--panel-text); border: 1px solid var(--panel-line); border-radius: var(--radius-lg);
}
.features__title {
  display: flex; align-items: center; gap: .75em; margin: 0 0 clamp(20px, 2.4vw, 32px);
  font: 600 var(--step--1)/1.2 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--panel-accent);
}
.features__title::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.features__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px 32px; }
.feature { display: flex; align-items: center; gap: 14px; min-width: 0; }
.feature__icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; color: var(--panel-accent); }
.feature__icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.feature__text { display: grid; gap: 3px; min-width: 0; }
.feature__text strong { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--panel-text); }
.feature__text small { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--panel-muted); }
@media (max-width: 767px) { .features__list { grid-template-columns: 1fr 1fr; gap: 18px 16px; } .feature { gap: 10px; } .feature__icon { width: 32px; height: 32px; } .feature__icon svg { width: 26px; height: 26px; }
  /* icon above the label, so long words (ESTACIONAMENTO, AR-CONDICIONADO) get the full column width */
  .feature { flex-direction: column; align-items: flex-start; gap: 8px; }
  .feature__text { width: 100%; }
  .feature__text strong { font-size: .72rem; letter-spacing: .08em; overflow-wrap: break-word; } }
@media (max-width: 340px) { .features__list { grid-template-columns: 1fr; } .feature { flex-direction: row; align-items: center; } }

/* Property page: location map (spans the full details width, under the photos) */
.location {
  display: grid; grid-template-columns: 1fr 1.9fr; gap: clamp(24px, 4vw, 56px); align-items: center;
  margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--line);
}
.location__text { display: grid; gap: 12px; }
.location__text .eyebrow { margin: 0; }
.location h3 { font-size: var(--step-2); }
.location__note { color: var(--text-muted); font-size: .9rem; }
.location__note--pin { display: flex; align-items: center; gap: 8px; }
.location__note--pin svg { width: 20px; height: 20px; flex: none; }
.location__map { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--line); box-shadow: 0 1px 0 rgba(21, 32, 26, .06); }
.location__map iframe { display: block; width: 100%; height: 100%; border: 0; filter: saturate(.85); }
/* Waze button (route to the stay) */
.btn--waze { background: #33CCFF; color: #06210F; gap: 10px; }
.btn--waze:hover { background: #66D9FF; }
.btn--waze svg { width: 22px; height: 22px; flex: none; }

/* Static map (used where embedding Google Maps isn't allowed). The stay sits at the exact centre. */
.location__map--static { position: relative; margin: 0; }
.location__map-link { position: absolute; inset: 0; display: block; cursor: pointer; }
.location__map-link:hover img { filter: brightness(1.04); }
.location__map--static img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.location__pin {
  /* Rotated teardrop: its tip sits ~21px below the box centre, so lift it to put the tip on the spot. */
  position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -36px 0 0 -15px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--emerald-800); border: 3px solid var(--gold); box-shadow: 0 6px 14px rgba(6, 23, 16, .35);
}
.location__pin::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--gold); }
/* Interactive map (drag / zoom). Pin = .location__pin placed by Leaflet at the stay. */
.location__map--live {
  position: relative; margin: 0; user-select: none; -webkit-user-select: none;
  isolation: isolate; z-index: 0;   /* keep Leaflet's z-indexed panes (400–1000) inside the map, under the fixed header */
}
.location__live .leaflet-image-layer { filter: var(--map-tiles); }
.location__live { position: absolute; inset: 0; background: var(--line); font: inherit; outline: none; }
.location__map--live.is-active { box-shadow: 0 0 0 2px var(--gold); }
.location__marker { background: none; border: 0; }
.location__pin--live { position: absolute; left: 0; top: 0; margin: 0; display: block; transition: transform .2s; }
.location__pin--live:hover { transform: rotate(-45deg) scale(1.12); }
.location__map--live .leaflet-control-zoom,
.location__map--live .location__recentre { border: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(6, 23, 16, .22); }
.location__map--live .leaflet-control-zoom a,
.location__map--live .location__recentre {
  width: 40px; height: 40px; line-height: 40px; font-size: 20px; color: var(--emerald-800);
  background: rgba(251, 248, 242, .94); border-color: var(--sand-200);
}
.location__map--live .leaflet-control-zoom a:hover,
.location__map--live .location__recentre:hover { background: #fff; color: var(--emerald-900, #071A12); }
.location__recentre { display: grid; place-items: center; padding: 0; cursor: pointer; }
.location__recentre svg { width: 20px; height: 20px; }
.location__map--live .leaflet-control-attribution { background: rgba(251, 248, 242, .85); color: var(--text-muted); font-size: .65rem; border-radius: 4px 0 0 0; }
.location__hint {
  position: absolute; inset: 0; z-index: 1000; display: grid; place-items: center; margin: 0; padding: 16px;
  background: rgba(6, 23, 16, .52); color: #fff; font-weight: 600; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.location__map--live.show-hint .location__hint { opacity: 1; }
.location__credit {
  position: absolute; right: 8px; bottom: 6px; padding: 2px 6px; border-radius: 4px;
  background: rgba(251, 248, 242, .85); color: var(--text-muted); font-size: .65rem;
}

/* Property page: other stays */
.subhead--first { margin-top: 0; }
.others { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.other a { display: grid; gap: 6px; text-decoration: none; }
.other img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 10px; transition: transform .6s var(--ease); }
.other a:hover img { transform: translateY(-4px); }
.other__place { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; }
.other__name { font: 500 1.45rem/1.1 var(--font-display); }
.other__meta { font-size: .85rem; color: var(--text-muted); }
/* Villa */
.villa-intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 clamp(40px, 5vw, 72px); border-top: 1px solid var(--line); }
.stats div { padding: 22px 0 18px; border-bottom: 1px solid var(--line); }
.stats div:nth-child(odd) { padding-right: 20px; border-right: 1px solid var(--line); }
.stats div:nth-child(even) { padding-left: 20px; }
.stats dt { font: 500 var(--step-3)/1 var(--font-display); color: var(--heading-text); }
.stats dd { margin: 8px 0 0; color: var(--text-muted); font-size: .9rem; }
.spaces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.space img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; border-radius: var(--radius-lg); transition: transform .8s var(--ease); }
/* Each space card opens its photo gallery */
.space__open { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius-lg); overflow: hidden; }
.space__open:hover img { transform: scale(1.04); }
.space__count {
  position: absolute; left: 12px; bottom: 12px; padding: 7px 12px; border-radius: 999px;
  background: rgba(6, 23, 16, .78); color: var(--gold-100); font: 600 .78rem/1 var(--font-body); letter-spacing: .02em;
  transition: background-color .25s;
}
.space__open:hover .space__count { background: var(--gold); color: var(--ink); }
.space h4 { font: 500 var(--step-1)/1.2 var(--font-display); margin: 16px 0 6px; }
.space p { color: var(--text-muted); font-size: .95rem; }
.suites { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.suite { position: relative; border-radius: var(--radius-lg); overflow: hidden; color: var(--on-dark); min-height: 420px; display: flex; align-items: flex-end; }
.suite img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.suite:hover img { transform: scale(1.05); }
.suite::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(6, 23, 16, .88), rgba(6, 23, 16, .05) 62%); }
.suite__body { position: relative; z-index: 2; padding: 24px; }
.suite__body h4 { font: 500 var(--step-2)/1.1 var(--font-display); margin-bottom: 8px; }
.suite__body p { font-size: .9rem; color: var(--on-dark-muted); }
.suite--majorelle::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--majorelle); z-index: 2; }

/* Services */
.services { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.services__media { margin: 0; }
.services__media img { border-radius: var(--radius-lg); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.service-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; }
.service-list li { border-top: 1px solid rgba(210, 165, 74, .35); padding-top: 18px; }
.service-list h3 { font-size: var(--step-1); font-family: var(--font-display); color: var(--heading-text); margin-bottom: 8px; }
.service-list p { color: var(--panel-muted); font-size: .95rem; }

/* Events band */
.band { position: relative; min-height: 86vh; display: flex; align-items: flex-end; color: var(--on-dark); overflow: hidden; background: var(--emerald-950); }
.band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 23, 16, .9) 0%, rgba(6, 23, 16, .35) 45%, rgba(6, 23, 16, .05) 100%); }
.band__content { position: relative; padding: 0 0 clamp(64px, 9vw, 120px); max-width: var(--container); }
.band__content h2 { max-width: 18ch; }
.band__content .lede { color: var(--on-dark-muted); margin-bottom: 2rem; }

/* Contact */
.contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.contact__region { margin-top: 2rem; color: var(--panel-accent); font-family: var(--font-display); font-size: var(--step-1); }
.enquiry {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; padding: clamp(24px, 3.2vw, 44px);
  background: var(--panel-raised); border: 1px solid var(--panel-line); border-radius: 14px; box-shadow: 0 20px 50px -30px rgba(6, 23, 16, .35);
}
.field { display: grid; gap: 10px; align-content: start; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { display: flex; align-items: baseline; gap: 6px; font-size: .98rem; font-weight: 600; letter-spacing: .01em; color: var(--panel-text); }
.field .req { color: #E8735A; font-weight: 700; }
/* Field with an icon on the left (and a chevron for dropdowns) */
.control { position: relative; }
.control__icon {
  position: absolute; left: 16px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); pointer-events: none;
  fill: none; stroke: var(--panel-text); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .9;
}
.control--textarea .control__icon { top: 16px; transform: none; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 54px; padding: 14px 16px 14px 52px; border-radius: 14px; border: 1px solid var(--panel-line);
  background: var(--field-bg); color: var(--panel-text); font: inherit; font-size: 1rem; color-scheme: var(--field-scheme);
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); }
.field select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.field select:invalid, .field select option[value=""] { color: var(--placeholder); }
/* Dropdown lists: fixed colours (independent of light/dark mode), matching the dark form */
.field select option { color: var(--option-text); background: var(--option-bg); }
.field select option[value=""] { color: var(--placeholder); }
.field select:valid { color: var(--panel-text); }
.control--select::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; pointer-events: none;
  border-right: 2px solid var(--panel-text); border-bottom: 2px solid var(--panel-text); transform: rotate(45deg);
}
.field textarea { min-height: 112px; resize: vertical; }
.field input, .field select, .field textarea { min-width: 0; max-width: 100%; }
.field input[type="date"] { padding-right: 10px; }
/* iPhone / iPad Safari: date fields keep their full height and left-aligned text, even when empty */
@supports (-webkit-touch-callout: none) {
  .field input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-height: 54px; line-height: 1.4; }
  .field input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.4em; }
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(210, 165, 74, .2); }
.field.is-invalid input, .field.is-invalid select { border-color: #E8735A; }
.field--guests { grid-column: 1; }
.field--message { grid-column: 2; }
.enquiry__send { min-height: 58px; gap: 12px; font-size: 1.05rem; margin-top: 6px; }
.enquiry__send svg { width: 26px; height: 26px; }
.enquiry__status { margin-top: 12px; font-size: .9rem; color: var(--panel-text); min-height: 1.4em; }
.enquiry__status[data-kind="demo"] { color: var(--panel-accent); }

/* Events & weddings card: under the region line on desktop (left column), after the stay form on phones.
   It keeps its own deep-emerald look in both themes, like the events poster. */
/* Title centred on top; the two forms side by side below it, same height */
.contact { grid-template-columns: 1fr 1fr; grid-template-areas: "head head" "ev form"; grid-template-rows: auto; column-gap: clamp(24px, 3vw, 48px); --contact-gap: 48px; row-gap: var(--contact-gap); }
.contact > .ev, .contact > .enquiry { align-self: stretch; }
/* the stay form fills the same height: its message box grows, the button stays at the bottom */
@media (min-width: 1101px) {
  .contact > .enquiry { grid-template-rows: repeat(5, auto) 1fr auto; }
  .contact > .enquiry .field--message { grid-template-rows: auto 1fr; }
  .contact > .enquiry .field--message .control, .contact > .enquiry .field--message textarea { height: 100%; }
}
.contact > .section-head { grid-area: head; margin: 0 auto; text-align: center; }
.contact > .section-head .eyebrow { justify-content: center; }
.contact > .section-head .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.contact > .section-head .lede { margin-inline: auto; }
.contact > .enquiry { grid-area: form; }
.contact > .ev { grid-area: ev; }
.ev {
  container: ev / inline-size; min-width: 0; color: var(--panel-text); text-align: center;
  padding: clamp(28px, 4vw, 48px) clamp(18px, 3vw, 36px) clamp(22px, 3vw, 32px); border-radius: 18px;
  background: var(--ev-bg);
  border: 1px solid var(--ev-line); box-shadow: 0 30px 60px -35px rgba(6, 23, 16, .6);
}
.ev__mark svg { width: 92px; height: 40px; fill: none; stroke: var(--panel-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ev__eyebrow {
  margin-top: 14px; font: 600 .72rem/1.2 var(--font-body); letter-spacing: .32em; text-transform: uppercase; color: var(--panel-accent);
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.ev__eyebrow::before, .ev__eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.ev__title { margin-top: 12px; font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem); line-height: 1.05; text-wrap: balance; color: var(--panel-text); }
.ev__title em { display: block; font-style: normal; color: var(--panel-accent); }
.ev__text { margin: 14px auto 0; max-width: 46ch; color: var(--panel-muted); line-height: 1.6; }
.ev__perks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.ev__perks li { display: grid; justify-items: center; align-content: start; gap: 10px; padding: 0 8px; font: 600 .68rem/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--panel-text); }
.ev__perks li + li { border-left: 1px solid var(--panel-line); }
.ev__perks svg { width: 46px; height: 46px; padding: 11px; border: 1px solid var(--gold); border-radius: 50%; fill: none; stroke: var(--panel-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ev__form { container: evf / inline-size; margin-top: 30px; padding: clamp(18px, 3vw, 28px); text-align: left; border: 1px solid var(--panel-line); border-radius: 14px; background: var(--ev-inner); }
.ev__head { display: flex; gap: 16px; align-items: center; margin-bottom: 22px; }
.ev__badge { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--gold); border-radius: 50%; }
.ev__badge svg { width: 24px; height: 24px; fill: none; stroke: var(--panel-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ev__head h4 { margin: 0; font: 500 1.6rem/1.15 var(--font-display); color: var(--panel-text); }
.ev__head p { margin-top: 6px; font-size: .9rem; line-height: 1.5; color: var(--panel-muted); }
.ev__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.ev .field label { font-size: .92rem; }
.ev__stepper { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 8px 0 52px; border: 1px solid var(--panel-line); border-radius: 14px; background: var(--field-bg); }
.ev__stepper input[type="number"] {
  flex: 1; min-height: 0; padding: 0; border: 0; background: none; text-align: center; box-shadow: none; -moz-appearance: textfield;
}
.ev__stepper input::-webkit-outer-spin-button, .ev__stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ev__stepper:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(210, 165, 74, .2); }
.ev__stepper input:focus { box-shadow: none; }
.ev__step {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--panel-line); border-radius: 50%;
  background: rgba(210, 165, 74, .08); color: var(--panel-accent); font: 500 1.2rem/1 var(--font-body); cursor: pointer;
}
.ev__step:hover { border-color: var(--gold); }
.ev .field.is-invalid .ev__stepper { border-color: #E8735A; }
.ev__send { min-height: 56px; margin-top: 4px; }
/* narrow card (desktop side column or phone): one field per row, perks stay three across */
@container evf (max-width: 340px) { .ev__grid { grid-template-columns: 1fr; } }
@container ev (max-width: 400px) {
  .ev__perks li { font-size: .6rem; letter-spacing: .1em; padding: 0 4px; }
  .ev__head { align-items: flex-start; }
  .ev__badge { width: 46px; height: 46px; }
  .ev__head h4 { font-size: 1.35rem; }
}
.enquiry__status[data-kind="error"] { color: var(--error-text); }

/* WhatsApp */
.btn--wa { background: #25D366; color: #06210F; }
.btn--wa:hover { background: #3EE07A; }
.btn--wa svg, .wa-fab svg { width: 20px; height: 20px; flex: none; }
.contact__wa { margin-top: var(--contact-gap, 1.75rem); display: flex; justify-content: center; align-items: center; gap: 18px; }
.social {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; text-decoration: none;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .45); transition: transform .25s var(--ease), filter .2s;
}
.social:hover { transform: translateY(-2px); filter: brightness(1.06); }
.social svg { width: 28px; height: 28px; }
.social--wa { background: #25D366; color: #06210F; }
.social--ig { background: linear-gradient(45deg, #F58529, #DD2A7B 45%, #8134AF 75%, #515BD4); color: #fff; }
.wa-fab {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 60;
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border-radius: 50%;
  background: #25D366; color: #06210F; font: 600 .9rem/1 var(--font-body); text-decoration: none;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45); transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -8px rgba(0, 0, 0, .5); }
html.is-locked .wa-fab { display: none; }   /* menu or gallery open */
/* Instagram: button in the contact section + a round floating button above WhatsApp */
.btn--ig { background: linear-gradient(45deg, #F58529, #DD2A7B 45%, #8134AF 75%, #515BD4); color: #fff; }
.btn--ig:hover { filter: brightness(1.08); }
.btn--ig svg { width: 20px; height: 20px; flex: none; }
.ig-fab {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: calc(max(20px, env(safe-area-inset-bottom)) + 64px); z-index: 60;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(45deg, #F58529, #DD2A7B 45%, #8134AF 75%, #515BD4); color: #fff;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45); transition: transform .25s var(--ease), opacity .3s;
}
.ig-fab:hover { transform: translateY(-2px); }
.ig-fab svg { width: 26px; height: 26px; }
html.is-locked .ig-fab { display: none; }
/* Both floating buttons: hidden during the tour and while scrolling up (data-fabs, set in common.js) */
.wa-fab, .ig-fab { transition: opacity .3s, transform .3s var(--ease), box-shadow .25s var(--ease); }
html:not([data-fabs="show"]) .wa-fab, html:not([data-fabs="show"]) .ig-fab { opacity: 0; transform: translateY(12px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .wa-fab, .ig-fab { transition: none; } }
.wa-fab svg { width: 26px; height: 26px; }
.wa-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* label kept for screen readers */

/* Suite "see all photos" + clickable detail photos */
.suite__photos {
  margin-top: 14px; padding: 10px 0 2px; border: 0; border-bottom: 1px solid var(--gold); background: none; cursor: pointer;
  color: var(--gold-100); font: 600 .85rem/1.2 var(--font-body); letter-spacing: .02em;
}
.suite__photos:hover { color: var(--gold); }
/* phones: a finger-sized tap area around the underlined link (the look stays the same) */
@media (pointer: coarse), (max-width: 767px) { .suite__photos { position: relative; min-height: 44px; padding-top: 22px; margin-top: 2px; } }
.photo__open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.photo__open img { transition: transform .6s var(--ease); }
.photo__open:hover img { transform: scale(1.03); }

/* Lightbox */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(4, 12, 8, .96); color: var(--on-dark);
  display: grid; grid-template-rows: auto 1fr auto; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.lightbox__top { display: flex; align-items: center; gap: 16px; padding: 14px var(--gutter); }
.lightbox__title { font: 500 1.3rem/1.1 var(--font-display); }
.lightbox__count { color: var(--on-dark-muted); font-size: .85rem; margin-right: auto; }
.lightbox__close {
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(245, 239, 228, .35);
  background: none; color: inherit; font: 600 .85rem/1 var(--font-body); cursor: pointer;
}
.lightbox__close:hover { border-color: var(--gold); color: var(--gold-100); }
.lightbox__stage { margin: 0; min-height: 0; height: 100%; overflow: hidden; display: grid; place-items: center; padding: 0 clamp(56px, 7vw, 96px); }
.lightbox__img { max-width: 100%; max-height: 100%; max-height: calc(100svh - 190px); width: auto; height: auto; object-fit: contain; border-radius: 6px; }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(245, 239, 228, .3); background: rgba(6, 23, 16, .6); color: var(--on-dark);
  font-size: 2rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.lightbox__nav:hover { border-color: var(--gold); color: var(--gold); }
.lightbox__nav--prev { left: max(12px, var(--gutter) - 24px); }
.lightbox__nav--next { right: max(12px, var(--gutter) - 24px); }
.lightbox__strip { display: flex; gap: 8px; padding: 12px var(--gutter) 16px; overflow-x: auto; scrollbar-width: thin; }
.lightbox__strip button { flex: none; width: 72px; height: 54px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: none; cursor: pointer; opacity: .55; }
.lightbox__strip button[aria-current="true"] { border-color: var(--gold); opacity: 1; }
.lightbox__strip button:hover { opacity: 1; }
.lightbox__strip img { width: 100%; height: 100%; object-fit: cover; }

/* Footer */
.site-footer { background: var(--footer-bg); color: var(--panel-muted); padding: 56px 0 calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(210, 165, 74, .15); }
.site-footer__inner { display: grid; grid-template-columns: auto 1fr auto; gap: 24px 48px; align-items: center; }
.brand--footer { color: var(--panel-text); }
.brand--footer .brand__name em { color: var(--panel-accent); text-shadow: none; }
.brand--footer .brand__name { text-shadow: none; }
.brand--footer .brand__mark { width: 56px; height: 56px; }
.brand--footer .brand__name { font-size: 1.75rem; }
.brand--footer .brand__name em { font-size: .64rem; }
.site-footer__links { list-style: none; display: flex; gap: 24px; margin: 0; padding: 0; }
.site-footer__links a { text-decoration: none; font-size: .9rem; }
.site-footer__links a:hover { color: var(--panel-accent); }
.site-footer__copy { grid-column: 1 / -1; font-size: .8rem; opacity: .7; }

/* ---------- Responsive (desktop → tablet; full phone pass is separate) ---------- */
@media (max-width: 1100px) {
  .site-nav { display: none; }
  .site-header__actions { margin-left: auto; }
  .spaces, .suites, .others { grid-template-columns: repeat(2, 1fr); }
  .options__intro { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  /* Stacked: the round icons sit exactly midway between the region line and the form */
  .contact { --contact-gap: clamp(32px, 6vw, 56px); row-gap: var(--contact-gap); }
  .contact > .section-head { margin-bottom: 0; max-width: none; }
  .contact { grid-template-areas: "head" "form" "ev"; grid-template-rows: auto; }
  .contact__wa { margin-top: var(--contact-gap); }
  /* Seven stays don't fit side by side here: a two-column grid, the odd last one full width */
  .options { grid-template-rows: auto auto; }
  .options__list { display: grid; grid-template-columns: 1fr 1fr; }
  .options__list .option:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .option__link { min-height: 320px; }
  .option__cta { opacity: 1; transform: none; }
}
@media (max-width: 860px) {
  .villa-intro, .services, .contact, .details, .destinations { grid-template-columns: 1fr; }
  .details__text { position: static; }
  .details__text > .book { position: static; }
  .location { grid-template-columns: 1fr; }
  .location__map { aspect-ratio: 4 / 3; }
  .chapter { width: auto; left: var(--gutter); right: var(--gutter); }
  .chapter--center { left: var(--gutter); right: var(--gutter); width: auto; margin-inline: 0; }
  .options { grid-template-rows: auto auto; }
  .options__list { display: grid; grid-template-columns: 1fr 1fr; }
  .option__link { min-height: 300px; }
  .option__cta { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .spaces, .suites, .service-list, .others { grid-template-columns: 1fr; }
  .options__list { grid-template-columns: 1fr; }
  .enquiry { grid-template-columns: 1fr 1fr; }
  .site-footer__inner { grid-template-columns: 1fr; }
}

/* =====================================================================
   MOBILE — composed for phones and small tablets (same pages, same footage)
   ===================================================================== */

/* ---- Hamburger (tablet + phone) ---- */
@media (max-width: 1100px) {
  .menu-toggle {
    display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; padding: 0;
    border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer;
  }
  .menu-toggle__icon, .menu-toggle__icon::before, .menu-toggle__icon::after {
    display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform .3s var(--ease), background-color .2s;
  }
  .menu-toggle__icon { position: relative; }
  .menu-toggle__icon::before, .menu-toggle__icon::after { content: ""; position: absolute; left: 0; }
  .menu-toggle__icon::before { top: -7px; }
  .menu-toggle__icon::after { top: 7px; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon { background: transparent; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { transform: translateY(-7px) rotate(-45deg); }
  .menu-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  /* Menu: full-screen sheet under the (solid) header */
  .mobile-menu {
    position: fixed; inset: 0; z-index: 45; background: var(--menu-bg); color: var(--panel-text);
    overflow-y: auto; overscroll-behavior: contain;
    padding: calc(var(--header-h) + env(safe-area-inset-top) + 16px) max(var(--gutter), env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
    animation: menu-in .3s var(--ease);
  }
  @keyframes menu-in { from { opacity: 0; } to { opacity: 1; } }
  .mobile-menu__panel { display: grid; gap: 28px; max-width: 520px; }
  .mobile-menu__close {
    justify-self: end; min-height: 44px; padding: 0 16px; border: 1px solid var(--panel-line); border-radius: 999px;
    background: none; color: var(--panel-text); font: 600 .8rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  }
  .mobile-menu__links { list-style: none; margin: 0; padding: 0; display: grid; }
  .mobile-menu__links a {
    display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid rgba(210, 165, 74, .18);
    font: 500 clamp(1.6rem, 1.2rem + 2vw, 2.2rem)/1.1 var(--font-display); color: var(--panel-text); text-decoration: none;
  }
  .mobile-menu__links a:hover, .mobile-menu__links a:focus-visible { color: var(--panel-accent); }
  .mobile-menu .btn { justify-content: center; min-height: 52px; }
  .lang--menu { justify-self: start; }
  .lang--menu .lang__btn { min-width: 52px; min-height: 44px; font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) { .mobile-menu { animation: none; } .menu-toggle__icon, .menu-toggle__icon::before, .menu-toggle__icon::after { transition: none; } }

/* ---- Phones ---- */
@media (max-width: 767px) {
  :root { --header-h: 64px; }

  /* Header: symbol + one-line wordmark on the left, menu on the right */
  .site-header__inner { gap: 12px; width: calc(100% - 2 * 16px); }
  .site-header .lang, .site-header__cta { display: none; }
  .brand { gap: 10px; }
  .brand__mark { width: 38px; height: 38px; }
  .site-header .brand__name { font-size: 1.28rem; gap: 4px; }
  .site-header .brand__name em { font-size: .5rem; letter-spacing: .42em; margin-right: -.42em; }

  /* Fly-through: copy anchored low over a bottom-up scrim, clear of the header and of the path ahead */
  .tour__shade {
    background:
      linear-gradient(to top, rgba(6, 23, 16, .88) 0%, rgba(6, 23, 16, .55) 30%, rgba(6, 23, 16, 0) 58%),
      linear-gradient(to bottom, rgba(6, 23, 16, .35) 0%, rgba(6, 23, 16, 0) 22%);
  }
  .chapter, .chapter--left, .chapter--right, .chapter--hero, .chapter--center {
    top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); left: 16px; right: 16px; width: auto;
    display: block; margin-inline: 0; transform: translateY(var(--lift, 0px));
  }
  .chapter--center { text-align: center; }
  .chapter .eyebrow { margin-bottom: .6rem; font-size: .7rem; }
  .chapter__title { font-size: clamp(2rem, 1.2rem + 4.4vw, 2.6rem); line-height: 1.04; }
  .chapter--hero .chapter__title { font-size: clamp(2.3rem, 1.4rem + 5vw, 3rem); }
  .tour--intro .chapter--hero .chapter__title { font-size: clamp(3rem, 1.6rem + 8vw, 4rem); }
  .chapter--word .chapter__title { font-size: clamp(2.8rem, 1.4rem + 8vw, 3.8rem); }
  /* During the flight: one short heading per chapter. Copy returns at the final reveal. */
  .tour__stage .chapter__body { display: none; }
  .tour__stage .chapter--book .chapter__body,
  .tour__stage .chapter--catalogue .chapter__body { display: block; font-size: 1rem; margin-top: .8rem; }
  .chapter__actions { margin-top: 1.25rem; }
  .chapter__actions .btn { min-height: 48px; }
  .chapter__actions .btn--ghost { display: none; }   /* one primary action */
  /* A real button on phones: easy to see and to hit with a thumb */
  .tour__skip {
    left: 16px; bottom: calc(14px + env(safe-area-inset-bottom));
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
    border: 1px solid rgba(210, 165, 74, .7); border-radius: 999px;
    background: rgba(6, 23, 16, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    font-size: .82rem; letter-spacing: .04em;
  }
  .tour__skip::after { content: "↓"; color: var(--gold-300); }
  .tour__cue { left: auto; right: 20px; transform: none; bottom: calc(18px + env(safe-area-inset-bottom)); }
  .tour__cue span { display: none; }
  .tour__cue i { height: 30px; }

  /* Static storyboard on phones: text at the bottom over a scrim */
  .story-frame { min-height: 86svh; align-items: flex-end; }
  .story-frame::before, .story-frame--center::before { background: linear-gradient(to top, rgba(6, 23, 16, .88), rgba(6, 23, 16, .2) 60%, rgba(6, 23, 16, .1)); }
  .story-frame .chapter { position: relative; inset: auto; margin: 0 16px 48px; }

  /* Floating WhatsApp waits until the flight is over, so the footage stays clear */



  /* Sections */
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 32px; }
  .options { min-height: 0; }
  .options__intro { padding: 28px 0 24px; }
  .options__list { padding: 0 16px 16px; gap: 12px; }
  .option__link { min-height: 0; aspect-ratio: 4 / 3; }
  .option__text { padding: 18px; }

  /* Compare: one card per stay instead of a sideways-scrolling table */
  .compare { overflow: visible; }
  .compare__table, .compare__table tbody, .compare__table tr, .compare__table th, .compare__table td { display: block; min-width: 0; }
  .compare__table thead { display: none; }
  .compare__table tbody { display: grid; gap: 14px; }
  .compare__table tbody tr { background: var(--surface-raised); border-radius: var(--radius-lg); padding: 18px 18px 14px; }
  .compare__table tbody th { padding: 0 0 10px; border: 0; font-size: 1.4rem; }
  .compare__table td { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
  .compare__table td::before { content: attr(data-label); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; padding-top: 3px; }
  .compare__table td:not([data-label]) { display: block; border: 0; padding-top: 12px; }
  .compare__table td:last-child { border-bottom: 0; }

  .details__photos { gap: 8px; }
  .location { margin-top: 40px; padding-top: 32px; }
  .location__map { aspect-ratio: 1 / 1; }
  .enquiry { grid-template-columns: 1fr; padding: 22px 18px; }
  .field--guests, .field--message { grid-column: 1 / -1; }
  .enquiry input, .enquiry select, .enquiry textarea { min-height: 48px; font-size: 16px; }   /* 16px: no zoom-on-focus in iOS */
  .site-footer__links { flex-wrap: wrap; gap: 4px 20px; }
  .site-footer__links a { display: inline-block; padding: 10px 0; }
  .lightbox__nav { width: 44px; height: 44px; }
  /* photo edge to edge; the arrows float over it (swiping also works) */
  .lightbox__stage { padding: 0; }
  .lightbox__img { border-radius: 0; }
  .lightbox__nav { background: rgba(6, 23, 16, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
  .lightbox__title { font-size: 1.1rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}


/* Phones in landscape: short screens — keep copy compact */
@media (max-height: 500px) and (orientation: landscape) {
  .chapter { bottom: 56px !important; top: auto !important; display: block !important; }
  .chapter__body { display: none !important; }
  .chapter__title, .chapter--word .chapter__title, .tour--intro .chapter--hero .chapter__title { font-size: 2rem !important; }
  .tour__cue span { display: none; }

}

/* =====================================================================
   DESIGN PHOTOS (home): opening, photo band, contact background
   ===================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: end;
  min-height: 100vh; min-height: 100svh; color: var(--on-dark);
}
.hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 55% 50%; }
.hero__shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(6, 23, 16, .86) 0%, rgba(6, 23, 16, .45) 38%, rgba(6, 23, 16, .08) 66%),
    linear-gradient(to bottom, rgba(6, 23, 16, .5) 0%, rgba(6, 23, 16, 0) 22%);
}
.hero__content { padding-block: calc(var(--header-h) + 48px) clamp(56px, 11vh, 128px); }
.hero__content > * { max-width: 760px; }
.hero__title { font-size: clamp(3rem, 1.6rem + 5.6vw, 6.4rem); font-weight: 600; line-height: .98; letter-spacing: -.01em; text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, .55), 0 0 2px rgba(0, 0, 0, .35); }
.hero__text { margin-top: 1.2rem; font-size: var(--step-1); line-height: 1.55; max-width: 52ch; color: rgba(245, 239, 228, .9); }
.hero__ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 12px; }
.hero .eyebrow { color: var(--gold-100); font-weight: 700; text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.hero__text { text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }

.band-photo {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center;
  min-height: clamp(340px, 62vh, 620px); color: var(--on-dark); text-align: center;
}
.band-photo__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 55%; }
.band-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(6, 23, 16, .18), rgba(6, 23, 16, .5)); }
.band-photo__quote {
  margin-inline: auto; max-width: 26ch; font: 500 clamp(1.9rem, 1.1rem + 3vw, 3.4rem)/1.12 var(--font-display);
  font-weight: 600; text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, .55), 0 0 2px rgba(0, 0, 0, .3);
}

/* Contact: the pool photo under a veil in the page's own colour, so both themes stay readable */
#contato { position: relative; isolation: isolate; }
#contato::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(var(--contact-veil), var(--contact-veil)), url("../img/design/contato-piscina-1920.webp") center / cover no-repeat;
}
/* large screens get the 4K version */
@media (min-width: 1600px), (min-resolution: 2dppx) and (min-width: 1000px) {
  #contato::before { background-image: linear-gradient(var(--contact-veil), var(--contact-veil)), url("../img/design/contato-piscina.webp"); }
}

@media (max-width: 767px) {
  .hero { min-height: 92vh; min-height: 92svh; }
  .hero__img { object-position: 62% 50%; }
  .hero__ctas .btn { flex: 1 1 auto; }
  .band-photo { min-height: 58vh; min-height: 58svh; }
}
.band-photo__lede {
  margin: 1.1rem auto 0; max-width: 58ch; font-size: var(--step-1); line-height: 1.55; color: rgba(245, 239, 228, .94);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .6);
}
.band-photo::after { background: linear-gradient(rgba(6, 23, 16, .3), rgba(6, 23, 16, .6)); }
/* Opening photo melts into the next section (Destinos): short, eased fade with no visible edge */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 0; height: clamp(80px, 13vh, 150px); pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--surface-raised) 2%, transparent) 10%, color-mix(in srgb, var(--surface-raised) 8%, transparent) 22%, color-mix(in srgb, var(--surface-raised) 18%, transparent) 34%, color-mix(in srgb, var(--surface-raised) 32%, transparent) 46%, color-mix(in srgb, var(--surface-raised) 48%, transparent) 58%, color-mix(in srgb, var(--surface-raised) 65%, transparent) 70%, color-mix(in srgb, var(--surface-raised) 83%, transparent) 78%, color-mix(in srgb, var(--surface-raised) 94%, transparent) 86%, var(--surface-raised) 93%, var(--surface-raised) 100%);
}
.hero__content { position: relative; z-index: 1; padding-bottom: clamp(110px, 19vh, 210px); }
.hero + section { position: relative; margin-top: -2px; }   /* covers the sub-pixel row where the photo ends */
/* the dark shade sits behind the text, and eases off toward the very bottom so the fade stays clean */
.hero__shade {
  background:
    linear-gradient(to top, rgba(6, 23, 16, .25) 0%, rgba(6, 23, 16, .6) 18%, rgba(6, 23, 16, .55) 38%, rgba(6, 23, 16, .1) 66%, rgba(6, 23, 16, 0) 80%),
    linear-gradient(to bottom, rgba(6, 23, 16, .5) 0%, rgba(6, 23, 16, 0) 22%);
}

/* =====================================================================
   BOOKING (Airbnb-like): home search pill, stay booking card, phone bar
   ===================================================================== */
.hero__content > .search { max-width: 940px; }
.search {
  margin-top: 1.8rem; display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr auto; align-items: center;
  padding: 6px; border-radius: 999px; background: var(--panel-raised); color: var(--panel-text);
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .55); color-scheme: var(--field-scheme);
}
.search__field {
  position: relative; display: grid; gap: 2px; min-width: 0; padding: 10px 22px; border-radius: 999px; cursor: pointer;
  transition: background-color .2s;
}
.search__field + .search__field::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--panel-line);
}
.search__field:hover, .search__field:focus-within { background: var(--row-hover); }
.search__field:hover::before, .search__field:focus-within::before, .search__field:hover + .search__field::before, .search__field:focus-within + .search__field::before { opacity: 0; }
.search__label { font: 700 .72rem/1.2 var(--font-body); letter-spacing: .04em; color: var(--panel-text); }
.search__input {
  width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: var(--panel-muted);
  font: 500 .95rem/1.3 var(--font-body); cursor: pointer; appearance: none; -webkit-appearance: none;
}
.search__input:focus { outline: none; color: var(--panel-text); }
.search select.search__input option { color: var(--option-text); background: var(--option-bg); }
.search__go {
  display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 22px 0 18px; border: 0; border-radius: 999px;
  background: var(--gold); color: var(--ink); font: 700 .95rem/1 var(--font-body); cursor: pointer; transition: background-color .2s, transform .2s;
}
.search__go:hover { background: var(--gold-300); }
.search__go:active { transform: scale(.97); }
.search__go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

.options__result { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--text-muted); font-size: 1rem; }
.options__clear {
  min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--heading-text);
  font: 600 .85rem/1 var(--font-body); cursor: pointer;
}
.options__clear:hover { border-color: var(--gold); }
.option[hidden] { display: none !important; }

/* Stay page: booking card beside the photos */
.book {
  margin-top: 1.6rem; padding: 22px; border: 1px solid var(--panel-line); border-radius: 18px; background: var(--panel-raised);
  color: var(--panel-text); box-shadow: 0 18px 46px -30px rgba(6, 23, 16, .45); color-scheme: var(--field-scheme); max-width: 440px;
}
.book__title { font: 500 1.35rem/1.2 var(--font-display); margin-bottom: 14px; }
.book__box { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--panel-line); border-radius: 14px; overflow: hidden; }
.book__cell { display: grid; gap: 3px; min-width: 0; padding: 10px 14px; cursor: pointer; }
.book__cell + .book__cell { border-left: 1px solid var(--panel-line); }
.book__cell--wide { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--panel-line); }
.book__cell span { font: 700 .68rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.book__cell input, .book__cell select {
  width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: var(--panel-text); font: 500 .95rem/1.4 var(--font-body);
}
.book__cell select option { color: var(--option-text); background: var(--option-bg); }
.book__cell:focus-within { background: var(--row-hover); }
.book__cell input:focus, .book__cell select:focus { outline: none; }
.book__go { margin-top: 14px; min-height: 52px; }
.book__note { margin-top: 10px; text-align: center; font-size: .82rem; color: var(--panel-muted); }

/* Phone bar (stay pages) */
.bookbar { display: none; }
@media (max-width: 860px) {
  .bookbar:not([hidden]) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px;
    padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: var(--header-solid); color: var(--header-solid-text); border-top: 1px solid var(--header-solid-line);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: bar-in .25s var(--ease);
  }
  @keyframes bar-in { from { transform: translateY(100%); } to { transform: none; } }
  .bookbar__text { display: grid; min-width: 0; margin-right: auto; }
  .bookbar__text strong { font: 500 1.05rem/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bookbar__text span { font-size: .78rem; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bookbar__go { flex: none; min-height: 46px; padding: 0 20px; }
  html.is-locked .bookbar { display: none !important; }
}

/* Search pill on tablets/phones: a rounded card, fields in a 2-column grid */
@media (max-width: 860px) {
  .search { grid-template-columns: 1fr 1fr; border-radius: 22px; padding: 8px; gap: 4px; }
  .search__field { border-radius: 14px; padding: 10px 14px; }
  .search__field + .search__field::before { display: none; }
  .search__field--where { grid-column: 1 / -1; }
  .search__go { grid-column: 1 / -1; justify-content: center; height: 50px; margin-top: 2px; }
  .search__input { font-size: 16px; }   /* no zoom-on-focus in iOS */
  .book__cell input, .book__cell select { font-size: 16px; }
}

/* =====================================================================
   PICKERS: round calendar + guest counter (replace the browser's own)
   ===================================================================== */
/* the original field stays in the form, hidden, holding the value */
.pick-native {
  position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important;
  margin: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; clip: rect(0 0 0 0) !important;
}
.pickbtn { display: block; width: 100%; min-width: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pickbtn.is-empty { color: var(--placeholder); }
/* in the home search pill and the booking card: plain text inside the cell */
.search .pickbtn { padding: 0; border: 0; background: none; color: var(--panel-muted); font: 500 .95rem/1.3 var(--font-body); }
.search .pickbtn:not(.is-empty) { color: var(--panel-text); }
.search .pickbtn:focus-visible { outline: none; }
.search__field:has(.pickbtn:focus-visible) { box-shadow: 0 0 0 2px var(--gold) inset; }
.book .pickbtn { padding: 0; border: 0; background: none; color: var(--panel-text); font: 500 .95rem/1.4 var(--font-body); }
.book .pickbtn:focus-visible { outline: none; }
.book__cell:has(.pickbtn:focus-visible) { background: var(--row-hover); }
/* in the enquiry forms: looks like the other fields (icon on the left) */
.field .pickbtn {
  min-height: 54px; padding: 14px 16px 14px 52px; border-radius: 14px; border: 1px solid var(--panel-line);
  background: var(--field-bg); color: var(--panel-text); font-size: 1rem; transition: border-color .2s, box-shadow .2s;
}
.field .pickbtn.is-empty { color: var(--placeholder); }
.field .pickbtn:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(210, 165, 74, .2); }
.field.is-invalid .pickbtn { border-color: #E8735A; }
.control--select .pickbtn--guests { padding-right: 44px; }

/* popover */
.pick {
  position: fixed; z-index: 80; padding: 22px; border-radius: 28px; background: var(--panel-raised); color: var(--panel-text);
  border: 1px solid var(--panel-line); box-shadow: 0 30px 70px -20px rgba(6, 23, 16, .45), 0 4px 14px rgba(6, 23, 16, .08);
  font-family: var(--font-body); animation: pick-in .18s var(--ease);
}
@keyframes pick-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pick { animation: none; } }
.pick--date { width: min(680px, calc(100vw - 24px)); }
.pick--date .pick__months { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.pick__nav { position: relative; height: 0; }
.pick__arrow {
  position: absolute; top: -4px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--panel-text); cursor: pointer; transition: background-color .15s; z-index: 1;
}
.pick__arrow[data-nav="-1"] { left: -6px; }
.pick__arrow[data-nav="1"] { right: -6px; }
.pick__arrow:hover { background: var(--row-hover); }
.pick__arrow[disabled] { opacity: .25; cursor: default; background: none; }
.pick__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pick__title { text-align: center; font: 700 1rem/36px var(--font-body); margin-bottom: 10px; }
.pick__title::first-letter { text-transform: uppercase; }
.pick__grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.pick__wd { text-align: center; font: 600 .72rem/28px var(--font-body); color: var(--panel-muted); text-transform: uppercase; }
.pick__cell { position: relative; display: grid; place-items: center; height: 44px; }
/* the soft band between check-in and check-out */
.pick__cell.in-range { background: color-mix(in srgb, var(--gold) 18%, transparent); }
.pick__cell.has-range { background: linear-gradient(to right, transparent 50%, color-mix(in srgb, var(--gold) 18%, transparent) 50%); }
.pick__cell.is-end:not(.is-start) { background: linear-gradient(to left, transparent 50%, color-mix(in srgb, var(--gold) 18%, transparent) 50%); }
.pick__day {
  position: relative; width: 42px; height: 42px; padding: 0; border: 1.5px solid transparent; border-radius: 50%; background: none;
  color: var(--panel-text); font: 600 .92rem/1 var(--font-body); cursor: pointer; transition: border-color .15s, background-color .15s;
}
.pick__day:hover:not([disabled]) { border-color: var(--panel-text); }
.pick__day:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.pick__day[disabled] { color: var(--panel-muted); opacity: .4; text-decoration: line-through; cursor: default; }
.is-today .pick__day::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--gold); }
.is-start .pick__day, .is-end .pick__day { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.pick__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--panel-line); }
.pick__foot--end { justify-content: flex-end; }
.pick__clear { padding: 8px 4px; border: 0; background: none; color: var(--panel-text); font: 600 .9rem/1 var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pick__done { min-height: 42px; }

/* guest counter */
.pick--guests { width: min(340px, calc(100vw - 24px)); }
.pick__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pick__label { font: 700 1rem/1.2 var(--font-body); }
.pick__hint { margin-top: 2px; font-size: .85rem; color: var(--panel-muted); }
.pick__stepper { display: flex; align-items: center; gap: 14px; }
.pick__step {
  width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1.5px solid var(--panel-line); border-radius: 50%;
  background: none; color: var(--panel-text); font: 500 1.35rem/1 var(--font-body); cursor: pointer; transition: border-color .15s;
}
.pick__step:hover:not([disabled]) { border-color: var(--panel-text); }
.pick__step[disabled] { opacity: .3; cursor: default; }
.pick__count { min-width: 2ch; text-align: center; font: 600 1.1rem/1 var(--font-body); font-variant-numeric: tabular-nums; }

/* phones: a sheet that slides up from the bottom */
.pick-backdrop { position: fixed; inset: 0; z-index: 79; background: rgba(6, 23, 16, .45); animation: fade-in .2s; }
@keyframes fade-in { from { opacity: 0; } }
.pick.pick--sheet {
  left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-height: 88vh; overflow-y: auto;
  border-radius: 28px 28px 0 0; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); animation: sheet-in .25s var(--ease);
}
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
.pick--sheet .pick__cell { height: 46px; }
.pick--sheet .pick__day { width: 44px; height: 44px; }

/* list picker (destination, stay, nationality, event type) */
.pick--list { width: min(360px, calc(100vw - 24px)); padding: 10px; border-radius: 24px; }
.pick__opts { display: grid; gap: 2px; max-height: min(360px, 60vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.pick__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 10px 16px;
  border: 0; border-radius: 16px; background: none; color: var(--panel-text); font: 500 .98rem/1.3 var(--font-body); text-align: left; cursor: pointer;
  transition: background-color .15s;
}
.pick__opt:hover, .pick__opt:focus-visible { background: var(--row-hover); outline: none; }
.pick__opt svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--gold); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.pick__opt[aria-selected="true"] { font-weight: 700; }
.pick__opt[aria-selected="true"] svg { opacity: 1; }
.pick__search { position: relative; margin: 4px 4px 8px; }
.pick__search svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--panel-muted); stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.pick__q {
  width: 100%; min-height: 46px; padding: 10px 16px 10px 44px; border: 1px solid var(--panel-line); border-radius: 999px;
  background: var(--field-bg); color: var(--panel-text); font: 500 16px/1.3 var(--font-body);
}
.pick__q:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(210, 165, 74, .2); }
.pick--sheet.pick--list { padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); }
.pick--sheet .pick__opts { max-height: 62vh; }
.field .pickbtn--list { padding-right: 44px; }

/* the picker buttons never widen their column (long text ends in "…" instead) */
.control { min-width: 0; }
.pickbtn { max-width: 100%; }
.ev__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.enquiry { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@container evf (max-width: 340px) { .ev__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .enquiry { grid-template-columns: minmax(0, 1fr); } }

/* Opening: title centred up in the sky, text + search centred at the bottom */
.hero { align-items: stretch; }
.hero__content {
  display: grid; grid-template-rows: auto 1fr auto; justify-items: center; text-align: center;
  min-height: 100vh; min-height: 100svh;
  padding-top: calc(var(--header-h) + clamp(28px, 9vh, 110px));
}
.hero__content > .hero__head, .hero__content > .hero__foot { max-width: none; width: 100%; }
.hero__head { grid-row: 1; display: grid; justify-items: center; }
.hero__head .eyebrow { justify-content: center; }
.hero__head .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.hero__title { margin-inline: auto; }
.hero__foot { grid-row: 3; display: grid; justify-items: center; }
.hero__text { margin-inline: auto; }
.hero__foot .search { width: 100%; max-width: 940px; text-align: left; }
@media (max-width: 767px) {
  .hero { min-height: 100vh; min-height: 100svh; }
  .hero__content { padding-top: calc(var(--header-h) + 36px); padding-bottom: 96px; row-gap: 28px; }
}
/* a soft veil behind the centred title, so it reads over the bright sunset sky */
.hero__shade::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(56% 34% at 50% 32%, rgba(6, 23, 16, .4), rgba(6, 23, 16, 0) 74%);
}

/* =====================================================================
   DESTINATIONS: two large photo cards side by side (same text, photos and links)
   ===================================================================== */
.destinations { grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.destination {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  min-height: clamp(480px, 74vh, 700px); border-radius: 28px; color: var(--on-dark);
  box-shadow: 0 34px 70px -40px rgba(6, 23, 16, .6);
}
.destination img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; aspect-ratio: auto;
  object-fit: cover; border-radius: 0; transition: transform 1.4s var(--ease);
}
.destination:hover img { transform: scale(1.05); }
.destination::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(6, 23, 16, .92) 0%, rgba(6, 23, 16, .62) 32%, rgba(6, 23, 16, .08) 62%, rgba(6, 23, 16, 0) 100%);
}
.destination__body { padding: clamp(24px, 3vw, 44px); gap: 12px; }
.destination h3 {
  font-size: clamp(2.3rem, 1.3rem + 2.8vw, 3.8rem); line-height: 1; color: var(--on-dark);
  text-shadow: 0 2px 20px rgba(0, 0, 0, .35);
}
.destination p { color: rgba(245, 239, 228, .9); max-width: 46ch; font-size: 1.02rem; }
.destination__stays { gap: 8px; margin-top: 10px; }
.destination__stay {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(245, 239, 228, .3); background: rgba(245, 239, 228, .14); color: var(--on-dark);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 600 .86rem/1 var(--font-body); text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.destination__stay:hover, .destination__stay:focus-visible { background: var(--gold); border-color: var(--gold); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .destination img { transition: none; } .destination:hover img { transform: none; } }
/* tablets and phones: still side by side, swiped sideways (never stacked) */
@media (max-width: 860px) {
  .destinations {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(86%, 440px);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 24px; scroll-padding-inline: var(--gutter);
  }
  .destinations::-webkit-scrollbar { display: none; }
  .destination { scroll-snap-align: start; min-height: 540px; }
}
/* both cards share one row for the photo and one for the text, so the two titles line up */
.destinations { grid-template-rows: minmax(clamp(240px, 42vh, 440px), 1fr) auto; }
.destination { display: grid; grid-template-rows: 1fr auto; align-items: end; }
@supports (grid-template-rows: subgrid) {
  .destination { grid-row: span 2; grid-template-rows: subgrid; }
}
.destination__body { grid-row: 2; align-self: start; }
@media (max-width: 860px) {
  .destinations { grid-template-rows: minmax(200px, 1fr) auto; }
  .destination { min-height: 520px; }
}
/* intro text sits right under the title, over the horizon */
.hero__head .hero__text { margin-top: clamp(18px, 3.5vh, 36px); max-width: 52ch; }
/* search bar right under the text, over the sea (not at the bottom of the photo) */
.hero__content { grid-template-rows: auto auto 1fr; }
.hero__foot { grid-row: 2; margin-top: clamp(28px, 6vh, 64px); }
/* desktop header: menu centred between the logo and the buttons */
@media (min-width: 1101px) {
  .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .site-header__inner > .brand { justify-self: start; }
  .site-nav { margin-left: 0; justify-self: center; }
  .site-header__actions { justify-self: end; margin-left: 0; }
}
/* search button: just the magnifier, in a gold circle (the word stays for screen readers) */
.search__go { width: 54px; height: 54px; padding: 0; justify-content: center; gap: 0; }
.search__go svg { width: 22px; height: 22px; }
@media (max-width: 860px) { .search__go { width: auto; height: 50px; } }
/* cover photo (pool + pergola, portrait): on wide screens show the pergola, table and lounge band */
.hero__img { object-position: 50% 46%; }
@media (max-width: 767px) { .hero__img { object-position: 50% 50%; } }
/* the whole cover photo is visible: the opening takes the photo's own proportions (portrait),
   so the visitor scrolls down through it, from the pergola to the pool */
.hero { aspect-ratio: 1638 / 2458; min-height: 100vh; min-height: 100svh; }
.hero__img { object-position: 50% 50%; }
.hero::after { height: clamp(60px, 7vh, 110px); }
/* Pipa card (portrait sunset photo): keep the sun, the sea and the cliffs in view */
.destination img[src*="destino-pipa"] { object-position: 50% 42%; }
/* header: only the logo mark (the link keeps its name for screen readers via aria-label) */
.site-header .brand__name { display: none; }
.site-header .brand__mark { width: 48px; height: 48px; }
@media (max-width: 767px) { .site-header .brand__mark { width: 42px; height: 42px; } }
/* João Pessoa card (portrait beach at sunset): keep the skyline, sea and palms in view */
.destination img[src*="destino-joao-pessoa"] { object-position: 50% 48%; }
/* ---- phone fixes ---- */
@media (max-width: 767px) {
  /* the cover grows with its content on short phones (iPhone SE…), so the search box is never cut */
  .hero { aspect-ratio: auto; min-height: 100vh; min-height: 100svh; }
  .hero__content { min-height: 0; }
  /* 16px text inside the search / booking fields (same as the other fields) */
  .search .pickbtn, .book .pickbtn { font-size: 16px; }
}
@media (max-width: 860px) {
  /* room for the fixed booking bar at the very end of the stay pages */
  .page-property .site-footer { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}
/* "Vila Vista Mar" inside the events card links to the villa's page */
.ev__villa { color: var(--panel-accent); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ev__villa:hover { color: var(--panel-text); }

/* =====================================================================
   COVER v3: title + search at the top, destinations in a cream panel over the lower part of the photo
   ===================================================================== */
.hero { aspect-ratio: auto; }
.hero__img { object-position: 50% 42%; }
.hero__content {
  grid-template-rows: auto auto minmax(clamp(160px, 30vh, 360px), 1fr) auto;
  padding-bottom: clamp(56px, 9vh, 120px);
}
.hero__dest {
  grid-row: 4; width: 100%; text-align: left; color: var(--text);
  background: var(--surface-raised); border-radius: 32px;
  padding: clamp(28px, 3.6vw, 52px);
  box-shadow: 0 40px 90px -40px rgba(6, 23, 16, .7);
}
.hero__dest .section-head { margin-bottom: clamp(24px, 3vw, 40px); }
.hero__dest .eyebrow { justify-content: flex-start; color: var(--accent-text); text-shadow: none; font-weight: 600; }
.hero__dest .eyebrow::after { display: none; }
.hero__dest h2 { color: var(--heading-text); }
.hero__dest .destination { min-height: clamp(440px, 64vh, 640px); }
@media (max-width: 860px) {
  .hero__dest { padding: 24px 0 8px; border-radius: 24px; }
  .hero__dest .section-head { padding-inline: 20px; }
  .hero__dest .destinations { margin-inline: 0; padding: 4px 20px 20px; scroll-padding-inline: 20px; }
}
@media (max-width: 767px) {
  .hero__content { grid-template-rows: auto auto minmax(120px, 1fr) auto; padding-bottom: 72px; }
}
.hero__content > .hero__dest { max-width: none; width: 100%; justify-self: stretch; }
/* even photo frame around the destinations panel: bottom margin = side margin (% = cover width) */
.hero__content { padding-bottom: calc((100% - min(100% - 2 * var(--gutter), var(--container))) / 2); }
.hero::after { height: 44px; }
@media (max-width: 767px) {
  .hero__content { padding-bottom: var(--gutter); }
  .hero::after { height: 14px; }
}
/* wide screens: the cover content (search + panel) may grow to 1560px, so the frame stays proportionate */
.hero__content { width: min(100% - 2 * var(--gutter), 1560px); padding-bottom: calc((100% - min(100% - 2 * var(--gutter), 1560px)) / 2); }
.hero__foot .search { max-width: 980px; }
.hero__dest .destination { min-height: clamp(420px, 58vh, 600px); }
@media (max-width: 860px) { .hero__dest .destination { min-height: 480px; } .hero__dest .destinations { grid-template-rows: minmax(180px, 1fr) auto; } }
.hero__dest .destinations { grid-template-rows: minmax(clamp(200px, 30vh, 320px), 1fr) auto; }
@media (max-width: 860px) { .hero__dest .destinations { grid-template-rows: minmax(150px, 1fr) auto; } .hero__dest .destination { min-height: 440px; } }
/* destinations panel: no heading, a thin cream frame, ~1cm between the two cards */
.hero__dest { padding: 12px; border-radius: 40px; }
.hero__dest .destinations { gap: 38px; }
.hero__dest .destination { border-radius: 28px; box-shadow: none; }
@media (max-width: 860px) {
  .hero__dest { padding: 10px 0; border-radius: 30px; }
  .hero__dest .destinations { gap: 20px; padding: 0 10px; scroll-padding-inline: 10px; }
  .hero__dest .destination { border-radius: 22px; }
}
/* more of the pool: a taller strip of photo under the destinations panel */
@media (min-width: 861px) {
  .hero__content { padding-bottom: clamp(220px, 24vw, 460px); }
  .hero__img { object-position: 50% 78%; }
}

/* =====================================================================
   DESTINATIONS v3: separate, smaller cards, each with its own cream frame.
   A grid that takes more destinations later (wraps to new rows; swipes on phones).
   ===================================================================== */
.hero__dest { background: none; padding: 0; border-radius: 0; box-shadow: none; }
.hero__dest .destinations {
  grid-template-columns: repeat(auto-fit, minmax(280px, 390px)); justify-content: center;
  grid-template-rows: none; grid-auto-rows: minmax(150px, 1fr) auto;   /* photo row + text row per card */
  gap: clamp(24px, 3vw, 40px);
}
.hero__dest .destination {
  min-height: clamp(440px, 56vh, 540px); border: 10px solid var(--surface-raised); border-radius: 30px;
  box-shadow: 0 30px 60px -30px rgba(6, 23, 16, .65);
}
.hero__dest .destination__body { padding: clamp(20px, 2.2vw, 30px); }
.hero__dest .destination h3 { font-size: clamp(2rem, 1.3rem + 1.6vw, 2.8rem); }
.hero__dest .destination p { font-size: .95rem; }
@media (max-width: 860px) {
  .hero__dest { padding: 0; }
  .hero__dest .destinations {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(80%, 340px);
    grid-template-rows: minmax(140px, 1fr) auto; grid-auto-rows: auto; justify-content: start;
    gap: 18px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 18px; scroll-padding-inline: var(--gutter);
  }
  .hero__dest .destination { min-height: 460px; border-width: 8px; border-radius: 26px; }
}

/* =====================================================================
   RESULTS PAGE (resultados.html): the stays that fit the search, as square cards
   ===================================================================== */
.page-results main { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); }
.results { padding-block: clamp(36px, 6vw, 72px) clamp(56px, 8vw, 110px); background: var(--page-bg); }
.results__head { display: grid; gap: 8px; margin-bottom: clamp(22px, 3vw, 32px); }
.results__head .eyebrow { margin-bottom: 0; }
.results__title { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.8rem); line-height: 1.02; color: var(--heading-text); text-wrap: balance; }
.results__summary { color: var(--text-muted); font-size: 1.05rem; }
.results .search { margin-top: 0; max-width: 980px; box-shadow: 0 14px 40px -24px rgba(6, 23, 16, .45); border: 1px solid var(--line); }
.results__note { margin: clamp(22px, 3vw, 30px) 0 clamp(18px, 2.4vw, 26px); color: var(--text-muted); max-width: 70ch; }
.results__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 1.6vw, 22px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.result { min-width: 0; animation: rise .7s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
.result .option__link { aspect-ratio: 1 / 1; min-height: 0; height: auto; border-radius: 26px; box-shadow: 0 20px 44px -30px rgba(6, 23, 16, .6); }
.result .option__img { transform: scale(1.02); }
.result:hover .option__img, .result:focus-within .option__img { transform: scale(1.07); }
.result .option__cta { opacity: 1; transform: none; }
.result .option__name { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); }
.results__empty { display: grid; gap: 10px; justify-items: start; padding: clamp(24px, 4vw, 40px); border: 1px dashed var(--line); border-radius: 26px; }
.results__empty-title { font: 500 clamp(1.4rem, 1.1rem + 1vw, 1.9rem)/1.2 var(--font-display); color: var(--heading-text); }
.results__empty-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .result { animation: none; } }

/* anything marked hidden stays hidden on every page (the home page gets this from its host; the others need it here) */
[hidden] { display: none !important; }
/* the band text keeps its line break (second sentence on its own line) */
.band-photo__lede { white-space: pre-line; }

/* ---------- Hero invitation line (between search and destinations) ---------- */
.hero__phrase {
  grid-row: 3; align-self: center; justify-self: center; margin: 0; max-width: 34ch;
  display: grid; justify-items: center; gap: clamp(10px, 1.4vw, 18px);
  text-align: center; color: #fff; text-shadow: 0 2px 24px rgba(6, 23, 16, .55), 0 1px 3px rgba(6, 23, 16, .45);
}
.hero__content > .hero__phrase { max-width: min(100%, 980px); }
.hero__phrase-main {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.6rem, 1rem + 2.6vw, 3.4rem); line-height: 1.15; letter-spacing: -.005em; text-wrap: balance;
}
.hero__phrase-script {
  font-family: "Pinyon Script", "Snell Roundhand", cursive; font-style: normal; font-weight: 400;
  font-size: 1.45em; line-height: .8; color: #f3dfae; padding-inline: .06em .02em; vertical-align: -.04em;
}
.hero__phrase-sub {
  font-family: var(--font-body); font-weight: 600; text-transform: uppercase;
  font-size: clamp(.7rem, .62rem + .3vw, .86rem); letter-spacing: .28em; line-height: 1.7;
  display: flex; align-items: center; gap: 14px; opacity: .95;
}
.hero__phrase-sub::before, .hero__phrase-sub::after { content: ""; width: clamp(18px, 4vw, 48px); height: 1px; background: currentColor; opacity: .6; flex: none; }
@media (max-width: 600px) {
  .hero__phrase-sub { letter-spacing: .18em; }
  .hero__phrase-sub::before, .hero__phrase-sub::after { display: none; }
}

/* =====================================================================
   STAY NOTES over the beach photo: quote on top, then one detached row per stay,
   each with a thin white frame on dark glass (rows become cards on phones).
   ===================================================================== */
.band-photo--compare { align-items: start; min-height: 0; padding-block: clamp(56px, 9vw, 120px); }
.band-photo--compare::after { background: linear-gradient(rgba(6, 23, 16, .38), rgba(6, 23, 16, .62)); }
.band-photo--compare .band-photo__text { display: grid; gap: clamp(32px, 5vw, 64px); text-align: left; }
.band-photo--compare .band-photo__quote { text-align: center; }
.band-photo .compare { overflow-x: auto; overflow-y: hidden; margin-inline: -6px; padding-inline: 6px; }
.band-photo .compare__table { border-collapse: separate; border-spacing: 0 14px; margin-block: -14px 0; color: #fff; }
.band-photo .compare__table tbody th { white-space: nowrap; }
.band-photo .compare__table thead th {
  border: 0; padding-block: 0 2px; color: #f3dfae; text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.band-photo .compare__table tbody th, .band-photo .compare__table td {
  background: rgba(8, 26, 19, .46); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1.5px solid rgba(255, 255, 255, .88); border-bottom: 1.5px solid rgba(255, 255, 255, .88);
}
.band-photo .compare__table tbody th { border-left: 1.5px solid rgba(255, 255, 255, .88); border-radius: 22px 0 0 22px; padding-left: 26px; color: #fff; }
.band-photo .compare__table tbody td:last-child { border-right: 1.5px solid rgba(255, 255, 255, .88); border-radius: 0 22px 22px 0; padding-right: 26px; text-align: right; }
.band-photo .compare__table td { color: rgba(255, 255, 255, .88); }
.band-photo .compare__table tbody tr:hover { background: none; }
.band-photo .compare__table tbody tr:hover > * { background: rgba(8, 26, 19, .62); }
.band-photo .compare__table .link { color: #fff; border-color: #f3dfae; }
@media (max-width: 767px) {
  .band-photo .compare { overflow: visible; margin: 0; padding: 0; }
  .band-photo .compare__table { border-spacing: 0; margin: 0; }
  .band-photo .compare__table tbody tr {
    background: rgba(8, 26, 19, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1.5px solid rgba(255, 255, 255, .88); border-radius: 22px;
  }
  .band-photo .compare__table tbody th, .band-photo .compare__table td, .band-photo .compare__table tbody tr:hover > * {
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; border-radius: 0; padding-inline: 0; text-align: left;
  }
  .band-photo .compare__table td { border-bottom: 1px solid rgba(255, 255, 255, .22); }
  .band-photo .compare__table td:last-child { border-bottom: 0; }
  .band-photo .compare__table td::before { color: #f3dfae; }
  .band-photo .compare__table tbody td:last-child { border: 0; border-radius: 0; padding-right: 0; text-align: right; }
}

/* Footer: "more destinations soon" under the stay links */
.site-footer__soon {
  margin: 8px 0 0; text-align: left; color: var(--panel-accent);
  font-family: var(--font-display); font-style: italic; font-size: 1rem; letter-spacing: .01em;
}
.site-footer__note p { margin: 0; }
.site-footer__note .site-footer__soon { margin-top: 8px; }

/* Events card spotlight (after clicking "Eventos" in the top bar) */
@keyframes ev-lift {
  0% { transform: none; }
  20% { transform: translateY(-12px) scale(1.015); }
  45% { transform: translateY(2px) scale(1); }
  65% { transform: translateY(-5px) scale(1.006); }
  85% { transform: none; }
  100% { transform: none; }
}
@keyframes ev-glow {
  0%, 100% { box-shadow: 0 30px 60px -35px rgba(6, 23, 16, .6), 0 0 0 0 rgba(210, 165, 74, 0); }
  25%, 60% { box-shadow: 0 40px 70px -35px rgba(6, 23, 16, .6), 0 0 0 4px rgba(210, 165, 74, .75), 0 0 48px 6px rgba(210, 165, 74, .45); }
}
@keyframes ev-wave { 0%, 100% { transform: none; } 20% { transform: translateX(-6px) rotate(-6deg); } 45% { transform: translateX(6px) rotate(5deg); } 70% { transform: translateX(-3px) rotate(-3deg); } }
.ev.is-spotlit { animation: ev-lift 2s cubic-bezier(.2, .7, .2, 1), ev-glow 2s ease-out; }
.ev.is-spotlit .ev__mark { animation: ev-wave 2s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
  .ev.is-spotlit { animation: ev-glow 2s ease-out; }
  .ev.is-spotlit .ev__mark { animation: none; }
}

/* Gmail button beside Instagram and WhatsApp */
.social--gm { background: #fff; }
.social--gm svg { width: 30px; height: 30px; }

/* Starting nightly price on catalogue / results cards */
.option__price { font-size: .86rem; letter-spacing: .01em; color: rgba(255, 255, 255, .9); }
.option__price strong { font-weight: 700; color: #f3dfae; font-size: 1.05rem; }