/* Hotel Café del Sol · tokens and page styles on top of scrollcraft.css.
   Never restyle .sc-stage or [data-sc-*]: those are the mechanism. */

@font-face {
  font-family: "Fraunces"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../fonts/fraunces-latin-soft-normal.woff2") format("woff2-variations"), url("../fonts/fraunces-latin-soft-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces"; font-style: italic; font-display: swap; font-weight: 100 900;
  src: url("../fonts/fraunces-latin-soft-italic.woff2") format("woff2-variations"), url("../fonts/fraunces-latin-soft-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
}

:root {
  --sc-canvas: #FAFAFA;
  --sc-surface: #F2ECE2;
  --sc-ink: #2A211B;
  --sc-ink-soft: #6B5D52;
  --sc-accent: #E68A5C;
  --sc-accent-ink: #2A211B;
  --sc-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --sc-font-text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --orange-hover: #DD7C4B;
  --orange-text: #A34C27;
  --blue: #4A90E2;
  --blue-deep: #2863A6;
  --sand: #D4B483;

  --sc-t-4xl: clamp(2.5rem, 1.1rem + 4.6vw, 5.25rem);
  --sc-t-3xl: clamp(2rem, 1.25rem + 2.9vw, 3.5rem);
  --sc-t-2xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.9rem);
  --sc-t-base: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --sc-track-tight: -0.02em;
  --sc-leading-none: 1.04;
  --sc-section: clamp(4rem, 10vw, 9rem);
  --sc-gutter: clamp(1.25rem, 5vw, 4rem);
  --sc-maxw: 80rem;
  --sc-r-lg: 20px;

  --sc-shadow-color: 24 30% 22%;
  --sc-edge: none;
  --bar-h: 4.25rem;
}
@media (max-width: 860px) { :root { --bar-h: 3.6rem; } }

body { color: var(--sc-ink); }
.sc-grain { opacity: 0.028; }
.sc-display { font-weight: 380; font-variation-settings: "SOFT" 70, "WONK" 0; }
.sc-body { color: var(--sc-ink-soft); }
:focus-visible { outline-color: var(--blue-deep); }
::selection { background: #F3C9B2; color: var(--sc-ink); }
a { color: inherit; }

.skip {
  position: fixed; left: var(--sc-gutter); top: 0.75rem; z-index: 100;
  padding: 0.6rem 1rem; border-radius: 999px; background: var(--sc-ink); color: #FAFAFA;
  transform: translateY(-160%); transition: transform 180ms var(--sc-ease-out);
}
.skip:focus-visible { transform: none; }

.ico { width: 1.15em; height: 1.15em; flex: none; }
.nw { white-space: nowrap; }

/* ------------------------------------------------ first paint = final layout --
   The scroll engine sets each pinned act's length and sticks its stage only once
   its script has run. Before that the acts have no height, so the first paint
   shows the sections below crowded at the top and then the whole page jumps
   (Lighthouse measured a layout shift of 1.0, the worst possible). Declaring the
   same values here means the page is laid out correctly from the first frame.
   These lengths MUST equal each section's data-sc-span; tools/test-seo.mjs
   checks that they do. */
[data-sc-act="pin"], [data-sc-act="pan"] { position: relative; }
.act-hero   { height: 180vh; }
.act-pause  { height: 150vh; }
.act-mesa   { height: 260vh; }
.act-pools  { height: 180vh; }
.act-sunset { height: 320vh; }
.act-close  { height: 130vh; }
[data-sc-act="pin"] > [data-sc-stage], [data-sc-act="pan"] > [data-sc-stage] {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; z-index: var(--sc-z-stage);
}

/* ------------------------------------------------------------- buttons -- */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.8rem 1.5rem; border-radius: 999px;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 620; font-size: 1rem; line-height: 1.2; letter-spacing: 0; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px hsl(var(--sc-shadow-color) / 0.14), 0 6px 16px -6px hsl(var(--sc-shadow-color) / 0.28);
  transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .cta:hover { background: var(--orange-hover); } }
