@import url("./fonts.css");
@import url("./tokens.css");

/* ============================================================
   Cterra Saadani Luxury Tents — site stylesheet
   ============================================================ */

/* ---------- Reset ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-header) + var(--s-4));
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--f-text);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  color: var(--c-ink);
  background: var(--c-shell);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100svh;
  overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[class], ol[class] { list-style: none; padding: 0; }

/* ---------- Focus: always visible, never removed ------------ */
:focus-visible {
  outline: 3px solid var(--c-sun);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- Skip link --------------------------------------- */
.skip-link {
  position: absolute; left: var(--s-4); top: -100px;
  z-index: var(--z-toast);
  background: var(--c-sea); color: var(--c-white);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-md); font-weight: 600;
  text-decoration: none;
  transition: top var(--m-fast) var(--m-ease);
}
.skip-link:focus { top: var(--s-4); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Typography -------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
/* h3/h4 son ya tamaño de párrafo grande: a esos cuerpos Cormorant
   pierde legibilidad, así que bajan a la grotesca. */
h3 { font-size: var(--t-xl); line-height: var(--lh-snug); }
h4 { font-family: var(--f-text); font-size: var(--t-lg); font-weight: 600;
     letter-spacing: 0; line-height: var(--lh-snug); }

p { max-width: var(--w-prose); text-wrap: pretty; }
.lead { font-size: var(--t-md); line-height: var(--lh-loose); color: var(--c-ink-soft); }
.small { font-size: var(--t-sm); }
.meta  { font-size: var(--t-sm); color: var(--c-ink-muted); }

/* Etiqueta de sección: monoespaciada, versalitas muy espaciadas y una
   raya corta delante. Es la firma visual del prototipo y aparece encima
   de casi todos los titulares. */
.kicker {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--f-mono);
  font-size: 0.65625rem;         /* 10.5px, como el prototipo */
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-sun);
  margin-bottom: var(--s-4);
}
.kicker::before {
  content: ""; width: 22px; height: 1px; background: currentColor; flex: none;
}
/* Sobre superficies oscuras la etiqueta pasa a oro: el ocre no llega
   a contraste suficiente contra el verde profundo. */
.section--sea .kicker, .band--dark .kicker, .hero .kicker { color: var(--c-sun-soft); }

a { color: var(--c-sea); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-sun); }

/* ---------- Layout ------------------------------------------ */
.wrap      { width: min(100% - var(--gutter) * 2, var(--w-page)); margin-inline: auto; }
.wrap-wide { width: min(100% - var(--gutter) * 2, var(--w-wide)); margin-inline: auto; }
.wrap-narrow { width: min(100% - var(--gutter) * 2, var(--w-narrow)); margin-inline: auto; }

.section { padding-block: var(--s-section); }
.section--tint { background: var(--c-canvas); }
.section--sea  { background: var(--c-sea); color: var(--c-shell); }
.section--sea h1, .section--sea h2, .section--sea h3 { color: var(--c-shell); }
.section--sea .lead { color: rgba(251, 248, 243, 0.82); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-8); }

.grid { display: grid; gap: var(--s-6); }
@media (min-width: 40rem)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 48rem)  { .grid-sidebar { grid-template-columns: 1fr 20rem; gap: var(--s-10); } }

.section-head { max-width: var(--w-prose); margin-bottom: var(--s-10); }

/* ---------- Buttons ----------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: var(--touch);
  padding: var(--s-3) var(--s-6);
  border: 1.5px solid transparent;
  border-radius: var(--r-full);
  font-size: var(--t-base); font-weight: 600;
  line-height: 1; text-decoration: none;
  cursor: pointer;
  transition: background var(--m-fast) var(--m-ease),
              border-color var(--m-fast) var(--m-ease),
              color var(--m-fast) var(--m-ease),
              transform var(--m-fast) var(--m-ease);
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

.btn--primary { background: var(--c-sun); color: var(--c-white); box-shadow: var(--e-cta); }
.btn--primary:hover:not([disabled]) { background: var(--c-sun-bright); color: var(--c-white); }

.btn--sea { background: var(--c-sea); color: var(--c-white); }
.btn--sea:hover:not([disabled]) { background: var(--c-sea-bright); color: var(--c-white); }

.btn--ghost { background: transparent; border-color: var(--c-canvas-line); color: var(--c-ink); }
.btn--ghost:hover:not([disabled]) { border-color: var(--c-sun); color: var(--c-sun); }

.btn--onsea { background: var(--c-shell); color: var(--c-sea); }
.btn--onsea:hover:not([disabled]) { background: var(--c-white); color: var(--c-sea); }

/* Botón secundario sobre una foto: cristal esmerilado con borde claro.
   El prototipo lo usa junto al principal en el hero. */
