/* ============================================================
   Grandela Surf Club — the redesign system (v1)
   Source of truth: design-references/DESIGN-SYSTEM.md

   Loaded AFTER main.css, on pages whose <body> carries `gs`. main.css
   still serves the consent banner, the language popover, the reviews
   list and the gallery dots; this file owns everything else on a
   migrated page.

   EVERY class and EVERY custom property here is prefixed gs-. That is
   not a taste: `.hero` is a hook i18n.js injects a language switcher
   into, `.step` is the camps wizard, `.link` and `.tag` are in thirty
   files, and `--wrap` already exists. An unprefixed name on a migrated
   page is a collision waiting for the next person.
   ============================================================ */

/* ---------- fonts ----------
   Sofia Sans Extra Condensed (Lettersoup; OFL), self-hosted because the
   CSP is font-src 'self'. Variable, one file per script. The unicode
   ranges are Google's own for these two subsets, copied verbatim. The
   file names carry a version: /assets/* is served `immutable`. */
@font-face {
  font-family: "Sofia Sans XCond";
  src: url("../fonts/sofia-sans-xcond-latin.v1.woff2") format("woff2");
  font-weight: 1 1000; font-style: normal; font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sofia Sans XCond";
  src: url("../fonts/sofia-sans-xcond-cyrillic.v1.woff2") format("woff2");
  font-weight: 1 1000; font-style: normal; font-display: optional;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* NO LAYOUT SHIFT, BY CONSTRUCTION. `font-display: optional` means the face
   is used if it is there for the first paint (it is preloaded, so on a decent
   connection it is) and otherwise NOT swapped in later on that page view —
   the next page has it from cache. A late swap was measured at up to 207px of
   jump on this page.

   The price of that choice is that on a slow connection (measured: 4 Mbps
   and below, cold cache) the whole visit is drawn in the stand-in. So the
   stand-in has to be good, not merely the same width. It is a condensed bold
   face the device already has, scaled so the headings wrap where Sofia would
   wrap them (design-references/_tools/font-shift.mjs, GS_LOCAL=<face>):

     Helvetica Neue Condensed Bold (iOS, macOS)   80%  → worst difference 24px
     Arial Narrow Bold (Windows, macOS)           76%  → worst difference 56px
     Roboto Condensed Bold (Android)              76%  → NOT measured: the face
                                                         is not on this machine
     Arial Bold (anything else)                   62%  → worst 52px, but a 16px
                                                         label is drawn at 10px

   Each is its own family so that a missing local() falls through to the next. */
@font-face {
  font-family: "GS Display Fallback";
  src: local("HelveticaNeue-CondensedBold"), local("Helvetica Neue Condensed Bold");
  font-weight: 1 1000; font-style: normal;
  size-adjust: 80%;
}
@font-face {
  font-family: "GS Display Fallback R";
  src: local("RobotoCondensed-Bold"), local("Roboto Condensed Bold");
  font-weight: 1 1000; font-style: normal;
  size-adjust: 76%;
}
@font-face {
  font-family: "GS Display Fallback N";
  src: local("ArialNarrow-Bold"), local("Arial Narrow Bold");
  font-weight: 1 1000; font-style: normal;
  size-adjust: 76%;
}
@font-face {
  font-family: "GS Display Fallback A";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Roboto Bold"), local("Roboto-Bold");
  font-weight: 1 1000; font-style: normal;
  size-adjust: 62%;
}

:root {
  /* colour — the brand and the place */
  --gs-areia: #F0E3C6;
  --gs-oliva: #696944;
  --gs-oliva-2: #575738;   /* the ground a photograph loads onto, on Oliva */
  --gs-mar: #0D3C44;
  --gs-mar-2: #1A4750;     /* the dock, where a translucent plate is not drawn */
  --gs-agua: #9CCAD4;
  --gs-espuma: #FAF6EC;
  --gs-rocha: #22271E;
  --gs-rocha-2: #4C5244;
  /* state: functional, never a ground */
  --gs-ok: #2E6B4F;
  --gs-atencao: #8A5A0B;
  --gs-perigo: #A5341F;
  /* the accent: the CTA, and nothing else. Fill + ink on light grounds,
     and the pair it swaps to on deep water and on photographs. */
  --gs-acento: #0D3C44;
  --gs-acento-tinta: #FAF6EC;
  --gs-acento-inv: #EDB83A;
  --gs-acento-inv-tinta: #22271E;
  /* lines: hex first, for engines without color-mix */
  --gs-linha: #D6CCB3;
  --gs-linha: color-mix(in srgb, var(--gs-rocha) 14%, transparent);
  --gs-linha-clara: #4A6B70;
  --gs-linha-clara: color-mix(in srgb, var(--gs-espuma) 26%, transparent);
  --gs-suave-escuro: #D5DBD3;   /* muted text on Mar and Oliva */

  /* type — two voices, and these sizes only */
  --gs-f-display: "Sofia Sans XCond", "GS Display Fallback", "GS Display Fallback R", "GS Display Fallback N", "GS Display Fallback A", sans-serif;
  --gs-f-text: "Newsreader", "PT Serif", Georgia, serif;
  /* the display voice */
  --gs-fs-display: clamp(2.25rem, 17.4vw, 5rem);
  --gs-fs-title: clamp(2.75rem, 1rem + 7vw, 8rem);
  --gs-fs-title-sm: clamp(2.5rem, 1.4rem + 4.4vw, 5rem);   /* a title in a narrow column */
  --gs-fs-heading: clamp(1.75rem, 1.45rem + 1vw, 2.25rem);
  --gs-fs-figure: clamp(3rem, 2.2rem + 2.6vw, 4.25rem);
  --gs-fs-figure-sm: 2.25rem;
  --gs-fs-ui-lg: 1.25rem;
  --gs-fs-ui: 1.0625rem;
  --gs-fs-label: 1rem;
  --gs-fs-tag: .875rem;
  /* the text voice */
  --gs-fs-lede: clamp(1.1875rem, 1.05rem + .6vw, 1.5rem);
  --gs-fs-quote: clamp(1.5rem, 1.05rem + 1.4vw, 2.125rem);   /* the one review set large */
  --gs-fs-sub-lg: 1.5rem;
  --gs-fs-sub: 1.25rem;
  --gs-fs-body: 1rem;
  --gs-fs-small: .9375rem;
  --gs-fs-caption: .8125rem;

  /* space (4-based), shape, depth */
  --gs-s-1: .25rem; --gs-s-2: .5rem; --gs-s-3: .75rem; --gs-s-4: 1rem; --gs-s-5: 1.5rem;
  --gs-s-6: 2rem; --gs-s-7: 3rem; --gs-s-8: 4rem; --gs-s-9: 6rem; --gs-s-10: 8rem;
  --gs-pad-section: clamp(3.5rem, 2.6rem + 5vw, 8rem);
  --gs-gutter: clamp(1.25rem, 5vw, 3rem);
  --gs-wrap: 76rem;
  --gs-r-photo: clamp(1.25rem, .9rem + 1.4vw, 2.25rem);
  --gs-r-card: 1.125rem;
  --gs-r-sm: .5rem;
  --gs-r-ctl: 999px;
  --gs-sombra: 0 1.25rem 2.5rem -1.25rem rgb(13 60 68 / .55);

  /* how much of the bottom of the screen the consent banner is holding.
     0 unless this is a first visit — see the inline script in <head>. */
  --gs-consent-h: 0px;
  --gs-bar-h: 4rem;   /* system.js replaces this with the bar's measured height; the bar itself must not read it */
}
/* svh inside a token: without support the whole declaration would be
   invalid and the H1 would fall to body size, so it is opt-in. */
@supports (height: 1svh) {
  :root { --gs-fs-display: clamp(2.25rem, min(17.4vw, calc((100svh - var(--gs-consent-h)) * .105)), 5rem); }
}
@media (min-width: 44rem) {
  :root { --gs-fs-display: clamp(5rem, 8.3vw, 12rem); }
}
/* A first visit: the banner is coming (consent.js shows it at 900 ms), so
   its room is held from the first paint and the hero does not jump. The
   estimate is replaced by the real height the moment consent.js measures it. */
html.gs-first-visit { --gs-consent-h: var(--gs-cookie-real, var(--cookie-h, 14.5rem)); }

/* ---------- base ---------- */
body.gs {
  background: var(--gs-areia);
  color: var(--gs-rocha);
  font: 400 var(--gs-fs-body)/1.55 var(--gs-f-text);
}
/* no radius of its own: the ring follows the shape of what it is on (a pill stays a pill) */
body.gs :focus-visible { outline: 3px solid var(--gs-mar); outline-offset: 2px; }
body.gs :is(.gs-on-mar, .gs-on-oliva, .gs-dock, .gs-menu, .gs-bar, .gs-card.is-featured, .cookie-bar) :focus-visible { outline-color: var(--gs-espuma); }
body.gs :is(.rv-item, .gs-card:not(.is-featured)) :focus-visible { outline-color: var(--gs-mar); }
.gs-wrap { max-width: var(--gs-wrap); margin-inline: auto; padding-inline: var(--gs-gutter); }
.gs-band { padding-block: var(--gs-pad-section); position: relative; }
.gs-on-areia { background: var(--gs-areia); }
.gs-on-espuma { background: var(--gs-espuma); }
.gs-on-oliva { background: var(--gs-oliva); color: var(--gs-espuma); }
.gs-on-mar { background: var(--gs-mar); color: var(--gs-espuma); }
.gs-m-only { display: none; }
.gs-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* main.js stripes an edge fade onto anything that scrolls sideways. On a
   strip of cards it turns the card that is peeking in half transparent; the
   peeking card and the dots already say "this swipes". */
body.gs .gallery-scroll { -webkit-mask-image: none; mask-image: none; }

/* ---------- type roles ---------- */
.gs-display, .gs-title, .gs-heading, .gs-figure {
  margin: 0; font-family: var(--gs-f-display); font-weight: 900; text-transform: uppercase;
  overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; text-wrap: balance; min-width: 0;
}
.gs-display { font-size: var(--gs-fs-display); line-height: .86; }
.gs-title { font-size: var(--gs-fs-title); line-height: .88; }
.gs-on-oliva .gs-title, .gs-on-mar .gs-title { color: var(--gs-areia); }
.gs-heading { font-size: var(--gs-fs-heading); line-height: .95; font-weight: 800; }
.gs-figure { font-size: var(--gs-fs-figure); line-height: .82; }
.gs-lede { margin: 0; font: italic 400 var(--gs-fs-lede)/1.35 var(--gs-f-text); max-width: 46ch; }
.gs-small { font-size: var(--gs-fs-small); line-height: 1.5; }
.gs-caption { font-size: var(--gs-fs-caption); line-height: 1.4; }
.gs-note { margin: var(--gs-s-3) 0 0; max-width: 62ch; font-size: var(--gs-fs-small); line-height: 1.5; }
.gs-muted { color: var(--gs-rocha-2); }
/* on Oliva only Espuma clears 4.5:1 for running text (Areia: 4.46; the muted grey: 4.02).
   Areia stays for the titles, which are large. */
.gs-on-mar .gs-muted { color: var(--gs-suave-escuro); }
.gs-on-oliva .gs-muted { color: var(--gs-espuma); }
.gs-head { display: grid; gap: var(--gs-s-4); margin-bottom: var(--gs-s-7); }
.gs-head > * { min-width: 0; }
/* a title with more than a line of introduction: side by side, not stacked */
.gs-head-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gs-s-4) clamp(2rem, 6vw, 6rem); align-items: end; }
.gs-head-split .gs-lede { font: 500 var(--gs-fs-sub-lg)/1.25 var(--gs-f-text); color: inherit; }
.gs-head-split .gs-note { font-size: var(--gs-fs-body); }
.gs-head-mid .gs-lede { font: 500 var(--gs-fs-sub-lg)/1.25 var(--gs-f-text); }

