/* Colour tokens: the whole page draws from these (the design export's literals were rewritten to var() at the same
   computed values; near-identical greys and two off-golds were merged). Change a colour here, not in the page. */
:root {
  --g611-navy: #1c3557;
  --g611-navy-deep: #16294a;
  --g611-navy-veil: rgba(28,53,87,.97);
  --g611-ink: #26314a;
  --g611-ink-muted: #526078;
  --g611-gold: #8a6b3a;
  --g611-gold-light: #c9a45c;
  --g611-gold-pale: #e9d9b6;
  --g611-gold-wash: #fbf3e6;
  --g611-open: #42644d;
  --g611-pending: #8a6b3a;
  --g611-error: #7a2e1e;
  --g611-error-line: #b3543f;
  --g611-white: #fff;
  --g611-ivory: #fcfdfe;
  --g611-surface-1: #f3f6fa;
  --g611-surface-2: #eef2f7;
  --g611-surface-3: #e6ecf4;
  --g611-line-soft: #e9ecf1;
  --g611-line: #dde3ec;
  --g611-line-strong: #c9cfd8;
  --g611-mist: #c9d2df;
  --g611-on-navy-soft: #e9ecf1;
  --g611-header-bg: rgba(252,253,254,.96);
  --g611-ivory-40: rgba(252,253,254,.4);
  --g611-ivory-50: rgba(252,253,254,.5);
  --g611-white-12: rgba(255,255,255,.12);
  --g611-white-35: rgba(255,255,255,.35);
  --g611-scrim: rgba(12,20,38,.55);
  --g611-scrim-strong: rgba(12, 20, 38, .95);
  /* Elevation: one cue for a white card on a tinted band, a soft navy shadow with a little offset; no hairline under it. */
  --g611-shadow-card: 0 1px 3px rgba(28,53,87,.10), 0 12px 32px -10px rgba(28,53,87,.28);
  --g611-shadow-card-raised: 0 2px 5px rgba(28,53,87,.10), 0 20px 44px -12px rgba(28,53,87,.34);
  /* Corners (the founder, 2026-10-12): boxed surfaces (cards, photo frames, form boxes) and boxed controls (filled or
     outlined buttons, fields). */
  --g611-radius: 16px;
  --g611-radius-sm: 10px;
}

/* Gallery 611 preview, v2 page (issue #86). Rules that must exist before the runtime compiles the
   template, or that override the export's inline styles. Inline styles win on specificity, so the
   overrides below carry !important on purpose. */
x-dc { display: none; }
/* The loading screen: the header bar and the hero headline, shown only when the runtime is late. A normal load removes
   it within a second, before it appears; a slow phone sees it after 1 s instead of a blank page; without JavaScript a
   <noscript> style in the head shows it at once (the founder and the 2026-10-12 critique: no flash of fallback text).
   Padding, not margin: a top margin here collapses through <body>, and the body then jumps up when the page compiles (a 0.1 layout shift on phones). */
.load-help { min-height: 100vh; background: var(--g611-ivory); color: var(--g611-navy); font: 400 1.0625rem/1.6 'Jost', sans-serif; visibility: hidden; animation: g611-load-help .3s ease-out 1s forwards; }
@keyframes g611-load-help { from { visibility: visible; opacity: 0; } to { visibility: visible; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .load-help { animation-duration: 1ms; } }
.load-help-bar { height: 70px; box-sizing: border-box; display: flex; align-items: center; padding: 0 max(clamp(20px, 5vw, 56px), calc((100% - 1240px) / 2)); background: var(--g611-header-bg); border-bottom: 1px solid var(--g611-line-soft); }
.load-help-bar img { display: block; width: 59px; height: 48px; }
.load-help-main { max-width: 1240px; margin: 0 auto; padding: clamp(32px, 7vw, 96px) clamp(20px, 5vw, 56px); }
.load-help h1 { margin: 0 0 18px; max-width: 11em; font: 500 clamp(2.75rem, 5vw, 4.25rem)/1.02 'Cormorant Garamond', serif; letter-spacing: -.015em; text-wrap: balance; }
.load-help span[lang="es"], html[lang="es"] .load-help span[lang="en"] { display: none; }
html[lang="es"] .load-help span[lang="es"] { display: inline; }
.load-help p { margin: 0 0 10px; max-width: 40em; color: var(--g611-ink); }
.load-help a { color: var(--g611-navy); text-decoration: underline; text-decoration-color: var(--g611-gold); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--g611-gold) !important; outline-offset: 3px !important; }