.cta:active { transform: scale(0.97); }
.cta--bar { min-height: 2.6rem; padding: 0.55rem 1.15rem; font-size: 0.95rem; }
.cta--big { min-height: 3.5rem; padding: 1rem 2.1rem; font-size: 1.08rem; }

.link-wa {
  display: inline-flex; align-items: center; gap: 0.55em; min-height: 2.75rem;
  color: var(--sc-ink); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--sc-ink) 35%, transparent);
  text-underline-offset: 0.25em; font-weight: 520;
  transition: text-decoration-color 160ms var(--sc-ease-out);
}
.link-wa .ico { color: var(--blue-deep); width: 1.25em; height: 1.25em; }
@media (hover: hover) and (pointer: fine) { .link-wa:hover { text-decoration-color: currentColor; } }

/* ----------------------------------------------------------------- bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h); padding-inline: var(--sc-gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  transition: background-color 240ms var(--sc-ease-out), box-shadow 240ms var(--sc-ease-out);
}
.bar.is-solid { background: color-mix(in oklab, var(--sc-canvas) 94%, transparent); box-shadow: 0 1px 0 color-mix(in oklab, var(--sand) 55%, transparent); }
.bar__brand { display: inline-flex; align-items: center; gap: 0.6rem; justify-self: start; text-decoration: none; border-radius: 8px; }
.mark { width: 2.4rem; height: 2.4rem; overflow: visible; }
.mark__sun { transition: none; }
.bar__wordmark { width: auto; height: 1.35rem; }
.bar__actions { display: flex; align-items: center; gap: 1.1rem; justify-self: end; }
.bar__wa { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; color: var(--blue-deep); }
.bar__wa .ico { width: 1.35rem; height: 1.35rem; }
.lang { display: flex; gap: 0.1rem; margin: 0; font-size: 0.9rem; font-weight: 560; }
.lang > * { padding: 0.35rem 0.4rem; border-radius: 6px; }
.lang span { color: var(--sc-ink); }
.lang a { color: var(--sc-ink-soft); text-decoration: none; min-width: 2.2rem; text-align: center; }
.lang span::after { content: "·"; margin-left: 0.5rem; color: var(--sc-ink-soft); }
@media (hover: hover) and (pointer: fine) { .lang a:hover { color: var(--sc-ink); } }

/* the sun clock: the page's hour, drawn as a sun on an arc */
.clock { display: flex; align-items: center; gap: 0.6rem; justify-self: center; }
.clock__arc { width: 6.6rem; height: 2.2rem; overflow: visible; }
.clock__arc path { stroke: color-mix(in oklab, var(--sand) 85%, var(--sc-ink) 15%); stroke-width: 1.2; stroke-dasharray: 2 4; }
.clock__arc line { stroke: color-mix(in oklab, var(--sand) 70%, transparent); stroke-width: 1; }
.clock__dot { fill: var(--sc-accent); }
.clock__label { min-width: 6.5rem; font-size: 0.8rem; font-weight: 560; letter-spacing: 0.02em; color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .clock, .bar__actions .cta, .bar__wa { display: none; }
  .bar { grid-template-columns: 1fr auto; }
  .mark { width: 2.1rem; height: 2.1rem; }
  .bar__wordmark { height: 1.15rem; }
}