/* ---------- actions ---------- */
.gs-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 3.25rem; padding: .55em 1.5em .4em; border: 0; border-radius: var(--gs-r-ctl);
  background: var(--gs-acento); color: var(--gs-acento-tinta);
  font: 800 var(--gs-fs-ui)/1 var(--gs-f-display); letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.gs-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.gs-cta:active { transform: translateY(0); }
.gs-cta svg, .gs-link svg { width: 1.15em; height: 1.15em; flex: none; margin-top: -.15em; }
.gs-cta-wide { width: 100%; }
.gs-cta-sm { min-height: 2.875rem; font-size: var(--gs-fs-label); padding-inline: 1.15em; }
/* on deep water, on photographs and inside the featured card the accent
   takes its inverted pair */
.gs-on-mar .gs-cta, .gs-dock .gs-cta, .gs-menu .gs-cta, .gs-bar .gs-cta,
.gs-card.is-featured .gs-cta, .gs-card-media .gs-tag-acento {
  background: var(--gs-acento-inv); color: var(--gs-acento-inv-tinta);
}
.gs-link {
  display: inline-flex; align-items: center; gap: .5em; min-height: 2.75rem; color: inherit;
  font: 700 var(--gs-fs-ui)/1 var(--gs-f-display); letter-spacing: .05em; text-transform: uppercase;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .28em;
}
.gs-link:hover { text-decoration-thickness: 3px; }
.gs-chip {
  display: inline-flex; align-items: center; min-height: 1.875rem; padding: .1em .8em; border-radius: var(--gs-r-ctl);
  background: var(--gs-espuma); color: var(--gs-rocha); font: 500 var(--gs-fs-small)/1.1 var(--gs-f-text);
}
.gs-tag {
  display: inline-flex; align-items: center; min-height: 1.75rem; padding: .15em .7em 0; border-radius: var(--gs-r-ctl);
  background: var(--gs-rocha); color: var(--gs-espuma);
  font: 700 var(--gs-fs-tag)/1 var(--gs-f-display); letter-spacing: .07em; text-transform: uppercase;
}
.gs-tag-acento { background: var(--gs-acento); color: var(--gs-acento-tinta); }
.gs-tag-line { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.gs-tags { display: flex; flex-wrap: wrap; gap: var(--gs-s-2); margin: var(--gs-s-3) 0 0; padding: 0; list-style: none; }
.gs-tags-side { margin: 0 0 var(--gs-s-5); }
/* the second button: same shape, drawn in line — for a step that is not the booking */
.gs-cta-line { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
/* a short run of plain facts: quieter than chips, and it does not look like buttons */
.gs-inline { display: flex; flex-wrap: wrap; gap: .2rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: var(--gs-fs-small); line-height: 1.4; color: var(--gs-rocha-2); }
.gs-inline li { position: relative; padding-left: .9rem; }
.gs-inline li::before { content: ""; position: absolute; left: 0; top: .52em; width: .34rem; height: .34rem; border-radius: 50%; background: currentColor; }
.gs-inline-stack { display: grid; gap: .3rem; margin-bottom: var(--gs-s-5); }
.gs-head .gs-inline { margin-top: var(--gs-s-3); }

/* ---------- hero ---------- */
.gs-hero {
  display: grid; background: var(--gs-areia); color: var(--gs-mar);
  padding: var(--gs-s-3) var(--gs-s-3) calc(var(--gs-s-3) + var(--gs-consent-h));
}
.gs-hero > * { min-width: 0; }
.gs-hero > .gs-hero-top, .gs-hero > .gs-hero-frame { grid-area: 1 / 1; }
.gs-hero-top { z-index: 2; align-self: start; padding: clamp(1rem, 2.2vw, 1.75rem) clamp(1.1rem, 3.3vw, 3rem) 0; }
.gs-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--gs-s-4); margin-bottom: var(--gs-s-5); }
.gs-mark { display: block; flex: none; }
.gs-mark img { display: block; height: clamp(2.5rem, 2rem + 1.6vw, 3.5rem); width: auto; max-width: none; }
.gs-nav-links { display: flex; gap: clamp(1rem, 2.2vw, 2.2rem); margin: 0; padding: 0; list-style: none; }
.gs-nav-links a, .gs-menu-btn {
  color: inherit; text-decoration: none; font: 700 var(--gs-fs-label)/1 var(--gs-f-display); letter-spacing: .09em; text-transform: uppercase;
}
.gs-nav-links a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.gs-nav-links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; }
.gs-nav-tools { display: flex; align-items: center; gap: var(--gs-s-3); }
.gs-menu-btn {
  display: none; align-items: center; min-height: 2.75rem; padding: .2em 1em 0; border: 0; border-radius: var(--gs-r-ctl);
  background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; font-weight: 800; cursor: pointer;
}
.gs-hero-frame {
  position: relative; display: grid; isolation: isolate; overflow: hidden; border-radius: var(--gs-r-photo);
  min-height: min(46rem, calc(100vh - 1.5rem - var(--gs-consent-h)));
  min-height: min(46rem, calc(100svh - 1.5rem - var(--gs-consent-h)));
  background: var(--gs-agua);
}
.gs-hero-frame > picture { position: absolute; inset: 0; z-index: -2; }
.gs-hero-frame > picture > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
/* no veil over the photograph: one short gradient under the dock, nothing else */
.gs-hero-frame::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 34%; z-index: -1;
  background: linear-gradient(0deg, rgb(13 60 68 / .34), rgb(13 60 68 / 0));
}
.gs-hero-in { display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr); padding: clamp(1.1rem, 2.6vw, 2rem) clamp(1.1rem, 3.3vw, 3rem); }
.gs-hero-in > .gs-dock { grid-row: 2; }
.gs-hero-after { display: none; margin: 0; }

