/* ============================================================
   Grandela Surf Club — Surf Camps on the redesign system
   Loaded AFTER system.css, on <body class="gs gs-camps">.

   Two kinds of rule live here:
   · new pieces of this page (gs- prefix, like the rest of the system);
   · the new skin of what the page's script and the booking form already
     draw: .step, .opt, .week, .stepper, .summary-*, .picker, .strip,
     .house-*, .day-*, .pm … Those class names are hooks of the script and
     of the form — they are styled here and never renamed.
   ============================================================ */

body.gs-camps { --gs-cup: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 3.5h9v5.5a4.5 4.5 0 0 1-9 0z'/%3E%3Cpath d='M7.5 5H5a2.5 2.5 0 0 0 2.5 5'/%3E%3Cpath d='M16.5 5H19a2.5 2.5 0 0 1-2.5 5'/%3E%3Cpath d='M12 13.5v3'/%3E%3Cpath d='M9 20.5h6l-.7-4h-4.6z'/%3E%3C/svg%3E"); }

/* this page's own tokens: a notice, a form field, the outline of a choice */
body.gs-camps { --gs-aviso: #F3E3BF; --gs-aviso-tinta: #6B4508; --gs-campo: #FFFFFF; --gs-contorno: rgb(34 39 30 / .4); }

/* [hidden] must win over class-level display rules (.btn, .picker, grids):
   the form shows and hides its own parts with the attribute */
body.gs-camps [hidden] { display: none !important; }

/* ---------- hero ---------- */
/* a longer title than "Never surfed? Start here.": three lines on a phone, two on a desktop */
body.gs-camps { --gs-fs-display: clamp(2rem, 11.4vw, 3.5rem); }
@supports (height: 1svh) {
  body.gs-camps { --gs-fs-display: clamp(2rem, min(11.4vw, calc((100svh - var(--gs-consent-h)) * .068)), 3.5rem); }
}
@media (min-width: 44.01rem) {
  body.gs-camps { --gs-fs-display: clamp(4rem, 6.6vw, 9rem); }
  /* the horizon sits low in this photograph: keep the whole sky for the title */
  .gs-camps .gs-hero-frame > picture > img { object-position: 50% 0; }
}
.gs-dock-facts { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font: 400 var(--gs-fs-small)/1.35 var(--gs-f-text); }
.gs-dock-facts li:not(:last-child)::after { content: "·"; margin: 0 .45em; }
.gs-camps .gs-dock .gs-link svg { margin-top: -.1em; }
/* "Watch the week": rides on the photograph, on the dock's top edge. Out of the flow, so it moves neither the
   price nor the buttons, whatever the height of the screen. */
.gs-camps .gs-dock { position: relative; }
.gs-watch { position: absolute; left: 0; bottom: calc(100% + var(--gs-s-2)); display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .25rem 1rem .25rem .25rem; border: 0; border-radius: 999px; background: var(--gs-mar-2); background: rgb(13 60 68 / .82); color: var(--gs-espuma); font: 700 var(--gs-fs-label)/1 var(--gs-f-display); letter-spacing: .07em; text-transform: uppercase; cursor: pointer; box-shadow: var(--gs-sombra); }
.gs-watch img { width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; }
.gs-watch::before { content: ""; position: absolute; left: calc(.25rem + 1.125rem - .22rem); top: 50%; translate: 0 -50%; border-style: solid; border-width: .38rem 0 .38rem .6rem; border-color: transparent transparent transparent var(--gs-espuma); filter: drop-shadow(0 0 3px rgb(13 60 68 / .7)); }
.gs-watch:hover { background: var(--gs-mar); }
.gs-film-sheet { width: min(64rem, calc(100vw - 2rem)); background: var(--gs-mar); color: var(--gs-espuma); }
.gs-film-sheet .gs-sheet-top { border-bottom: 0; }
.gs-film-sheet .gs-sheet-body { padding: 0; line-height: 0; background: #000; }
.gs-film-sheet .film-media { width: 100%; max-height: calc(100vh - 8rem); aspect-ratio: 16 / 9; object-fit: contain; }
/* under the hero: who this is not for, and how near it is */
.gs-under { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--gs-s-6); padding-block: var(--gs-s-3) 0; color: var(--gs-mar); }
.gs-under p { margin: 0; }
.gs-under + .gs-band { padding-top: var(--gs-s-7); }

/* ---------- choices: seasons, houses, days, years ---------- */
body.gs-camps .picker { display: flex; flex-wrap: wrap; gap: var(--gs-s-2); margin: 0 0 var(--gs-s-4); }
body.gs-camps .picker button {
  min-height: 2.75rem; padding: .1em 1.1em; border: 0; border-radius: var(--gs-r-ctl); background: transparent; color: inherit;
  box-shadow: inset 0 0 0 1.5px currentColor; font: 500 var(--gs-fs-body)/1.1 var(--gs-f-text); cursor: pointer;
}
/* the chosen one is ink, not the accent: on a light ground Mar means "book" and nothing else */
body.gs-camps .picker button:is([aria-selected="true"], [aria-pressed="true"]) { background: var(--gs-rocha); color: var(--gs-espuma); box-shadow: none; }
body.gs-camps .gs-on-oliva .picker button:is([aria-selected="true"], [aria-pressed="true"]) { background: var(--gs-espuma); color: var(--gs-rocha); }

/* ---------- what it costs ---------- */
.gs-inc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.5rem; margin-bottom: var(--gs-s-4); }
.gs-inc-head p { margin: 0; max-width: 70ch; }
.gs-inc { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gs-s-3); margin: 0 0 var(--gs-s-5); padding: 0; list-style: none; }
.gs-inc li { display: grid; align-content: start; gap: .25rem; min-width: 0; padding: var(--gs-s-4); border-radius: var(--gs-r-card); background: var(--gs-espuma); }
.gs-inc .is-opt { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gs-rocha); }
.gs-inc-n { font: 900 var(--gs-fs-heading)/.95 var(--gs-f-display); text-transform: uppercase; color: var(--gs-mar); overflow-wrap: break-word; }
.gs-inc h3 { margin: 0; font: 600 var(--gs-fs-body)/1.25 var(--gs-f-text); }
.gs-inc p { margin: 0; font-size: var(--gs-fs-small); line-height: 1.4; color: var(--gs-rocha-2); }
.gs-price-card { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--gs-r-card); background: var(--gs-espuma); }
.gs-price-card > .gs-heading { margin-bottom: var(--gs-s-4); }
.pm-pick { display: none !important; }
.pm { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pm th, .pm td { padding: var(--gs-s-3) 0 var(--gs-s-3) var(--gs-s-4); text-align: right; vertical-align: top; border-top: 1px solid var(--gs-linha); }
.pm th:first-child { padding-left: 0; text-align: left; }
.pm thead th { border-top: 0; padding-top: 0; font: 700 var(--gs-fs-tag)/1.15 var(--gs-f-display); letter-spacing: .07em; text-transform: uppercase; color: var(--gs-rocha-2); white-space: nowrap; }
.pm tbody th { font: 500 var(--gs-fs-sub)/1.2 var(--gs-f-text); }
.pm tbody th small { display: block; margin-top: .2rem; font: 400 var(--gs-fs-caption)/1.3 var(--gs-f-text); color: var(--gs-rocha-2); }
.pm td strong { display: block; font: 900 var(--gs-fs-figure-sm)/.9 var(--gs-f-display); color: var(--gs-rocha); white-space: nowrap; }
.pm .pm-tot { display: block; margin-top: .25rem; font-size: var(--gs-fs-caption); color: var(--gs-rocha-2); white-space: nowrap; }
.pm .pm-tag { display: inline-block; margin-top: .3rem; padding: .25em .6em .05em; border-radius: var(--gs-r-ctl); background: var(--gs-areia); color: var(--gs-rocha); font: 700 var(--gs-fs-tag)/1.2 var(--gs-f-display); letter-spacing: .05em; white-space: nowrap; }
.pc-foot { margin: var(--gs-s-4) 0 0; max-width: 100ch; }

/* ---------- the booking band: deep water, the form on a card ---------- */
.gs-book { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.gs-book .gs-head { margin-bottom: var(--gs-s-6); }
.gs-book .gs-head-split { align-items: center; }
.gs-ministeps { counter-reset: gs-ms; display: grid; gap: var(--gs-s-2); margin: 0; padding: 0; list-style: none; }
.gs-ministeps li { counter-increment: gs-ms; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); align-items: baseline; font: 500 var(--gs-fs-sub)/1.3 var(--gs-f-text); }
.gs-ministeps li::before { content: counter(gs-ms); font: 900 var(--gs-fs-ui-lg)/1 var(--gs-f-display); color: var(--gs-acento-inv); }
.gs-added { width: fit-content; margin: 0 0 var(--gs-s-4); padding: .55rem 1rem; border-radius: var(--gs-r-sm); background: var(--gs-espuma); color: var(--gs-rocha); font-size: var(--gs-fs-small); }
.booking-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gs-s-4); align-items: start; }
.booking-grid > * { min-width: 0; }
.booking-main { padding: clamp(1.25rem, 3.5vw, 2.5rem); border-radius: var(--gs-r-card); background: var(--gs-espuma); color: var(--gs-rocha); }
/* inside the two cards the ground is light again: the focus ring goes back to Mar */
body.gs .gs-book :is(.booking-main, .summary-card, .confirm) :focus-visible { outline-color: var(--gs-mar); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.progress { display: grid; gap: .5rem; margin-bottom: var(--gs-s-5); }
.progress-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.progress-step { font: 700 var(--gs-fs-tag)/1 var(--gs-f-display); letter-spacing: .07em; text-transform: uppercase; color: var(--gs-rocha-2); }
.progress-title { font-size: var(--gs-fs-small); color: var(--gs-rocha-2); }
.progress-bar { height: 4px; border-radius: 4px; background: var(--gs-linha); overflow: hidden; }
.progress-fill { height: 100%; width: 0; border-radius: 4px; background: var(--gs-mar); transition: width .25s ease; }

.step { display: none; }
.step.is-active { display: block; }
fieldset.step { min-width: 0; margin: 0; padding: 0; border: 0; }
.step > legend, .step-q { display: block; margin: 0 0 .35rem; padding: 0; font: 800 var(--gs-fs-heading)/.95 var(--gs-f-display); text-transform: uppercase; color: var(--gs-rocha); }
.step > legend:focus { outline: none; }
.step-help { margin: 0 0 var(--gs-s-4); font-size: var(--gs-fs-small); line-height: 1.5; color: var(--gs-rocha-2); }
.step-error { min-height: 1.2em; margin: .9rem 0 0; font-size: var(--gs-fs-small); font-weight: 600; color: var(--gs-perigo); }
.week-note { margin: .9rem 0 0; font-size: var(--gs-fs-small); color: var(--gs-rocha-2); }
.week-alert, .style-notice, .sp-gate { padding: .7rem .9rem; border-radius: var(--gs-r-sm); background: var(--gs-aviso); color: var(--gs-aviso-tinta); font-size: var(--gs-fs-small); line-height: 1.45; }
.week-alert { margin: 0 0 .9rem; }
.style-notice { margin: .9rem 0 0; }
.link-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

/* a choice: outlined; chosen = ink */
.opt-grid { display: grid; gap: .6rem; }
.opt-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.opt .opt-card { display: grid; gap: .2rem; height: 100%; padding: .9rem 1rem; border-radius: var(--gs-r-sm); box-shadow: inset 0 0 0 1.5px var(--gs-contorno); transition: box-shadow .15s ease, background .15s ease; }
.opt:hover .opt-card { box-shadow: inset 0 0 0 2px var(--gs-rocha); }
.opt input:checked + .opt-card { background: var(--gs-rocha); color: var(--gs-espuma); box-shadow: none; }
.opt input:focus-visible + .opt-card { outline: 3px solid var(--gs-mar); outline-offset: 2px; }
.o-title { display: flex; align-items: center; gap: .55rem; font: 600 var(--gs-fs-body)/1.25 var(--gs-f-text); }
.o-sub { font-size: var(--gs-fs-small); line-height: 1.4; color: var(--gs-rocha-2); }
.opt input:checked + .opt-card .o-sub, .opt input:checked + .opt-card .w-season { color: var(--gs-suave-escuro); }
.o-check { display: grid; place-content: center; flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.o-check::after { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform .15s ease; }
.opt input:checked + .opt-card .o-check::after { transform: scale(1); }
.opt.is-check .o-check { border-radius: 3px; }
.opt.is-check .o-check::after { border-radius: 1px; }

/* the weeks: the live calendar. A long list, so it scrolls in its own frame
   and "Next" stays in sight under it. */
.year-tabs { margin-bottom: var(--gs-s-3) !important; }
.weeks { display: grid; gap: .6rem; max-height: min(56vh, 25rem); padding: 3px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.weeks-group-label { grid-column: 1 / -1; margin: .6rem 0 0; font: 700 var(--gs-fs-tag)/1 var(--gs-f-display); letter-spacing: .07em; text-transform: uppercase; color: var(--gs-rocha-2); }
.weeks-group-label:first-child { margin-top: 0; }
.weeks-empty { margin: 0; padding: 1rem 0; color: var(--gs-rocha-2); }
.week .opt-card { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.week .w-when { font-weight: 600; }
.week .w-season { font: 400 var(--gs-fs-caption)/1.3 var(--gs-f-text); color: var(--gs-rocha-2); }
.week .w-status { flex: none; padding: .3em .7em .1em; border-radius: var(--gs-r-ctl); font: 700 var(--gs-fs-tag)/1.2 var(--gs-f-display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.week .w-status.available { background: var(--gs-ok); color: var(--gs-espuma); }
.week .w-status.few, .week .w-status.onreq { background: var(--gs-atencao); color: var(--gs-espuma); }
.week .w-status.full { background: transparent; color: var(--gs-rocha-2); box-shadow: inset 0 0 0 1.5px currentColor; }
.week.is-full { cursor: not-allowed; }
.week.is-full .opt-card { color: var(--gs-rocha-2); box-shadow: inset 0 0 0 1.5px var(--gs-linha); }

/* guests and surfers */
.count-block + .count-block { margin-top: var(--gs-s-5); padding-top: var(--gs-s-5); border-top: 1px solid var(--gs-linha); }
.count-k { margin: 0 0 .3rem; font: 700 var(--gs-fs-tag)/1 var(--gs-f-display); letter-spacing: .07em; text-transform: uppercase; color: var(--gs-rocha-2); }
.count-block .step-help { margin-bottom: .75rem; }
.stepper-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.stepper { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem; border-radius: var(--gs-r-ctl); box-shadow: inset 0 0 0 1.5px var(--gs-contorno); }
.stepper button { display: grid; place-content: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: var(--gs-areia); color: var(--gs-rocha); font: 600 1.4rem/1 var(--gs-f-text); cursor: pointer; }
.stepper button:hover:not(:disabled) { background: var(--gs-rocha); color: var(--gs-espuma); }
.stepper button:disabled { opacity: .4; cursor: not-allowed; }
.stepper .count { min-width: 3rem; text-align: center; font: 900 var(--gs-fs-figure-sm)/1 var(--gs-f-display); font-variant-numeric: tabular-nums; }
.stepper-cap { color: var(--gs-rocha-2); }
.cfg-price { display: grid; justify-items: start; gap: .35rem; margin-top: 1rem; }
.cfg-line { margin: 0; }
.cfg-line strong { font: 900 var(--gs-fs-figure-sm)/1 var(--gs-f-display); }
.cfg-tag { padding: .3em .7em .1em; border-radius: var(--gs-r-ctl); background: var(--gs-areia); font: 700 var(--gs-fs-tag)/1.2 var(--gs-f-display); letter-spacing: .05em; }
.cfg-sub { margin: 0; font-size: var(--gs-fs-small); color: var(--gs-rocha-2); }
.lessons-door { display: grid; justify-items: start; gap: .8rem; margin-top: 1.2rem; padding: 1rem 1.1rem; border-radius: var(--gs-r-sm); background: var(--gs-areia); }
.lessons-door p { margin: 0; font-size: var(--gs-fs-small); line-height: 1.5; }
.rider-pick { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: -.2rem 0 .2rem; padding: .7rem .9rem; border-radius: var(--gs-r-sm); background: var(--gs-areia); }
.rider-pick label { font: 700 var(--gs-fs-tag)/1.2 var(--gs-f-display); letter-spacing: .07em; text-transform: uppercase; }
.rider-pick select { min-height: 2.75rem; padding: .3rem .6rem; border: 1.5px solid var(--gs-contorno); border-radius: var(--gs-r-sm); background: var(--gs-espuma); color: var(--gs-rocha); font: 400 1rem/1.2 var(--gs-f-text); }
.rider-note { font-size: var(--gs-fs-small); color: var(--gs-rocha-2); }

/* fields */
.fields-2 { display: grid; gap: 0; }
.field { display: grid; gap: .35rem; margin-bottom: 1.1rem; }
.field label { font: 700 var(--gs-fs-tag)/1.2 var(--gs-f-display); letter-spacing: .07em; text-transform: uppercase; color: var(--gs-rocha-2); }
.field .req { color: var(--gs-perigo); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3.25rem; padding: .7rem .9rem; border: 1.5px solid var(--gs-contorno); border-radius: var(--gs-r-sm);
  background: var(--gs-campo); color: var(--gs-rocha); font: 400 1.0625rem/1.3 var(--gs-f-text);
}
.field textarea { min-height: 6rem; resize: vertical; }
.consent { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .7rem; margin-top: .4rem; padding: 1rem; border-radius: var(--gs-r-sm); background: var(--gs-areia); }
.consent input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: var(--gs-mar); }
.consent label { font-size: var(--gs-fs-small); line-height: 1.5; }
.consent a, .step-help a, .review-terms a { color: inherit; }

/* review, and the terms said before sending */
.review { display: grid; gap: 0; margin: .4rem 0 0; padding: 0; list-style: none; }
.review li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--gs-linha); }
.review .r-k { color: var(--gs-rocha-2); }
.review .r-v { font-weight: 600; text-align: right; }
.review li { align-items: center; }
.review .r-edit { display: inline-flex; align-items: center; min-height: 2.75rem; margin-left: .5rem; padding: 0 .25rem; border: 0; background: none; color: inherit; font: 400 var(--gs-fs-small)/1 var(--gs-f-text); text-decoration: underline; cursor: pointer; }
.review-terms { margin-top: 1.2rem; padding: 1rem 1.1rem; border-radius: var(--gs-r-sm); background: var(--gs-areia); font-size: var(--gs-fs-small); line-height: 1.5; }
.review-terms .rt-k { margin: 0 0 .4rem; font: 700 var(--gs-fs-tag)/1 var(--gs-f-display); letter-spacing: .07em; text-transform: uppercase; }
.review-terms ul { display: grid; gap: .35rem; margin: 0 0 .6rem; padding-left: 1.1rem; }
.review-terms p { margin: 0; }

/* the form's own buttons, in the system's shape */
.form-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: var(--gs-s-5); }
body.gs-camps .booking-main .btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 8rem; min-height: 3.25rem; padding: .55em 1.5em .4em;
  border: 0; border-radius: var(--gs-r-ctl); background: transparent; color: var(--gs-rocha); box-shadow: inset 0 0 0 2px currentColor;
  font: 800 var(--gs-fs-ui)/1 var(--gs-f-display); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; cursor: pointer;
}
body.gs-camps .booking-main .btn-solid { background: var(--gs-acento); color: var(--gs-acento-tinta); box-shadow: none; }
body.gs-camps .booking-main .btn:disabled { opacity: .6; cursor: progress; }
.form-nav #btn-next, .form-nav #btn-send { margin-left: auto; }
.form-alt { margin: var(--gs-s-4) 0 0; font-size: var(--gs-fs-small); }
body.gs-camps .booking-main .link { background: none; color: inherit; text-decoration: underline; text-underline-offset: .2em; }

/* "Your camp" */
.booking-aside { position: sticky; top: 1rem; }
.summary-card { padding: 1.25rem 1.35rem; border-radius: var(--gs-r-card); background: var(--gs-areia); color: var(--gs-rocha); }
.summary-card h3 { margin: 0 0 .8rem; font: 800 var(--gs-fs-heading)/.95 var(--gs-f-display); text-transform: uppercase; }
.summary-compact { display: none; margin: 0; }
.summary-list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.summary-list li { display: flex; justify-content: space-between; gap: .8rem; font-size: var(--gs-fs-small); }
.summary-list .s-k { color: var(--gs-rocha-2); }
.summary-list .s-v { font-weight: 600; text-align: right; }
.summary-list .s-empty { font-weight: 400; color: var(--gs-rocha-2); }
.summary-price { display: grid; gap: .4rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--gs-linha); }
.summary-price .sp-row { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.summary-price .sp-k { font: 700 var(--gs-fs-tag)/1.15 var(--gs-f-display); letter-spacing: .07em; text-transform: uppercase; color: var(--gs-rocha-2); }
.summary-price .sp-pp-v { font: 900 var(--gs-fs-figure-sm)/1 var(--gs-f-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary-price .sp-tot-v { font: 800 var(--gs-fs-ui-lg)/1 var(--gs-f-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary-price .sp-lines { display: grid; gap: .2rem; }
.summary-price .sp-line { display: flex; justify-content: space-between; gap: .8rem; font-size: var(--gs-fs-small); }
.summary-price .sp-line .sp-lk { color: var(--gs-rocha-2); }
.summary-price .sp-line .sp-lv { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-total-row { margin-top: .3rem; padding-top: .5rem; border-top: 1px solid var(--gs-linha); }
.summary-price .sp-vs { margin: 0; font-size: var(--gs-fs-caption); font-weight: 600; line-height: 1.4; color: var(--gs-ok); }
.summary-price .sp-note { margin: 0; font-size: var(--gs-fs-caption); color: var(--gs-rocha-2); }
.sp-byhand { margin: 0; font-weight: 600; line-height: 1.4; }
.sp-gate { margin: .6rem 0 0; font-size: var(--gs-fs-caption); }
.summary-incl { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--gs-linha); }
.summary-incl h4 { margin: 0 0 .5rem; font: 700 var(--gs-fs-tag)/1 var(--gs-f-display); letter-spacing: .07em; text-transform: uppercase; color: var(--gs-rocha-2); }
.summary-incl ul { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; font-size: var(--gs-fs-small); }
.summary-incl li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .45rem; align-items: baseline; }
.summary-incl li::before { content: ""; width: .6rem; height: .32rem; border: solid var(--gs-ok); border-width: 0 0 2.5px 2.5px; rotate: -45deg; translate: 0 -.2rem; }
.reassure { display: flex; align-items: center; gap: .7rem; margin-top: .9rem; padding: .75rem .9rem; border-radius: var(--gs-r-sm); background: var(--gs-espuma); }
.reassure .r-clock { flex: none; width: 1.8rem; height: 1.8rem; }
.reassure .r-clock svg { display: block; width: 100%; height: 100%; }
.reassure p { margin: 0; font-size: var(--gs-fs-small); line-height: 1.4; }

/* after sending */
.confirm { display: grid; justify-items: center; gap: 1rem; padding: clamp(1.25rem, 3.5vw, 2.5rem); border-radius: var(--gs-r-card); background: var(--gs-espuma); color: var(--gs-rocha); text-align: center; }
.confirm .c-mark { width: 3.5rem; height: 3.5rem; color: var(--gs-ok); }
.confirm h3 { margin: 0; font: 800 var(--gs-fs-heading)/.95 var(--gs-f-display); text-transform: uppercase; }
.confirm p { margin: 0; max-width: 46ch; }
.confirm .c-recap { width: 100%; max-width: 30rem; padding: 1rem 1.2rem; border-radius: var(--gs-r-sm); background: var(--gs-areia); text-align: left; }
.confirm .c-recap .review { margin: 0; }
.confirm .link { background: none; color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.confirm .c-hurry { font-size: var(--gs-fs-small); }

/* ---------- strips of photographs: they show that they swipe ---------- */
body.gs-camps .bleed-strip { position: relative; margin-top: 0; }
body.gs-camps .bstrip {
  display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: var(--gs-s-3); padding: 0 var(--gs-gutter); overflow-x: auto;
  overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gs-gutter); scrollbar-width: none;
}
body.gs-camps .bstrip::-webkit-scrollbar, body.gs-camps .strip::-webkit-scrollbar { display: none; }
body.gs-camps .bstrip figure { margin: 0; line-height: 0; scroll-snap-align: start; }
body.gs-camps .bstrip img { display: block; width: auto; max-width: none; height: min(50svh, 28rem); border-radius: var(--gs-r-card); object-fit: cover; }
body.gs-camps .gal-dots { margin-top: var(--gs-s-3); }
.strip-wrap { position: relative; min-width: 0; }
body.gs-camps .strip { display: grid; grid-auto-flow: column; grid-auto-columns: min(40%, 28rem); gap: var(--gs-s-3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
body.gs-camps .strip > figure { margin: 0; scroll-snap-align: start; }
body.gs-camps .strip img { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--gs-r-card); object-fit: cover; background: var(--gs-areia); }
.strip-hint { margin: var(--gs-s-2) 0 0; font: 700 var(--gs-fs-tag)/1.2 var(--gs-f-display); letter-spacing: .07em; text-transform: uppercase; color: var(--gs-rocha-2); }
/* a placeholder for a photograph that has not arrived */
.ph { display: grid; place-content: center; justify-items: center; gap: .35rem; aspect-ratio: 4 / 3; padding: 1rem; border-radius: var(--gs-r-card); background: var(--gs-areia); color: var(--gs-rocha-2); text-align: center; line-height: 1.4; }
.ph .ph-ic { display: block; width: 1.8rem; height: 1.8rem; }
.ph .ph-ic svg { width: 100%; height: 100%; }
.ph .ph-file { font-size: var(--gs-fs-caption); word-break: break-word; }
/* arrows, where there is a cursor to press them with */
.gs-arrow { position: absolute; top: calc(50% - 2.75rem); z-index: 2; display: none; place-content: center; width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: 50%; background: var(--gs-espuma); color: var(--gs-rocha); box-shadow: var(--gs-sombra); cursor: pointer; }
.gs-arrow::before { content: ""; width: .65rem; height: .65rem; margin-left: .3rem; border: solid currentColor; border-width: 0 0 2.5px 2.5px; rotate: 45deg; }
.gs-arrow-next::before { margin: 0 .3rem 0 0; rotate: -135deg; }
.gs-arrow-prev { left: var(--gs-gutter); }
.gs-arrow-next { right: var(--gs-gutter); }
.strip-wrap .gs-arrow-prev { left: var(--gs-s-2); }
.strip-wrap .gs-arrow-next { right: var(--gs-s-2); }
@media (hover: hover) and (pointer: fine) { .gs-arrow { display: grid; } }

/* ---------- where you'll stay ---------- */
.gs-title-sm { font-size: var(--gs-fs-title-sm); }
.gs-contrast { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gs-s-4); margin-bottom: var(--gs-s-7); }
.gs-contrast > div { padding: var(--gs-s-5); border-radius: var(--gs-r-card); }
.gs-contrast-them { color: var(--gs-rocha-2); box-shadow: inset 0 0 0 1.5px var(--gs-linha); }
.gs-contrast-us { background: var(--gs-areia); }
.gs-contrast h3 { margin: 0 0 var(--gs-s-4); }
.gs-contrast ul { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.gs-contrast li { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: .5rem; align-items: baseline; font: 500 var(--gs-fs-sub)/1.3 var(--gs-f-text); }
.gs-contrast-them li::before { content: "×"; font-weight: 400; }
.gs-contrast-us li::before { content: ""; width: .7rem; height: .38rem; border: solid var(--gs-ok); border-width: 0 0 3px 3px; rotate: -45deg; translate: 0 -.25rem; }
/* two rows that read side by side: what the Ferrel houses have beside their photographs; the houses beside their tabs */
.gs-ferrel, .gs-houses { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.gs-side { display: grid; justify-items: start; gap: var(--gs-s-3); }
.gs-side p, .gs-side .gs-tags { margin: 0; }
.gs-side .gs-lede { font: 500 var(--gs-fs-sub-lg)/1.25 var(--gs-f-text); }
.gs-side .gs-feats { grid-template-columns: minmax(0, 1fr); gap: var(--gs-s-3); margin-top: var(--gs-s-2); }
.gs-side .gs-cta { margin-top: var(--gs-s-3); }
body.gs-camps .gs-ferrel .strip { grid-auto-columns: 78%; }
body.gs-camps .gs-ferrel .strip img { aspect-ratio: 3 / 2; }
body.gs-camps .gs-houses .strip { grid-auto-columns: 62%; }
.gs-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gs-s-4) var(--gs-s-6); margin: 0; padding: 0; list-style: none; }
.gs-feats.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gs-s-5); }
.gs-feats li { padding-top: var(--gs-s-3); border-top: 2px solid var(--gs-rocha); font-size: var(--gs-fs-small); line-height: 1.5; color: var(--gs-rocha-2); }
.gs-feats strong { color: var(--gs-rocha); font-weight: 600; }
.gs-houses { margin-top: var(--gs-s-8); }
.house-panel { display: grid; gap: var(--gs-s-4); }
.house-panel > * { min-width: 0; }
.house-body { display: grid; gap: .6rem; }
.house-body h3 { margin: 0; font: 800 var(--gs-fs-heading)/.95 var(--gs-f-display); text-transform: uppercase; }
.house-body p { margin: 0; max-width: 62ch; color: var(--gs-rocha-2); }
.house-specs { display: flex; flex-wrap: wrap; gap: var(--gs-s-2); margin: 0; padding: 0; list-style: none; }
.house-specs li { display: inline-flex; align-items: center; min-height: 1.875rem; padding: .1em .8em; border-radius: var(--gs-r-ctl); background: var(--gs-areia); font: 500 var(--gs-fs-small)/1.1 var(--gs-f-text); }
.coming-soon { display: grid; align-content: center; justify-items: start; gap: .5rem; min-height: 14rem; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--gs-r-card); background: var(--gs-areia); }
.coming-soon .cs-ic { width: 1.9rem; height: 1.9rem; }
.coming-soon .cs-ic svg { width: 100%; height: 100%; }
.coming-soon .cs-title { margin: 0; font: 600 var(--gs-fs-sub)/1.25 var(--gs-f-text); }
.coming-soon p { margin: 0; max-width: 46ch; font-size: var(--gs-fs-small); }

/* ---------- the week ---------- */
.gs-week-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.film { position: relative; overflow: hidden; border-radius: var(--gs-r-photo); background: var(--gs-oliva-2); line-height: 0; }
.film-media { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.film .ph { aspect-ratio: 16 / 9; border-radius: 0; }
/* no veil on a picture: one short gradient of deep water under the caption */
.film-cap { position: absolute; inset: auto 0 0 0; margin: 0; padding: 2.5rem var(--gs-s-4) .8rem; background: linear-gradient(rgb(13 60 68 / 0), rgb(13 60 68 / .34)); color: var(--gs-espuma); font: 700 var(--gs-fs-tag)/1.3 var(--gs-f-display); letter-spacing: .07em; text-transform: uppercase; pointer-events: none; }
.gs-days { min-width: 0; }
.day-panel { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; gap: var(--gs-s-4); align-items: start; min-height: 19rem; padding: var(--gs-s-5); border-radius: var(--gs-r-card); background: var(--gs-espuma); color: var(--gs-rocha); }
.day-panel .d-body { display: grid; align-content: start; gap: .5rem; min-width: 0; }
.day-panel .d-when { font: 700 var(--gs-fs-tag)/1 var(--gs-f-display); letter-spacing: .07em; text-transform: uppercase; color: var(--gs-rocha-2); }
.day-panel h3 { margin: 0; font: 800 var(--gs-fs-heading)/.95 var(--gs-f-display); text-transform: uppercase; }
.day-panel p { margin: 0; font-size: var(--gs-fs-small); line-height: 1.5; color: var(--gs-rocha-2); }
.day-panel .d-beats { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 0; padding: 0; list-style: none; }
.day-panel .d-beats li { display: inline-flex; align-items: center; min-height: 1.75rem; padding: .1em .75em; border-radius: var(--gs-r-ctl); background: var(--gs-areia); font: 500 var(--gs-fs-caption)/1.1 var(--gs-f-text); }
.day-art img { display: block; width: 100%; height: auto; }
.gs-week .itin-note { margin-top: var(--gs-s-4); }
.gs-waves { margin-top: var(--gs-s-6) !important; }
/* students on their waves: one format for all six */
body.gs-camps .gs-waves .bstrip img { height: min(40svh, 20rem); aspect-ratio: 4 / 3; }
.gs-weektex { display: grid; gap: var(--gs-s-4); margin-top: var(--gs-s-7); }
.gs-weektex-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.5rem; }
.gs-weektex-head .gs-heading { color: var(--gs-areia); }
.gs-weektex-head p { margin: 0; }
.gs-weektex ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gs-s-5); margin: 0; padding: 0; list-style: none; }
.gs-weektex li { padding-top: var(--gs-s-3); border-top: 2px solid var(--gs-areia); }
.gs-weektex h4 { margin: 0 0 .45rem; font: 800 var(--gs-fs-ui-lg)/1.05 var(--gs-f-display); letter-spacing: .02em; text-transform: uppercase; color: var(--gs-areia); }
.gs-weektex li p { margin: 0; font-size: var(--gs-fs-small); line-height: 1.5; }
/* the way to the form, on a plate of deep water (no accent button stands on Oliva) */
.gs-plate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gs-s-4) var(--gs-s-6); margin-top: var(--gs-s-6); padding: var(--gs-s-5) var(--gs-s-6); border-radius: var(--gs-r-card); }
.gs-plate .gs-heading { color: var(--gs-areia); }
.gs-plate .gs-acts { margin: 0; }
.gs-wa-line { display: inline-flex; align-items: center; gap: .5em; min-height: 2.75rem; max-width: 34rem; color: inherit; font-size: var(--gs-fs-small); line-height: 1.35; text-underline-offset: .2em; }
.gs-wa-line svg { flex: none; width: 1.25rem; height: 1.25rem; }