/* -------------------------------------------------------- 1 · llegada -- */
.hero { background: #A9B6BD; }
.hero__plane {
  position: absolute; left: 0; top: 0; width: 100%; height: 124%; max-width: none;
  object-fit: cover; object-position: 50% 40%;
  will-change: transform; transform-origin: 50% 60%;
}
.hero__sky   { transform: translate3d(0, calc(var(--sc-p, 0) * -5vh), 0) scale(calc(1 + var(--sc-p, 0) * 0.04)); }
.hero__sea   { transform: translate3d(0, calc(var(--sc-p, 0) * -11vh), 0); }
/* Trees ride only ~3vh ahead of the sea: the plane is solid below its
   silhouette, so a small offset keeps sand sliding over sand invisible while
   the scale-from-bottom still reads as the near plane approaching. */
.hero__trees { transform-origin: 50% 100%; transform: translate3d(0, calc(var(--sc-p, 0) * -14vh), 0) scale(calc(1 + var(--sc-p, 0) * 0.045)); }
.hero__sun {
  --sun: clamp(4.5rem, 8.5vw, 9rem);
  position: absolute; left: 71%; top: var(--horizon, 46%);
  width: var(--sun); height: var(--sun); margin: calc(var(--sun) / -2) 0 0 calc(var(--sun) / -2);
  border-radius: 50%; background: var(--sc-accent);
  transform: translate3d(0, calc(var(--sc-p, 0) * -34vh), 0);
  will-change: transform;
}
.hero__wash {
  /* Only there while the headline is: it leaves with the copy (gone by p≈0.6)
     so the rising sun keeps its full colour. */
  opacity: calc(1 - var(--sc-p, 0) * 1.7);
  position: absolute; inset: 0 0 auto 0; height: 62%; z-index: 4; pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--sc-canvas) 62%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 34%, transparent) 45%,
    transparent 100%);
}
.hero__fade {
  position: absolute; inset: auto 0 0 0; height: 30vh; z-index: 4; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--sc-canvas));
  opacity: calc(0.15 + var(--sc-p, 0) * 0.85);
}
.hero__copy {
  position: absolute; z-index: 5; left: var(--sc-gutter); top: calc(var(--bar-h) + 7vh);
  width: min(40rem, 86vw);
}
/* The engine hides every [data-sc-cue] until its script runs. The hero's cue is
   fully on at scroll 0 ("greet"), so show it from the first paint: otherwise the
   headline (the largest thing on screen) waits for JavaScript. The engine writes the
   same value inline afterwards, so nothing flickers. */
.hero__copy[data-sc-cue] { opacity: 1; }
.hero__title {
  margin: 0; font-family: var(--sc-font-display); font-weight: 380; font-variation-settings: "SOFT" 80, "WONK" 0;
  font-size: var(--sc-t-4xl); line-height: 1.02; letter-spacing: -0.022em; text-wrap: balance; color: var(--sc-ink);
}
.hero__sub { margin: 1.1rem 0 0; max-width: 34rem; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.5; color: var(--sc-ink); text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin: 1.8rem 0 0; }

@media (max-width: 860px) {
  /* A shorter plane box on a phone keeps the palm line on screen; travel is
     cut to match so no plane ever lifts off the bottom edge. */
  .hero__plane { object-position: 46% 40%; height: 116%; }
  .hero__sky   { transform: translate3d(0, calc(var(--sc-p, 0) * -4vh), 0) scale(calc(1 + var(--sc-p, 0) * 0.03)); }
  .hero__sea   { transform: translate3d(0, calc(var(--sc-p, 0) * -8vh), 0); }
  .hero__trees { transform: translate3d(0, calc(var(--sc-p, 0) * -10vh), 0) scale(calc(1 + var(--sc-p, 0) * 0.035)); }
  .hero__sun { left: 74%; --sun: clamp(3.5rem, 17vw, 5rem); }
  .hero__copy { top: calc(var(--bar-h) + 3vh); }
  .hero__wash { height: 70%; }
  .hero__actions .cta { width: 100%; }
}

/* ---------------------------------------------- 2 · lo que dejas atrás -- */
.pause { display: grid; place-items: center; padding: var(--bar-h) var(--sc-gutter) 0; }
.pause__col { width: min(46rem, 100%); }
.pause__line, .pause__turn {
  margin: 0; font-family: var(--sc-font-display); font-weight: 360; font-variation-settings: "SOFT" 80, "WONK" 0;
  font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.75rem); line-height: 1.12; letter-spacing: -0.018em; color: var(--sc-ink-soft);
}
.pause__line + .pause__line { margin-top: 0.25em; }
.pause__turn { margin-top: 0.9em; color: var(--sc-ink); font-style: italic; font-weight: 420; text-wrap: balance; }