.gs-dock {
  display: grid; grid-template-columns: minmax(0, 1.5fr) auto auto; gap: var(--gs-s-5) var(--gs-s-6); align-items: center;
  padding: var(--gs-s-4) var(--gs-s-5); border-radius: var(--gs-r-card); color: var(--gs-espuma);
  background: var(--gs-mar-2); background: rgb(13 60 68 / .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--gs-sombra);
}
.gs-dock-proof { display: grid; gap: .35rem; min-width: 0; }
.gs-dock-what { margin: 0; font: 500 var(--gs-fs-sub)/1.3 var(--gs-f-text); max-width: 42ch; }
.gs-dock-what a { color: inherit; text-underline-offset: .2em; white-space: nowrap; }
.gs-dock-price b { font-size: clamp(3rem, 2.4rem + 2vw, 4rem); }
.gs-dock-act { display: grid; gap: .1rem; justify-items: center; }
.gs-dock .gs-link { font-size: var(--gs-fs-label); }
/* the rating, as reviews.js draws it in its compact mode, re-dressed */
.gs-dock [data-reviews="compact"] { margin: 0; }
.gs-dock .rv-sum { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; margin: 0; color: var(--gs-espuma); font: 500 var(--gs-fs-small)/1.2 var(--gs-f-text); }
body.gs .gs-dock .rv-stars { color: var(--gs-areia); }
.gs-dock .rv-compact-link { display: inline-flex; align-items: center; min-height: 2.75rem; color: inherit; font: 500 var(--gs-fs-caption)/1.2 var(--gs-f-text); letter-spacing: 0; text-transform: none; text-underline-offset: .2em; }
.gs-dock .rv-attr { display: inline; margin: 0 0 0 .5rem; color: inherit; font: 400 var(--gs-fs-caption)/1.2 var(--gs-f-text); letter-spacing: 0; text-transform: none; }

/* ---------- the language switchers on a migrated page ---------- */
body.gs .lang-inline { position: relative; inset: auto; z-index: 5; color: inherit; }
body.gs .lang-inline .lang-current {
  min-height: 2.75rem; padding: .2em .9em 0; border: 0; border-radius: var(--gs-r-ctl);
  box-shadow: inset 0 0 0 1.5px currentColor; color: inherit; opacity: 1; text-shadow: none;
  font: 800 var(--gs-fs-label)/1 var(--gs-f-display); letter-spacing: .09em;
}
body.gs .lang-inline .lang-current::before { display: none; }
body.gs .lang-inline .lang-list { top: calc(100% + .5rem); right: 0; background: var(--gs-espuma); border-radius: var(--gs-r-sm); }
body.gs .lang-opt { min-height: 2.5rem; font: 400 var(--gs-fs-body)/1.2 var(--gs-f-text); color: var(--gs-rocha); }
/* eight languages, always four by two: a row that wraps leaves one orphan */
.lang-row { display: grid; grid-template-columns: repeat(4, 2.75rem); gap: .25rem; }
.lang-pick {
  display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: .15em .5em 0; border: 0; border-radius: var(--gs-r-ctl);
  background: transparent; color: inherit; cursor: pointer;
  font: 700 var(--gs-fs-label)/1 var(--gs-f-display); letter-spacing: .07em;
}
.lang-pick:hover { box-shadow: inset 0 0 0 1.5px currentColor; }
.lang-pick.is-on { background: var(--gs-areia); color: var(--gs-rocha); }
/* the list under the switcher, the one-time offer of a language and the one-time cue: i18n.js draws them
   (its logic is untouched); this is their dress — Espuma card, the system's radii, Mar for what acts */
body.gs .lang-list { padding: var(--gs-s-1); border: 0; border-radius: var(--gs-r-card); background: var(--gs-espuma); box-shadow: var(--gs-sombra); }
body.gs .lang-opt { display: flex; align-items: center; min-height: 2.75rem; padding: .35rem .75rem; border-radius: var(--gs-r-sm); }
body.gs .lang-opt:hover { background: var(--gs-areia); }
body.gs .lang-opt.is-on { font-weight: 600; background: var(--gs-areia); }
body.gs .lang-opt.is-on::after { width: .4rem; height: .4rem; margin: 0 0 0 auto; background: var(--gs-mar); }
body.gs .lang-opt:focus-visible { outline: 3px solid var(--gs-mar); outline-offset: -3px; }
body.gs .lang-nudge {
  gap: var(--gs-s-1) var(--gs-s-3); max-width: min(16.5rem, 64vw);   /* anchored to the switcher's right edge: wider and it leaves a 375px screen on the left */ padding: var(--gs-s-3) var(--gs-s-3) var(--gs-s-2) var(--gs-s-4);
  border: 0; border-radius: var(--gs-r-card); background: var(--gs-espuma); color: var(--gs-rocha); box-shadow: var(--gs-sombra);
}
body.gs .lang-nudge-ask { font: 500 var(--gs-fs-small)/1.35 var(--gs-f-text); color: var(--gs-rocha); }
body.gs .lang-nudge-yes {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; border: 0; color: var(--gs-mar);
  font: 700 var(--gs-fs-ui)/1 var(--gs-f-display); letter-spacing: .05em; text-transform: uppercase;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .28em;
}
body.gs .lang-nudge-yes:hover { text-decoration-thickness: 3px; }
body.gs .lang-nudge-yes:focus-visible, body.gs .lang-nudge-no:focus-visible { outline: 3px solid var(--gs-mar); outline-offset: 2px; }
body.gs .lang-nudge-no { width: 1.5rem; height: 1.5rem; color: var(--gs-rocha); opacity: .75; }
body.gs .lang-switch.is-cued .lang-current::after { inset: -.3rem; border-width: 2px; border-radius: var(--gs-r-ctl); }

/* ---------- three facts under the hero ----------
   A (default): three tiles, the figure and its sentence side by side.
   B (.is-b): one plate of deep water, like the dock above it. */
.gs-factband { padding: var(--gs-s-4) 0 var(--gs-s-7); background: var(--gs-areia); color: var(--gs-mar); }
.gs-factrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gs-s-4); margin: 0; padding: 0; }
/* Four facts (Surf Lessons, COPY-V2): one row on a wide screen, two by two below that, one column on a phone. */
.gs-factrow.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gs-s-3); }
.gs-factrow.is-4 div { gap: var(--gs-s-3); padding-inline: var(--gs-s-4); }
.gs-factrow.is-4 dt { font-size: calc(var(--gs-fs-figure) * .78); }
@media (max-width: 72rem) { .gs-factrow.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gs-factrow.is-4 dt { font-size: var(--gs-fs-figure); } }
.gs-factrow div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--gs-s-4); min-width: 0; padding: var(--gs-s-4) var(--gs-s-5); border-radius: var(--gs-r-card); background: var(--gs-espuma); }
.gs-factrow dt { font: 900 var(--gs-fs-figure)/.82 var(--gs-f-display); white-space: nowrap; }
.gs-factrow dd { margin: 0; font-size: var(--gs-fs-small); line-height: 1.35; max-width: 26ch; color: var(--gs-rocha); }
.gs-factband.is-b .gs-factrow { gap: 0; border-radius: var(--gs-r-card); background: var(--gs-mar); color: var(--gs-espuma); }
.gs-factband.is-b .gs-factrow div { background: none; border-radius: 0; }
.gs-factband.is-b .gs-factrow div + div { border-left: 1px solid var(--gs-linha-clara); }
.gs-factband.is-b .gs-factrow dt { color: var(--gs-areia); }
.gs-factband.is-b .gs-factrow dd { color: var(--gs-espuma); }

/* ---------- why us: six arguments, one format ----------
   Every argument is the same thing: a 4:3 picture, a numbered title in the
   display voice, one or two lines. Nothing is folded away.
   A (default): six alike, three across. B (.is-b): the first one large, beside
   its words, and five alike under it. */
