/* base tokens */
/* =====================================================================
 * tokens.css — global CSS custom properties (design tokens).
 * =====================================================================
 *
 * These are the variables every styled component reads via `var(...)`.
 * Defaults here are NEUTRAL — every hotel's specific palette comes
 * from its brand record, applied at runtime when the brand store
 * resolves.
 *
 * Future agents:
 *   · Add a new token here only if it's used across multiple
 *     components. Single-component values stay scoped to that
 *     component's <style scoped>.
 *   · Token names follow `--site-<group>-<role>` (e.g.
 *     `--site-color-fg`, `--site-radius-md`). Stable so brand-
 *     application logic can map onto them deterministically.
 *   · The brand store doesn't yet write into these — that wiring
 *     gets added when the first styled section lands.
 */
:root {
  /* The token NAMES match what services/theme.js writes. Defaults
     here are neutral — every hotel's actual palette comes from its
     brand record at runtime. */
  --site-color-bg:        #fbf9f5;
  --site-color-bg-rgb:    251, 249, 245;  /* used for translucent overlays */
  --site-color-fg:        #1a1815;
  --site-color-fg-muted:  #6b665e;
  --site-color-accent:    #1a1815;
  --site-color-accent-fg: #fbf9f5;
  --site-color-border:    #e3ddd2;

  --site-font-display: system-ui, -apple-system, sans-serif;
  --site-font-body:    system-ui, -apple-system, sans-serif;

  --site-radius-sm:    2px;
  --site-radius-md:    6px;
  --site-radius-lg:    14px;

  /* ⚠️ A SEED, NOT A MEASUREMENT. `App.vue` measures the real bar after mount
     and overwrites this on :root, along with `--site-header-reserve` — what
     the shell actually pads by, which is 0 for a bar in flow. Kept only so
     rules that read it before first measurement have a sane number. */
  --site-header-h:     76px;
  --site-header-reserve: 0px;

  /* ===================================================================
   * STRUCTURAL tokens — the theme's visual RHYTHM, not just its palette.
   * ===================================================================
   *
   * These extend the stable `--site-*` surface beyond colour/font/radius
   * so the LOCKED booking pages (BookView / CheckoutView / Confirmation)
   * can inherit a theme's FULL visual language — type scale, spacing,
   * elevation, and motion — instead of looking like a generic recolour.
   *
   * Defaults here are deliberately NEUTRAL (a clean, calm shell). Each
   * generated theme's `theme/tokens.css` MAPS its bespoke scale onto
   * these names (see the design-tokens skill) so the booking surface
   * picks up the same rhythm as the rest of the site. Setting these is
   * additive + backward-compatible: a theme that sets none of them still
   * renders correctly on the neutral defaults below.
   *
   * As with colours, the names are STABLE so theme-application logic can
   * map onto them deterministically.
   */

  /* --- Type scale ---------------------------------------------------
   * Display sizes for hero/section headings, body sizes for prose +
   * controls. Fluid `clamp()` so the neutral shell reads well at any
   * width; a theme overrides with its own step ladder. */
  --site-font-size-display-xl: clamp(2.25rem, 5vw, 3.5rem);
  --site-font-size-display-lg: clamp(1.75rem, 3.5vw, 2.5rem);
  --site-font-size-display-md: clamp(1.25rem, 2vw, 1.5rem);
  --site-font-size-body-lg:    1.0625rem;
  --site-font-size-body:       0.9375rem;
  --site-font-size-body-sm:    0.8125rem;

  --site-line-height-display:  1.1;
  --site-line-height-body:     1.55;

  --site-letter-spacing-tight:  -0.01em;
  --site-letter-spacing-normal: 0;

  /* --- Spacing ladder ----------------------------------------------
   * A geometric-ish step used for gaps, padding, and rhythm. Themes
   * remap to their own gutter/section scale. */
  --site-space-xs: 0.5rem;
  --site-space-sm: 0.75rem;
  --site-space-md: 1.25rem;
  --site-space-lg: 2rem;
  --site-space-xl: 3rem;

  /* --- Elevation ----------------------------------------------------
   * Soft, neutral shadows. Themes supply brand-tinted equivalents. */
  --site-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --site-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10);

  /* --- Motion -------------------------------------------------------
   * One easing + one base duration the locked pages reach for on
   * transitions. Themes set their committed curve/timing here so the
   * booking surface moves with the same feel as the rest of the site. */
  --site-ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --site-duration: 240ms;

  /* --- Legacy / alternate token vocabulary (backward-compat) --------
   * Some generated themes' components were authored against an older
   * --site-* naming scheme — a NUMERIC spacing scale (--site-space-1..6)
   * and --site-text-*/--site-track-*/--site-leading-*/--site-dur-* names —
   * rather than the named scale above. When a component reaches for a name
   * not defined anywhere, that custom property resolves to NOTHING and the
   * declaration is dropped (e.g. `gap: clamp(var(--site-space-3),…)` becomes
   * `normal` → a nav with no spacing; `font-size: var(--site-text-h1)` falls
   * back to 16px → collapsed type). Aliasing the legacy names onto the canonical
   * tokens here — the always-loaded base — keeps EVERY component resolving
   * regardless of which vocabulary it was generated against. Purely additive;
   * themes built on the named scale are unaffected. */
  --site-space-1: var(--site-space-xs);
  --site-space-2: var(--site-space-sm);
  --site-space-3: var(--site-space-md);
  --site-space-4: var(--site-space-lg);
  --site-space-5: var(--site-space-xl);
  --site-space-6: var(--site-space-xl);

  --site-text-hero:    var(--site-font-size-display-xl);
  --site-text-display: var(--site-font-size-display-xl);
  --site-text-h1:      var(--site-font-size-display-lg);
  --site-text-h2:      var(--site-font-size-display-md);
  --site-text-h3:      var(--site-font-size-display-md);
  --site-text-lead:    var(--site-font-size-body-lg);
  --site-text-body:    var(--site-font-size-body);
  --site-text-strong:  var(--site-font-size-body);
  --site-text-muted:   var(--site-font-size-body);
  --site-text-sm:      var(--site-font-size-body-sm);
  --site-text-label:   var(--site-font-size-body-sm);
  --site-text-caption: var(--site-font-size-body-sm);
  --site-text-micro:   var(--site-font-size-body-sm);

  --site-leading-tight: var(--site-line-height-display);
  --site-leading-snug:  1.25;
  --site-leading-body:  var(--site-line-height-body);

  --site-track-tight: var(--site-letter-spacing-tight);
  --site-track-caps:  0.08em;
  --site-track-label: 0.12em;
  --site-track-cta:   0.04em;
  --site-track-wide:  0.16em;

  --site-dur-fast: 160ms;
  --site-dur-base: var(--site-duration);
  --site-dur-slow: 420ms;

  --site-radius-none: 0;
  --site-radius-xs:   3px;
  --site-bar-h:       var(--site-header-h);
  --site-max:         1200px;
  --site-hairline-w:  1px;
}

/* =====================================================================
 *  Base typography wiring.
 *
 *  Every visible character on the site reads its font through these
 *  cascaded rules — so flipping `--site-font-*` (which the brand
 *  store does at runtime) instantly changes the font everywhere
 *  without component-by-component overrides.
 *
 *    body, p, button, input, select, textarea  →  --site-font-body
 *    h1..h4                                    →  --site-font-display
 *
 *  Components that want to OPT INTO display type for non-heading
 *  text should add `font-family: var(--site-font-display)` on the
 *  relevant selector (e.g. drawer links). Components that want a
 *  different family for ONE element can override locally. The rule
 *  below establishes the right defaults so ad-hoc overrides are
 *  rare.
 * ===================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body, #app { margin: 0; padding: 0; min-height: 100%; }

body {
  background: var(--site-color-bg);
  color: var(--site-color-fg);
  font-family: var(--site-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings always pull from the display family (Bebas Neue / Fraunces /
   etc., depending on the hotel). If a hotelier picks the same family
   for both display + body, the variable resolves the same way and
   nothing visually changes. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--site-font-display);
  margin: 0;
}

/* Form controls don't inherit font-family by default — wire them
   explicitly so brand fonts apply to inputs, buttons, etc. */
button, input, select, textarea { font: inherit; }

img, video, svg { max-width: 100%; display: block; }
img, video { height: auto; }

/* Preserve author line breaks in CMS prose.
 *
 * Room / amenity / event descriptions, summaries, "the space", etc. are
 * entered in dashboard textareas where newlines are meaningful. HTML's
 * default `white-space: normal` collapses those newlines into spaces, so
 * paragraph breaks the hotelier typed vanished on the live site.
 *
 * `pre-line` behaves EXACTLY like `normal` (collapses runs of spaces,
 * wraps long lines) except it keeps newlines — so this is a no-op for
 * any text without literal line breaks (price rows, labels, button text)
 * and only restores breaks in author-entered prose. Vue's template
 * compiler condenses static whitespace, so the only newlines reaching a
 * text node come from interpolated data — exactly what we want to keep.
 *
 * Scoped to prose-bearing elements (paragraphs + the SDK/theme prose
 * class roles). Components that pin their own white-space (nowrap on
 * price chips, pre-wrap elsewhere) load after this and win. */
p,
[class*="__prose"],
[class*="__description"],
[class*="__lede"],
[class*="__summary"],
[class*="__highlight-body"] {
  white-space: pre-line;
}

a { color: inherit; text-decoration: none; }

/* Minimal global reset so the empty homepage doesn't show a blank
   white page with default browser margins. Section components are
   responsible for their own spacing and type — keep this lean. */