/* ---------- extras ---------- */
.gs-ex { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; gap: var(--gs-s-4) clamp(1.5rem, 4vw, 4rem); align-items: start; }
.gs-ex-media { grid-area: 1 / 1; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--gs-r-photo); background: var(--gs-agua); }
.gs-ex-media img { display: block; width: 100%; height: 100% !important; object-fit: cover; }
.gs-ex-now { grid-area: 2 / 1; display: grid; justify-items: start; align-content: start; gap: var(--gs-s-2); min-height: 15rem; }
.gs-ex-now p { margin: 0; }
.gs-ex-blurb { max-width: 62ch; color: var(--gs-rocha-2); }
.gs-ex-terms { font-weight: 600; }
.gs-ex-now .gs-cta { margin-top: var(--gs-s-2); }
.gs-ex-list { grid-area: 1 / 2 / span 2 / auto; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--gs-rocha); }
.gs-ex-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--gs-s-3); width: 100%; min-height: 3.75rem; padding: var(--gs-s-3) 0;
  border: 0; border-bottom: 1px solid var(--gs-linha); background: none; color: var(--gs-rocha-2); text-align: left; cursor: pointer;
}
.gs-ex-name { min-width: 0; font: 800 var(--gs-fs-heading)/.95 var(--gs-f-display); text-transform: uppercase; overflow-wrap: break-word; }
.gs-ex-cost { flex: none; font: 500 var(--gs-fs-small)/1.2 var(--gs-f-text); white-space: nowrap; }
.gs-ex-item:hover, .gs-ex-item[aria-pressed="true"] { color: var(--gs-rocha); }
.gs-ex-item[aria-pressed="true"] .gs-ex-name { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .18em; }
/* a browser without <dialog> would draw the sheet in the page: it stays out until it is opened */
dialog.gs-sheet:not([open]) { display: none; }
.gs-ex-sheet .gs-sheet-body > * { margin: 0; }
.gs-ex-sheet .gs-sheet-body > * + * { margin-top: var(--gs-s-3); }
body.gs-camps .gs-ex-sheet .strip { grid-auto-columns: min(78%, 24rem); }
.gs-ex-sheet .gs-link { color: var(--gs-rocha); }