.gs-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gs-s-7) var(--gs-s-5); margin: 0; padding: 0; list-style: none; counter-reset: gs-arg; }
.gs-arg { counter-increment: gs-arg; display: grid; gap: var(--gs-s-2); align-content: start; min-width: 0; }
.gs-arg-media { position: relative; margin: 0 0 var(--gs-s-2); aspect-ratio: 4 / 3; border-radius: var(--gs-r-card); overflow: hidden; background: var(--gs-oliva-2); }
.gs-arg-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100% !important; object-fit: cover; object-position: 50% 25%; }
.gs-arg-media:has(.gs-arg-art) { background: var(--gs-areia); }
.gs-arg-media .gs-arg-art { object-fit: contain; padding: 4%; }
.gs-arg h3 { color: var(--gs-areia); }
.gs-arg h3::before { content: counter(gs-arg, decimal-leading-zero); display: block; margin-bottom: .35em; color: var(--gs-agua); font-size: var(--gs-fs-tag); letter-spacing: .08em; }
.gs-arg p { margin: 0; font-size: var(--gs-fs-small); line-height: 1.45; max-width: 44ch; }
.gs-arg .gs-link { font-size: var(--gs-fs-label); color: var(--gs-espuma); }
.gs-arg-media img { object-position: var(--gs-pos, 50% 25%); }
.gs-arg-pick { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; }
/* B: one argument large beside its words (.is-big), the other five alike under it. Clicking a small
   one brings it to the large place (system.js moves .is-big). */
.gs-why.is-b { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gs-s-6) var(--gs-s-4); }
.gs-why.is-b .gs-arg.is-big { order: -1; grid-column: 1 / -1; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(1.5rem, 4vw, 4rem); align-content: center; }
.gs-why.is-b .gs-arg.is-big .gs-arg-media { grid-row: 1 / span 4; margin: 0; aspect-ratio: 16 / 9; }
.gs-why.is-b .gs-arg.is-big .gs-arg-pick { display: none; }
.gs-why.is-b .gs-arg.is-big h3 { align-self: end; font-size: var(--gs-fs-title-sm); line-height: .9; }
.gs-why.is-b .gs-arg.is-big p { font-size: var(--gs-fs-body); }
.gs-why.is-b .gs-arg:not(.is-big) { cursor: pointer; }
.gs-why.is-b .gs-arg:not(.is-big) h3 { font-size: var(--gs-fs-ui-lg); line-height: 1.05; }
.gs-why.is-b .gs-arg:not(.is-big) .gs-link { display: none; }
.gs-why.is-b .gs-arg:not(.is-big) .gs-arg-media { transition: transform .18s ease, box-shadow .18s ease; }
@media (hover: hover) { .gs-why.is-b .gs-arg:not(.is-big):hover .gs-arg-media { transform: translateY(-3px) scale(1.02); box-shadow: var(--gs-sombra); } }
@media (prefers-reduced-motion: reduce) { .gs-why.is-b .gs-arg .gs-arg-media { transition: none; transform: none !important; } }

/* ---------- the card ----------
   Six rows shared by every card in the row (subgrid), so the durations, the
   prices and the buttons line up across the four whatever the text above
   them runs to. Without subgrid the cards fall back to columns of their own. */
.gs-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); gap: 0 var(--gs-s-5); }
.gs-card { display: flex; flex-direction: column; background: var(--gs-espuma); color: var(--gs-rocha); border-radius: var(--gs-r-card); overflow: hidden; min-width: 0; grid-row: 1 / span 6; }
@supports (grid-template-rows: subgrid) {
  .gs-card { display: grid; grid-template-rows: subgrid; }
}
.gs-card-desc { flex: 1 0 auto; }
.gs-card-media { position: relative; flex: none; margin: 0; aspect-ratio: 16 / 9; background: var(--gs-areia); }
.gs-card-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100% !important; object-fit: cover; }
.gs-card-media .gs-chip, .gs-card-media .gs-tag { position: absolute; left: var(--gs-s-3); top: var(--gs-s-3); }
.gs-card-media .gs-tag + .gs-chip { top: auto; bottom: var(--gs-s-3); }
.gs-card > :not(.gs-card-media) { padding-inline: var(--gs-s-5); }
.gs-card h3 { padding-top: var(--gs-s-4); }
.gs-card-desc { margin: 0; padding-top: var(--gs-s-2); font-size: var(--gs-fs-small); line-height: 1.45; color: var(--gs-rocha-2); }
.gs-meta { display: grid; grid-template-columns: 1fr 1fr; align-content: start; margin: var(--gs-s-3) 0 0; }
.gs-meta div { padding: var(--gs-s-2) var(--gs-s-3) var(--gs-s-2) 0; min-width: 0; border-top: 1px solid var(--gs-linha); }
.gs-meta div:nth-child(2) { padding-left: var(--gs-s-3); border-left: 1px solid var(--gs-linha); }
.gs-meta .gs-meta-wide { grid-column: 1 / -1; border-bottom: 1px solid var(--gs-linha); }
.gs-meta dt { font: 400 var(--gs-fs-caption)/1.2 var(--gs-f-text); color: var(--gs-rocha-2); overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.gs-meta dd { margin: .2rem 0 0; font: 600 var(--gs-fs-small)/1.25 var(--gs-f-text); overflow-wrap: break-word; }
.gs-price { display: grid; align-content: end; padding-top: var(--gs-s-4); }
.gs-price-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; min-height: calc(var(--gs-fs-figure) * .82); margin: 0; }
.gs-price-unit { font: 700 var(--gs-fs-ui-lg)/1 var(--gs-f-display); letter-spacing: .03em; text-transform: uppercase; }
/* no figure to show: the words take the figure's place, on the same baseline */
.gs-price-ask { align-self: flex-end; font: 900 var(--gs-fs-heading)/.9 var(--gs-f-display); text-transform: uppercase; }
.gs-card-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--gs-s-3); padding-block: var(--gs-s-3) var(--gs-s-4); }
.gs-card-act .gs-cta { flex: 1 1 100%; }
/* the whole card opens its prices; this is the visible, focusable handle for it */
.gs-card-open { display: inline-flex; align-items: center; gap: .3em; min-height: 2.75rem; margin-left: auto; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: 700 var(--gs-fs-label)/1 var(--gs-f-display); letter-spacing: .05em; text-transform: uppercase; }
.gs-card-open::after { content: "›"; font-size: 1.3em; line-height: .8; transition: translate .15s ease; }
.gs-card[data-gs-prices] { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
@media (hover: hover) {
  .gs-card[data-gs-prices]:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--gs-sombra); z-index: 1; }
  .gs-card[data-gs-prices]:hover .gs-card-open::after { translate: 3px 0; }
}
.gs-card.is-featured { background: var(--gs-mar); color: var(--gs-espuma); }
.gs-card.is-featured .gs-card-desc, .gs-card.is-featured .gs-meta dt { color: var(--gs-suave-escuro); }
.gs-card.is-featured .gs-meta div { border-color: var(--gs-linha-clara); }
/* "from €37 per person": one line, the small words sitting on the figure's baseline */
.gs-from { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; margin: 0; }
.gs-from small, .gs-from > span { font: 700 var(--gs-fs-ui-lg)/1 var(--gs-f-display); letter-spacing: .04em; text-transform: uppercase; }
.gs-from b { font: 900 var(--gs-fs-figure)/.82 var(--gs-f-display); white-space: nowrap; }
/* under the cards: the way to every price, then the way to a person — one centred column */
.gs-after { display: grid; justify-items: center; gap: var(--gs-s-3); margin-top: var(--gs-s-6); text-align: center; }
.gs-after .gs-cta { min-width: min(100%, 22rem); }
.gs-after p { margin: 0; max-width: 46ch; }
.gs-after-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--gs-s-5); }

/* ---------- reviews ----------
   A window of photograph, then deep water. Desktop: the title stands on the
   sky, as in the hero, and the cards overlap the foot of the picture — below
   the people, never on them. Phone: nothing is set on the photograph. */