*,
*::before,
*::after { box-sizing: border-box; }
html, body, #app { margin: 0; padding: 0; min-height: 100%; }
body {
  background: var(--site-bg);
  color: var(--site-fg);
  font-family: var(--site-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* theme tokens */
/* =====================================================================
 * tokens.css — Ancalá Casas Altas · unified design tokens
 * ---------------------------------------------------------------------
 * The single source of truth for the brand's COLOUR, TYPE and structural
 * rhythm. brandbook.html and THEME_INTENT.md both consume these tokens.
 *
 * COLOUR + TYPE are exposed ONLY through --site-* token names, so the
 * runtime can re-theme the entire system live. Components REFERENCE these
 * names — the anchor hexes survive only inside `var(--site-…, fallback)`
 * for an un-branded preview — and DERIVE every supporting tone with
 * color-mix() off the anchors. Change one --site-color-* and the whole
 * estate recolours, no rebuild.
 *
 * THE ANCALÁ PALETTE  (DESIGN_SYSTEM.md 1.1 — six colours + offwhite)
 *   cacao    #2A160F  ink on light, dark grounds
 *   cream    #E5DFD6  paper, button fill, ink on dark
 *   orange   #EE4300  accent, button hairline, footer
 *   renta    #BBC2F4  Casa de la Renta lilac
 *   rose     #FCDEDA  soft pink ground
 *   mangrove #008D40  occasional accent only
 *   offwhite #FFF8F8  where cream is too warm
 *
 * THE VOICE OF THE HOUSE  (chosen type · typography-v1)
 *   --site-font-display  Casasol        editorial display — the headline
 *   --site-font-body     Arimo          humanist grotesque — the body
 *   --site-font-accent   EB Garamond    italic — the house voice
 * ===================================================================== */

/* ---- Brand faces (uploaded) ------------------------------------------ */
@font-face {
  font-family: "Casasol";
  /* De-dotted Casasol: the shipped face carries a decorative dot contour on
     every lowercase glyph. This build strips those contours (uppercase is
     byte-identical), so lowercase no longer renders dots.
     Self-hosted on the hotel CDN (was ancala.co/fonts — an external
     dependency that would take the site's typography down with it). */
  src: url("https://d1vgksb0ce1fwh.cloudfront.net/01KSZW0DC7GSG1NJ6S6F15P1NS/01M143QTHSRKCWVXQ7H0GSVSCS.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Arimo";
  src: url("https://d1vgksb0ce1fwh.cloudfront.net/01KSZW0DC7GSG1NJ6S6F15P1NS/01KVG7B4JJJE67W2ZDPHZMZEZA");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* The accent face is an italic — register it under the family the system
   references ("EB Garamond") AND under its uploaded name for runtime parity. */
@font-face {
  font-family: "EB Garamond";
  src: url("https://d1vgksb0ce1fwh.cloudfront.net/01KSZW0DC7GSG1NJ6S6F15P1NS/01KVGJGCEYBM2S0A999KKPBQJ3");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "ACCENTS - EBGaramond-Italic";
  src: url("https://d1vgksb0ce1fwh.cloudfront.net/01KSZW0DC7GSG1NJ6S6F15P1NS/01KVGJGCEYBM2S0A999KKPBQJ3");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* ──────────────────────────────────────────────────────────────
   * 1 · COLOUR ANCHORS  (reference the runtime brand; never redefine —
   *     the hexes live only as fallbacks for an un-branded preview)
   * ────────────────────────────────────────────────────────────── */
  --site-color-bg:     #E5DFD6;  /* Cream — Ancalá paper */  /* Conchal Sand */
  --site-color-fg:     #2A160F;  /* Cacao — Ancalá ink */  /* Cacao Timber */
  --site-color-accent: #008D40;  /* Mangrove Green — this house's accent */
  --site-color-cta-border: #EE4300;  /* orange hairline — canonical CTA border */
  --site-color-muted:  #2A160F;  /* the brand has no greys: secondary text is cacao */
  --site-color-border: rgba(42, 22, 15, 0.22);  /* form fields only; surfaces carry no border */

  /* contrast-safe "on" pairs */
  --site-color-on-accent: #E5DFD6; /* cream on mangrove */
  --site-color-on-fg:     #E5DFD6; /* cream on cacao */

  /* ──────────────────────────────────────────────────────────────
   * 2 · ROLES  (brand colours only; no white, black or navy mixes)
   * ────────────────────────────────────────────────────────────── */
  --site-color-ink-2:    #2A160F;
  --site-color-ink-soft: #2A160F;

  /* Surfaces: full colour blocks */
  --site-color-surface:   #FFF8F8;  /* offwhite panel */
  --site-color-surface-2: #FCDEDA;  /* rose band */

  /* Dark grounds */
  --site-color-ink-deep:  #2A160F;
  --site-color-on-dark:   #E5DFD6;

  /* Accent family */
  --site-color-accent-deep: #008D40;
  --site-color-accent-wash: #FCDEDA;

  --site-color-plaque: #2A160F;
  --site-color-tile:   #008D40;  /* this house's tile */

  /* Hairlines + scrims */
  --site-color-line:        rgba(42, 22, 15, 0.22);
  --site-color-line-strong: rgba(42, 22, 15, 0.4);
  --site-color-scrim:       rgba(0, 0, 0, 0.32);
  --site-color-plate:       #E5DFD6;

  /* ──────────────────────────────────────────────────────────────
   * 3 · TYPE
   * ────────────────────────────────────────────────────────────── */
  --site-font-display: "Casasol", "Cormorant Garamond", Georgia, serif;
  --site-font-body:    "Arimo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --site-font-accent:  "EB Garamond", Georgia, serif;  /* always set italic in use */

  /* Fluid editorial ladder (display capped ≈5.5rem to stay within the hero). */
  --site-text-cap:        clamp(0.66rem, 0.6rem + 0.3vw, 0.76rem);  /* eyebrow / micro */
  --site-text-sm:         clamp(0.82rem, 0.78rem + 0.2vw, 0.92rem); /* caption */
  --site-text-body:       clamp(1rem, 0.96rem + 0.2vw, 1.12rem);    /* body */
  --site-text-lead:       clamp(1.12rem, 1rem + 0.5vw, 1.3rem);     /* lead */
  --site-text-h4:         clamp(1.45rem, 1.2rem + 1.1vw, 2.1rem);
  --site-text-h3:         clamp(1.85rem, 1.4rem + 2.2vw, 2.9rem);
  --site-text-h2:         clamp(2.4rem, 1.7rem + 3.4vw, 4.4rem);
  --site-text-display:    clamp(3rem, 2rem + 5vw, 5.4rem);          /* hero display */

  --site-leading-tight: 0.95;  /* display */
  --site-leading-snug:  1.18;  /* sub-heads */
  --site-leading-body:  1.62;  /* prose */

  --site-tracking-display: -0.01em;
  --site-tracking-eyebrow: 0.28em;
  --site-tracking-label:   0.16em;

  /* ──────────────────────────────────────────────────────────────
   * 4 · SPACE  (generous, unhurried — luxury breathing room)
   * ────────────────────────────────────────────────────────────── */
  --site-space-1: 4px;
  --site-space-2: 8px;
  --site-space-3: 16px;
  --site-space-4: 24px;
  --site-space-5: 40px;
  --site-space-6: 64px;
  --site-space-7: 96px;
  --site-section-y: clamp(64px, 4rem + 6vw, 128px);
  --site-gutter:    clamp(18px, 1rem + 2.5vw, 56px);
  --site-content-max: 1280px;
  --site-measure:     64ch;

  /* ──────────────────────────────────────────────────────────────
   * 5 · RADIUS  (pills for chrome, soft rounds for objects — the
   *     chosen variants are consistently rounded, never hard-square)
   * ────────────────────────────────────────────────────────────── */
  --site-radius-sm:   8px;
  --site-radius-md:   16px;
  --site-radius-lg:   16px;
  --site-radius-card: 16px;
  --site-radius-pill: 999px;

  /* ──────────────────────────────────────────────────────────────
   * 6 · ELEVATION  (soft cacao-tinted shadows — objects sit ON photography)
   * ────────────────────────────────────────────────────────────── */
  --site-shadow-sm: none;
  --site-shadow-md: none;
  --site-shadow-lg: none;
  --site-shadow-coral: none;

  /* ──────────────────────────────────────────────────────────────
   * 7 · MOTION  (gentle "materialize" reveals + soft hover lift)
   * ────────────────────────────────────────────────────────────── */
  --site-ease: cubic-bezier(.65, 0, .35, 1);  /* Ancalá master easing */  /* arrivals */
  --site-ease-out:  cubic-bezier(.2,.7,.2,1);
  --site-dur-fast:  140ms;
  --site-dur:       360ms;
  --site-dur-slow:  820ms;
  --site-stagger:   90ms;

  /* ──────────────────────────────────────────────────────────────
   * 8 · TEXTURE  (faint rose-opener wash + grain — always behind a scrim)
   * ────────────────────────────────────────────────────────────── */
  --site-asset-opener: url("https://d1vgksb0ce1fwh.cloudfront.net/01KSZW0DC7GSG1NJ6S6F15P1NS/01KVGJRGP6B2SGC0EADK6D55H9.png");
  --site-asset-logobg: url("https://d1vgksb0ce1fwh.cloudfront.net/01KSZW0DC7GSG1NJ6S6F15P1NS/01KVJWH87HVGT8RB64WZMG6S00.svg");
  --site-asset-bird:   url("https://d1vgksb0ce1fwh.cloudfront.net/01KSZW0DC7GSG1NJ6S6F15P1NS/01KVRBWBGF5GWXN9B3BKG3V7ZQ.png");

  /* ──────────────────────────────────────────────────────────────
   * 9 · LOCKED BOOKING PAGE OVERRIDES  (the /book view reads these)
   *     Casasol display titles must be UPPERCASE (the face has no
   *     lowercase glyphs — they render as dots).
   * ────────────────────────────────────────────────────────────── */
  --site-book-hero-title-transform: uppercase;
}

/* ──────────────────────────────────────────────────────────────────────
 * CASASOL DISPLAY TEXT ON LOCKED PLATFORM VIEWS — NO DOTS, EVER.
 * Casasol has no lowercase glyphs; lowercase letters render as dots.
 * The selectors below are every element in the locked booking page
 * (plus the shared homepage-block component) whose computed font is the
 * display face (--j17-display / --site-font-display). !important beats
 * the handful of scoped platform rules that set text-transform: none.
 * This file provably ships in the bundle — do not move these to brand.css
 * (the builder discards that file). — do not remove.
 * ────────────────────────────────────────────────────────────────────── */
/* Booking page hero */
.j17-about__title,
.j17-about__pullquote-text,
.j17-about__pullquote-mark,
/* Booking page: hints, groups, sort + result counts */
.j17-book__hint-title,
.j17-book__group-title,
.j17-book__group-intro,
.j17-book__note-body,
.j17-book__sortbar-count,
.j17-book__mobile-results-count,
.j17-sortmenu__value,
.j17-sortmenu__option-label,
/* Booking page: stay panel + filters */
.j17-book__stay-empty,
.j17-book__stay-filled,
.j17-book__filters-head h2,
/* Booking page: cart (desktop + mobile) */
.j17-book__cart h2,
.j17-book__cart-empty,
.j17-book__cart-item strong,
.j17-book__cart-total strong,
.j17-book__cart-right > span,
.j17-book__cart-remove,
.j17-book__mcart-title,
.j17-book__mcart-bar-title,
.j17-book__mcart-bar-total-value,
/* Booking page: room cards + prices */
.j17-book-card__title,
.j17-book-card__combo-title,
.j17-book-card__split-title,
.j17-book-card__split-price,
.j17-book-card__split-sep,
.j17-book-card__price-total,
/* Guest stepper value */
.gs-value,
/* Homepage / shared content blocks + teasers */
.hp-block__title,
.hp-block__featured-title,
.hp-amenities-teaser__title,
.hp-booking__title,
.hp-events-teaser__title,
.hp-rooms-teaser__title,
.hp-venues-teaser__title {
  text-transform: uppercase !important;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --site-dur-fast: 1ms;
    --site-dur:      1ms;
    --site-dur-slow: 1ms;
    --site-stagger:  0ms;
  }
}

/* [preview] baseline motion tokens (brand book omitted these — keeps reveal animations from hiding content) */
:root {
  --site-duration-reveal: 700ms;
  --site-duration-slow: 600ms;
  --site-duration: 320ms;
  --site-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --site-reveal-distance: 24px;
}

/* §2 dot rule: the shipped face bakes a dot contour into every lowercase
   glyph. We serve a stripped build; this disables the feature as well. */
[class*="display"], h1, h2, h3, h4 { font-feature-settings: "ccmp" 0; }

/* ===== ANCALA HARD OVERRIDES ==========================================
 * Popstay injects <style data-popstay="fonts"> and a runtime brand block at
 * boot, AFTER this stylesheet. Those re-declare @font-face for "Casasol"
 * (pointing at the original DOTTED file) and reset the colour tokens, so
 * anything declared normally above is silently overridden in the browser.
 *
 * Two defences:
 *   1. register the de-dotted face under a name Popstay never redefines
 *   2. mark the brand tokens !important so a later block cannot win
 * Remove only if Popstay stops injecting that block.
 * ==================================================================== */
@font-face {
  font-family: "AncalaCasasol";
  src: url("https://d1vgksb0ce1fwh.cloudfront.net/01KSZW0DC7GSG1NJ6S6F15P1NS/01M143QTHSRKCWVXQ7H0GSVSCS.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --site-font-display: "AncalaCasasol", "Cormorant Garamond", Georgia, serif !important;
  --site-color-bg:     #E5DFD6 !important;  /* Cream */
  --site-color-fg:     #2A160F !important;  /* Cacao */
  --site-color-accent: #008D40 !important;  /* Mangrove Green */
  --site-color-on-accent: #E5DFD6 !important;
  --site-color-tile:   #008D40 !important;
  --site-color-cta-border: #EE4300 !important;  /* orange hairline */
  --site-ease: cubic-bezier(.65, 0, .35, 1) !important;
}

/* ---- /BOOK MASTHEAD (2026-08-28, per Tiger) --------------------------
 * No "A residence at …" eyebrow, and the authored title ("Book your stay
 * at Casas Altas") stays on ONE line — sized against the masthead column
 * so it never wraps at desktop widths. Doubled class beats the SDK's
 * scoped rules; phones keep the stock size and may wrap.
 * -------------------------------------------------------------------- */
.j17-book .j17-about__eyebrow.j17-about__eyebrow { display: none !important; }
/* the eyebrow used to clear the 90px fixed header; without it the title's
 * 80px pad tucks it under the bar — give the masthead real clearance */
.j17-book .j17-about__masthead-copy.j17-about__masthead-copy { padding-top: 150px !important; }
@media (min-width: 768px) {
  .j17-book .j17-about__title.j17-about__title {
    white-space: nowrap;
    font-size: min(4.3vw, 62px) !important;
  }
}

/* ---- NO ACCENT WORD --------------------------------------------------
 * Popstay's theme lifts one word of every headline into italic accent
 * ("the signature move"). The house does not do that: headlines are one
 * face, one colour. Neutralised here rather than in forty components.
 * -------------------------------------------------------------------- */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
h1 .em, h2 .em, h3 .em, h4 .em,
.display em, .display .em,
[class*="title"] em, [class*="title"] .em,
[class*="headline"] em, [class*="headline"] .em,
.em, .vl-em, .loader__em {
  font-family: inherit !important;
  font-style: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

/* ---- THE HOUSE VOICE -------------------------------------------------
 * DESIGN_SYSTEM §1.2 / §7.1: EB Garamond 700 italic is the voice for every
 * button, label, link, price and room name. Popstay's theme sets these in
 * tracked UPPERCASE Arimo instead, which is the single biggest tell that
 * these are not the same site. Headlines stay Casasol; body stays Arimo.
 * -------------------------------------------------------------------- */
.cta, .btn,
[class*="__cta"], [class*="__link"], [class*="-link"],
[class*="__label"], [class*="price"], [class*="__name"],
[class*="__meta"], [class*="eyebrow"] {
  font-family: var(--site-font-accent, "EB Garamond", Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: .01em !important;
}

/* ---- ONE CORNER ------------------------------------------------------
 * DESIGN_SYSTEM §4 + operator call: boxes, buttons, cards, inputs and
 * panels all take the Reserve button's corner (8px). Only genuinely
 * circular chrome (carousel dots, icon buttons) keeps its own shape.
 * -------------------------------------------------------------------- */
:root {
  --site-radius-sm:   8px !important;
  --site-radius-md:   8px !important;
  --site-radius-lg:   8px !important;
  --site-radius-card: 8px !important;
}

.btn, .reserve, .field,
[class*="card"], [class*="panel"], [class*="plaque"],
[class*="sheet"], [class*="modal__panel"], [class*="box"],
input, textarea, select {
  border-radius: 8px !important;
}

/* dots, and round icon-only chrome, stay round */
[class*="dot"], [class*="__dot"], [class*="pill"],
[class*="arrow"], [class*="mic"], [class*="hamburger"], .wa {
  border-radius: 999px !important;
}

/* ---- NO CTA BAND -----------------------------------------------------
 * ancala.co ends Hero -> ... -> Footer. Popstay inserts a cacao CTA band
 * above the footer, which reads as a second, competing footer.
 * -------------------------------------------------------------------- */
.ctaband { display: none !important; }

/* ---- ROOM NAMES ------------------------------------------------------
 * §1.2 lists room names in the EB Garamond voice, not Casasol.
 * -------------------------------------------------------------------- */
[class*="plaque__title"], [class*="room__title"], [class*="room-name"],
[class*="rt-plaque"] [class*="title"] {
  font-family: var(--site-font-accent, "EB Garamond", Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: .01em !important;
}

/* =====================================================================
 * BRAND PASS 2026-09-13: inner pages onto DESIGN_SYSTEM.md
 * ---------------------------------------------------------------------
 * The homepage and the waterfront menu (both rendered inside `.ancx`)
 * are the reference and are excluded from every rule below.
 * ===================================================================== */

/* ---- 1 · PALETTE: six brand colours + offwhite, nothing mixed -------
 * The runtime writes the brand record's legacy palette (#fbf6f0 sand,
 * #f87061 coral, #7c6d67 muted, white on-accent) as INLINE custom
 * properties on <html>; only !important declarations beat those. */
:root {
  --site-color-bg:            #E5DFD6 !important;  /* cream */
  --site-color-fg:            #2A160F !important;  /* cacao */
  --site-color-accent:        #008D40 !important;  /* mangrove, occasional accent only */
  --site-color-on-accent:     #E5DFD6 !important;
  --site-color-accent-fg:     #E5DFD6 !important;
  --site-color-accent-deep:   #008D40 !important;
  --site-color-accent-wash:   #FCDEDA !important;  /* rose */
  --site-color-muted:         #2A160F !important;  /* no greys: muted text is cacao */
  --site-color-fg-muted:      #2A160F !important;
  --site-color-ink-2:         #2A160F !important;
  --site-color-ink-soft:      #2A160F !important;
  --site-color-ink:           #2A160F !important;
  --site-color-ink-deep:      #2A160F !important;
  --site-color-on-fg:         #E5DFD6 !important;
  --site-color-on-dark:       #E5DFD6 !important;
  --site-color-surface:       #FFF8F8 !important;  /* offwhite block */
  --site-color-surface-2:     #FCDEDA !important;  /* rose band */
  --site-color-plaque:        #2A160F !important;
  --site-color-plate:         #E5DFD6 !important;
  --site-color-scrim:         rgba(0, 0, 0, 0.32) !important;
  --site-color-border:        rgba(42, 22, 15, 0.22) !important;  /* form fields only */
  --site-color-line:          rgba(42, 22, 15, 0.22) !important;
  --site-color-line-strong:   rgba(42, 22, 15, 0.4) !important;
  --site-color-orange:        #EE4300 !important;
  --site-color-rose:          #FCDEDA !important;
  --site-color-renta:         #BBC2F4 !important;
  --site-color-offwhite:      #FFF8F8 !important;
  /* brand-record extras the runtime injects */
  --site-color-accent-2:      #008D40 !important;
  --site-color-primary-2:     #E5DFD6 !important;
  --site-color-secondary-2:   #FCDEDA !important;
  --site-color-supporting-core-tone: #2A160F !important;
  --a11y-focus:               #EE4300 !important;
  /* no surface elevation anywhere */
  --site-shadow-sm: none !important;
  --site-shadow-md: none !important;
  --site-shadow-lg: none !important;
}

/* ---- 2 · BRAND-KIT VARIABLES (brand.css `ak-*` classes read these) --- */
:root {
  --anca-ink:        #2A160F;
  --anca-paper:      #E5DFD6;
  --anca-ivory:      #FFF8F8;
  --anca-coral:      #EE4300;   /* the kit's "lead accent" is the brand orange */
  --anca-on-coral:   #E5DFD6;
  --anca-blush:      #FCDEDA;
  --anca-mangrove:   #008D40;
  --anca-periwinkle: #BBC2F4;
  --anca-line-strong: rgba(42, 22, 15, 0.4);
  --anca-font-display: var(--site-font-display, "AncalaCasasol", Georgia, serif);
  --anca-font-accent:  var(--site-font-accent, "EB Garamond", Georgia, serif);
  --anca-font-body:    var(--site-font-body, "Arimo", system-ui, sans-serif);
  --anca-weight-display: 400;
  --anca-weight-medium:  700;
  --anca-lh-tight:   0.92;
  --anca-step-m2:    0.8rem;
  --anca-step-m1:    0.9rem;
  --anca-step-0:     1rem;
  --anca-step-1:     1.125rem;
  --anca-radius-button: 8px;
  --anca-radius-card:   8px;
  --anca-dur:        150ms;
  --anca-dur-fast:   120ms;
  --anca-ease:       cubic-bezier(.65, 0, .35, 1);
  --anca-pattern-opacity: 0.15;
}

/* ---- 3 · CHROME: the platform language strip under the footer ------
 * Language lives in the header (ES / EN), as on the homepage. */
.app-shell__region,
.region-switcher { display: none !important; }
html { background-color: #E5DFD6; }

/* ---- 4 · CASASOL: capitals only, dot-free face, ccmp off ------------- */
:is(h1, h2, h3, h4, h5, h6):not(.ancx *):not(.anch-modal *),
:is(.display, .h2, .h3, .h4, [class*="title-display"], [class*="__display"],
    .booker__title, .stepper__val, .ledger__val, .reserve-bar__name,
    .chapter__num, .airport__iata, .colophon__mark, .index__label,
    .empty__title, .ev-empty__lead, .ev-card__idx, .adv-chead__idx,
    .adv-highlight__n, .adv-display, .hp-block__title, .seo-list__card-title):not(.ancx *) {
  text-transform: uppercase;
  font-feature-settings: "ccmp" 0 !important;
}
[class*="display"], [class*="title"], [class*="heading"], [class*="__head"],
h1, h2, h3, h4, h5, h6 {
  font-feature-settings: "ccmp" 0 !important;
}

/* ---- 5 · THE BRAND BUTTON (DESIGN_SYSTEM 7.1) ------------------------
 * Cream fill, cacao ink, 1px orange hairline, EB Garamond 700 italic,
 * 8px corner, hover = opacity. Every inner CTA, primary or secondary. */
:is(.btn-primary, .btn-outline, .btn-ghost,
    .cta-band__btn, .cta-band__ghost, .ctaband__btn, .ctaband__ghost,
    .adv-btn, .adv-cta__btn, .adv-cta__ghost, .adv-back--btn,
    .am-band__btn, .vl-btn, .bp-submit, .rqv-btn, .anca-more__btn,
    .hp-block__cta, .directions__cta, .ak-pill,
    .j17-confirm__cta):not(.ancx *) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .45em;
  background: #E5DFD6 !important;
  background-image: none !important;
  color: #2A160F !important;
  border: 1px solid #EE4300 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 6px 16px !important;
  font-family: var(--site-font-accent, "EB Garamond", Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.5556 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  text-decoration: none !important;
  transform: none !important;
  cursor: pointer;
  transition: opacity .15s cubic-bezier(.65, 0, .35, 1) !important;
}
:is(.btn-primary, .btn-outline, .btn-ghost,
    .cta-band__btn, .cta-band__ghost, .ctaband__btn, .ctaband__ghost,
    .adv-btn, .adv-cta__btn, .adv-cta__ghost, .adv-back--btn,
    .am-band__btn, .vl-btn, .bp-submit, .rqv-btn, .anca-more__btn,
    .hp-block__cta, .directions__cta, .ak-pill,
    .j17-confirm__cta):not(.ancx *):hover {
  opacity: .8;
  transform: none !important;
}
:is(.btn-primary, .cta-band__btn, .ctaband__btn, .adv-btn, .adv-cta__btn,
    .am-band__btn, .vl-btn, .bp-submit, .rqv-btn, .hp-block__cta,
    .directions__cta, .ak-pill):not(.ancx *):disabled { opacity: .45; cursor: default; }
:is(.btn__arrow, .cta-band__arr, .cta-band__arrow, .adv-cta__arr, .adv-btn__arrow,
    .vl-btn__arrow, .bp-submit__arrow, .j17-confirm__cta-rule):not(.ancx *) { display: none !important; }
:focus-visible:not(.ancx *) { outline: 2px solid #EE4300; outline-offset: 3px; }

/* ---- 6 · THE ACCENT VOICE on labels, meta and tags --------------------
 * Tracked uppercase Arimo labels become EB Garamond 700 italic. */
:is(.label, [class*="__lab"], [class*="-label"], [class*="__flabel"], [class*="facts__item"],
    [class*="facts__k"], .chip, [class*="__chip"], [class*="__tag"], [class*="__dist"],
    .j17-book__filters-reset, .j17-book__staydock-submit,
    [class*="__kicker"], [class*="__loc"], [class*="__seal"], [class*="__time"],
    [class*="__counter"], [class*="__count"], [class*="plate-space"],
    .loc-address, .ledger__label, .colophon__meta, .booker__meta,
    .adv-back, .room-hero__back, .room-hero__all, .index__eyebrow,
    .guide-card__tab, .ev-card__tab, .qa__tag, .see-link, .anca-link,
    .anca-quick, .j17-confirm__cta-label):not(html):not(body):not(.ancx *):not(.site-footer *):not(.anch *) {
  font-family: var(--site-font-accent, "EB Garamond", Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: .01em !important;
}

/* ---- 7 · FLAT SURFACES: no elevation, no gradients, no card borders --- */
body *:not(.ancx):not(.ancx *):not(input):not(textarea):not(select) {
  box-shadow: none !important;
}
/* dark heroes: a full-bleed cacao block (photo, when present, sits on top) */
:is(.about-view, .experience-view, .faqs-view, .contact-view) .hero:not(.ancx *) {
  background: #2A160F !important;
}
/* one flat scrim over photos and video for legibility */
:is(.hero__scrim, .cta-band__scrim, .anca-hero__scrim, .anca-chapter__scrim,
    .adv-stage__scrim, .hp-block__band-scrim, .ctaband__scrim):not(.ancx *) {
  background: rgba(0, 0, 0, 0.32) !important;
}
/* no photo behind a hero: no scrim either, the block stays pure cacao */
.hero__media:not(:has(img, video)) .hero__scrim { display: none !important; }
/* page grounds that carried a coral or cacao radial wash */
:is(.anca-rooms, .adv, .events-list-view, .am-view, .amenities-list-view,
    .venues-list-view, .vdv, .seo-list, .seo-article):not(.ancx *) {
  background: #E5DFD6 !important;
}
/* gradient hairlines, rails and decorative rules */
:is(.hero__orn, .hero__cue, .hero__eyebrow, .chapter__rule, .chapter__dot,
    .colophon__rule, .colophon__emblem, .colophon__tick, .ev-title-rule, .ev-head__rail,
    .cta-band__seam, .ctaband__seam, .adv-cta__seam, .vl-cta__seam, .am-band__seam,
    .index__eyebrow i, .hero__wash, .adv-cta__wash):not(.ancx *) { display: none !important; }
.cta-band__kicker::before, .ctaband__kicker::before, .adv-cta__kicker::before,
.eyebrow::before, .ev-eyebrow::before, .vl-eyebrow::before, .am-eyebrow::before, .anca-eyebrow::before,
.anca-chapter__actions::before { display: none !important; }
/* the legacy bird-on-tile emblems (old palette, gradient, shadow) */
:is(.hero__emblem, .loc-head__emblem, .cta-band__tile, .ctaband__tile, .adv-cta__tile,
    .adv-masthead__tile, .vl-cta__tile, .am-band__tile, .ev-head__tile, .empty__emblem,
    .ev-empty__mark, .cta-band__bird, .cta-band__plinth):not(.ancx *) { display: none !important; }
:is(.loc-head, .cta-band__grid, .ctaband__grid, .adv-cta__grid, .adv-masthead,
    .vl-cta__band, .am-band__grid, .ev-head__wrap):not(.ancx *) {
  grid-template-columns: minmax(0, 1fr) !important;
}
/* CTA bands: a flat cacao block with cream ink */
:is(.cta-band__grid, .ctaband__band, .adv-cta__band, .vl-cta__band, .am-band):not(.ancx *) {
  background: #2A160F !important;
  background-image: none !important;
  color: #E5DFD6 !important;
  border-radius: 0 !important;
}
:is(.cta-band__grid, .ctaband__band, .adv-cta__band, .vl-cta__band, .am-band):not(.ancx *)::before,
:is(.cta-band__grid, .ctaband__band, .adv-cta__band, .vl-cta__band, .am-band):not(.ancx *)::after {
  display: none !important;
}
:is(.cta-band__grid, .ctaband__band, .adv-cta__band, .vl-cta__band, .am-band) :is(h2, p, span, em):not(.ancx *) {
  color: #E5DFD6 !important;
}
/* cards and panels: no border, no lift */
:is(.guide-card, .station, .ev-card, .am-card, .vl-card, .adv-feature, .adv-sib,
    .adv-facts__cell, .adv-highlight, .chan, .ticket, .sib, .seo-list__card,
    .booker, .ledger, .qa, .index__item, .airport, .adv-chapter, .anca-chapter,
    .adv-topbar__tag, .adv-hours__row, .hp-block__media):not(.ancx *) {
  border-color: transparent !important;
  transform: none !important;
}
:is(.guide-card, .station, .ev-card, .am-card, .vl-card, .adv-feature, .adv-sib):not(.ancx *):hover {
  transform: none !important;
}
:is(.guide-card__notch, .ev-card__notch, .guide-card__tab-dot, .ev-card__tab-dot):not(.ancx *) { display: none !important; }
.hp-block__media:not(.ancx *) { background: transparent !important; }

/* chips and tags: a plain label in the accent voice, no pill, no border */
:is(.chip, [class*="__chip"], .qa__tag, .adv-topbar__tag):not(html):not(body):not(.ancx *):not(.anch *) {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: #2A160F !important;
}
:is([class*="__foot"], .colophon, .anca-chapter__actions, .qa-group__head,
    .adv-facts__grid, .ev-empty__wrap):not(html):not(body):not(.ancx *):not(.site-footer *) {
  border-color: transparent !important;
}
/* rooms list: flat grounds, cream ink on the photo hero */
.anca-hero:not(.ancx *) { background: #2A160F !important; }
:is(.anca-chapter__media, .anca-chapter__namelink):not(.ancx *) { background-image: none !important; }
.anca-chapter__media:not(.ancx *) { background-color: #2A160F !important; }
.anca-eyebrow--onhero:not(.ancx *) { color: #E5DFD6 !important; }
/* the rooms list "View residence" / "Quick view" pair: brand buttons */
:is(.anca-link, .anca-quick):not(.ancx *) {
  display: inline-flex !important;
  align-items: center;
  gap: .4em;
  background: #E5DFD6 !important;
  color: #2A160F !important;
  border: 1px solid #EE4300 !important;
  border-radius: 8px !important;
  padding: 4px 14px !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  transition: opacity .15s cubic-bezier(.65, 0, .35, 1) !important;
}
:is(.anca-link, .anca-quick):not(.ancx *):hover { opacity: .8; }
/* amenity feature ledger: key and value in the accent voice */
:is(.adv-feature__k, .adv-feature__v, .adv-feature__v *):not(.ancx *) {
  font-family: var(--site-font-accent, "EB Garamond", Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: .01em !important;
}
/* ledes are body copy: Arimo, cacao */
:is(.adv-lede, .ev-intro, .vl-intro, .am-intro):not(.ancx *) {
  font-family: var(--site-font-body, "Arimo", system-ui, sans-serif) !important;
  font-style: normal !important;
  color: #2A160F !important;
}
.contact-view .hero__lede:not(.ancx *) { color: #E5DFD6 !important; }
/* hero titles sit on a flat cacao block or a scrimmed photo: no text glow */
:is(.hero__title, .hero__lede, .hero__quote-text):not(.ancx *) { text-shadow: none !important; }
/* Casasol has one weight: never synthesise bold on it */
:is(.cta-band__title, .hero__title, .loc-title, .adv-display, .adv-h2):not(.ancx *) { font-weight: 400 !important; }
.hero__quote-text:not(.ancx *) { font-weight: 700 !important; }
/* display numerals and IATA codes: cacao, legible on cream and rose */
:is(.chapter__num, .airport__iata, .adv-chead__idx, .adv-highlight__n, .ev-card__idx):not(.ancx *) { color: #2A160F !important; }

/* ---- 8 · INK ON DARK: CMS blocks on a dark photo band ----------------- */
:is(.hp-block__title--on-dark, .hp-block__body--on-dark):not(.ancx *) { color: #E5DFD6 !important; }
.hp-block__body:not(.ancx *) { color: #2A160F; }
.hp-block__band:not(.ancx *) { background-color: #2A160F !important; }
:is(.hp-block__band .hp-block__title, .hp-block__band .hp-block__body):not(.ancx *) { color: #E5DFD6 !important; }
.hp-block__body--on-dark:not(.ancx *) { color: #E5DFD6 !important; }


/* brand */
/* themes/casasaltas/brand.css — Ancalá global finish layer + BRAND KIT.
 *
 * Loaded once, globally (main.js: import '@theme/active/brand.css'), so these
 * utility classes are available to every component template. Authored to be
 * LOYAL to the Ancalá 2026 graphic brand manual (LAVALENTINA):
 *   · quatrefoil tile texture @15% tone-on-tone (book p38–39)
 *   · oval botanical "stamp" with solid cream plate over dark/photo (p13/17/42)
 *   · oval-stepped + quatrefoil image-mask "framing shapes" (Figure 01/02, p43)
 *   · four-petal rosette fleuron divider/mark (p01/37)
 *   · pill buttons with EB Garamond italic labels (p38/46)
 *   · green/periwinkle "sticker" tile chips dropped onto display type (p36)
 *   · spaced-caps eyebrows (Commuters/Arimo)
 * Colours reference the --anca-* tokens, defined to the brand hexes in
 * tokens.css (section "BRAND-KIT VARIABLES"), which ships on every build.
 * New classes are namespaced `ak-` (Ancalá Kit) to avoid clashing with the
 * per-component scoped `.anca-*` styles.
 */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
::selection {
  background: var(--site-color-accent);
  color: var(--site-color-accent-fg);
}
:focus-visible {
  outline: 2px solid var(--site-color-accent);
  outline-offset: 3px;
}

/* =====================================================================
 *  BRAND-KIT SVG SOURCES  (data-URI masks/patterns, recolour via mask)
 * ===================================================================== */
:root {
  /* Four-petal rosette fleuron — the brand's section glyph / divider mark. */
  --ak-rosette-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23fff' d='M50 50 Q38 27 50 5 Q62 27 50 50 Z M50 50 Q62 73 50 95 Q38 73 50 50 Z M50 50 Q27 38 5 50 Q27 62 50 50 Z M50 50 Q73 62 95 50 Q73 38 50 50 Z'/%3E%3Cpath fill='%23fff' d='M50 39 L61 50 L50 61 L39 50 Z'/%3E%3C/svg%3E");

  /* Quatrefoil / 4-lobe clover — image-mask "framing shape" (Figure 02). */
  --ak-quatrefoil-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='50' cy='30' r='29'/%3E%3Ccircle cx='50' cy='70' r='29'/%3E%3Ccircle cx='30' cy='50' r='29'/%3E%3Ccircle cx='70' cy='50' r='29'/%3E%3Crect x='21' y='21' width='58' height='58' rx='12'/%3E%3C/g%3E%3C/svg%3E");

  /* Oval with stepped shoulders — image-mask "framing shape" (Figure 01). */
  --ak-oval-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cg fill='%23fff'%3E%3Cellipse cx='50' cy='60' rx='40' ry='58'/%3E%3Crect x='2' y='46' width='16' height='28' rx='4'/%3E%3Crect x='82' y='46' width='16' height='28' rx='4'/%3E%3C/g%3E%3C/svg%3E");

  /* Repeating quatrefoil tile motif — tone-on-tone ground texture. */
  --ak-tile-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='50' cy='34' r='12'/%3E%3Ccircle cx='50' cy='66' r='12'/%3E%3Ccircle cx='34' cy='50' r='12'/%3E%3Ccircle cx='66' cy='50' r='12'/%3E%3Crect x='42' y='42' width='16' height='16' rx='4'/%3E%3Ccircle cx='0' cy='0' r='6'/%3E%3Ccircle cx='100' cy='0' r='6'/%3E%3Ccircle cx='0' cy='100' r='6'/%3E%3Ccircle cx='100' cy='100' r='6'/%3E%3C/g%3E%3C/svg%3E");

  --ak-tile-size: 200px;
}

/* =====================================================================
 *  TYPE UTILITIES
 * ===================================================================== */
/* Eyebrow / label: the accent voice (DESIGN_SYSTEM 1.2), not tracked caps. */
.ak-eyebrow {
  font-family: var(--anca-font-accent);
  font-style: italic;
  font-size: var(--anca-step-0);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  margin: 0;
}

/* EB Garamond accent — buttons, nav, labels, prices, room names, quotes.
   DESIGN_SYSTEM.md §1.2: this face is ALWAYS bold (700) + italic — that
   combination *is* the Ancalá voice for interactive / labelling text. */
.ak-accent {
  font-family: var(--anca-font-accent);
  font-style: italic;
  font-weight: 700;
}

/* Casa Sol display headline — UPPERCASE, generous tracking. */
.ak-display {
  font-family: var(--anca-font-display); text-transform: uppercase;
  font-weight: var(--anca-weight-display);
  line-height: var(--anca-lh-tight);
  letter-spacing: 0.005em;
  text-wrap: balance;
}

/* =====================================================================
 *  BUTTON  (DESIGN_SYSTEM.md §7.1 — the canonical "Reservar")
 *  Cream fill, cacao ink, orange/lead-accent hairline border, EB Garamond
 *  700 italic, rounded-lg, hover = opacity. (The MD's "orange" accent role
 *  maps to this theme's lead living accent token, --anca-coral, so colour
 *  stays brand-reactive.)
 * ===================================================================== */
.ak-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.8em 1.9em;
  border-radius: var(--anca-radius-button);
  border: 1px solid var(--anca-coral);
  background: var(--anca-paper);
  color: var(--anca-ink);
  font-family: var(--anca-font-accent);
  font-style: italic;
  font-weight: 700;
  font-size: var(--anca-step-1);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    opacity var(--anca-dur) var(--anca-ease),
    transform var(--anca-dur-fast) var(--anca-ease);
}
.ak-pill:hover { opacity: 0.8; }
.ak-pill:active { transform: scale(0.98); }
/* Inverted variant (MD §7.1): fill cacao / text cream / orange border,
   hover fills the accent. Class name kept `--coral` for template compat. */
.ak-pill--coral {
  background: var(--anca-ink);
  color: var(--anca-paper);
  border-color: var(--anca-coral);
}
.ak-pill--coral:hover { opacity: 1; background: var(--anca-coral); color: var(--anca-on-coral); }
/* Light variant for dark / photo grounds. */
.ak-pill--light {
  background: transparent;
  color: var(--anca-paper);
  border-color: color-mix(in oklab, var(--anca-paper) 60%, transparent);
}
.ak-pill--light:hover { opacity: 1; background: var(--anca-paper); color: var(--anca-ink); }

/* =====================================================================
 *  ROSETTE MARK + DIVIDER  (four-petal fleuron, recolours to currentColor)
 * ===================================================================== */
.ak-rosette {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: var(--ak-rosette-svg) center / contain no-repeat;
  mask: var(--ak-rosette-svg) center / contain no-repeat;
}
.ak-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2vw, 1.6rem);
  /* The rosette fleuron is the mangrove green (brand-aligned), not the
     light-blue/periwinkle variant — applied everywhere via currentColor. */
  color: var(--anca-mangrove);
}
.ak-divider::before,
.ak-divider::after {
  content: none;
}
.ak-divider .ak-rosette { font-size: clamp(1.1rem, 2.4vw, 1.6rem); flex: 0 0 auto; }

/* =====================================================================
 *  IMAGE-MASK FRAMING SHAPES  (book Figure 01 oval-stepped, Figure 02 clover)
 *  Apply to an <img>/<figure>; the mask scales to the element box.
 * ===================================================================== */
.ak-mask-quatrefoil {
  -webkit-mask: var(--ak-quatrefoil-svg) center / 100% 100% no-repeat;
  mask: var(--ak-quatrefoil-svg) center / 100% 100% no-repeat;
}
.ak-mask-oval {
  -webkit-mask: var(--ak-oval-svg) center / 100% 100% no-repeat;
  mask: var(--ak-oval-svg) center / 100% 100% no-repeat;
}

/* =====================================================================
 *  TILE TEXTURE GROUND  (book p38: solid colour + same-family motif @15%)
 *  Put .ak-tile on a section that already owns a solid background; choose a
 *  motif-colour pair. The motif is painted via mask so it recolours cleanly.
 * ===================================================================== */
.ak-tile { position: relative; isolation: isolate; }
.ak-tile > * { position: relative; z-index: 1; }
.ak-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--ak-tile-ink, var(--anca-ink));
  opacity: var(--anca-pattern-opacity, 0.15);
  -webkit-mask: var(--ak-tile-svg) 0 0 / var(--ak-tile-size, 200px) repeat;
  mask: var(--ak-tile-svg) 0 0 / var(--ak-tile-size, 200px) repeat;
}
/* Approved texture pairs (book p39). The section supplies the solid ground;
   these only set the motif ink (and a sensible ground for convenience). */
.ak-tile--marron-crema { background: var(--anca-paper); --ak-tile-ink: var(--anca-ink); }
.ak-tile--naranja-crema { background: var(--anca-paper); --ak-tile-ink: var(--anca-coral); }
.ak-tile--rosa-blanco { background: var(--anca-ivory); --ak-tile-ink: var(--anca-blush); }
.ak-tile--on-cacao { background: var(--anca-ink); --ak-tile-ink: var(--anca-paper); }

/* =====================================================================
 *  OVAL STAMP PLATE  (book p13/17: emblem over dark/photo → solid plate)
 *  A cream filled oval behind an emblem/mark so it stays legible on photos.
 * ===================================================================== */
.ak-stamp-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  padding: clamp(0.8rem, 2vw, 1.4rem);
  background: var(--anca-ivory);
  border-radius: 50% / 42%;
  /* a solid plate is legible on its own: no shadow */
  filter: none;
}
.ak-stamp-plate--ring {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* =====================================================================
 *  STICKER TILE CHIPS  (book p36 — small tile chips dropped onto display type)
 *  Accent-only colours (Verde Palma / Azul Marea), small, layered over text.
 * ===================================================================== */
.ak-chip {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  vertical-align: 0.06em;
  border-radius: 0;
  background: var(--anca-mangrove);
  -webkit-mask: none;
  mask: none;
  /* a faint quatrefoil cut so it reads as a tile, not a plain square */
  background-image: var(--ak-tile-svg);
  background-size: 140% 140%;
  background-position: center;
  background-blend-mode: soft-light;
}
.ak-chip--green { background-color: var(--anca-mangrove); }
.ak-chip--blue { background-color: var(--anca-periwinkle); }
.ak-chip--orange { background-color: var(--anca-coral); }

/* =====================================================================
 *  DASHED "TICKET" BORDER  (book p47/50 — decorative card edge, Azul/Naranja)
 * ===================================================================== */
/* Flat surfaces carry no border (DESIGN_SYSTEM 4); kept as a no-op for markup. */
.ak-ticket {
  border: 0;
  border-radius: var(--anca-radius-card);
}
.ak-ticket--blue { border: 0; }

@media (prefers-reduced-motion: reduce) {
  .ak-pill { transition: none; }
}

/* =====================================================================
 *  CASASOL UPPERCASE  (dot removal)
 *  The Casa Sol display face renders lowercase i / j with dots. Force all
 *  display/heading type to UPPERCASE site-wide so the dots disappear.
 *  Headings are Casasol on every page EXCEPT About + FAQs (deliberately set
 *  to EB Garamond) — those are exempted below so their type is untouched.
 *  This global rule also reaches headings rendered by the shared, non-editable
 *  HomepageBlock component (which per-component scoped CSS cannot).
 * ===================================================================== */
h1, h2, h3, h4, h5, h6,
.booker__title, .stepper__val, .reserve-bar__name, .price-pill b,
.seo-list__card-title, .colophon__mark, .wordmark, .sf-logo__wordmark {
  text-transform: uppercase;
}

/* =====================================================================
 *  CASASOL DECORATIVE-DOT SUPPRESSION  (best effort)
 *  The Casa Sol face draws small decorative dots even on CAPITAL letters
 *  (visible on words like "OUR", "ANCALÁ"). That is a font FEATURE, not a
 *  lowercase tittle, so text-transform can't remove it. Turn off ligatures /
 *  contextual alternates / stylistic sets that may be drawing the dots. If the
 *  dots are baked into the glyph outlines (not a toggleable OpenType feature),
 *  NO CSS can remove them — the only fix then is swapping the display font.
 *  Applied to the same Casasol/display contexts; About + FAQs (EB Garamond)
 *  are exempted so their type is left with default features.
 * ===================================================================== */
h1, h2, h3, h4, h5, h6,
.booker__title, .stepper__val, .reserve-bar__name, .price-pill b,
.seo-list__card-title, .colophon__mark, .wordmark, .sf-logo__wordmark {
  font-variant-ligatures: none;
  font-variant: normal;
  /* "ccmp" 0 FIRST: this rule used to reset font-feature-settings without it,
     which switched the dot substitutions back on for every heading. */
  font-feature-settings: "ccmp" 0, "liga" 0, "dlig" 0, "clig" 0, "calt" 0, "hlig" 0,
    "ss01" 0, "ss02" 0, "ss03" 0, "ss04" 0, "ss05" 0, "ss06" 0, "ss07" 0,
    "ss08" 0, "ss09" 0, "ss10" 0, "dnom" 0, "onum" 0, "titl" 0;
}

/* =====================================================================
 *  NO CTA GLOW  (operator: remove the coral button glow everywhere)
 *  Neutralise the coral-glow shadow token so any `box-shadow:
 *  var(--site-shadow-coral, …)` resolves to an invisible (zero, transparent)
 *  shadow site-wide — no rebuild of the many scoped rules needed.
 * ===================================================================== */
:root { --site-shadow-coral: 0 0 0 0 transparent !important; }

/* =====================================================================
 *  CHECKOUT FORM TITLES / LABELS → EB GARAMOND
 *  The checkout page (form.j17-checkout__form) is a shared, non-editable
 *  default component, so per-component scoped CSS can't reach it — this
 *  global rule sets its section titles and field labels in the EB Garamond
 *  accent face (--site-font-accent).
 * ===================================================================== */
.j17-checkout__form :is(legend, label),
.j17-checkout__form :is(h1, h2, h3, h4, h5, h6),
.j17-checkout__form [class*="title"],
.j17-checkout__form [class*="label"],
.j17-checkout__form [class*="Title"],
.j17-checkout__form [class*="Label"] {
  font-family: var(--site-font-accent) !important;
}

/* User input text fields → Arimo (--site-font-body) */
.j17-checkout__form :is(input, textarea, select, option),
.j17-checkout__form [class*="input"],
.j17-checkout__form [class*="Input"],
.j17-checkout__form [class*="field"],
.j17-checkout__form [class*="Field"] {
  font-family: var(--site-font-body) !important;
}


/* chrome components */

/* =====================================================================
   Tuning surface (law H6). A consumer may set any of these on the element
   it gives the class to; none of them re-hue a locked brand role.
   ===================================================================== */
.site-sound[data-v-6602a8cc] {
  --snd-ink:     var(--site-color-fg, #1a1815);
  --snd-paper:   var(--site-color-bg, #fbf9f5);
  --snd-hairline: color-mix(in srgb, var(--snd-ink) 14%, transparent);
  --snd-h:       38px;
  --snd-radius:  999px;
  --snd-dock-lift: 0px;

  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--snd-ink);
  font-family: var(--site-font-body, inherit);
}

/* ── Floating shell ──────────────────────────────────────────────────
   A hairline plate on frosted paper, not a drop-shadowed bubble. The
   shadow is a single soft lift so it reads as a physical chip over a
   photograph without shouting. */
.site-sound--float[data-v-6602a8cc] {
  position: fixed;
  z-index: 900;
  padding: 3px;
  border-radius: var(--snd-radius);
  background: color-mix(in srgb, var(--snd-paper) 82%, transparent);
  border: 1px solid var(--snd-hairline);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.45);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.22s ease;
}
.site-sound--float[data-v-6602a8cc]:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -14px rgba(0,0,0,0.5);
}

/* Corners. Bottom placements add the measured dock lift, so the control
   sits ABOVE the concierge instead of under it (law E4). */
.site-sound--at-top-right[data-v-6602a8cc]    { top: calc(var(--site-header-h, 64px) + 14px); right: max(14px, env(safe-area-inset-right));
}
.site-sound--at-top-left[data-v-6602a8cc]     { top: calc(var(--site-header-h, 64px) + 14px); left:  max(14px, env(safe-area-inset-left));
}
.site-sound--at-bottom-right[data-v-6602a8cc] { bottom: calc(14px + var(--snd-dock-lift)); right: max(14px, env(safe-area-inset-right));
}
.site-sound--at-bottom-left[data-v-6602a8cc]  { bottom: calc(14px + var(--snd-dock-lift)); left:  max(14px, env(safe-area-inset-left));
}

/* Panels open UPWARD from a bottom-anchored control. */
.site-sound--at-bottom-right .site-sound__panel[data-v-6602a8cc],
.site-sound--at-bottom-left  .site-sound__panel[data-v-6602a8cc],
.site-sound--at-bottom-right .site-sound__spotify[data-v-6602a8cc],
.site-sound--at-bottom-left  .site-sound__spotify[data-v-6602a8cc] { top: auto; bottom: calc(100% + 0.45rem);
}
.site-sound--at-top-left  .site-sound__panel[data-v-6602a8cc],
.site-sound--at-bottom-left .site-sound__panel[data-v-6602a8cc],
.site-sound--at-top-left  .site-sound__spotify[data-v-6602a8cc],
.site-sound--at-bottom-left .site-sound__spotify[data-v-6602a8cc] { right: auto; left: 0;
}

/* ── The button ──────────────────────────────────────────────────── */
.site-sound__btn[data-v-6602a8cc] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--snd-h);
  padding: 0 0.7rem 0 0.6rem;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: inherit;
}
.site-sound__btn[data-v-6602a8cc]:focus-visible { outline: 2px solid currentColor; outline-offset: 3px;
}
.site-sound__glyph[data-v-6602a8cc] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; line-height: 0; flex: none;
  opacity: 0.9;
}

/* ── The word ────────────────────────────────────────────────────────
   Small caps with wide tracking — the idiom hotel chrome already uses for
   nav and eyebrows, so the control reads as part of the design rather than
   a bolted-on widget. */
.site-sound__label[data-v-6602a8cc] {
  display: flex; flex-direction: column; align-items: flex-start;
  min-width: 0; line-height: 1.2; text-align: left;
}
.site-sound__label-main[data-v-6602a8cc] {
  font-size: 0.66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--site-tracking-ui, 0.14em);
  white-space: nowrap;
}
.site-sound__label-sub[data-v-6602a8cc] {
  margin-top: 1px;
  font-size: 0.7rem;
  text-transform: none;
  letter-spacing: var(--site-tracking-body, normal);
  opacity: 0.6;
  max-width: 17ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.site-sound__sr[data-v-6602a8cc] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Player card ─────────────────────────────────────────────────── */
.site-sound--widget[data-v-6602a8cc] { --snd-radius: 12px; padding: 4px;
}
.site-sound--widget .site-sound__btn[data-v-6602a8cc] { gap: 0.6rem; padding: 0.25rem 0.65rem 0.25rem 0.25rem; border-radius: 9px;
}
.site-sound__art[data-v-6602a8cc] {
  flex: none; width: 38px; height: 38px; border-radius: 7px;
  object-fit: cover; display: block;
  box-shadow: inset 0 0 0 1px var(--snd-hairline);
}
.site-sound__cue[data-v-6602a8cc] {
  display: inline-flex; line-height: 0; opacity: 0.45;
  margin-left: 0.1rem;
}
.site-sound__btn:hover .site-sound__cue[data-v-6602a8cc] { opacity: 0.85;
}

/* Icon only. */
.site-sound--mini .site-sound__btn[data-v-6602a8cc] { min-width: var(--snd-h); padding: 0; justify-content: center; gap: 0;
}

/* In the header: no chrome of its own — inherit the bar. */
.site-sound--header[data-v-6602a8cc] { background: none; border: 0; box-shadow: none; backdrop-filter: none; padding: 0;
}
.site-sound--header .site-sound__btn[data-v-6602a8cc] { padding: 0 0.4rem;
}
.site-sound--header .site-sound__label-main[data-v-6602a8cc] { font-size: 0.62rem;
}

/* ── Level meter ─────────────────────────────────────────────────────
   Four bars, visible at rest (law H4) — the animation is enhancement, never
   the only way to read the state. */
.site-sound__eq[data-v-6602a8cc] { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px;
}
.site-sound__eq i[data-v-6602a8cc] { width: 2px; height: 35%; background: currentColor; border-radius: 1px;
}
.site-sound__eq.is-animated i[data-v-6602a8cc] { animation: site-sound-eq-6602a8cc 1s ease-in-out infinite;
}
.site-sound__eq.is-animated i[data-v-6602a8cc]:nth-child(2) { animation-delay: 140ms;
}
.site-sound__eq.is-animated i[data-v-6602a8cc]:nth-child(3) { animation-delay: 300ms;
}
.site-sound__eq.is-animated i[data-v-6602a8cc]:nth-child(4) { animation-delay: 460ms;
}
@keyframes site-sound-eq-6602a8cc {
0%,100% { height: 28%;
}
50% { height: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.site-sound__eq.is-animated i[data-v-6602a8cc] { animation: none; height: 60%;
}
.site-sound--float[data-v-6602a8cc] { transition: none;
}
.site-sound--float[data-v-6602a8cc]:hover { transform: none;
}
}

/* ── Secondary controls + panels ─────────────────────────────────── */
.site-sound__more[data-v-6602a8cc] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 4px; padding: 0;
  background: transparent; border: 0; color: inherit; cursor: pointer;
  opacity: 0.4;
}
.site-sound__more[data-v-6602a8cc]:hover { opacity: 0.9;
}
.site-sound__more[data-v-6602a8cc]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px;
}
.site-sound__panel[data-v-6602a8cc] {
  position: absolute; top: calc(100% + 0.45rem); right: 0;
  min-width: 215px; padding: 0.7rem 0.8rem;
  background: var(--snd-paper);
  color: var(--snd-ink);
  border: 1px solid var(--snd-hairline);
  border-radius: 12px;
  box-shadow: 0 16px 36px -16px rgba(0, 0, 0, 0.45);
  z-index: 1;
}
.site-sound__track[data-v-6602a8cc] { margin: 0; font-size: 0.84rem; line-height: 1.3;
}
.site-sound__artist[data-v-6602a8cc] { margin: 0.12rem 0 0; font-size: 0.73rem; opacity: 0.6;
}
.site-sound__row[data-v-6602a8cc] { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.6rem;
}
.site-sound__vol[data-v-6602a8cc] { flex: 1; min-width: 0; accent-color: currentColor;
}
.site-sound__next[data-v-6602a8cc] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  background: transparent; border: 0; color: inherit; cursor: pointer; opacity: 0.65;
}
.site-sound__next[data-v-6602a8cc]:hover { opacity: 1;
}

/* Spotify's player: collapsed, NOT unmounted — the Iframe API controller IS
   this element, so removing it stops the music. */
.site-sound__spotify[data-v-6602a8cc] {
  position: absolute; top: calc(100% + 0.45rem); right: 0;
  width: min(380px, calc(100vw - 28px));
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--snd-hairline);
  box-shadow: 0 16px 36px -16px rgba(0, 0, 0, 0.45);
  background: var(--snd-paper);
  z-index: 1;
  height: 0; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s ease;
}
.site-sound__spotify.is-open[data-v-6602a8cc] { height: auto; opacity: 1; visibility: visible; pointer-events: auto;
}
.site-sound__frame[data-v-6602a8cc] { display: block; width: 100%; border: 0;
}

/* ── Mobile ─────────────────────────────────────────────────────────
   A 38px cover plus two lines is most of a phone's width, so the card
   sheds its artwork and subtitle and becomes a labelled pill. Tap targets
   clear 44px whatever the layout. */
@media (max-width: 640px) {
.site-sound--at-top-right[data-v-6602a8cc], .site-sound--at-top-left[data-v-6602a8cc] { top: calc(var(--site-header-h, 56px) + 10px);
}
.site-sound--at-top-right[data-v-6602a8cc], .site-sound--at-bottom-right[data-v-6602a8cc] { right: max(10px, env(safe-area-inset-right));
}
.site-sound--at-top-left[data-v-6602a8cc],  .site-sound--at-bottom-left[data-v-6602a8cc]  { left:  max(10px, env(safe-area-inset-left));
}
.site-sound--widget .site-sound__art[data-v-6602a8cc],
  .site-sound__label-sub[data-v-6602a8cc] { display: none;
}
.site-sound--widget[data-v-6602a8cc] { --snd-radius: 999px; padding: 3px;
}
.site-sound--widget .site-sound__btn[data-v-6602a8cc] { padding: 0 0.7rem 0 0.6rem; gap: 0.5rem;
}
.site-sound__btn[data-v-6602a8cc] { min-height: 44px;
}
.site-sound__spotify[data-v-6602a8cc] { width: min(340px, calc(100vw - 20px));
}
}


.pop-hdr-utils[data-v-2737b9f6] {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.35rem, 1vw, 0.75rem);
  color: inherit;
}
.pop-hdr-utils__btn[data-v-2737b9f6] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  min-width: 40px;
  justify-content: center;
  padding: 0 0.5rem;
  color: inherit;
  text-decoration: none;
  border-radius: 999px;
  transition: opacity 0.2s ease;
}
.pop-hdr-utils__btn[data-v-2737b9f6]:hover { opacity: 0.7;
}
.pop-hdr-utils__btn-label[data-v-2737b9f6] {
  /* Icon-only by default; themes can reveal labels via a wrapping class. */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.pop-hdr-utils__lang[data-v-2737b9f6] { position: relative;
}
.pop-hdr-utils__lang-toggle[data-v-2737b9f6] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 40px;
  padding: 0 0.55rem;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
}
.pop-hdr-utils__lang-toggle[data-v-2737b9f6]:hover { opacity: 0.7;
}
.pop-hdr-utils__lang-menu[data-v-2737b9f6] {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  min-width: 8rem;
  background: var(--site-surface, #fff);
  color: var(--site-ink, #111);
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 0.6rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  z-index: 1200;
}
.pop-hdr-utils__lang-item[data-v-2737b9f6] {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.7rem;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 0.4rem;
}
.pop-hdr-utils__lang-item[data-v-2737b9f6]:hover { background: color-mix(in srgb, currentColor 8%, transparent);
}
.pop-hdr-utils__lang-item.is-current[data-v-2737b9f6] { font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
.pop-hdr-utils__btn[data-v-2737b9f6], .pop-hdr-utils__lang-toggle[data-v-2737b9f6] { transition: none;
}
}


.cs[data-v-4729d141] {
  position: relative;
  height: 100dvh;
  min-height: 100dvh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2A160F;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #E5DFD6;
}
.cs__inner[data-v-4729d141] {
  position: relative;
  z-index: 1;
  width: 100%;
  /* clears the fixed 82-90px header */
  padding: 90px 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cs__headline[data-v-4729d141] {
  position: relative;
  margin: 0;
  max-width: min(94vw, 14ch);
  font-family: var(--site-font-display, "AncalaCasasol", "Casasol", Georgia, serif);
  font-weight: 400;
  font-size: 15vw;
  line-height: 0.85;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-feature-settings: "ccmp" 0;
  color: #E5DFD6;
}
@media (min-width: 640px) {
.cs__headline[data-v-4729d141] { font-size: 6rem;
}
}
@media (min-width: 1024px) {
.cs__headline[data-v-4729d141] { font-size: 9rem;
}
}
@media (min-width: 1280px) {
.cs__headline[data-v-4729d141] { font-size: 10.5rem;
}
}
.cs__tile[data-v-4729d141] {
  position: absolute;
  width: 4.7vw;
  height: 4.7vw;
  pointer-events: none;
  user-select: none;
}
@media (min-width: 640px) {
.cs__tile[data-v-4729d141] { width: 0.18em; height: 0.18em;
}
}
.cs__tile--a[data-v-4729d141] { top: 18%; right: 8%;
}
.cs__tile--b[data-v-4729d141] { bottom: 20%; left: 12%;
}
.cs__tile--c[data-v-4729d141] { top: 48%; right: 34%;
}
@media (min-width: 640px) {
.cs__tile--c[data-v-4729d141] { top: 22%;
}
}
.cs__page[data-v-4729d141] {
  margin: clamp(28px, 5vh, 48px) 0 0;
  font-family: var(--site-font-accent, "EB Garamond", Georgia, serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(22px, 2.2vw + 12px, 34px);
  line-height: 1.1;
  color: #EE4300;
}
.cs__line[data-v-4729d141] {
  margin: 14px 0 0;
  max-width: 36ch;
  font-family: var(--site-font-body, "Arimo", system-ui, sans-serif);
  font-size: clamp(15px, 0.4vw + 13px, 18px);
  line-height: 1.5;
  color: #E5DFD6;
}
.cs__actions[data-v-4729d141] {
  margin-top: clamp(24px, 4vh, 36px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.cs__btn[data-v-4729d141] {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 8px;
  border: 1px solid #EE4300;
  background: #E5DFD6;
  color: #2A160F;
  font-family: var(--site-font-accent, "EB Garamond", Georgia, serif);
  font-style: italic;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5556;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s cubic-bezier(0.65, 0, 0.35, 1);
}
.cs__btn[data-v-4729d141]:hover { opacity: 0.8;
}
.cs__btn[data-v-4729d141]:focus-visible { outline: 2px solid #EE4300; outline-offset: 3px;
}


/* ============================================================
   ancala.co header — fixed cacao bar
   ============================================================ */
.anch[data-v-a39e01ca] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: #2a160f;
  color: #e5dfd6;
  font-family: var(--site-font-body, "Arimo", system-ui, sans-serif);
}

/* mobile row (2026-09-03, per Tiger: bar clipped on narrow phones) —
   was a rigid 1fr/1fr/1fr grid: on <390px screens the right group
   (ES · WhatsApp · Reserve) outgrew its third and the Reserve pill ran
   off-screen. Now: flex space-between with the logo ABSOLUTELY dead-
   centred, fluid padding, and a compact tier under 400px. */
.anch__m[data-v-a39e01ca] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px clamp(12px, 4vw, 24px);
  min-height: 82px;
}
.anch__m-left[data-v-a39e01ca] { display: flex; justify-content: flex-start; align-items: center; gap: 12px;
}
.anch__m-center[data-v-a39e01ca] {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.anch__m-center .anch__logolink[data-v-a39e01ca] { pointer-events: auto;
}
.anch__m-right[data-v-a39e01ca] { display: flex; justify-content: flex-end; align-items: center; gap: 12px;
}
@media (max-width: 399px) {
.anch__m-left[data-v-a39e01ca], .anch__m-right[data-v-a39e01ca] { gap: 8px;
}
.anch__m .anch__reserve[data-v-a39e01ca] { font-size: 13px; padding: 7px 12px;
}
.anch__m .anch__logo--m[data-v-a39e01ca] { height: 28px;
}
}
@media (max-width: 355px) {
.anch__m .anch__logo--m[data-v-a39e01ca] { height: 24px;
}
.anch__m .anch__reserve[data-v-a39e01ca] { padding: 6px 10px; font-size: 12px;
}
.anch__m .anch__lang[data-v-a39e01ca] { font-size: 13px;
}
}

/* desktop row: flex between, px-12 py-6 */
.anch__d[data-v-a39e01ca] {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 24px 48px;
}
@media (min-width: 768px) {
.anch__m[data-v-a39e01ca] { display: none;
}
.anch__d[data-v-a39e01ca] { display: flex;
}
}
.anch__d-left[data-v-a39e01ca] { display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.anch__d-right[data-v-a39e01ca] { display: flex; align-items: center; gap: 16px; flex-shrink: 0;
}
.anch__icon[data-v-a39e01ca] {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  color: #e5dfd6;
  display: inline-flex;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.anch__icon[data-v-a39e01ca]:hover { opacity: 0.7;
}
.anch__icon svg[data-v-a39e01ca] { display: block;
}
.anch__logolink[data-v-a39e01ca] { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; display: block;
}
.anch__logo[data-v-a39e01ca] { height: 40px; width: auto; max-width: none; object-fit: contain; display: block;
}
.anch__logo--m[data-v-a39e01ca] { height: 32px;
}
.anch__nav[data-v-a39e01ca] { display: flex; align-items: center; gap: 24px;
}
@media (min-width: 1024px) {
.anch__nav[data-v-a39e01ca] { gap: 36px;
}
}
.anch__navlink[data-v-a39e01ca] {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--site-font-accent, "EB Garamond", Georgia, serif);
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  white-space: nowrap;
  color: #e5dfd6;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 1024px) {
.anch__navlink[data-v-a39e01ca] { font-size: 18px; line-height: 1.5556;
}
}
.anch__navlink[data-v-a39e01ca]:hover { color: #ee4300;
}

/* ---- Casas Altas drop-down (site pages) ---- */
.anch__navdrop[data-v-a39e01ca] { position: relative; display: flex; align-items: center;
}
.anch__navlink--drop[data-v-a39e01ca] { display: inline-flex; align-items: center; gap: 6px;
}
.anch__caret[data-v-a39e01ca] { transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.anch__caret.is-open[data-v-a39e01ca] { transform: rotate(180deg);
}
.anch__drop[data-v-a39e01ca] {
  position: absolute; top: 100%; left: 50%;
  transform: translate(-50%, 10px);
  display: flex; flex-direction: column; align-items: center;
  min-width: 210px;
  padding: 20px 30px 24px;
  background: #2a160f;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition:
    opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0.2s;
}
.anch__drop.is-open[data-v-a39e01ca] {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
  transition:
    opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* hover bridge over the gap between the bar and the panel */
.anch__drop[data-v-a39e01ca]::before { content: ''; position: absolute; left: 0; right: 0; top: -18px; height: 18px;
}
.anch__dropitem[data-v-a39e01ca] {
  appearance: none; background: none; border: 0; padding: 8px 0; cursor: pointer;
  font-family: var(--site-font-accent, "EB Garamond", Georgia, serif);
  font-style: italic; font-weight: 700;
  font-size: 16px; line-height: 1.4;
  white-space: nowrap;
  color: #e5dfd6;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.anch__dropitem[data-v-a39e01ca]:hover { color: #ee4300;
}
.anch__lang[data-v-a39e01ca] {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--site-font-accent, "EB Garamond", Georgia, serif);
  font-style: italic; font-weight: 700;
  font-size: 14px;
  color: #e5dfd6;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.anch__lang--d[data-v-a39e01ca] { font-size: 18px;
}
.anch__lang[data-v-a39e01ca]:hover { opacity: 0.7;
}
.anch__wa[data-v-a39e01ca] { display: inline-flex; color: #e5dfd6; transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.anch__wa svg[data-v-a39e01ca] { width: 20px; height: 20px; display: block;
}
.anch__wa--d svg[data-v-a39e01ca] { width: 24px; height: 24px;
}
.anch__wa[data-v-a39e01ca]:hover { opacity: 0.7;
}
.anch__reserve[data-v-a39e01ca] {
  appearance: none; cursor: pointer;
  font-family: var(--site-font-accent, "EB Garamond", Georgia, serif);
  font-style: italic; font-weight: 700;
  font-size: 14px; line-height: 1.43;
  border-radius: 8px;
  border: 1px solid #ee4300;
  padding: 6px 12px;
  background: #e5dfd6;
  color: #2a160f;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.anch__reserve--d[data-v-a39e01ca] { font-size: 18px; line-height: 1.5556; padding: 6px 16px;
}
.anch__reserve[data-v-a39e01ca]:hover { opacity: 0.8;
}

/* ============================================================
   reserve modal (z-70)
   ============================================================ */
.anch-modal[data-v-a39e01ca] {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; pointer-events: none;
  transition: opacity 300ms ease;
}
.anch-modal.is-open[data-v-a39e01ca] { opacity: 1; pointer-events: auto;
}
.anch-modal__scrim[data-v-a39e01ca] { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5);
}
.anch-modal__panel[data-v-a39e01ca] {
  position: relative;
  width: 100%; max-width: 28rem;
  /* !important: tokens.css flattens [class*="panel"] to 8px otherwise */
  border-radius: 16px !important;
  padding: 40px 24px;
  background: #e5dfd6;
}
@media (min-width: 640px) {
.anch-modal__panel[data-v-a39e01ca] { max-width: 48rem; padding: 48px;
}
}
.anch-modal__close[data-v-a39e01ca] {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  position: absolute; top: 16px; right: 16px;
  color: #2a160f;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.anch-modal__close[data-v-a39e01ca]:hover { opacity: 0.6;
}
.anch-modal__title[data-v-a39e01ca] {
  margin: 0;
  text-align: center;
  font-family: var(--site-font-accent, "EB Garamond", Georgia, serif);
  font-style: italic; font-weight: 700;
  font-size: 24px; line-height: 1.3333;
  color: #2a160f;
}
@media (min-width: 640px) {
.anch-modal__title[data-v-a39e01ca] { font-size: 30px; line-height: 1.2;
}
}
.anch-modal__options[data-v-a39e01ca] {
  margin-top: 32px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 32px;
}
@media (min-width: 640px) {
.anch-modal__options[data-v-a39e01ca] { margin-top: 40px; flex-direction: row; gap: 24px;
}
}
.anch-modal__opt[data-v-a39e01ca] { display: block; transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.anch-modal__opt[data-v-a39e01ca]:hover { opacity: 0.75;
}
.anch-modal__opt img[data-v-a39e01ca] { width: 160px; height: auto; object-fit: contain; display: block;
}
@media (min-width: 640px) {
.anch-modal__opt img[data-v-a39e01ca] { width: 176px;
}
}

/* ============================================================
   fullscreen menu (z-60)
   ============================================================ */
.anch-menu[data-v-a39e01ca] {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  background-color: #2a160f;
  background-size: cover;
  background-position: center;
  opacity: 0; pointer-events: none;
  transition: opacity 400ms ease;
}
.anch-menu.is-open[data-v-a39e01ca] { opacity: 1; pointer-events: auto;
}
.anch-menu__top[data-v-a39e01ca] { display: flex; justify-content: flex-end; padding: 24px;
}
@media (min-width: 640px) {
.anch-menu__top[data-v-a39e01ca] { padding: 24px 48px;
}
}
.anch-menu__nav[data-v-a39e01ca] {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px;
}
@media (min-width: 640px) {
.anch-menu__nav[data-v-a39e01ca] { gap: 28px;
}
}
.anch-menu__item[data-v-a39e01ca] {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--site-font-display, "AncalaCasasol", "Casasol", Georgia, serif);
  font-size: 36px; line-height: 1;
  color: #e5dfd6;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 640px) {
.anch-menu__item[data-v-a39e01ca] { font-size: 60px;
}
}
.anch-menu__item[data-v-a39e01ca]:hover { color: #ee4300;
}
/* each hotel is a group: the label row + an arrow that reveals a small
   drawer of that property's tabs (collapsed by default) */
.anch-menu__group[data-v-a39e01ca] { display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.anch-menu__row[data-v-a39e01ca] { display: inline-flex; align-items: center; gap: 10px;
}
.anch-menu__toggle[data-v-a39e01ca] {
  appearance: none; background: none; border: 0; padding: 4px; cursor: pointer;
  color: #e5dfd6; display: inline-flex; line-height: 0;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.anch-menu__toggle.is-open[data-v-a39e01ca] { transform: rotate(180deg);
}
.anch-menu__toggle[data-v-a39e01ca]:hover { color: #ee4300;
}
.anch-menu__sub[data-v-a39e01ca] {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; margin: 2px 0 6px;
}
.anch-menu__subitem[data-v-a39e01ca] {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--site-font-accent, "EB Garamond", Georgia, serif);
  font-style: italic; font-weight: 700;
  font-size: 17px; line-height: 1.4;
  color: #e5dfd6; opacity: 0.85;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.anch-menu__subitem[data-v-a39e01ca]:hover { color: #ee4300; opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.anch[data-v-a39e01ca] *, .anch-modal[data-v-a39e01ca] *, .anch-menu[data-v-a39e01ca] * { transition-duration: 0.001ms !important;
}
}


.footer-social-icon[data-v-42e147af] {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}


/* Behavioural primitives — themes restyle freely. */
.lang-switcher[data-v-5c7ee371] {
  position: relative;
  display: inline-flex;
}
.lang-switcher__trigger[data-v-5c7ee371] {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.lang-switcher__trigger-glyph[data-v-5c7ee371] {
  line-height: 0;
  display: inline-flex;
}
.lang-switcher__caret[data-v-5c7ee371] {
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.1rem) rotate(45deg);
  transition: transform 0.25s ease;
}
.lang-switcher--open .lang-switcher__caret[data-v-5c7ee371] {
  transform: translateY(0.05rem) rotate(-135deg);
}
.lang-switcher__panel[data-v-5c7ee371] {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 40;
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
  min-width: 12rem;
  font: inherit;
}
.lang-switcher__option[data-v-5c7ee371] {
  cursor: pointer;
}
/* The row's layout lives on the <a> — it's the element that now wraps the
   label/code/mark, and it must fill the row so the whole option is
   clickable rather than just the text. */
.lang-switcher__option-link[data-v-5c7ee371] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  color: inherit;
  text-decoration: none;
  font: inherit;
}
.lang-switcher-fade-enter-active[data-v-5c7ee371],
.lang-switcher-fade-leave-active[data-v-5c7ee371] {
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.lang-switcher-fade-enter-from[data-v-5c7ee371],
.lang-switcher-fade-leave-to[data-v-5c7ee371] {
  opacity: 0;
  transform: translateY(0.25rem);
}


/* ============================================================
   FOOTER — ancala.co parity. Orange field, cream ink, one full screen.
   ============================================================ */
.site-footer[data-v-e029deb4] {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  overflow: hidden;
  background: #EE4300;                 /* brand orange */
  color: #E5DFD6;                      /* brand cream */
  font-family: var(--site-font-body, "Arimo", system-ui, sans-serif);
}
.sf-wrap[data-v-e029deb4] {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* pt-28 px-8; extra bottom room so the fine print clears
     Popstay's fixed concierge bar */
  padding: 7rem 2rem 7.5rem;
}
.sf-cols[data-v-e029deb4] {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;                           /* gap-12 */
  align-items: start;
  align-content: center;
}
.sf-col[data-v-e029deb4] { text-align: center;
}
.sf-col--mark[data-v-e029deb4] { display: flex; justify-content: center;
}
.sf-mark[data-v-e029deb4] { height: 3.5rem; width: auto; max-width: none; object-fit: contain;
}
.sf-follow[data-v-e029deb4] {
  margin: 0;
  font-family: var(--site-font-display, "Casasol", Georgia, serif);
  font-weight: 400;
  line-height: 0.95;
  font-size: 2.25rem;                  /* text-4xl */
}
.sf-list[data-v-e029deb4] { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.sf-mails[data-v-e029deb4] { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.sf-item[data-v-e029deb4] {
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  transition: opacity .25s var(--site-ease, cubic-bezier(.65, 0, .35, 1));
}
.sf-mail[data-v-e029deb4] {
  font-size: 0.875rem;
  color: inherit;
  text-decoration: none;
  transition: opacity .25s var(--site-ease, cubic-bezier(.65, 0, .35, 1));
}
.sf-item[data-v-e029deb4]:hover, .sf-mail[data-v-e029deb4]:hover, .sf-fine[data-v-e029deb4]:hover { opacity: 0.7;
}
.sf-bottom[data-v-e029deb4] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}
.sf-fine[data-v-e029deb4] {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .25s var(--site-ease, cubic-bezier(.65, 0, .35, 1));
}
@media (min-width: 640px) {
.sf-wrap[data-v-e029deb4] { padding-left: 4rem; padding-right: 4rem;
}   /* sm:px-16 */
.sf-mark[data-v-e029deb4] { height: 5rem;
}                              /* sm:h-20 */
.sf-follow[data-v-e029deb4] { font-size: 3rem;
}                         /* sm:text-5xl */
.sf-list[data-v-e029deb4] { margin-top: 2rem;
}
}
@media (min-width: 768px) {
.sf-cols[data-v-e029deb4] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem;
}
.sf-col[data-v-e029deb4] { text-align: left;
}
.sf-col--mark[data-v-e029deb4] { justify-content: flex-start;
}
}
@media (min-width: 1024px) {
.sf-follow[data-v-e029deb4] { font-size: 3.75rem;
}                      /* lg:text-6xl */
}

/* ---- policy modal (Popstay) ---- */
.sf-modal[data-v-e029deb4] {
  position: fixed;
  inset: 0;
  z-index: 1000; /* above the concierge (998–999) */
  display: grid;
  place-items: center;
  padding: var(--site-gutter, clamp(1.25rem, 4vw, 3rem));
}
.sf-modal__scrim[data-v-e029deb4] {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--site-color-fg) 72%, transparent);
  backdrop-filter: blur(3px);
}
.sf-modal__panel[data-v-e029deb4] {
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
  max-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
  background: #E5DFD6;
  color: #2A160F;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
}
.sf-modal__close[data-v-e029deb4] {
  position: absolute;
  top: var(--site-space-3, 16px);
  right: var(--site-space-3, 16px);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #2A160F;
  cursor: pointer;
  transition: background var(--site-duration, 360ms) var(--site-ease, ease),
    color var(--site-duration, 360ms) var(--site-ease, ease),
    transform var(--site-duration, 360ms) var(--site-ease, ease);
}
.sf-modal__close svg[data-v-e029deb4] {
  width: 18px;
  height: 18px;
}
.sf-modal__close[data-v-e029deb4]:focus-visible {
  background: var(--site-color-accent);
  color: var(--site-color-on-accent);
  transform: rotate(90deg);
  outline: none;
}
.sf-modal__tabs[data-v-e029deb4] {
  display: flex;
  gap: var(--site-space-4, 24px);
  flex-wrap: wrap;
  padding: var(--site-space-5, 40px) var(--site-space-5, 40px) 0;
  padding-right: 72px;
  border-bottom: 1px solid var(--site-color-border);
}
.sf-modal__tab[data-v-e029deb4] {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  padding: 0 0 var(--site-space-3, 16px);
  font-family: var(--site-font-body);
  font-size: var(--site-text-cap, 0.72rem);
  font-weight: 700;
  letter-spacing: var(--site-tracking-label, 0.16em);
  text-transform: uppercase;
  color: var(--site-color-muted);
  transition: color 0.3s ease;
}
.sf-modal__tab[data-v-e029deb4]::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--site-color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--site-duration, 360ms) var(--site-ease, ease);
}
.sf-modal__tab.is-active[data-v-e029deb4] {
  color: var(--site-color-fg);
}
.sf-modal__tab.is-active[data-v-e029deb4]::after {
  transform: scaleX(1);
}
.sf-modal__body[data-v-e029deb4] {
  padding: var(--site-space-5, 40px);
  overflow-y: auto;
  font-size: var(--site-text-body, 1rem);
  line-height: var(--site-leading-body, 1.62);
  color: var(--site-color-ink-2);
}
.sf-modal__body p[data-v-e029deb4] {
  margin: 0;
  white-space: pre-line;
}
.sf-modal-leave-active[data-v-e029deb4] {
  transition: opacity 0.45s var(--site-ease, ease);
}
.sf-modal-leave-to[data-v-e029deb4] {
  opacity: 0;
}
.sf-modal-leave-active .sf-modal__panel[data-v-e029deb4] {
  transition: transform 0.45s var(--site-ease, ease);
}
.sf-modal-leave-to .sf-modal__panel[data-v-e029deb4] {
  transform: translateY(16px);
}
.sf-modal[data-v-e029deb4] * {
    transition-duration: 1ms !important;
}


/* Deliberately quiet and token-driven: this band sits directly under a
   bespoke, agent-designed footer on ~every site, so it has to read as
   part of it rather than as a second footer. Inherits the page's font
   and picks up the theme's own surface/ink tokens where they exist.

   A theme that CLAIMS the extras (see composables/useFooterExtras.js)
   embeds this inside its own footer, where standalone-band chrome would
   be wrong. Rather than have the component guess its context, the band
   values are knobs — set them on the element you put the class on:

     .site-footer__extras { --fx-pad: 0; --fx-max-w: none; }

   Custom properties inherit, and Vue applies a parent's class to a child
   component's root, so a theme's scoped rule reaches these. */
.fx[data-v-4cc3b550] {
  padding: var(--fx-pad, 1.5rem 1.25rem);
  background: var(--fx-bg, var(--site-footer-bg, var(--color-surface-alt, transparent)));
  color: var(--fx-ink, var(--site-footer-ink, var(--color-ink, inherit)));
  font-size: var(--fx-size, 0.85rem);
}
.fx__inner[data-v-4cc3b550] {
  max-width: var(--fx-max-w, var(--site-max-w, 1200px));
  margin: var(--fx-inner-margin, 0 auto);
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  align-items: flex-start;
}
.fx__group[data-v-4cc3b550] { min-width: 0;
}
.fx__group--text[data-v-4cc3b550] { flex: 1 1 100%;
}
.fx__heading[data-v-4cc3b550] {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
  margin: 0 0 0.6rem;
}
.fx__links[data-v-4cc3b550] { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem;
}
.fx__link[data-v-4cc3b550] {
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 140ms ease;
}
.fx__link[data-v-4cc3b550]:hover, .fx__link[data-v-4cc3b550]:focus-visible { opacity: 1; text-decoration: underline;
}
.fx__logos[data-v-4cc3b550] {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
}
.fx__logo[data-v-4cc3b550] {
  display: block;
  max-height: 38px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.fx__texts[data-v-4cc3b550] { display: grid; gap: 0.35rem;
}
.fx__text[data-v-4cc3b550] { margin: 0; opacity: 0.8;
}
@media (max-width: 640px) {
.fx__inner[data-v-4cc3b550] { gap: 1.5rem;
}
.fx__group[data-v-4cc3b550] { flex: 1 1 100%;
}
}


/* Deliberately quiet and token-driven: this band sits directly under a
   bespoke, agent-designed footer on ~every site, so it has to read as part of
   it rather than as a second footer. Inherits the page's font and picks up
   the theme's own surface/ink tokens where they exist.

   A theme that CLAIMS the affiliations (composables/useAffiliations.js)
   embeds this inside its own footer, where standalone-band chrome would be
   wrong. Rather than have the component guess its context, the band values
   are knobs — set them on the element you put the class on:

     .site-footer__affiliations { --sa-pad: 0; --sa-max-w: none; }

   Custom properties inherit, and Vue applies a parent's class to a child
   component's root, so a theme's scoped rule reaches these. */
.sa[data-v-aaf444a2] {
  padding: var(--sa-pad, var(--site-space-4, 1.25rem));
  /* ⚠️ `--site-footer-bg` / `--site-footer-ink` DO NOT EXIST in the token
     set — the first version invented them, so every hotel silently got the
     raw fallback. Inherit the footer's own ground instead. */
  background: var(--sa-bg, transparent);
  color: var(--sa-ink, inherit);
}
.sa__inner[data-v-aaf444a2] {
  max-width: var(--sa-max-w, var(--site-max, 1200px));
  margin: var(--sa-inner-margin, 0 auto);
}