/* Fit the closed header by wrapping, never by hiding overflow; controls retain
   at least 44px targets. In landscape only the open menu scrolls inside the
   viewport while the page underneath remains locked. */
html.g611-menu-open header { max-height: 100vh; max-height: 100dvh; overflow-y: auto; }
header > div:first-child { height: auto !important; min-height: 70px; box-sizing: border-box; padding-top: 10px !important; padding-bottom: 10px !important; flex-wrap: wrap; row-gap: 8px !important; }
header > div:first-child > div:last-child { max-width: 100%; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.g611-nav { min-width: 0; flex-wrap: wrap; }
.g611-nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; text-align: center; }
.g611-cta, .g611-action, .g611-ask, .g611-custom-link, .g611-submit, .g611-book-submit { max-width: 100%; min-width: 0; height: auto !important; min-height: 50px; padding-top: 10px !important; padding-bottom: 10px !important; white-space: normal !important; text-align: center; overflow-wrap: anywhere; }
.g611-cta > span { min-width: 0; }
.g611-fact, .g611-err a { max-width: 100%; white-space: normal !important; }
/* Desktop header: three columns with equal outer tracks, so the nav is centred on the page rather than
   between a 59px logo and a 277px right-hand block (space-between put it 107px left of centre). */
@media (min-width: 1000px) {
  header > div:first-child { display: grid !important; grid-template-columns: minmax(0, 1fr) fit-content(55%) minmax(0, 1fr); }
  header > div:first-child > a:first-child { justify-self: start; }
  header > div:first-child > .g611-nav { justify-self: center; }
  header > div:first-child > div:last-child { justify-self: end; }
}
@media (max-width: 999px) {
  .g611-menu-panel a { min-height: 44px; display: flex; align-items: center; }
}
/* Three navigation items (Contact stays in the phone menu), including the full Spanish FAQ label, fit between equal side columns.
   From 1000px to 1199px trim spacing in the controls, preserving their 44px targets. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .g611-cta .g611-d { display: none; }
  .g611-cta .g611-m { display: inline-flex; }
  header > div:first-child { gap: 16px !important; }
  .g611-lang { margin-right: 0 !important; }
  .g611-cta { padding: 0 8px !important; }
  /* The longer labels need equal space beside the nav. */
  .g611-nav { gap: 16px !important; }
}
/* With three nav items, Spanish keeps its short button label only until 1300px; "Consultar disponibilidad" fits beside the
   centred nav from about 1270px (measured 2026-10-12, both engines). */
@media (min-width: 1200px) and (max-width: 1299px) {
  html[lang="es"] .g611-cta .g611-d { display: none; }
  html[lang="es"] .g611-cta .g611-m { display: inline-flex; }
}
@media (max-width: 359px) {
  /* Below 360px the header language switch moves into the expanded menu (it is also in the footer). */
  .g611-lang { display: none !important; }
}
@media (max-width: 479px) {
  /* The header keeps the page's own gutter here too (the founder, 2026-10-12: aligned with the content), so the gaps are tighter. */
  header > div:first-child { gap: 4px !important; }
  header > div:first-child > div:last-child { gap: 4px !important; }
  .g611-lang { margin-right: 0 !important; }
  /* Narrow enough for the short date-request label beside the language switch from 360px, in both languages, inside the page's gutters. */
  .g611-cta { padding: 0 8px !important; }
  .g611-menu { padding: 10px 0 !important; }
  .g611-menu-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
html.g611-menu-open { overflow: hidden; }

/* Native dialog lightbox. */
dialog.g611-lightbox { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--g611-scrim-strong); color: var(--g611-ivory); }
dialog.g611-lightbox:not([open]) { display: none; }
dialog.g611-lightbox::backdrop { background: transparent; }
html.g611-lb-open { overflow: hidden; }