/* --------------------------------------------------------- 3 · manglar -- */
.manglar__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.manglar__fig { margin: 0; border-radius: var(--sc-r-lg); overflow: hidden; }
.manglar__fig img { width: 100%; height: auto; }
.manglar__copy { max-width: 28rem; }
@media (max-width: 860px) { .manglar__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ 4 · mesa -- */
.mesa { display: flex; align-items: center; padding-top: var(--bar-h); }
.rail { gap: clamp(1.25rem, 2.6vw, 2.75rem); align-items: flex-end; padding-inline: var(--sc-gutter); }
.rail__lead { flex: none; width: clamp(17rem, 27vw, 25rem); align-self: center; }
.rail__hours { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; line-height: 1.5; color: var(--sc-ink-soft); }
.rail__hours .ico { margin-top: 0.15rem; color: var(--orange-text); }
.dish { flex: none; margin: 0; }
.dish img { height: clamp(16rem, 56vh, 34rem); width: auto; object-fit: cover; border-radius: var(--sc-r-lg); }
.dish--h img { aspect-ratio: 3 / 2; }
.dish--v img { aspect-ratio: 2 / 3; height: clamp(18rem, 62vh, 38rem); }
.dish figcaption { margin-top: 0.8rem; font-size: 0.95rem; font-weight: 520; color: var(--sc-ink); }
.rail__note {
  flex: none; width: clamp(14rem, 20vw, 18rem); align-self: center; margin: 0;
  font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-xl); line-height: 1.2; color: var(--sc-ink);
}
@media (max-width: 860px) {
  .dish img { height: 46vh; }
  .dish--v img { height: 52vh; }
  .rail__lead { width: 80vw; }
}

/* ------------------------------------------------------- 5 · piscinas -- */
.pools__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 55%;
  transform-origin: 58% 55%;
  transform: scale(calc(1 + var(--sc-p, 0) * 0.42));
  will-change: transform;
}
.pools__wash {
  /* arrives with the copy (cue opens at p≈0.14), so the descent starts on the
     full, unwashed photograph */
  opacity: clamp(0, calc((var(--sc-p, 0) - 0.06) * 7), 1);
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(to left,
    color-mix(in oklab, var(--sc-canvas) 95%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 92%, transparent) 40%,
    color-mix(in oklab, var(--sc-canvas) 55%, transparent) 54%,
    transparent 68%);
}
.pools__copy { position: absolute; z-index: 5; right: var(--sc-gutter); top: 50%; translate: 0 -46%; width: min(29rem, 38vw); }
.pools__p { margin: 0; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink); }
.pools__x { margin: 0; color: var(--sc-ink-soft); }
@media (max-width: 860px) {
  .pools__wash {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 90%, transparent) 38%,
      color-mix(in oklab, var(--sc-canvas) 35%, transparent) 58%,
      transparent 72%);
  }
  .pools__copy { left: var(--sc-gutter); right: var(--sc-gutter); top: auto; bottom: calc(5.5rem + env(safe-area-inset-bottom)); translate: none; width: auto; }
  .pools__p { font-size: 1.125rem; }
}

/* -------------------------------------------------------- 6 · mascotas -- */
.pets { padding-block: calc(var(--sc-section) * 0.6); }
.pets__band { background: var(--sc-surface); padding-block: clamp(4rem, 9vw, 8rem); }
.pets__inner { text-align: center; display: grid; justify-items: center; gap: 1.25rem; }
.pets__title {
  margin: 0; max-width: 16ch; font-family: var(--sc-font-display); font-weight: 380; font-style: italic;
  font-variation-settings: "SOFT" 90, "WONK" 0;
  font-size: var(--sc-t-3xl); line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance;
}
.pets__p { margin: 0; max-width: 34rem; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink); text-wrap: pretty; }