.btn--glass {
  background: rgba(255, 255, 255, 0.12); color: var(--c-cream);
  border-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(4px);
}
.btn--glass:hover:not([disabled]) {
  background: rgba(255, 255, 255, 0.22); color: var(--c-white);
}

.btn--lg { min-height: 3.25rem; padding-inline: var(--s-8); font-size: var(--t-md); }
.btn--block { width: 100%; }

/* ---------- Header ------------------------------------------ */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  height: var(--h-header);
  display: flex; align-items: center;
  background: rgba(251, 248, 242, 0.86);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-canvas-deep);
  transition: border-color var(--m-base) var(--m-ease),
              background var(--m-base) var(--m-ease);
}
/* Sin blur (Firefox antiguo, o si el usuario lo desactiva) el fondo
   translúcido dejaría el texto ilegible sobre la foto del hero. */
@supports not (backdrop-filter: blur(1px)) {
  .header { background: var(--c-shell); }
}
.header__inner { display: flex; align-items: center; gap: var(--s-6); width: 100%; }
/* Logotipo: CTERRA en versalitas verdes muy espaciadas y SAADANI en
   monoespaciada ocre al lado, en línea de base. Es el bloque del
   prototipo tal cual. */
.header__brand {
  display: flex; align-items: baseline; gap: var(--s-2);
  font-family: var(--f-display); font-size: 1.5rem; font-weight: 700;
  letter-spacing: var(--ls-logo); color: var(--c-sea); text-decoration: none;
  margin-right: auto; line-height: 1; text-transform: uppercase;
}
.header__brand span {
  font-family: var(--f-mono); font-size: 0.53125rem;  /* 8.5px */
  font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--c-sun);
}
@media (max-width: 26rem) { .header__brand span { display: none; } }

.nav { display: none; gap: var(--s-6); align-items: center; }
@media (min-width: 62rem) { .nav { display: flex; } }
.nav a {
  color: var(--c-ink-soft); text-decoration: none;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em;
  padding: var(--s-2) 0; position: relative;
  transition: color var(--m-fast) var(--m-ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--c-sun); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--c-sun); transform: scaleX(0); transform-origin: left;
  transition: transform var(--m-fast) var(--m-ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.header__cta { display: none; }
@media (min-width: 48rem) { .header__cta { display: inline-flex; } }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--touch); height: var(--touch);
  background: none; border: 0; cursor: pointer; border-radius: var(--r-md);
}
@media (min-width: 62rem) { .burger { display: none; } }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--c-shell);
  padding: var(--s-6) var(--gutter);
  display: flex; flex-direction: column; gap: var(--s-6);
  transform: translateX(100%);
  transition: transform var(--m-base) var(--m-out);
  overflow-y: auto;
}
.drawer[data-open="true"] { transform: translateX(0); }
.drawer a { font-family: var(--f-display); font-size: var(--t-xl); color: var(--c-ink);
  text-decoration: none; padding-block: var(--s-2); }

/* ---------- Hero -------------------------------------------- */
.hero { position: relative; isolation: isolate; color: var(--c-white);
        min-height: min(88svh, 46rem); display: flex; align-items: flex-end; }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* El prototipo oscurece por la IZQUIERDA, no por abajo: el texto vive
   pegado al borde izquierdo y la foto respira a la derecha. En móvil
   no cabe esa composición, así que ahí se vuelve al velo vertical. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(16, 38, 30, 0.30) 0%,
    rgba(16, 38, 30, 0.45) 45%,
    rgba(16, 38, 30, 0.82) 100%);
}
@media (min-width: 48rem) {
  .hero::after {
    background: linear-gradient(90deg,
      rgba(16, 38, 30, 0.78) 0%,
      rgba(16, 38, 30, 0.30) 52%,
      rgba(16, 38, 30, 0.12) 100%);
  }
}
.hero__inner { padding-block: var(--s-16) var(--s-20); width: 100%; }
.hero h1 {
  color: var(--c-cream); font-size: var(--t-3xl); max-width: 14ch;
  font-weight: 600; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.3);
}
.hero .lead { color: #DCE4DD; max-width: 31rem; }

/* Fila de confianza bajo el hero: estrellas, nota y una credencial.
   Solo se pinta si hay datos reales que poner — ver la nota en el
   README sobre las afirmaciones del prototipo que no podemos publicar. */
.hero__trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  margin-top: var(--s-8); font-size: 0.78125rem; color: #C4CEC6;
}
.hero__trust strong { color: var(--c-cream); }
.hero__stars { color: var(--c-gold); letter-spacing: 2px; }
.hero .lead { color: rgba(255, 255, 255, 0.9); max-width: 48ch; margin-top: var(--s-4); }
.hero__kicker { color: var(--c-sun-soft); }