.gs-reviews { --gs-rv-lap: 5rem; --gs-rv-bleed: calc((100vw - min(var(--gs-wrap), 100vw)) / 2 + var(--gs-gutter)); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: var(--gs-s-8); position: relative; }
.gs-reviews[hidden] { display: none; }
.gs-reviews-photo { grid-area: 1 / 1; margin: 0; height: clamp(27rem, 44vw, 40rem); overflow: hidden; background: var(--gs-agua); }
.gs-reviews-photo img { display: block; width: 100%; height: 100% !important; object-fit: cover; object-position: 50% 12%; }
.gs-reviews-head { grid-area: 1 / 1; z-index: 1; align-self: start; width: 100%; display: grid; gap: var(--gs-s-3); justify-items: start; padding-top: clamp(1.5rem, 3.4vw, 3.25rem); color: var(--gs-mar); }
.gs-reviews-head .gs-title { color: var(--gs-mar); }
.gs-reviews-body { grid-area: 2 / 1; z-index: 2; width: 100%; margin-top: calc(-1 * var(--gs-rv-lap)); }
body.gs .gs-reviews .rv-head { display: block; margin: 0; max-width: none; }
body.gs .gs-reviews .rv-sum { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; padding: .45rem .9rem; border-radius: var(--gs-r-ctl); background: var(--gs-espuma); color: var(--gs-rocha); font: 500 var(--gs-fs-small)/1.2 var(--gs-f-text); }
body.gs .gs-reviews .rv-stars { color: var(--gs-mar); }
body.gs .gs-reviews .rv-quotes { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(21rem, 82%); gap: var(--gs-s-5); align-items: start; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gs-rv-bleed)); padding: 0 var(--gs-rv-bleed) var(--gs-s-6); scroll-padding-inline: var(--gs-rv-bleed); scrollbar-width: none; }
body.gs .gs-reviews .rv-quotes::-webkit-scrollbar { display: none; }
body.gs .gs-reviews .rv-quotes > * { scroll-snap-align: start; }
body.gs .gs-reviews .rv-item { margin: 0; padding: var(--gs-s-5); border: 0; border-radius: var(--gs-r-card); background: var(--gs-espuma); color: var(--gs-rocha); box-shadow: var(--gs-sombra); }
body.gs .gs-reviews .rv-item blockquote { margin: var(--gs-s-3) 0 0; }
body.gs .gs-reviews .rv-item blockquote p { margin: 0; font: 400 var(--gs-fs-small)/1.5 var(--gs-f-text); color: var(--gs-rocha); }
body.gs .gs-reviews .rv-who { font-size: var(--gs-fs-small); color: inherit; }
/* the first review is the large one: twice the width, and set as a quotation */
body.gs .gs-reviews .rv-item:first-child { grid-column: span 2; }
body.gs .gs-reviews .rv-item:first-child blockquote p { font: italic 400 var(--gs-fs-quote)/1.25 var(--gs-f-text); }
body.gs .gs-reviews .gal-dots { color: var(--gs-espuma); margin-top: 0; }
body.gs .gs-reviews .rv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gs-s-2) var(--gs-s-5); margin: var(--gs-s-4) 0 0; padding: 0; border: 0; background: none; color: var(--gs-espuma); }
body.gs .gs-reviews .rv-foot .link { display: inline-flex; align-items: center; min-height: 2.75rem; color: inherit; background: none; font: 700 var(--gs-fs-label)/1 var(--gs-f-display); letter-spacing: .05em; text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .28em; }
/* "Leave a review" is for people who have already been: present, but quieter than reading them */
body.gs .gs-reviews .rv-foot .link + .link { font: 400 var(--gs-fs-small)/1.2 var(--gs-f-text); letter-spacing: 0; text-transform: none; text-decoration-thickness: 1px; color: var(--gs-suave-escuro); }
body.gs .gs-reviews .rv-attr { margin: 0; color: var(--gs-suave-escuro); font: 400 var(--gs-fs-caption)/1.2 var(--gs-f-text); letter-spacing: 0; text-transform: none; }

/* ---------- how it works; then the morning in pictures, on Oliva ---------- */
.gs-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gs-s-5); margin: 0; padding: 0; list-style: none; counter-reset: gs-n; }
.gs-step { counter-increment: gs-n; display: grid; grid-template-columns: auto 1fr; gap: var(--gs-s-2) var(--gs-s-4); align-content: start; padding-top: var(--gs-s-4); border-top: 2px solid var(--gs-mar); }
.gs-step::before { content: counter(gs-n); grid-row: span 2; font: 900 var(--gs-fs-figure)/.82 var(--gs-f-display); color: var(--gs-mar); }
.gs-step p { margin: 0; font-size: var(--gs-fs-small); line-height: 1.5; color: var(--gs-rocha-2); max-width: 34ch; }
.gs-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gs-s-3) var(--gs-s-5); margin-top: var(--gs-s-6); }
body.gs .gs-gallery .bleed-strip { margin-top: 0; }
body.gs .gs-gallery .bstrip { gap: var(--gs-s-3); padding-inline: var(--gs-gutter); scrollbar-width: none; }
body.gs .gs-gallery .bstrip::-webkit-scrollbar { display: none; }
body.gs .gs-gallery .bstrip img { height: min(52svh, 30rem); border-radius: var(--gs-r-card); }
body.gs .gs-gallery .gal-dots { margin-top: var(--gs-s-3); }
/* the strip hands over to booking, as it did on the old page */
.gs-gallery-out { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; margin: var(--gs-s-5) 0 0; font-size: var(--gs-fs-sub); line-height: 1.3; }