/* --------------------------------------------------- 7 · habitaciones -- */
.rooms__main { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
.rooms__copy { max-width: 36rem; }
.rooms__list { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.rooms__list li {
  display: grid; grid-template-columns: 7.5rem 1fr auto; gap: 0.3rem 1.25rem; align-items: baseline;
  padding: 1rem 0; border-top: 1px solid color-mix(in oklab, var(--sand) 70%, transparent);
}
.rooms__list li:last-child { border-bottom: 1px solid color-mix(in oklab, var(--sand) 70%, transparent); }
.rooms__list h3 { margin: 0; font-family: var(--sc-font-display); font-weight: 420; font-size: 1.35rem; letter-spacing: -0.01em; }
.rooms__list p { margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--sc-ink-soft); }
.rooms__list span { font-size: 0.9rem; font-weight: 580; color: var(--sc-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rooms__massage { margin: 1.75rem 0 0; font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-lg); color: var(--sc-ink); }
.rooms__fig { margin: 0; position: sticky; top: calc(var(--bar-h) + 2rem); border-radius: var(--sc-r-lg); overflow: hidden; }
.rooms__fig img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 40% 50%; }
.services { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.services__h { margin: 0 0 1rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.services ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; }
.services li { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 520; }
.services .ico { color: var(--blue-deep); width: 1.3rem; height: 1.3rem; }
@media (max-width: 860px) {
  .rooms__main { grid-template-columns: 1fr; }
  .rooms__fig { position: static; }
  .rooms__fig img { aspect-ratio: 4 / 3; }
  .rooms__list li { grid-template-columns: 1fr auto; }
  .rooms__list p { grid-column: 1 / -1; grid-row: 2; }
}

/* --------------------------------------------------- 8 · atardecer (pico) -- */
.sunset { background: var(--sc-canvas); }
.sunset__art {
  position: absolute; z-index: 1;
  width: min(74vh, 46vw); aspect-ratio: 1;
  right: max(var(--sc-gutter), 7vw); top: calc(var(--bar-h) + (100svh - var(--bar-h) - min(74vh, 46vw)) * 0.62);
}
.sunset__svg { width: 100%; height: 100%; overflow: visible; }
.sunset__sun { will-change: transform; }
.sunset__brand { opacity: 0; }
.sunset__copy { position: absolute; z-index: 5; left: var(--sc-gutter); top: 50%; translate: 0 -50%; width: min(30rem, 38vw); }
.sunset__title {
  margin: 0; font-family: var(--sc-font-display); font-weight: 380; font-variation-settings: "SOFT" 80, "WONK" 0;
  font-size: var(--sc-t-3xl); line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance;
}
.sunset__p { margin: 1.25rem 0 0; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink); }
@media (max-width: 860px) {
  .sunset__art { width: 86vw; right: 7vw; top: auto; bottom: 7vh; }
  .sunset__copy { top: calc(var(--bar-h) + 4vh); translate: none; width: auto; right: var(--sc-gutter); }
}

/* ---------------------------------------------------------- 9 · cierre -- */
.close { display: grid; padding: calc(var(--bar-h) + 1rem) var(--sc-gutter) 1.5rem; }
.close__inner { display: grid; justify-items: center; align-content: center; text-align: center; gap: 1.1rem; }
.close__mark { width: clamp(4.5rem, 9vh, 6.5rem); height: auto; aspect-ratio: 1; margin-bottom: 0.4rem; }
.close__title {
  margin: 0; font-family: var(--sc-font-display); font-weight: 380; font-variation-settings: "SOFT" 80, "WONK" 0;
  font-size: var(--sc-t-3xl); line-height: 1.04; letter-spacing: -0.02em;
}
.close__p { margin: 0; max-width: 32rem; font-size: var(--sc-t-lg); line-height: 1.45; text-wrap: pretty; }
.close .cta--big { margin-top: 0.6rem; }
.link-soft { color: var(--sc-ink-soft); font-size: 0.95rem; min-height: 2.5rem; display: inline-flex; align-items: center; }
@media (hover: hover) and (pointer: fine) { .link-soft:hover { color: var(--sc-ink); } }
.close__inner .link-soft { margin-top: -0.4rem; }

/* anchors: land clear of the fixed bar */
section[id] { scroll-margin-top: var(--bar-h); }
.act-hero, .act-mesa, .act-pools, .act-sunset, .act-close { scroll-margin-top: 0; }

/* ---------------------------------------------------- footer + site map -- */
.sitefoot {
  border-top: 1px solid color-mix(in oklab, var(--sand) 70%, transparent);
  padding-top: clamp(3rem, 6vw, 5rem); color: var(--sc-ink-soft); font-size: 0.95rem;
}
.sitefoot ul { list-style: none; margin: 0; padding: 0; }
.sitefoot__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr minmax(18.5rem, 1.5fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.sitefoot__logo { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; border-radius: 8px; }
.sitefoot__mark { width: 2.6rem; height: 2.6rem; overflow: visible; }
.sitefoot__logo img { width: auto; height: 1.3rem; }
.sitefoot__brand p { margin: 1rem 0 0; max-width: 24rem; color: var(--sc-ink); line-height: 1.5; text-wrap: pretty; }
.sitefoot__social { display: flex; gap: 0.25rem; margin-top: 0.75rem; }
.sitefoot__social a { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--sc-ink); }
.sitefoot__col h2 { margin: 0 0 0.9rem; font-family: var(--sc-font-text); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.sitefoot__col li { margin: 0; }
.sitefoot__col a:not(.cta) { display: inline-flex; align-items: center; min-height: 2.5rem; color: var(--sc-ink); text-decoration: none; }
.sitefoot__col .cta { margin: 0.15rem 0 0.45rem; }
.sitefoot__visit li { display: flex; gap: 0.55rem; align-items: flex-start; padding: 0.35rem 0; line-height: 1.45; color: var(--sc-ink); }
.sitefoot__visit .ico { margin-top: 0.2rem; color: var(--orange-text); }
.sitefoot__visit li:has(a) .ico { margin-top: 0; }
.sitefoot__visit a { color: var(--sc-ink); text-decoration: none; }
.sitefoot__visit li:has(a) { align-items: center; }
.sitefoot__visit li:has(a) a { display: inline-flex; align-items: center; min-height: 2.5rem; }
.sitefoot__visit li:last-child a { overflow-wrap: anywhere; }
.sitefoot__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1.5rem;
  margin-top: clamp(2rem, 4vw, 3.5rem); padding-block: 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
  border-top: 1px solid color-mix(in oklab, var(--sand) 55%, transparent); font-size: 0.85rem;
}
.sitefoot__bar p { margin: 0; }
.sitefoot__bar-links { display: flex; align-items: center; gap: 1.25rem; }
.sitefoot__bar-links > a { color: var(--sc-ink); min-height: 2.5rem; display: inline-flex; align-items: center; }
@media (hover: hover) and (pointer: fine) {
  .sitefoot__col a:not(.cta):hover, .sitefoot__visit a:hover, .sitefoot__social a:hover, .sitefoot__bar-links > a:hover { color: var(--blue-deep); }
}
@media (max-width: 1100px) { .sitefoot__grid { grid-template-columns: 1fr 1fr; } .sitefoot__brand { grid-column: 1 / -1; } }
@media (max-width: 860px) {
  .close { padding-bottom: 1rem; }
  .close__inner { gap: 0.8rem; }
  .close .cta--big { width: 100%; white-space: normal; }
  .sitefoot__grid { grid-template-columns: 1fr; gap: 2rem; }
  .sitefoot__bar { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
}
/* ---------------------------------------------------- mobile book bar -- */
.mbar { display: none; }
@media (max-width: 860px) {
  .mbar {
    position: fixed; z-index: var(--sc-z-chrome); left: 0; right: 0; bottom: 0;
    display: flex; gap: 0.6rem; align-items: center;
    padding: 0.65rem var(--sc-gutter) calc(0.65rem + env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--sc-canvas) 95%, transparent);
    box-shadow: 0 -1px 0 color-mix(in oklab, var(--sand) 60%, transparent);
    transition: transform 260ms var(--sc-ease-out), opacity 260ms var(--sc-ease-out), visibility 0s;
  }
  .mbar .cta { flex: 1; min-height: 3rem; }
  .mbar__wa { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; color: var(--blue-deep);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--blue-deep) 35%, transparent); }
  .mbar__wa .ico { width: 1.4rem; height: 1.4rem; }
  /* visibility (after the slide) takes the hidden bar out of the tab order, so
     keyboard focus never lands on a control nobody can see */
  .mbar.is-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; visibility: hidden;
    transition: transform 260ms var(--sc-ease-out), opacity 260ms var(--sc-ease-out), visibility 0s linear 260ms; }
}