/* ---------- Booking search widget --------------------------- */
.search {
  background: var(--c-shell); color: var(--c-ink);
  border-radius: var(--r-lg); box-shadow: var(--e-4);
  padding: var(--s-5);
  display: grid; gap: var(--s-4);
}
@media (min-width: 56rem) {
  .search { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; gap: var(--s-4); }
}
.search--inline { box-shadow: var(--e-2); border: 1px solid var(--c-canvas-deep); }

.field { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.field > label { font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--c-ink-muted); }
.field input, .field select {
  min-height: var(--touch);
  padding: var(--s-3) var(--s-4);
  border: 1.5px solid var(--c-canvas-deep);
  border-radius: var(--r-md);
  background: var(--c-white); color: var(--c-ink);
  font-size: var(--t-base);
  width: 100%;
  transition: border-color var(--m-fast) var(--m-ease);
}
.field input:hover, .field select:hover { border-color: var(--c-ink-muted); }
.field input:focus-visible, .field select:focus-visible { border-color: var(--c-sea); }
.field--error input, .field--error select { border-color: var(--c-error); }
.field__error { font-size: var(--t-sm); color: var(--c-error); display: flex;
  align-items: center; gap: var(--s-2); }
.field__hint { font-size: var(--t-sm); color: var(--c-ink-muted); }

/* Guests stepper */
.guests { display: flex; gap: var(--s-3); }
.guests .field { flex: 1; }

/* ---------- Park fee notice — the conversion-critical one ---- */
.parkfee {
  border-left: 3px solid var(--c-sun);
  background: var(--c-sun-wash);
  padding: var(--s-4) var(--s-5);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--t-sm); line-height: var(--lh-normal);
}
.parkfee strong { color: var(--c-ink); }
.parkfee__amount { font-family: var(--f-display); font-size: var(--t-lg); display: block;
  margin-top: var(--s-1); }

/* ---------- Cards ------------------------------------------- */
.card {
  background: var(--c-white);
  border: 1px solid var(--c-canvas-deep);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow var(--m-base) var(--m-ease),
              transform var(--m-base) var(--m-ease);
}
.card:hover { box-shadow: var(--e-3); transform: translateY(-2px); }
.card__media { aspect-ratio: 4 / 3; background: var(--c-canvas); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--m-slow) var(--m-ease); }
.card:hover .card__media img { transform: scale(1.03); }
.card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3);
  flex: 1; }
.card__title { font-family: var(--f-display); font-size: var(--t-lg); }
.card__foot { margin-top: auto; display: flex; align-items: center;
  justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }

.price { font-family: var(--f-display); font-size: var(--t-xl); color: var(--c-ink);
  line-height: 1; }
.price small { font-family: var(--f-text); font-size: var(--t-sm); font-weight: 400;
  color: var(--c-ink-muted); }

.tag {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.02em;
  padding: var(--s-1) var(--s-3); border-radius: var(--r-full);
  background: var(--c-sea-wash); color: var(--c-sea);
}
.tag--sun { background: var(--c-sun-wash); color: #8E4527; }
.tag--muted { background: var(--c-canvas); color: var(--c-ink-soft); }

.feature-list { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; }
.feature-list li { font-size: var(--t-sm); color: var(--c-ink-soft);
  background: var(--c-canvas); padding: var(--s-1) var(--s-3); border-radius: var(--r-sm); }

/* ---------- Availability states ----------------------------- */
.avail { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm);
  font-weight: 600; }
.avail::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.avail--yes  { color: var(--c-ok);    } .avail--yes::before  { background: var(--c-ok); }
.avail--few  { color: var(--c-warn);  } .avail--few::before  { background: var(--c-warn); }
.avail--none { color: var(--c-ink-muted); } .avail--none::before { background: var(--c-ink-muted); }

/* ---------- Skeletons — reserve space, avoid CLS ------------- */
.skeleton {
  background: linear-gradient(90deg, var(--c-canvas) 25%, var(--c-canvas-deep) 37%, var(--c-canvas) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-md);
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ---------- Steps ------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--s-6); }
.step { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s-4);
  align-items: start; }
.step__num {
  counter-increment: step;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--c-sea-wash); color: var(--c-sea);
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 600;
}
.step__num::before { content: counter(step); }