/* ---------- every price ---------- */
.gs-two { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
/* the price of one session sits on each closed row of the existing accordion */
.gs-pt-fig { margin-left: auto; padding-right: var(--gs-s-4); font: 900 var(--gs-fs-figure-sm)/.85 var(--gs-f-display); color: var(--gs-rocha); white-space: nowrap; }
.gs-pt-note { margin: var(--gs-s-3) 0 0; }
.gs-proof { display: grid; gap: var(--gs-s-4); margin: 0; padding: 0; list-style: none; }
.gs-proof li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .6rem; line-height: 1.45; }
.gs-proof li::before { content: ""; width: .8rem; height: .42rem; margin-top: .4rem; border: solid var(--gs-ok); border-width: 0 0 3px 3px; rotate: -45deg; }
/* the existing accordion, re-dressed: same markup, same ids, same script */
body.gs :is(#prices, #prices-sheet) .pt-acc { margin-top: 0; max-width: none; border-top: 2px solid var(--gs-rocha); }
body.gs :is(#prices, #prices-sheet) .ptable { border-bottom: 1px solid var(--gs-linha); }
body.gs :is(#prices, #prices-sheet) .pt-head { min-height: 4.5rem; gap: var(--gs-s-3); }
body.gs :is(#prices, #prices-sheet) .pt-head-text { min-width: 0; }
body.gs :is(#prices, #prices-sheet) .pt-head h3 { font: 500 var(--gs-fs-sub)/1.2 var(--gs-f-text); color: var(--gs-rocha); }
body.gs :is(#prices, #prices-sheet) .pt-unit { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gs-rocha); color: var(--gs-rocha); border-radius: var(--gs-r-ctl); font: 500 var(--gs-fs-caption)/1.1 var(--gs-f-text); letter-spacing: 0; text-transform: none; padding: .35em .8em; }
body.gs :is(#prices, #prices-sheet) .pt-chev { color: var(--gs-rocha); }
body.gs :is(#prices, #prices-sheet) .pt-note, body.gs :is(#prices, #prices-sheet) .pt-foot, body.gs :is(#prices, #prices-sheet) .pt-eg { font-size: var(--gs-fs-small); color: var(--gs-rocha-2); }
body.gs :is(#prices, #prices-sheet) .pt th, body.gs :is(#prices, #prices-sheet) .pt td { font-size: var(--gs-fs-small); color: var(--gs-rocha); border-top: 1px solid var(--gs-linha); padding-inline: var(--gs-s-3); }
body.gs :is(#prices, #prices-sheet) .pt th:first-child { padding-left: 0; }
body.gs :is(#prices, #prices-sheet) .pt thead th { border-top: 0; white-space: normal; vertical-align: bottom; color: var(--gs-rocha-2); font: 700 var(--gs-fs-tag)/1.15 var(--gs-f-display); letter-spacing: .07em; text-transform: uppercase; }
body.gs :is(#prices, #prices-sheet) .pt tbody tr:last-child th, body.gs :is(#prices, #prices-sheet) .pt tbody tr:last-child td { border-bottom: 1px solid var(--gs-linha); }
body.gs :is(#prices, #prices-sheet) .pt .big { font: 800 var(--gs-fs-ui-lg)/1 var(--gs-f-display); letter-spacing: .02em; color: var(--gs-rocha); }
body.gs :is(#prices, #prices-sheet) .pt .derived { font-size: var(--gs-fs-caption); color: var(--gs-rocha-2); }
body.gs :is(#prices, #prices-sheet) .pt-eg { border: 0; border-radius: var(--gs-r-sm); background: var(--gs-areia); color: var(--gs-rocha); }
body.gs :is(#prices, #prices-sheet) .pt-eg strong { color: var(--gs-rocha); }
/* phone (the page's own breakpoint): each row is a card of its own — label left, figure right, one line under the
   row's name. The table rules above drew a line over every cell inside the card and pushed the labels inwards. */
@media (max-width: 46rem) {
  body.gs :is(#prices, #prices-sheet) .pt td { border-top: 0; padding-inline: 0; }
  body.gs :is(#prices, #prices-sheet) .pt tbody tr th[scope="row"] { border-top: 0; padding-inline: 0; border-bottom: 1px solid var(--gs-linha); }
  body.gs :is(#prices, #prices-sheet) .pt tbody tr:last-child td { border-bottom: 0; }
}
body.gs #prices .btn { background: var(--gs-acento); border-color: var(--gs-acento); color: var(--gs-acento-tinta); border-radius: var(--gs-r-ctl); font: 800 var(--gs-fs-label)/1 var(--gs-f-display); letter-spacing: .05em; min-height: 2.875rem; }

/* ---------- questions and levels: existing blocks, re-dressed ---------- */
body.gs .gs-faq .faq-cols { margin-top: 0; }
body.gs .gs-faq .faq details { padding: 0; border-color: var(--gs-linha-clara); }
body.gs .gs-faq .faq summary { align-items: center; min-height: 3.5rem; padding-block: var(--gs-s-3); font: 500 var(--gs-fs-sub)/1.25 var(--gs-f-text); color: var(--gs-espuma); }
body.gs .gs-faq .faq details > :not(summary) { padding-top: 0; padding-bottom: var(--gs-s-4); font-size: var(--gs-fs-small); line-height: 1.55; color: var(--gs-espuma); }
body.gs .gs-faq .faq a, body.gs .gs-faq .faq .link { color: var(--gs-espuma); }
body.gs .gs-faq .sun-table th, body.gs .gs-faq .sun-table td { color: var(--gs-espuma); border-color: var(--gs-linha-clara); }
body.gs .gs-levels .levels { margin-top: 0; }
body.gs .gs-levels .levels-tabs { gap: var(--gs-s-2); }
body.gs .gs-levels .levels-tabs [role="tab"] {
  min-height: 2.75rem; padding: .1em 1.1em; border: 0; border-radius: var(--gs-r-ctl); background: transparent; color: var(--gs-rocha);
  box-shadow: inset 0 0 0 1.5px var(--gs-rocha); font: 500 var(--gs-fs-body)/1.1 var(--gs-f-text); letter-spacing: 0; text-transform: none;
}
/* the chosen tab is ink, not the accent: on a light ground Mar means "book" and nothing else */
body.gs .gs-levels .levels-tabs [aria-selected="true"] { background: var(--gs-rocha); color: var(--gs-espuma); box-shadow: none; }
/* the drawings are transparent PNGs: they sit straight on the sand. Two equal columns, centred. */
body.gs .gs-levels .levels-tabs { justify-content: center; }
body.gs .gs-levels .level-panel.is-active { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; max-width: 60rem; margin-inline: auto; }
body.gs .gs-levels .level-art img { max-width: 20rem; }
body.gs .gs-levels .level-text { max-width: 28rem; }
.gs-head-mid { justify-items: center; text-align: center; }
body.gs .gs-levels .level-text h3 { font: 800 var(--gs-fs-heading)/.95 var(--gs-f-display); text-transform: uppercase; }
body.gs .gs-levels .level-text .prose p { font-size: var(--gs-fs-body); line-height: 1.55; }

/* ---------- the last call: words on deep water, the photograph free beside them ---------- */
.gs-final { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: clamp(26rem, 42vw, 38rem); }
.gs-final-text {
  display: grid; gap: var(--gs-s-4); align-content: center; justify-items: start;
  padding: var(--gs-s-8) var(--gs-s-7) var(--gs-s-8) max(var(--gs-gutter), calc((100vw - var(--gs-wrap)) / 2 + var(--gs-gutter)));
}
.gs-final-text .gs-title { font-size: var(--gs-fs-title-sm); }
.gs-final-text p { margin: 0; max-width: 40ch; }
.gs-final-text .gs-acts { margin-top: var(--gs-s-2); }
.gs-final-photo { position: relative; margin: 0; min-height: 16rem; background: var(--gs-agua); }
.gs-final-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100% !important; object-fit: cover; object-position: 50% 88%; }

/* ---------- footer ---------- */
.gs-foot { padding: var(--gs-s-8) 0 0; overflow: hidden; }
.gs-foot-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: var(--gs-s-6); padding-bottom: var(--gs-s-6); }
.gs-foot-line { max-width: 20ch; }
.gs-foot h2 { margin: 0 0 var(--gs-s-2); font: italic 400 var(--gs-fs-small)/1.2 var(--gs-f-text); color: var(--gs-espuma); }
.gs-foot-talk h2 + ul + h2 { margin-top: var(--gs-s-5); }
.gs-foot ul { margin: 0; padding: 0; list-style: none; }
.gs-foot-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; color: inherit; text-decoration: none; font: 700 var(--gs-fs-ui)/1 var(--gs-f-display); letter-spacing: .07em; text-transform: uppercase; }
/* a label and its value never break in the middle: they sit side by side or one above the other */
.gs-foot-plain a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 .6rem; min-height: 2.75rem; color: inherit; text-underline-offset: .2em; }
.gs-foot-plain a span { white-space: nowrap; }
.gs-foot-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gs-s-2) var(--gs-s-5); padding-block: var(--gs-s-3); border-top: 1px solid var(--gs-linha-clara); font-size: var(--gs-fs-caption); }
.gs-foot-legal a, .gs-foot-legal button { display: inline-flex; align-items: center; min-height: 2.75rem; color: inherit; font: inherit; background: none; border: 0; padding: 0 .15rem; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.gs-mega { display: block; width: 112%; max-width: none; margin: var(--gs-s-5) -6% -1.2%; }

/* ---------- the bar: nav and booking, always within reach ---------- */
.gs-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: var(--gs-s-4);
  min-height: 4.75rem; padding: var(--gs-s-3) var(--gs-gutter); background: var(--gs-mar); color: var(--gs-espuma);
  translate: 0 -110%; visibility: hidden; transition: translate .25s ease, visibility 0s .25s;
}
.gs-bar.is-on { translate: 0 0; visibility: visible; transition: translate .25s ease; }
.gs-bar .gs-mark img { height: 2.25rem; }
/* shortcuts to the sections of the current page: a panel under its link, on hover and on keyboard focus */
.gs-has-sub { position: relative; }
.gs-sub { display: none; }
.gs-nav-links .gs-sub { position: absolute; z-index: 6; top: 100%; left: -1rem; min-width: 13rem; margin: 0; padding: var(--gs-s-2); list-style: none; border-radius: var(--gs-r-sm); background: var(--gs-espuma); color: var(--gs-rocha); box-shadow: var(--gs-sombra); }
.gs-nav-links .gs-has-sub:hover > .gs-sub, .gs-nav-links .gs-has-sub:focus-within > .gs-sub { display: grid; }
.gs-nav-links .gs-has-sub.is-shut > .gs-sub { display: none; }
.gs-nav-links .gs-sub a { display: flex; min-height: 2.5rem; padding: 0 var(--gs-s-3); border-radius: var(--gs-r-sm); white-space: nowrap; }
.gs-nav-links .gs-sub a:hover { background: var(--gs-areia); }
body.gs .gs-nav-links .gs-sub :focus-visible { outline-color: var(--gs-mar); }
.gs-bar-price { display: none; margin: 0; }

/* ---------- the menu sheet ---------- */
.gs-menu { position: fixed; inset: 0; z-index: 70; display: grid; grid-template-rows: auto 1fr auto; gap: var(--gs-s-5); padding: var(--gs-s-4) var(--gs-gutter) var(--gs-s-6); background: var(--gs-mar); color: var(--gs-espuma); overflow-y: auto; }
.gs-menu[hidden] { display: none; }
.gs-menu-top { display: flex; align-items: center; justify-content: space-between; }
.gs-menu-top .gs-menu-btn { display: inline-flex; }
.gs-menu-logo { height: 2.5rem; width: auto; }
.gs-menu ul { margin: 0; padding: 0; list-style: none; align-self: center; }
.gs-menu .gs-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gs-s-4); margin: 0 0 var(--gs-s-3); padding: 0 0 0 var(--gs-s-4); border-left: 2px solid var(--gs-linha-clara); align-self: auto; }
.gs-menu .gs-sub li a { min-height: 2.75rem; font: 700 var(--gs-fs-ui)/1 var(--gs-f-display); letter-spacing: .07em; }
.gs-menu li a { display: flex; align-items: center; min-height: 3.5rem; color: inherit; text-decoration: none; font: 900 var(--gs-fs-figure)/.95 var(--gs-f-display); text-transform: uppercase; }
.gs-menu-foot { display: grid; gap: var(--gs-s-4); }
.gs-menu-foot p { margin: 0; font-size: var(--gs-fs-caption); color: var(--gs-suave-escuro); }
html.gs-menu-open { overflow: hidden; }

/* ---------- the prices of one lesson, in a dialog ----------
   <dialog>: the browser traps focus, closes on Escape and draws the backdrop.
   A centred panel on a desktop, a sheet from the bottom on a phone. */
.gs-sheet { width: min(44rem, calc(100vw - 2rem)); max-height: min(46rem, calc(100vh - 2rem)); margin: auto; padding: 0; border: 0; border-radius: var(--gs-r-card); background: var(--gs-espuma); color: var(--gs-rocha); box-shadow: var(--gs-sombra); overflow: hidden; }
.gs-sheet[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.gs-sheet::backdrop { background: rgb(13 60 68 / .6); }
.gs-sheet-top { display: flex; align-items: center; justify-content: space-between; gap: var(--gs-s-4); padding: var(--gs-s-4) var(--gs-s-5); border-bottom: 1px solid var(--gs-linha); }
.gs-sheet-top .gs-menu-btn { display: inline-flex; flex: none; }
.gs-sheet-body { overflow-y: auto; padding: var(--gs-s-4) var(--gs-s-5); }
.gs-sheet-body h3 { margin: var(--gs-s-5) 0 0; font: 500 var(--gs-fs-sub)/1.2 var(--gs-f-text); }
.gs-sheet-body > :first-child { margin-top: 0; }
.gs-sheet-note { margin: var(--gs-s-4) 0 0; padding-top: var(--gs-s-3); border-top: 1px solid var(--gs-linha); font-size: var(--gs-fs-small); }
.gs-sheet-foot { padding: var(--gs-s-3) var(--gs-s-5) var(--gs-s-4); border-top: 1px solid var(--gs-linha); }
html.gs-sheet-open { overflow: hidden; }
@media (max-width: 44rem) {
  .gs-sheet { width: 100vw; max-width: none; max-height: 88vh; max-height: 88svh; margin: auto 0 0; border-radius: var(--gs-r-photo) var(--gs-r-photo) 0 0; }
}

/* ---------- the consent banner, re-dressed (logic untouched) ---------- */
body.gs .cookie-bar { background: var(--gs-mar); color: var(--gs-espuma); border: 0; box-shadow: none; }
body.gs .cookie-bar .cookie-title { color: var(--gs-espuma); font: 500 var(--gs-fs-sub)/1.2 var(--gs-f-text); }
body.gs .cookie-bar .cookie-body { color: var(--gs-espuma); font-size: var(--gs-fs-small); line-height: 1.45; }
body.gs .cookie-bar .cookie-more, body.gs .cookie-bar .cookie-close { color: var(--gs-espuma); }
/* decline and accept carry the same weight: refusing must not be the harder button to find */
body.gs .cookie-bar .cookie-acts .btn { min-height: 2.875rem; border: 0; border-radius: var(--gs-r-ctl); box-shadow: inset 0 0 0 1.5px var(--gs-espuma); background: transparent; color: var(--gs-espuma); font: 800 var(--gs-fs-label)/1 var(--gs-f-display); letter-spacing: .06em; }
/* the banner and the bar are both deep water: a line keeps them two things */
body.gs.cookie-open .cookie-bar { box-shadow: 0 -1px 0 var(--gs-linha-clara); }
body.gs .gs-cards + .gal-dots, body.gs .gs-why + .gal-dots { margin-top: var(--gs-s-4); }

/* ============================================================ */
@media (max-width: 64rem) {
  .gs-nav-links, .gs-nav .gs-cta { display: none; }
  .gs-menu-btn { display: inline-flex; }
  /* below four-across a row of cards is a strip that SHOWS it swipes */
  .gs-cards {
    grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 42%; gap: 0 var(--gs-s-4); overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gs-gutter)); padding-inline: var(--gs-gutter); scroll-padding-inline: var(--gs-gutter); scrollbar-width: none;
  }
  .gs-cards::-webkit-scrollbar { display: none; }
  .gs-cards > * { scroll-snap-align: start; }
  /* on a touch layout the way into the price table gets a line and a target of its own */
  .gs-price small a { display: flex; align-items: center; width: fit-content; min-height: 2.75rem; }
  .gs-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-why.is-b { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gs-dock { grid-template-columns: 1fr auto; }
  .gs-dock-proof { grid-column: 1 / -1; }
  .gs-head-split { grid-template-columns: minmax(0, 1fr); }
  .gs-final { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gs-final-text { padding-right: var(--gs-s-5); }
}
@media (min-width: 44.01rem) {
  /* the bar sits at the top of the screen from here up: an anchor must land below it */
  body.gs main [id] { scroll-margin-top: calc(var(--gs-bar-h) + 1rem); }
}
@media (min-width: 64.01rem) {
  /* four-across never overflows, so main.js gives it no dots; if a window is
     dragged wider, dots built for the strip have nothing left to page */
  body.gs .gs-cards + .gal-dots { display: none; }
}
@media (max-width: 44rem) {
  .gs-nav { margin-bottom: 0; }
  /* phone: the title stands on the sand, the photograph starts below it;
     nothing is set over the photograph but the dock at its foot — and the
     dock hangs off the photograph's lower edge, so it reads as a thing laid
     on the picture rather than a box inside a box */
  .gs-hero { grid-template-rows: auto 1fr auto; min-height: 100vh; min-height: 100svh; padding: var(--gs-s-2) var(--gs-s-2) calc(var(--gs-s-2) + var(--gs-consent-h)); }
  .gs-hero > .gs-hero-top, .gs-hero > .gs-hero-frame { grid-area: auto; }
  .gs-hero-top { padding: var(--gs-s-2) var(--gs-s-3) 0; }
  .gs-hero-top h1 { margin: var(--gs-s-3) 0; }
  .gs-hero-frame { min-height: 0; overflow: visible; background: none; --gs-hang: 2.5rem; }
  .gs-hero-frame > picture { inset: 0 0 var(--gs-hang) 0; overflow: hidden; border-radius: var(--gs-r-photo); background: var(--gs-agua); }
  .gs-hero-frame > picture > img { object-position: 50% 55%; }
  .gs-hero-frame::after { display: none; }
  .gs-hero-in { padding: var(--gs-s-3) var(--gs-s-3) 0; }
  .gs-dock { grid-template-columns: auto 1fr; gap: var(--gs-s-2) var(--gs-s-3); padding: var(--gs-s-3); background: var(--gs-mar); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .gs-dock-proof { gap: .15rem; }
  .gs-dock-what { font-size: var(--gs-fs-small); line-height: 1.2; }
  .gs-d-only { display: none; }
  .gs-m-only { display: revert; }
  .gs-dock-price { gap: 0 .3rem; flex-wrap: nowrap; }
  .gs-dock-price b { font-size: var(--gs-fs-figure-sm); }
  .gs-dock-price small, .gs-dock-price > span { font-size: var(--gs-fs-tag); white-space: nowrap; }
  .gs-dock .gs-cta { min-height: 2.875rem; font-size: var(--gs-fs-label); padding-inline: .9em; }
  .gs-dock-act { justify-items: stretch; }
  .gs-dock .rv-sum { font-size: var(--gs-fs-caption); }
  .gs-dock .rv-compact-link { display: none; }
  .gs-dock [data-reviews="compact"] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; }
  .gs-dock .rv-attr { margin: 0; }
  .gs-hero-after { display: flex; justify-content: center; }
  html.gs-first-visit .gs-hero-after { display: none; }
  html.gs-first-visit .gs-hero-top h1 { margin-block: var(--gs-s-2); }
  html.gs-first-visit .gs-hero-in { padding: var(--gs-s-2) var(--gs-s-2) 0; }
  html.gs-first-visit .gs-hero-frame { --gs-hang: 2rem; }
  html.gs-first-visit .gs-mark img { height: 2.25rem; }

  /* three facts: one row each, the figure in a column of its own */
  .gs-factband { padding: var(--gs-s-4) 0 var(--gs-s-6); }
  .gs-factrow, .gs-factrow.is-4 { grid-template-columns: minmax(0, 1fr); gap: var(--gs-s-2); }
  .gs-factrow div, .gs-factrow.is-4 div { grid-template-columns: 5rem minmax(0, 1fr); gap: var(--gs-s-3); padding: var(--gs-s-3) var(--gs-s-4); }
  .gs-factrow dt, .gs-factrow.is-4 dt { font-size: var(--gs-fs-figure-sm); }
  .gs-factrow dd { max-width: none; }
  .gs-factband.is-b .gs-factrow div + div { border-left: 0; border-top: 1px solid var(--gs-linha-clara); }

  /* why us on a phone: a strip that shows it swipes */
  .gs-why, .gs-why.is-b {
    grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 74%; gap: var(--gs-s-4); align-items: start; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gs-gutter)); padding-inline: var(--gs-gutter); scroll-padding-inline: var(--gs-gutter); scrollbar-width: none;
  }
  .gs-why::-webkit-scrollbar { display: none; }
  .gs-why > * { scroll-snap-align: start; }
  /* in the strip every argument is already whole: nothing to bring forward */
  .gs-why.is-b .gs-arg.is-big { order: 0; grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .gs-why.is-b .gs-arg.is-big .gs-arg-media { grid-row: auto; margin-bottom: var(--gs-s-2); aspect-ratio: 4 / 3; }
  .gs-why.is-b .gs-arg h3, .gs-why.is-b .gs-arg.is-big h3, .gs-why.is-b .gs-arg:not(.is-big) h3 { font-size: var(--gs-fs-heading); line-height: .95; }
  .gs-why.is-b .gs-arg.is-big p { font-size: var(--gs-fs-small); }
  .gs-why.is-b .gs-arg:not(.is-big) { cursor: auto; }
  .gs-why.is-b .gs-arg:not(.is-big) .gs-link { display: inline-flex; }
  .gs-arg-pick { display: none; }

  .gs-reviews { --gs-rv-lap: 3rem; padding-top: var(--gs-pad-section); }
  .gs-reviews-head { grid-area: 1 / 1; padding-top: 0; padding-bottom: var(--gs-s-5); color: var(--gs-espuma); }
  .gs-reviews-head .gs-title { color: var(--gs-areia); }
  .gs-reviews-photo { grid-area: 2 / 1; height: auto; aspect-ratio: 3 / 2; }
  .gs-reviews-photo img { object-position: 50% 40%; }
  .gs-reviews-body { grid-area: 3 / 1; }
  body.gs .gs-reviews .rv-item:first-child { grid-column: auto; }

  .gs-pt-fig { padding-right: var(--gs-s-2); }
  /* phone: the bar under the thumb already carries the booking, and these four
     facts are on the lesson cards and under the hero */
  #prices .gs-acts, #prices .gs-tags-side { display: none; }
  /* the same in "How it works": one booking button on the screen, the bar's */
  #how .gs-acts .gs-cta { display: none; }
  #how .gs-acts { margin-top: var(--gs-s-4); }
  body.gs :is(#prices, #prices-sheet) .pt-head { min-height: 3.5rem; }
  .gs-proof { gap: var(--gs-s-3); font-size: var(--gs-fs-small); }
  .gs-head { margin-bottom: var(--gs-s-6); }
  .gs-cards { grid-auto-columns: 82%; }
  .gs-steps { grid-template-columns: 1fr; gap: var(--gs-s-4); }
  .gs-two { grid-template-columns: 1fr; }
  body.gs .gs-faq .faq summary { font-size: var(--gs-fs-body); }
  body.gs .gs-levels .level-panel.is-active { grid-template-columns: minmax(0, 1fr); gap: var(--gs-s-3); }
  body.gs .gs-levels .level-art img { max-width: 12rem; }
  body.gs .gs-levels .level-text { max-width: none; text-align: center; }
  body.gs .gs-levels .levels-tabs { justify-content: flex-start; }

  /* the last call: the photograph, and the words overlapping its foot */
  .gs-final { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .gs-final-photo { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
  .gs-final-photo img { object-position: 50% 100%; }
  /* z-index: the text comes first in the markup and the photograph is only moved up by `order`; Safari paints
     positioned grid items in markup order, so without it the photograph covered the top of the title on an iPhone */
  .gs-final-text { position: relative; z-index: 1; margin-top: -3rem; padding: var(--gs-s-6) var(--gs-gutter) var(--gs-s-7); border-radius: var(--gs-r-photo) var(--gs-r-photo) 0 0; background: var(--gs-mar); }

  .gs-foot-grid { grid-template-columns: minmax(0, 1fr); gap: var(--gs-s-5); }
  .gs-foot-nav ul { display: grid; grid-template-columns: 1fr 1fr; }
  /* the lettering whole, edge to edge: cut wider than this it stopped being a word */
  .gs-mega { width: 104%; margin: var(--gs-s-4) -2% -1.2%; }
  /* phone: the bar moves to the thumb — menu, price with its unit, WhatsApp */
  .gs-bar { inset: auto 0 0 0; translate: 0 110%; padding: var(--gs-s-2) var(--gs-s-3) calc(var(--gs-s-2) + env(safe-area-inset-bottom, 0px)); gap: var(--gs-s-3); }
  .gs-bar .gs-mark, .gs-bar [data-lang-mount] { display: none; }
  /* two short lines: "from €37" and, under it, the unit — a single line pushed the button off a 390px screen */
  .gs-bar-price { display: flex; flex-wrap: wrap; margin-right: auto; gap: 0 .3rem; min-width: 0; }
  .gs-bar-price > span { flex-basis: 100%; }
  .gs-bar { min-height: 4rem; padding-block: var(--gs-s-2); }
  .gs-bar-price b { font-size: var(--gs-fs-heading); }
  .gs-bar-price small, .gs-bar-price > span { font-size: var(--gs-fs-tag); white-space: nowrap; }
  .gs-bar .gs-cta { white-space: nowrap; font-size: var(--gs-fs-tag); padding-inline: .9em; }
  /* the lettering hangs a few pixels below its box (its negative margin): leave it clear of the bar */
  .gs-foot { padding-bottom: calc(var(--gs-bar-h) + var(--gs-s-3) + env(safe-area-inset-bottom, 0px)); }
  /* while the consent banner holds the bottom of the screen, the bar goes to
     the top instead of away: the menu and WhatsApp stay within reach */
  body.gs.cookie-open .gs-bar { inset: 0 0 auto 0; translate: 0 -110%; padding-bottom: var(--gs-s-2); transition: none; }
  body.gs.cookie-open .gs-bar.is-on { translate: 0 0; }
  /* …and from the first paint of a first visit, not only once the banner is open: a link straight to
     a price table scrolls on load, before the banner (and so the bar) has come to the top */
  html.gs-first-visit body.gs main [id], body.gs.cookie-open main [id] { scroll-margin-top: calc(var(--gs-bar-h) + 1.5rem); }
}
@media (max-width: 55.99rem) {
  /* main.css stacks the two columns of questions below 56rem: the last question of one and the
     first of the next would draw two rules */
  body.gs .gs-faq .faq-col + .faq-col details:first-child { border-top: 0; }
}
@media (max-width: 22.5rem) {
  /* the narrowest phones, where a translated label would take three lines */
  .gs-dock .gs-cta { font-size: var(--gs-fs-tag); letter-spacing: .02em; padding-inline: .7em; gap: .4em; }
  .gs-dock-price b { font-size: var(--gs-fs-heading); }
  .gs-dock-price small, .gs-dock-price > span { font-size: .75rem; letter-spacing: 0; }
  /* menu and WhatsApp are what the bar is for; with a long label there is no room left for the price */
  .gs-bar-price { display: none; }
  .gs-bar .gs-nav-tools { flex: 1; }
  .gs-bar .gs-cta { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .gs-cta, .gs-bar, .gs-bar.is-on, .gs-card[data-gs-prices], .gs-card-open::after { transition: none; }
  .gs-card[data-gs-prices]:hover { transform: none; }
}
@media (forced-colors: active) {
  .gs-cta, .gs-tag, .gs-chip, .gs-menu-btn, .lang-pick.is-on,
  body.gs .lang-inline .lang-current, body.gs .gs-levels .levels-tabs [role="tab"], body.gs .cookie-bar .cookie-acts .btn { border: 1px solid; }
}