/* ------------------------------------------------------ reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .hero__sky, .hero__sea, .hero__trees, .hero__sun, .pools__img { transform: none !important; }
  .hero__fade { opacity: 0.6; }
  .hero__sun { top: calc(var(--horizon, 46%) - var(--sun) * 0.18); }
}

/* ---------------------------------------------------------- inner pages -- */
body.page { --sc-canvas: #F7EEE1; background: var(--sc-canvas); }
.bar--page { grid-template-columns: 1fr auto; }
.bar--page .mark__sun { transform: none; }
.page__wrap { padding-top: calc(var(--bar-h) + clamp(2.5rem, 6vw, 5rem)); padding-bottom: clamp(3rem, 6vw, 5rem); }
.page__wrap--narrow { max-width: 46rem; }
.page__head { max-width: 44rem; }
.page__title {
  margin: 0; font-family: var(--sc-font-display); font-weight: 380; font-variation-settings: "SOFT" 80, "WONK" 0;
  font-size: var(--sc-t-4xl); line-height: 1.02; letter-spacing: -0.022em; text-wrap: balance;
}
.page__lede { margin: 1.1rem 0 0; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink); text-wrap: pretty; max-width: 38rem; }
.page__head .cta { margin-top: 1.5rem; }
.page__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; margin-top: 1.75rem; }
.page__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; margin-top: clamp(2.5rem, 5vw, 4rem); }