/* ---------- Booking progress -------------------------------- */
.progress { display: flex; gap: var(--s-2); list-style: none; padding: 0;
  margin-bottom: var(--s-8); flex-wrap: wrap; }
.progress li { display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm); color: var(--c-ink-muted); }
.progress li[aria-current="step"] { color: var(--c-sea); font-weight: 600; }
.progress li[data-done="true"] { color: var(--c-ok); }
.progress li + li::before { content: "›"; margin-right: var(--s-2); color: var(--c-canvas-deep); }

/* ---------- Summary panel ----------------------------------- */
.summary {
  background: var(--c-canvas); border-radius: var(--r-lg); padding: var(--s-6);
  position: sticky; top: calc(var(--h-header) + var(--s-4));
}
.summary dl { display: grid; gap: var(--s-3); margin: 0; }
.summary .row { display: flex; justify-content: space-between; gap: var(--s-4);
  font-size: var(--t-sm); }
.summary .row dt { color: var(--c-ink-soft); }
.summary .row dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 500; }
.summary .row--total { border-top: 1px solid var(--c-canvas-deep); padding-top: var(--s-4);
  margin-top: var(--s-2); font-size: var(--t-md); }
.summary .row--total dd { font-family: var(--f-display); font-size: var(--t-xl); }
.summary .row--excluded dd, .summary .row--excluded dt { color: var(--c-ink-muted); }

/* ---------- Notices ----------------------------------------- */
.notice { padding: var(--s-4) var(--s-5); border-radius: var(--r-md); font-size: var(--t-sm);
  display: flex; gap: var(--s-3); align-items: flex-start; }
.notice--info  { background: var(--c-sea-wash);  color: var(--c-ink); }
.notice--warn  { background: var(--c-sun-wash);  color: var(--c-ink); }
.notice--error { background: var(--c-error-wash); color: var(--c-error); }
.notice--ok    { background: #E6F2EC; color: var(--c-ok); }

/* ---------- Payment frame ----------------------------------- */
.payframe { width: 100%; min-height: 34rem; border: 1px solid var(--c-canvas-deep);
  border-radius: var(--r-lg); background: var(--c-white); }

/* ---------- Bandas de sección del prototipo ------------------ */

/* Banda oscura con una foto muy atenuada por detrás. La imagen va a
   opacidad .28 sobre verde casi negro: se intuye el lugar sin que el
   texto pelee con ella. */
.band--dark {
  position: relative; isolation: isolate;
  background: var(--c-sea-darkest); color: var(--c-cream);
  padding-block: clamp(3.5rem, 6vw, 4.625rem);
}
.band--dark::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--band-img, none);
  background-size: cover; background-position: center;
  opacity: 0.28;
}
.band--dark::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(16, 38, 30, 0.92), rgba(16, 38, 30, 0.62));
}
.band--dark h1, .band--dark h2, .band--dark h3 { color: var(--c-cream); }
.band--dark .lead, .band--dark p { color: var(--c-cream-dim); }

/* Testimonio: verde profundo, serif en cursiva, centrado. */
.testimonial {
  background: var(--c-sea-deep); color: #EAF0EB; text-align: center;
  padding-block: clamp(3.5rem, 6.5vw, 4.875rem);
}
.testimonial blockquote {
  margin: 0 auto; max-width: 46rem;
  font-family: var(--f-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.375rem, 2.4vw + 0.9rem, 1.875rem);
  line-height: 1.34; color: var(--c-cream);
}
.testimonial figcaption {
  margin-top: var(--s-6); font-size: 0.8125rem; color: var(--c-sea-mist);
}
.testimonial .hero__stars { font-size: 1.1875rem; letter-spacing: 5px;
  display: block; margin-bottom: var(--s-6); }

/* Banda de llamada final: ocre pleno. Es el único sitio donde se usa
   el ocre del prototipo sin oscurecer, porque el titular va a 44px y
   ahí 3:1 es contraste suficiente según la WCAG. */