/* Design pass (critique 2026-09-17) and the native inquiry form. */
/* The FAQ and date-request intros stay in view beside their taller column on desktop. */
@media (min-width: 900px) { .g611-faq-intro, .g611-book-intro { position: sticky; top: calc(var(--g611-header-offset, 80px) + 16px); } }
@media (max-width: 699px) { .g611-submit, .g611-book-submit { width: 100%; } }
.g611-submit.is-sending, .g611-book-submit.is-sending { opacity: .72; cursor: progress; }
#main-content:focus { outline: none; }
.g611-lift { box-shadow: var(--g611-shadow-card); }
.g611-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.g611-form input:focus-visible, .g611-form select:focus-visible, .g611-form textarea:focus-visible,
.g611-book-form input:focus-visible, .g611-book-form select:focus-visible, .g611-book-form textarea:focus-visible { border-color: var(--g611-navy) !important; }
.g611-fact-dot::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--g611-gold); margin: 0 10px 3px 0; vertical-align: middle; }
/* Stacked facts on a narrow phone take no separator dot. After the dot's own rule, so it wins at equal specificity (critique 2026-10-12). */
@media (max-width: 399px) { .g611-fact-dot::before { display: none; } .g611-hero-facts { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; } }
.g611-fact { display: inline-flex; align-items: center; }
.g611-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html[lang="es"] h1 { font-weight: 600 !important; font-size: clamp(2.5rem, 4.4vw, 3.625rem) !important; line-height: 1.1 !important; }
h1, h2, h3 { overflow-wrap: anywhere; }
.g611-from-sat, .g611-pk-price, .g611-from-note, .g611-pk-note, .g611-addon-price, .g611-brunch-price { font-variant-numeric: lining-nums tabular-nums; }
@media (min-width: 360px) { #mobile-nav [role="group"] { display: none !important; } }

/* Pricing details card (Option A, the founder's choice of 2026-10-12): Weekday savings and Booking & payment in one card of three
   tiers, top to bottom: prices and payment side by side, the fees and rules, then the custom-event invitation. One stacked column
   below 900px, in the same order. */
.g611-details { margin-top: 20px; background: var(--g611-white); border: 1px solid transparent; }
.g611-details-tier { padding: 24px 26px; }
.g611-details-tier + .g611-details-tier { border-top: 1px solid var(--g611-line-soft); }
.g611-details-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.g611-eyebrow { margin: 0 0 6px; font: 500 .75rem/1.5 'Jost', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--g611-gold); }
.g611-details-title { margin: 0 0 12px; font: 500 1.625rem/1.15 'Cormorant Garamond', serif; color: var(--g611-navy); text-wrap: balance; }
/* The holiday rule is a callout: a gold rule and a bold lead as well as a tinted ground, so it does not rely on colour. */
.g611-callout { margin: 14px 0 0; padding: 10px 14px; background: var(--g611-surface-2); border-left: 3px solid var(--g611-gold); font: 400 .9375rem/1.5 'Jost', sans-serif; color: var(--g611-ink); text-wrap: pretty; }
.g611-callout-lead { font-weight: 500; color: var(--g611-navy); }
/* The payment schedule: a real ordered list with the number drawn as a badge and a thin rule joining the steps. */
.g611-steps { list-style: none; margin: 0; padding: 0; }
.g611-steps li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; padding: 10px 0 14px; }
.g611-steps li::before { content: ""; position: absolute; left: 15px; top: 40px; bottom: -10px; border-left: 1px solid var(--g611-gold-pale); }
.g611-steps li:last-child::before { display: none; }
.g611-step-n { position: relative; z-index: 1; box-sizing: border-box; width: 30px; height: 30px; border: 1px solid var(--g611-gold); background: var(--g611-white); color: var(--g611-gold); font: 500 .8125rem/28px 'Jost', sans-serif; text-align: center; }
.g611-step-k { font: 500 .9375rem/1.45 'Jost', sans-serif; color: var(--g611-navy); }
.g611-step-when { font-weight: 400; color: var(--g611-ink-muted); }
.g611-step-v { margin: 2px 0 0; font: 400 .9375rem/1.5 'Jost', sans-serif; color: var(--g611-ink); text-wrap: pretty; }
.g611-later { margin: 4px 0 0; padding: 10px 14px; border-top: 1px solid var(--g611-line-soft); font: 400 .9375rem/1.5 'Jost', sans-serif; color: var(--g611-ink); text-wrap: pretty; }
.g611-later-k { font-weight: 500; color: var(--g611-navy); }
.g611-details-fees .g611-eyebrow { margin-bottom: 10px; }
.g611-fees { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; margin: 0; }
.g611-fees > div { padding: 10px 0; border-top: 1px solid var(--g611-line-soft); }
.g611-fees > div:first-child { border-top: 0; }
.g611-fees dt { font: 500 .875rem/1.45 'Jost', sans-serif; color: var(--g611-navy); }
.g611-fees dd { margin: 2px 0 0; font: 400 .9375rem/1.5 'Jost', sans-serif; color: var(--g611-ink); text-wrap: pretty; }
.g611-fee-amt { font-weight: 500; color: var(--g611-navy); }
/* surface-1, not surface-2: the gold eyebrow needs 4.5:1 against its ground (axe), and gold on surface-2 is 4.4:1. */
.g611-details-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; background: var(--g611-surface-1); }
.g611-details-cta .g611-eyebrow { margin-bottom: 4px; }
.g611-details-cta p { margin: 0; max-width: 44em; font: 400 .9375rem/1.5 'Jost', sans-serif; color: var(--g611-ink); text-wrap: pretty; }
.g611-custom-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; padding: 0 24px; background: var(--g611-navy); border: 1px solid var(--g611-navy); color: var(--g611-white); font: 500 .9375rem/1.2 'Jost', sans-serif; }
.g611-custom-link:hover { background: var(--g611-navy-deep); color: var(--g611-white); }
@media (min-width: 700px) {
  .g611-fees { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g611-fees > div:nth-child(2) { border-top: 0; }
}
@media (min-width: 900px) {
  .g611-details-tier { padding: 28px 32px; }
  .g611-details-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
  .g611-details-pay { border-left: 1px solid var(--g611-line-soft); padding-left: 56px; margin-left: -28px; }
  .g611-details-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
}
@media (min-width: 1100px) {
  .g611-fees { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .g611-fees > div { padding-top: 0; border-top: 0; }
  .g611-fees > div + div { border-left: 1px solid var(--g611-line-soft); padding-left: 24px; }
}

/* Rounded corners (the founder, 2026-10-12: "a touch more", then "one more touch"). Boxed surfaces take --g611-radius and
   boxed controls --g611-radius-sm, as a squircle where the browser supports corner-shape (elsewhere a plain round corner).
   The package cards, and the pricing card's holiday callout and step badges, sit inside a rounded card, so they take the
   smaller radius; the pricing card clips its tinted last tier to its own corner. Underlined and text controls stay
   square: the language switches (header, phone menu, footer), the nav links and the text links, as the founder asked.
   Focus outlines follow the radius, and a radius changes no box size. */
.g611-hero-photo, article.g611-card, .g611-lift, .g611-lb-img { border-radius: var(--g611-radius); corner-shape: squircle; }
.g611-details { overflow: hidden; }
.g611-cards > div, .g611-callout, .g611-step-n, .g611-cta, .g611-action, .g611-ask, .g611-book-room, .g611-room-toggle, .g611-custom-link, .g611-submit, .g611-book-submit, .g611-lb-close,
.g611-form input, .g611-form select, .g611-form textarea, .g611-book-form input, .g611-book-form select, .g611-book-form textarea { border-radius: var(--g611-radius-sm); corner-shape: squircle; }

/* Hero and pricing fit (an audit of the live page, verified by the owning session, 2026-10-12).
   1. The hero buttons share their row equally but never shrink below their own label; when both cannot keep their label on
      one line they wrap and each takes the full row (Spanish wrapped inside each button from 400 to 480px). */
.g611-hero-actions > .g611-action { flex: 1 1 0; min-width: fit-content; }
/* 2. Below 900px the pricing card's button takes its own full row with a little less side padding, so "Consultar
      disponibilidad →" stays on one line at 320px. */
@media (max-width: 899px) { .g611-custom-link { align-self: stretch; padding: 0 14px; } }
/* 3. The facts' separator dot sits in the gap between them, and the list clips whatever lies left of its own edge, so a dot
      never starts a wrapped line (it did at 414px in Spanish). The narrow-phone rule above still stacks them. */
.g611-hero-facts { overflow: hidden; column-gap: 23px !important; }
.g611-fact-dot { position: relative; }
.g611-fact-dot::before { position: absolute; left: -13px; top: calc(50% - 1.5px); margin: 0; }
/* 4. On tablets the stacked hero photo stops at 320px (cropped from the centre), so the headline and both buttons fit the
      first screen at 768 x 800; it keeps the full content width (a grid item with an aspect ratio would otherwise narrow
      to keep 4:3). The desktop split from 900px is unchanged. */
@media (min-width: 600px) and (max-width: 899px) { .g611-hero-photo { --g611-hero-photo-max: 320px; width: 100%; } }