/* ---------- the promise: two coastlines ---------- */
.gs-coast .gs-two { align-items: center; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.gs-coast-text { display: grid; justify-items: start; gap: var(--gs-s-4); }
.gs-coast-text p { margin: 0; }
.gs-coast-text .gs-lede { font: 500 var(--gs-fs-sub-lg)/1.25 var(--gs-f-text); }
/* isolation: Leaflet's panes carry z-indexes in the hundreds; they stay inside the map */
.coast-map { isolation: isolate; width: 100%; height: 30rem; overflow: hidden; border-radius: var(--gs-r-photo); background: var(--gs-mar); }
.gs-coast .bleed-strip { margin-top: var(--gs-s-7) !important; }
.spot-pin { stroke: var(--gs-espuma); stroke-width: 2; cursor: default; }
body.gs-camps .leaflet-container { background: var(--gs-mar); font-family: var(--gs-f-text); }
body.gs-camps .leaflet-bar { overflow: hidden; border: 0; border-radius: var(--gs-r-sm); box-shadow: var(--gs-sombra); }
body.gs-camps .leaflet-bar a, body.gs-camps .leaflet-bar a:hover { width: 2.75rem; height: 2.75rem; line-height: 2.75rem; background: var(--gs-espuma); color: var(--gs-rocha); }
body.gs-camps .leaflet-control-attribution { background: rgb(250 246 236 / .88); color: var(--gs-rocha-2); font-size: .6875rem; }
body.gs-camps .leaflet-control-attribution a { color: inherit; }
.map-tip { padding: .2rem .5rem; border: 0; border-radius: 3px; background: var(--gs-rocha); color: var(--gs-espuma); box-shadow: none; font-size: var(--gs-fs-caption); white-space: nowrap; }
.map-tip::before { display: none; }

/* ---------- why us: four proofs ---------- */
.gs-why.is-b.is-four { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gs-arg-cap { opacity: .92; }
.gs-arg p.gs-arg-cap { font-size: var(--gs-fs-caption); }
.gs-arg-quote { display: block; margin-bottom: .15rem; font: 700 var(--gs-fs-tag)/1.3 var(--gs-f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--gs-espuma); }
.gs-arg p em { font-style: italic; }
.gs-family-out { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--gs-s-3) var(--gs-s-6); margin-top: var(--gs-s-7); }
.gs-family-out p { max-width: 40ch; margin: 0; font: 500 var(--gs-fs-sub-lg)/1.25 var(--gs-f-text); }

/* ---------- the table: the kitchen, as history ---------- */
.gs-medina { align-items: center; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.gs-medina-fig { margin: 0; overflow: hidden; border-radius: var(--gs-r-photo); background: var(--gs-espuma); }
.gs-medina-fig img { display: block; width: 100%; height: auto; }
.gs-medina-text { display: grid; justify-items: start; gap: var(--gs-s-3); }
.gs-medina-text p { margin: 0; }
.gs-medina-line { font-size: var(--gs-fs-title-sm); line-height: .9; color: var(--gs-mar); }
/* one generic cup, three times, for three titles: a plain cup, not the World Surf League's trophy */
.gs-medina-cups { display: flex; gap: .4rem; }
.gs-medina-cups span {
  width: 1.6rem; height: 1.6rem; background: var(--gs-mar);
  -webkit-mask: var(--gs-cup) center / contain no-repeat; mask: var(--gs-cup) center / contain no-repeat;
}
.gs-medina-years { font: 700 var(--gs-fs-ui-lg)/1.1 var(--gs-f-display); letter-spacing: .05em; text-transform: uppercase; }
.gs-table .gs-feats { margin-top: var(--gs-s-6); }
body.gs-camps .gs-table .bstrip img { height: min(40svh, 20rem); }
.gs-meals { max-width: 90ch; margin: var(--gs-s-6) 0 0; padding: var(--gs-s-4) var(--gs-s-5); border-radius: var(--gs-r-card); background: var(--gs-espuma); font-size: var(--gs-fs-small); line-height: 1.5; }
.gs-table .bleed-strip { margin-top: var(--gs-s-6) !important; }

/* ---------- questions: one column, the short answer beside each ---------- */
body.gs .gs-camp-faq .faq { max-width: none; columns: auto; }
.gs-camp-faq .faq-group + .faq-group { margin-top: var(--gs-s-7); }
body.gs .gs-camp-faq .faq-group > .label { display: inline-flex; align-items: center; min-height: 1.75rem; margin: 0 0 var(--gs-s-3); padding: .15em .7em 0; border-radius: var(--gs-r-ctl); box-shadow: inset 0 0 0 1.5px currentColor; color: var(--gs-espuma); font: 700 var(--gs-fs-tag)/1 var(--gs-f-display); letter-spacing: .07em; text-transform: uppercase; }
body.gs .gs-camp-faq .faq summary { display: grid; grid-template-columns: minmax(0, 23rem) minmax(0, 1fr) auto; gap: 0 clamp(1.5rem, 3vw, 2.5rem); align-items: baseline; }
body.gs .gs-camp-faq .faq summary { min-height: 3.25rem; padding-block: var(--gs-s-2); }
body.gs .gs-camp-faq .faq summary::after { align-self: center; }
.gs-camp-faq .q { font: 500 var(--gs-fs-sub)/1.25 var(--gs-f-text); }
.gs-camp-faq .gist { font: 400 var(--gs-fs-small)/1.4 var(--gs-f-text); }
.gs-camp-faq .a { margin-left: calc(23rem + clamp(1.5rem, 3vw, 2.5rem)); }
.gs-camp-faq .a > * { margin: 0; }
.gs-camp-faq .a > * + * { margin-top: .7rem; }
body.gs .gs-camp-faq .faq .a p { max-width: 62ch; padding: 0; color: var(--gs-espuma); }
.gs-camp-faq .sea-wrap { overflow-x: auto; }
.sea-table { width: 100%; min-width: 22rem; border-collapse: collapse; font-size: var(--gs-fs-small); }
.sea-table th, .sea-table td { padding: .45rem .8rem .45rem 0; border-bottom: 1px solid var(--gs-linha-clara); text-align: left; }
.sea-table th { font: 700 var(--gs-fs-tag)/1.2 var(--gs-f-display); letter-spacing: .07em; text-transform: uppercase; color: var(--gs-espuma); }
.sea-table tr.is-now td { font-weight: 600; }
.gs-camp-faq .gs-acts p { max-width: 62ch; margin: 0; }
.gs-final-text .gs-small a { color: inherit; text-underline-offset: .2em; }

/* ---------- the bar: it steps aside while the form is on screen ---------- */
.gs-bar.is-on.is-away { translate: 0 -110%; visibility: hidden; transition: translate .25s ease, visibility 0s .25s; }
.gs-bar-wa { display: none; place-content: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.gs-bar-wa svg { width: 1.3rem; height: 1.3rem; }

/* ============================================================ */
@media (min-width: 40rem) {
  .weeks { grid-template-columns: 1fr 1fr; }
  .fields-2 { grid-template-columns: 1fr 1fr; gap: 0 1.1rem; }
}
@media (min-width: 64rem) {
  .booking-grid { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--gs-s-5); }
}
@media (max-width: 63.99rem) {
  /* "Your camp" becomes one line that rides above the steps */
  .booking-aside { top: 0; z-index: 5; order: -1; }
  .summary-card { padding: .8rem 1rem; box-shadow: var(--gs-sombra); }
  .summary-card h3 { margin-bottom: .35rem; font-size: var(--gs-fs-ui-lg); }
  .summary-incl, .summary-list, .booking-aside .reassure, .summary-price .sp-note { display: none; }
  /* once the request is sent, the confirmation carries the recap: the riding card would sit on its title */
  .booking-grid:has(.confirm) .booking-aside { display: none; }
  .summary-compact { display: block; font-size: var(--gs-fs-small); line-height: 1.4; }
  .summary-price { margin-top: .5rem; padding-top: .5rem; gap: .25rem; }
  .summary-price .sp-pp-v { font-size: var(--gs-fs-heading); }
  .gs-inc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gs-week-grid, .gs-coast .gs-two, .gs-medina, .gs-ferrel, .gs-houses { grid-template-columns: minmax(0, 1fr); }
  .gs-feats.is-four, .gs-weektex ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-ex { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .gs-ex-media, .gs-ex-now, .gs-ex-list { grid-area: auto; }
  .gs-ex-now { min-height: 0; }
  body.gs .gs-camp-faq .faq summary { grid-template-columns: minmax(0, 1fr) auto; }
  .gs-camp-faq .gist { display: none; }
  .gs-camp-faq .a { margin-left: 0; }
  .coast-map { height: 24rem; }
}
@media (max-width: 44rem) {
  .gs-camps .gs-dock { grid-template-columns: auto 1fr; }
  .gs-dock-facts { font-size: var(--gs-fs-caption); line-height: 1.3; }
  .gs-under { flex-direction: column; align-items: flex-start; padding-block: var(--gs-s-3) 0; }
  .gs-under p { order: 2; }
  .gs-inc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gs-s-2); }
  .gs-inc li { padding: var(--gs-s-3); }
  /* the table, one season at a time: no sideways scroll */
  .pm-pick { display: flex !important; }
  .pm, .pm tbody, .pm tbody tr, .pm tbody th, .pm td { display: block; }
  .pm thead, .pm tbody tr:not(.is-on) { display: none; }
  .pm tbody th { padding: 0 0 var(--gs-s-2); border-top: 0; font-size: 0; }
  .pm tbody th small { margin: 0; font-size: var(--gs-fs-small); }
  .pm td { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label price" "tag total"; align-items: baseline; gap: .1rem var(--gs-s-3); padding: var(--gs-s-3) 0; text-align: right; }
  .pm td::before { content: attr(data-label); grid-area: label; text-align: left; font: 500 var(--gs-fs-sub)/1.2 var(--gs-f-text); }
  .pm td strong { grid-area: price; }
  .pm .pm-tot { grid-area: total; margin: 0; }
  .pm .pm-tag { grid-area: tag; justify-self: start; margin: 0; }
  .gs-ministeps li { font-size: var(--gs-fs-body); }
  .opt-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .form-nav { gap: .6rem; }
  body.gs-camps .booking-main .btn { min-width: 0; padding-inline: 1.1em; }
  .gs-contrast { gap: var(--gs-s-2); margin-bottom: var(--gs-s-6); }
  .gs-contrast > div { padding: var(--gs-s-3); }
  .gs-contrast li { grid-template-columns: 1rem minmax(0, 1fr); gap: .35rem; font-size: var(--gs-fs-small); }
  .gs-feats { grid-template-columns: minmax(0, 1fr); gap: var(--gs-s-3); }
  /* four short texts in a row: on a phone a strip that shows it swipes, not four stacked blocks */
  .gs-feats.is-four, .gs-ferrel .gs-feats, .gs-weektex ul {
    grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; gap: 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-feats.is-four::-webkit-scrollbar, .gs-ferrel .gs-feats::-webkit-scrollbar, .gs-weektex ul::-webkit-scrollbar { display: none; }
  .gs-feats.is-four > li, .gs-ferrel .gs-feats > li, .gs-weektex ul > li { scroll-snap-align: start; }
  .gs-arrow { display: none !important; }
  /* on a phone every photograph of a strip is narrower than the screen: the next one always shows */
  body.gs-camps .bstrip img { width: 78vw; height: auto; aspect-ratio: 4 / 3; }
  body.gs-camps .gs-waves .bstrip img { height: auto; }
  body.gs-camps .strip, body.gs-camps .gs-houses .strip { grid-auto-columns: 78%; }
  .gs-houses { margin-top: var(--gs-s-7); }
  .day-panel { grid-template-columns: minmax(0, 1fr) 5rem; min-height: 0; padding: var(--gs-s-4); }
  .gs-weektex { margin-top: var(--gs-s-7); }
  .gs-plate { padding: var(--gs-s-4); }
  .gs-ex-media { aspect-ratio: 4 / 3; }
  .gs-ex-item { min-height: 3.25rem; }
  .gs-ex-now .gs-cta { display: none; }      /* on a phone a tap on the name opens the details */
  .coast-map { height: 20rem; }
  .gs-why.is-b.is-four { grid-template-columns: none; }
  .gs-medina-line { font-size: var(--gs-fs-title-sm); }
  /* The long bands, cut for the phone (owner, 2026-10-11). Each of these is said again close by: in the cards
     above, the galleries below, the sheet a tap opens, the bar under the thumb, or the questions. */
  .gs-stay .gs-head .gs-note,                      /* the opening keeps its one line */
  .gs-ferrel .strip-wrap,                          /* the houses' own galleries show the same place */
  .gs-houses .gs-side > .gs-note ~ .gs-note, .gs-houses .gs-side > .gs-cta,
  .gs-week .gs-head .gs-note, .gs-week .itin-note,
  .gs-week .gs-plate .gs-cta,
  .gs-table .gs-head .gs-lede + .gs-note,          /* the four facts below say it again */
  .gs-meals .gs-rest,
  .gs-inc p,                                       /* the six inclusions: the figure and its name */
  #price-foot,                                     /* moved to "What exactly is in the price?" */
  .gs-ex-now,                                      /* a tap on a name opens the details */
  .gs-camp-faq .gs-head .gs-note { display: none; }
  /* the film takes the whole screen */
  .gs-film-sheet { width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .gs-film-sheet .gs-sheet-body { display: grid; align-items: center; }
  .gs-film-sheet .film-media { max-height: none; }
  .gs-ferrel { margin-bottom: 0; }
  .gs-ferrel .gs-side { grid-template-columns: minmax(0, 1fr); }
  .gs-ferrel .gs-feats { justify-self: stretch; }      /* the strip takes the screen's width, not its content's */
  /* the bar under the thumb: menu, price, WhatsApp, and the way to the form */
  .gs-bar.is-on.is-away { translate: 0 110%; }
  .gs-bar-wa { display: grid; }
  .gs-camps .gs-bar .gs-nav-tools { gap: var(--gs-s-2); }
  .gs-camps .gs-bar .gs-cta { white-space: normal; max-width: 9.5rem; line-height: 1.05; }
  body.gs-camps.cookie-open .gs-bar.is-on.is-away { translate: 0 -110%; }
}
@media (max-width: 44rem) {
  /* A first visit: the consent banner is on its way up and takes a third of the screen. The dock keeps
     what decides — what this is, the price, the button — and the rest comes back when the banner goes. */
  html.gs-first-visit body.gs-camps .gs-dock [data-reviews="compact"] { display: none !important; }
}
@media (max-width: 44rem) and (max-height: 37.5rem) {
  html.gs-first-visit body.gs-camps { --gs-fs-display: 1.75rem; }
  html.gs-first-visit body.gs-camps .gs-dock-facts { display: none; }
  html.gs-first-visit body.gs-camps .gs-watch { display: none; }      /* no room left on the photograph: it comes back when the banner goes */
}
@media (min-width: 44.01rem) {
  .gs-phone-only { display: none; }
  .gs-ex-sheet { width: min(52rem, calc(100vw - 2rem)); }
  /* desktop: the small proofs show title and words; the caption belongs to the large one */
  .gs-why.is-b .gs-arg:not(.is-big) .gs-arg-cap { display: none; }
}
@media (max-width: 22.5rem) {
  .gs-bar-wa { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .progress-fill, .opt .opt-card, .o-check::after, .gs-bar.is-on.is-away { transition: none; }
}
@media (forced-colors: active) {
  .opt .opt-card, .stepper, .gs-inc li, .gs-contrast > div, .gs-arrow, body.gs-camps .picker button, body.gs-camps .booking-main .btn { border: 1px solid; }
}