/* form */
.cform { display: grid; gap: 1.25rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { display: grid; gap: 0.4rem; }
.field > label { font-size: 0.95rem; font-weight: 580; color: var(--sc-ink); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; min-height: 3rem; padding: 0.75rem 1rem; border-radius: 12px;
  border: 1px solid #857462; background: #FFFDF9; color: var(--sc-ink); font-size: 1rem; line-height: 1.4;
  transition: border-color 120ms var(--sc-ease-out), box-shadow 120ms var(--sc-ease-out);
}
.field textarea { resize: vertical; min-height: 9rem; }
.field select { appearance: none; padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, #6B5D52 50%), linear-gradient(135deg, #6B5D52 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.9rem) 50%; background-size: 0.4rem 0.4rem; background-repeat: no-repeat; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; border-color: var(--blue-deep); }
.field--error input, .field--error select, .field--error textarea { border-color: #A12A1F; box-shadow: 0 0 0 1px #A12A1F; }
.field__err { margin: 0; font-size: 0.9rem; color: #A12A1F; }
.check { display: flex; gap: 0.75rem; align-items: flex-start; min-height: 2.75rem; font-weight: 400; font-size: 0.95rem; line-height: 1.45; cursor: pointer; }
.check input { flex: none; width: 1.35rem; height: 1.35rem; margin-top: 0.1rem; accent-color: var(--blue-deep); }
.check a { color: var(--blue-deep); }
.cform__summary { padding: 1rem 1.25rem; border-radius: 12px; background: #FBE9E5; color: #6E1A12; font-size: 0.95rem; }
.cform__summary p { margin: 0 0 0.4rem; font-weight: 600; }
.cform__summary ul { margin: 0; padding-left: 1.1rem; }
.cform__summary a { color: inherit; }
.cform__status { margin: 0; min-height: 0; font-size: 0.95rem; color: var(--sc-ink-soft); }
.cform__status.is-error { color: #A12A1F; font-weight: 520; }
.btn-2 {
  justify-self: start; display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.8rem 1.6rem;
  border-radius: 999px; border: 1.5px solid var(--blue-deep); background: transparent; color: var(--blue-deep);
  font: inherit; font-weight: 620; cursor: pointer;
  transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .btn-2:hover:not(:disabled) { background: color-mix(in oklab, var(--blue-deep) 9%, transparent); } }
.btn-2:active:not(:disabled) { transform: scale(0.97); }
.btn-2:disabled { opacity: 0.6; cursor: progress; }
.cform__sent h2 { margin: 0; font-family: var(--sc-font-display); font-weight: 380; font-size: var(--sc-t-3xl); line-height: 1.05; }
.cform__sent p { margin: 1rem 0 0; font-size: var(--sc-t-lg); }
.cform__sent:focus { outline: none; }

/* contact info */
.cinfo h2 { margin: 0 0 1rem; font-family: var(--sc-font-text); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.cinfo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.cinfo li { display: flex; gap: 0.7rem; align-items: center; min-height: 2.75rem; line-height: 1.45; color: var(--sc-ink); }
.cinfo li .ico { color: var(--blue-deep); flex: none; }
.cinfo li:nth-child(n+4) .ico { color: var(--orange-text); }
.cinfo a { color: var(--sc-ink); text-underline-offset: 0.25em; text-decoration-color: color-mix(in oklab, var(--sc-ink) 35%, transparent); }
.cinfo__map { padding-left: 1.85rem; }

/* privacy text */
.prose h2 { margin: 2.25rem 0 0.5rem; font-family: var(--sc-font-display); font-weight: 420; font-size: var(--sc-t-xl); line-height: 1.15; letter-spacing: -0.01em; }
.prose p { margin: 0.6rem 0 0; font-size: 1.0625rem; line-height: 1.65; color: var(--sc-ink); max-width: 62ch; text-wrap: pretty; }
.prose__date { color: var(--sc-ink-soft) !important; margin-top: 1rem !important; }

@media (max-width: 860px) {
  body.page { padding-bottom: 5.25rem; }
  .bar--page { grid-template-columns: 1fr auto; }
  .page__grid { grid-template-columns: 1fr; }
  .btn-2 { width: 100%; justify-self: stretch; }
  .page__head .cta, .page__actions .cta { width: 100%; }
}

.cform__status:empty { display: none; }

/* the hidden attribute must win over any display rule (the form uses display:grid) */
[hidden] { display: none !important; }

/* focused panels (summary, success) must land clear of the fixed bar */
.cform__summary, .cform__sent, .field { scroll-margin-top: calc(var(--bar-h) + 1.5rem); }

/* ------------------------------------------------------------ error pages -- */
.err { display: grid; place-items: center; text-align: center;
  min-height: min(44rem, 80svh); padding: calc(var(--bar-h) + 3rem) var(--sc-gutter) 4rem; }
.err__inner { display: grid; justify-items: center; gap: 1rem; max-width: 36rem; }
.err__mark { width: clamp(6.5rem, 16vw, 10rem); height: auto; aspect-ratio: 1; margin-bottom: 0.5rem; }
.err__mark .err__sun { opacity: 0; }   /* the sun has already gone into the wave */
.err__title { margin: 0; font-family: var(--sc-font-display); font-weight: 380; font-variation-settings: "SOFT" 80, "WONK" 0;
  font-size: var(--sc-t-3xl); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.err__p { margin: 0; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink); text-wrap: pretty; }
.err__actions { display: grid; justify-items: center; gap: 0.35rem; margin: 1rem 0 0; }
@media (max-width: 860px) { .err__actions .cta { width: 100%; white-space: normal; } }