.band--cta {
  background: var(--c-sun-flat); color: var(--c-white); text-align: center;
  padding-block: clamp(3.25rem, 5.5vw, 4.375rem);
}
.band--cta h2 { color: var(--c-white); font-size: var(--t-2xl); margin-bottom: var(--s-3); }
.band--cta p  { color: #FBEEDD; margin: 0 auto var(--s-6); max-width: 28rem; }
.band--cta .btn { background: var(--c-white); color: var(--c-sun-bright); box-shadow: var(--e-3); }
.band--cta .btn:hover:not([disabled]) { background: var(--c-cream); color: var(--c-sun-bright); }

/* ---------- Footer ------------------------------------------ */
.footer { background: var(--c-sea-darkest); color: var(--c-cream-dim);
  padding-block: var(--s-12) var(--s-8); margin-top: 0; }
.footer h2, .footer h3 { color: var(--c-cream); font-size: var(--t-sm);
  font-family: var(--f-mono); font-weight: 500; letter-spacing: var(--ls-label);
  text-transform: uppercase; }
.footer a { color: var(--c-cream-dim); text-decoration: none; }
.footer a:hover { color: var(--c-sun-soft); text-decoration: underline; }
.footer__grid { display: grid; gap: var(--s-8); }
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer__bottom { margin-top: var(--s-12); padding-top: var(--s-6);
  border-top: 1px solid rgba(251, 248, 243, 0.14);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  font-size: var(--t-sm); }

/* ---------- Mobile action bar — the top converter ----------- */
.mobilebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  height: var(--h-mobilebar);
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: rgba(251, 248, 243, 0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--c-canvas-deep);
  display: flex; gap: var(--s-3); align-items: center;
}
.mobilebar .btn { flex: 1; }
@media (min-width: 62rem) { .mobilebar { display: none; } }
@media (max-width: 61.99rem) { body { padding-bottom: var(--h-mobilebar); } }

/* ---------- Utilities --------------------------------------- */
.flow > * + * { margin-top: 1em; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.hide { display: none !important; }
[hidden] { display: none !important; }

/* ---------- Language switcher ------------------------------- */
.langs { display: none; gap: var(--s-1); align-items: center; }
@media (min-width: 62rem) { .langs { display: flex; } }
.langs a {
  min-width: 2.25rem; min-height: 2.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em;
  color: var(--c-ink-muted); text-decoration: none;
  border-radius: var(--r-sm);
  transition: color var(--m-fast) var(--m-ease), background var(--m-fast) var(--m-ease);
}
.langs a:hover { color: var(--c-ink); background: var(--c-canvas); }
.langs a[aria-current="true"] { color: var(--c-sea); background: var(--c-sea-wash); }
.langs--drawer { display: flex; gap: var(--s-2); padding-top: var(--s-4);
  border-top: 1px solid var(--c-canvas-deep); }
.langs--drawer a { min-width: var(--touch); min-height: var(--touch);
  border: 1px solid var(--c-canvas-deep); font-size: var(--t-sm); }

/* ---------- Map — loads only on click (GDPR: no cookie until asked) ---- */
.map { position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--c-sea-wash); aspect-ratio: 16 / 10; }
@media (max-width: 40rem) { .map { aspect-ratio: 4 / 3; } }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.map__placeholder {
  position: absolute; inset: 0; display: grid; place-items: center; gap: var(--s-4);
  padding: var(--s-6); text-align: center; cursor: pointer;
  background:
    radial-gradient(circle at 62% 44%, var(--c-sun-soft) 0 7px, transparent 8px),
    linear-gradient(160deg, var(--c-sea-wash) 0%, var(--c-canvas) 55%, var(--c-sun-wash) 100%);
  border: 0; width: 100%; font: inherit; color: inherit;
}
.map__placeholder:hover { filter: brightness(0.98); }
.map__label { font-family: var(--f-display); font-size: var(--t-lg); }
.map__hint { font-size: var(--t-sm); color: var(--c-ink-soft); max-width: 34ch; }
.map__pin { width: 44px; height: 44px; border-radius: 50%; background: var(--c-sun);
  display: grid; place-items: center; color: #fff; box-shadow: var(--e-3); }
.hero--short { min-height: min(52svh, 26rem); }

/* ---------- Cookie consent ---------------------------------- */
.consent {
  position: fixed; left: var(--s-4); right: var(--s-4);
  bottom: calc(var(--h-mobilebar) + var(--s-4));
  z-index: var(--z-toast);
  background: var(--c-white);
  border: 1px solid var(--c-canvas-deep);
  border-radius: var(--r-lg);
  box-shadow: var(--e-4);
  padding: var(--s-5);
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--m-base) var(--m-out), transform var(--m-base) var(--m-out);
}
.consent[data-in="true"] { opacity: 1; transform: none; }
@media (min-width: 62rem) {
  .consent { bottom: var(--s-6); left: auto; right: var(--s-6); max-width: 30rem; }
}
.consent__inner { display: grid; gap: var(--s-4); }
.consent__text { font-size: var(--t-sm); line-height: var(--lh-normal); margin: 0; max-width: none; }
.consent__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.consent__actions .btn { flex: 1; min-width: 10rem; }