/* ═══ Două Culmi ═══ */
/* Paleta e scoasă din pozele reale: lemnul cald al fațadei, albastrul serii,
   verdele brazilor. Schimbi cele patru culori din :root și se retematizează tot. */

/* ── fonturi, găzduite local ───────────────────────────────────────────────
   Nu se iau de pe CDN-ul Google: local e mai rapid (fără o conexiune nouă
   către alt domeniu în calea critică) și nu trimite IP-ul vizitatorului către
   un terț, ceea ce contează pentru o firmă din România.

   Ambele sunt fonturi variabile, deci un singur fișier acoperă toate grosimile.
   Subsetul latin-ext e obligatoriu: ș și ț nu există în subsetul latin, iar
   fără el diacriticele românești ar cădea pe fontul de sistem, cu alt desen.

   font-display: swap = textul se vede imediat cu fontul de rezervă și se
   schimbă când sosește cel bun, în loc să rămână pagina goală. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/fraunces-latin.woff2") format("woff2");
  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: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
  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;
}

:root {
  --ink: #14100E;          /* negru cald, culoarea acoperișului pe înserat */
  --ink-2: #1B1613;        /* secțiunile alternante */
  --ink-3: #0C0E14;        /* zona de final, albastrul nopții */
  --ivory: #F4EEE3;
  --wood: #E8A24A;         /* lemnul fațadei și banda de LED */
  --sky: #86AECB;          /* albastrul cerului de seară */

  --ivory-dim: rgba(244, 238, 227, 0.72);
  --ivory-faint: rgba(244, 238, 227, 0.5);
  --hair: rgba(244, 238, 227, 0.13);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* ── scara tipografică ──────────────────────────────────────────────────
     Scară modulară Perfect Fourth (raport 1,333), pornind de la 18px corp de
     text. Fiecare treaptă e a precedentei ori 1,333, deci mărimile sunt
     înrudite între ele, nu alese la ochi. Titlurile mari sunt fluide, ca să
     nu iasă din ecran pe telefon și să nu rămână mici pe monitor lat. */
  --t-eyebrow: 0.75rem;                              /* 12px */
  --t-small:   0.9375rem;                            /* 15px */
  --t-body:    1.125rem;                             /* 18px, Butterick: 15–25px */
  --t-lede:    clamp(1.125rem, 0.95rem + 0.7vw, 1.3125rem);   /* 18 → 21 */
  --t-h3:      1.3125rem;                            /* 21px */
  --t-h2:      clamp(1.75rem, 1.1rem + 2.6vw, 2.625rem);      /* 28 → 42 */
  --t-h1:      clamp(2.25rem, 1.1rem + 4.6vw, 4.25rem);       /* 36 → 68 */

  /* Interlinie: 1,6 la corp (Butterick cere 120–145% pentru text tipărit,
     pe web se stă mai lejer). Titlurile primesc mai puțin, altfel rândurile
     unui titlu mare par nelegate între ele. */
  --lh-body: 1.6;
  --lh-tight: 1.14;
  --lh-display: 1.04;

  /* Lungimea rândului. Regula: 45–90 de caractere, optim în jur de 66.
     În ch, adică lățimea caracterului „0" din fontul curent, deci rămâne
     corectă și dacă schimbi fontul sau mărimea. */
  --measure: 68ch;

  --wrap: 1120px;
  --pad-x: clamp(20px, 5vw, 56px);
  --pad-y: clamp(72px, 11vh, 132px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Fraunces are axa optical size: la corp mic desenul e mai deschis și mai
     lizibil, la titluri mari mai strâns și mai cu caracter. Se face singur. */
  font-optical-sizing: auto;
}

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

/* marcaj pentru ce e de completat în demo */
.tbd {
  color: var(--wood);
  border-bottom: 1px dotted currentColor;
  font-style: italic;
}

/* ── tipografie ── */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 340;
  /* Cu cât textul e mai mare, cu atât spațiile dintre litere par mai largi.
     Tracking-ul negativ compensează, și doar la mărimile mari. */
  letter-spacing: -0.018em;
  text-wrap: balance;   /* ultimul rând al titlului nu rămâne cu un cuvânt singur */
}
h1 {
  font-size: var(--t-h1);
  line-height: var(--lh-display);
  letter-spacing: -0.025em;
}
h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
  margin-bottom: 0.6em;
}
h3 {
  font-size: var(--t-h3);
  line-height: 1.25;
  font-weight: 520;
  letter-spacing: -0.008em;
}

.center { text-align: center; }

/* supratitlu mic, deasupra titlurilor */
.eyebrow {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wood);
  margin-bottom: 16px;
}
.hero .eyebrow { color: rgba(244, 238, 227, 0.75); }

/* ── butoane ── */
.btn {
  display: inline-block;
  font-weight: 600;
  font-size: 17px;
  padding: 17px 40px;
  border-radius: 100px;
  text-decoration: none;
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
}
.btn-light { color: var(--ink); background: var(--ivory); }
.btn-light:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

/* ── topbar ── */
#topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px var(--pad-x);
  background: linear-gradient(rgba(20, 16, 14, 0.5), transparent);
  transition: background 0.4s ease, backdrop-filter 0.4s ease, padding 0.3s ease;
}
#topbar.scrolled {
  background: rgba(16, 13, 11, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-top: 13px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--hair);
}
.brand {
  display: block;
  line-height: 0;
  text-decoration: none;
}
/* logo-ul orizontal alb, cu „Cabane · Sohodol · Bran” dedesubt; sub ~30px textul
   mic devine greu de citit, deci nu coborâm sub atât */
.brand img { display: block; height: 46px; width: auto; }
.nav-links {
  display: flex;
  gap: 26px;
  margin-left: auto;
  margin-right: 26px;
}
.nav-links a {
  font-size: 14.5px;
  color: var(--ivory-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s;
}
.nav-links a:hover { color: var(--ivory); }
.nav-links a.current { color: var(--wood); }

.nav-cta {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: var(--ivory);
  padding: 10px 20px;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s ease, background 0.25s;
}
.nav-cta:hover { transform: translateY(-1px); background: #fff; }

/* ═══ HERO ═══ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px var(--pad-x) 130px;
  overflow: hidden;
  isolation: isolate;
}

.hero-media { position: absolute; inset: 0; z-index: -1; background: var(--ink); }
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* filmul e luminos pe alocuri, iar titlul stă peste el:
   un scrim vertical plus o vignetă rezolvă lizibilitatea fără să stingă imaginea */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(20, 16, 14, 0.66), rgba(20, 16, 14, 0.46) 42%, rgba(20, 16, 14, 0.8)),
    radial-gradient(ellipse 74% 58% at 50% 48%, rgba(20, 16, 14, 0.28) 20%, rgba(20, 16, 14, 0.62));
}

.hero-content {
  position: relative;
  max-width: 880px;
  text-align: center;
  text-shadow: 0 2px 20px rgba(20, 16, 14, 0.7), 0 1px 3px rgba(20, 16, 14, 0.8);
}
.hero-content .lede {
  margin-top: 26px;
  margin-inline: auto;
  max-width: 52ch;
  font-size: var(--t-lede);
  color: rgba(244, 238, 227, 0.93);
  text-wrap: pretty;
}
.hero-content .btn { margin-top: 38px; text-shadow: none; }
.micro {
  margin-top: 14px;
  font-size: var(--t-small);
  letter-spacing: 0.04em;
  color: var(--ivory-dim);
}

/* pauză pentru film: un hero video care nu se poate opri e enervant,
   și e și o problemă de accesibilitate */
.video-toggle {
  position: absolute;
  right: var(--pad-x);
  bottom: 34px;
  z-index: 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(244, 238, 227, 0.34);
  background: rgba(20, 16, 14, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.2s;
}
.video-toggle:hover { background: rgba(20, 16, 14, 0.7); border-color: var(--ivory); transform: scale(1.06); }
.video-toggle:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.ico-pause, .ico-play { display: block; }
.ico-pause {
  width: 11px; height: 13px;
  border-left: 3.5px solid var(--ivory);
  border-right: 3.5px solid var(--ivory);
}
.ico-play {
  width: 0; height: 0;
  margin-left: 3px;
  border-left: 12px solid var(--ivory);
  border-top: 7.5px solid transparent;
  border-bottom: 7.5px solid transparent;
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-faint);
  text-decoration: none;
  transition: color 0.25s;
}
.scroll-hint:hover { color: var(--ivory); }
.scroll-hint i {
  width: 1px;
  height: 46px;
  background: linear-gradient(var(--wood), transparent);
  animation: drip 2.2s ease-in-out infinite;
}
@keyframes drip {
  0% { transform: scaleY(0); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: top; }
  56% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ═══ secțiuni ═══ */
.section { padding: var(--pad-y) var(--pad-x); }
.section:nth-of-type(even) { background: var(--ink-2); }

.wrap { max-width: var(--wrap); margin: 0 auto; width: 100%; }
/* coloanele de text curg la lungimea optimă de rând, nu la o lățime în pixeli */
.wrap.narrow { max-width: var(--measure); }

/* reveal */
[data-reveal] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].in > * { opacity: 1; transform: none; }
.hero[data-reveal] > * { opacity: 1; transform: none; }

/* ── o zi aici: patru momente, ca arcul filmului din hero ── */
.moments {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 48px;
  border-top: 1px solid var(--hair);
}
.moment {
  padding: 30px 26px 34px 0;
  border-right: 1px solid var(--hair);
  position: relative;
}
.moment:last-child { border-right: 0; }
.moment:not(:first-child) { padding-left: 26px; }

/* punctul de pe linia de sus marchează momentul zilei */
.moment::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wood);
  box-shadow: 0 0 14px var(--wood);
}
.moment:not(:first-child)::before { left: 26px; }

.moment-time {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ivory);
  margin-bottom: 12px;
}
.moment p { color: var(--ivory-dim); font-size: var(--t-small); }

.turn {
  margin-top: 32px;
  font-size: clamp(18px, 1.9vw, 24px);
  font-family: var(--font-display);
}
.turn.small {
  font-size: var(--t-body);
  margin-top: 40px;
  color: var(--ivory-dim);
  font-family: var(--font-body);
}
.turn strong { color: var(--sky); font-weight: 520; }

.accent { margin-top: 20px; color: var(--wood); font-weight: 500; }

.example {
  margin-top: 24px;
  padding: 18px 20px;
  border-left: 2px solid var(--sky);
  background: rgba(134, 174, 203, 0.09);
  border-radius: 0 12px 12px 0;
  font-size: var(--t-small);
  color: rgba(244, 238, 227, 0.88);
}
.example strong { color: var(--sky); font-weight: 600; }

/* ── secțiune imagine + text ── */
.split-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.section.split.reverse .split-media { order: 2; }

.split-media {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5);
}
.split-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.split-media:hover img { transform: scale(1.035); }
.split-text p + p { margin-top: 16px; }
.split-text p { color: var(--ivory-dim); }
.split-text .accent, .split-text .example { color: var(--wood); }
.split-text .example { color: rgba(244, 238, 227, 0.88); }

/* ── carduri ── */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.card {
  background: rgba(244, 238, 227, 0.045);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 26px 24px;
  transition: border-color 0.3s, transform 0.3s, background 0.3s;
}
.card:hover {
  border-color: rgba(134, 174, 203, 0.5);
  background: rgba(244, 238, 227, 0.07);
  transform: translateY(-4px);
}
.card h3 { color: var(--ivory); margin-bottom: 10px; }
.card p { color: var(--ivory-dim); font-size: var(--t-small); }
.card-num {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--wood);
  margin-bottom: 14px;
}

/* ── bandă foto full-bleed ── */
.band { position: relative; }
.band img {
  width: 100%;
  height: clamp(320px, 62vh, 620px);
  object-fit: cover;
}
.band-quote {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 var(--pad-x);
  background: linear-gradient(rgba(20, 16, 14, 0.28), rgba(20, 16, 14, 0.52));
}
.band-quote p {
  font-family: var(--font-display);
  font-size: clamp(23px, 3.4vw, 40px);
  line-height: 1.2;
  text-align: center;
  max-width: 800px;
  text-shadow: 0 2px 24px rgba(20, 16, 14, 0.8);
}

/* ── pași ── */
.steps { list-style: none; counter-reset: step; margin-top: 32px; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 22px 0 22px 76px;
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--ivory-dim);
  border-bottom: 1px solid var(--hair);
}
.steps li strong { color: var(--ivory); display: block; margin-bottom: 4px; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 23px;
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--sky);
  opacity: 0.9;
}

/* ── obiecții ── */
.objections .qa { margin-top: 28px; }
.objections .q-line {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  margin-bottom: 6px;
  color: var(--ivory);
}
.objections .qa p:not(.q-line) { color: var(--ivory-dim); }

/* ── specificații ── */
/* text centrat: măsură mai scurtă decât la text aliniat la stânga, fiindcă
   ochiul pierde mai greu începutul rândului următor când marginea nu e dreaptă */
.section-lede {
  color: var(--ivory-dim);
  max-width: 54ch;
  margin: 0 auto;
  font-size: var(--t-lede);
}
.center > .section-lede, .section-lede.center { margin-left: auto; margin-right: auto; }

.specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 44px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: 16px;
  overflow: hidden;
}
.spec {
  background: var(--ink);
  padding: 22px 24px;
  transition: background 0.3s;
}
.section:nth-of-type(even) .spec { background: var(--ink-2); }
.spec:hover { background: rgba(244, 238, 227, 0.05); }
.spec dt {
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ivory-faint);
  margin-bottom: 7px;
}
.spec dd {
  font-size: var(--t-body);
  color: var(--ivory);
  line-height: 1.45;
}
.specs-note {
  margin-top: 28px;
  color: var(--ivory-dim);
  font-size: var(--t-body);
}

/* ── calendar de rezervări ── */
.booking {
  background:
    linear-gradient(rgba(12, 14, 20, 0.9), rgba(12, 14, 20, 0.95)),
    url("assets/stills/kf06_2k.webp") center / cover no-repeat fixed;
}

/* ── calendarul și cererea ──
   Card închis la culoare peste fundalul secțiunii: calendarul în stânga,
   formularul în dreapta; pe telefon unul sub altul, cu o singură lună. */
.bk {
  margin: 40px auto 0;
  max-width: 980px;
  padding: clamp(18px, 3vw, 32px);
  border-radius: 20px;
  border: 1px solid rgba(244, 238, 227, 0.14);
  background: rgba(20, 16, 14, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.bk-cabins {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 26px;
}
.bk-cabins label { position: relative; cursor: pointer; }
.bk-cabins input { position: absolute; opacity: 0; pointer-events: none; }
.bk-cabins span {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(244, 238, 227, 0.24);
  color: var(--ivory-dim);
  font-size: 15px;
  font-weight: 500;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.bk-cabins label:hover span { border-color: var(--ivory); color: var(--ivory); }
.bk-cabins input:checked + span { background: var(--wood); border-color: var(--wood); color: var(--ink); }
.bk-cabins input:focus-visible + span { outline: 2px solid var(--sky); outline-offset: 3px; }

.bk-body {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(22px, 3.5vw, 44px);
  align-items: start;
}

/* calendar */
.bk-cal { position: relative; }
.bk-nav {
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.bk-nav button {
  pointer-events: auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(244, 238, 227, 0.24);
  background: none;
  color: var(--ivory);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.bk-nav button:hover:not(:disabled) { border-color: var(--ivory); }
.bk-nav button:disabled { opacity: 0.25; cursor: default; }
.bk-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 26px; }
.bk-month-name {
  margin: 0 0 14px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--ivory);
  text-transform: capitalize;
  line-height: 26px;
}
.bk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px 0; }
.bk-dow { text-align: center; font-size: 12px; color: var(--ivory-faint); padding-bottom: 6px; }
.bk-day {
  position: relative;
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  background: none;
  color: var(--ivory);
  font: inherit;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  border-radius: 10px;
}
.bk-day.is-blank { cursor: default; }
.bk-day:hover:not(:disabled) { background: rgba(244, 238, 227, 0.1); }
.bk-day:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; }
.bk-day.is-today { box-shadow: inset 0 0 0 1px rgba(244, 238, 227, 0.35); }
.bk-day.is-past { color: rgba(244, 238, 227, 0.22); cursor: default; }
.bk-day.is-busy { color: rgba(244, 238, 227, 0.32); text-decoration: line-through; cursor: default; }
.bk-day.is-off { color: rgba(244, 238, 227, 0.45); }
.bk-day.is-in { background: rgba(232, 162, 74, 0.2); border-radius: 0; }
.bk-day.is-start, .bk-day.is-end,
.bk-day.is-start:hover, .bk-day.is-end:hover { background: var(--wood); color: var(--ink); font-weight: 600; text-decoration: none; }
.bk-day.is-start { border-radius: 10px 0 0 10px; }
.bk-day.is-end { border-radius: 0 10px 10px 0; }
.bk-day.is-solo { border-radius: 10px; }
.bk:not(.is-loaded) .bk-months { opacity: 0.4; pointer-events: none; transition: opacity 0.3s; }

.bk-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--ivory-faint);
}
.bk-legend span { display: inline-flex; align-items: center; gap: 7px; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sw-free { box-shadow: inset 0 0 0 1px rgba(244, 238, 227, 0.4); }
.sw-busy { background: linear-gradient(transparent 45%, rgba(244, 238, 227, 0.45) 45%, rgba(244, 238, 227, 0.45) 58%, transparent 58%); box-shadow: inset 0 0 0 1px rgba(244, 238, 227, 0.15); }
.sw-sel { background: var(--wood); }
.bk-demo { margin: 12px 0 0; font-size: 13px; color: var(--wood); }

/* formular */
.bk-form { display: grid; gap: 14px; }
.bk-summary {
  min-height: 62px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(244, 238, 227, 0.06);
  display: grid;
  gap: 2px;
  align-content: center;
}
.bk-sum-dates { color: var(--ivory); font-weight: 500; }
.bk-sum-meta { color: var(--wood); font-size: 14px; }
.bk-sum-hint { color: var(--ivory-faint); font-size: 14px; }
.bk-row { display: grid; grid-template-columns: 1fr 96px; gap: 12px; }
.bk-field { display: grid; gap: 6px; font-size: 13px; color: var(--ivory-faint); }
.bk-field em { font-style: normal; opacity: 0.7; }
.bk-field input, .bk-field textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid rgba(244, 238, 227, 0.2);
  background: rgba(12, 14, 20, 0.55);
  color: var(--ivory);
  font: inherit;
  font-size: 16px;            /* sub 16px, iPhone mărește pagina la tastare */
  resize: vertical;
}
.bk-field input:focus, .bk-field textarea:focus { outline: none; border-color: var(--wood); }
.bk-field input:user-invalid { border-color: #d27a64; }
.bk-field textarea::placeholder { color: rgba(244, 238, 227, 0.3); }
.bk-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bk-submit { width: 100%; border: 0; cursor: pointer; margin-top: 4px; font-family: inherit; }
.bk-submit:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.bk-status { margin: 0; min-height: 1.2em; font-size: 14px; color: #e6a08c; }
.bk-fine { margin: 0; font-size: 13px; color: var(--ivory-faint); }

/* după trimitere, formularul e înlocuit de mesajul de mulțumire */
.bk.is-done .bk-form { display: none; }
.bk-done { outline: none; align-self: center; }
.bk-done h3 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 500; margin: 0 0 12px; }
.bk-done p { color: var(--ivory-dim); margin: 0 0 12px; }
.bk-done-dates { color: var(--wood) !important; }
.bk-done .btn-ghost { margin-top: 8px; cursor: pointer; font-family: inherit; }

@media (max-width: 760px) {
  .bk-body { grid-template-columns: 1fr; }
  .bk-cabins span { padding: 9px 15px; font-size: 14px; }
}

.booking-direct {
  margin-top: 46px;
  padding-top: 34px;
  border-top: 1px solid var(--hair);
  text-align: center;
}
.direct-lede { color: var(--ivory-dim); margin-bottom: 18px; }
.direct-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.btn-ghost {
  display: inline-block;
  font-weight: 500;
  font-size: 16px;
  color: var(--ivory);
  border: 1px solid rgba(244, 238, 227, 0.28);
  background: rgba(244, 238, 227, 0.05);
  padding: 13px 28px;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.25s, border-color 0.25s, transform 0.2s;
}
.btn-ghost:hover {
  background: rgba(244, 238, 227, 0.12);
  border-color: var(--ivory);
  transform: translateY(-1px);
}
.btn-ghost .tbd { font-style: normal; border-bottom: 0; }

/* ── despre ── */
.about p { color: var(--ivory-dim); font-size: clamp(16px, 1.5vw, 19px); }
.about p + p { margin-top: 18px; }

/* ── final ── */
.closing {
  padding: clamp(90px, 14vh, 160px) var(--pad-x);
  background: var(--ink-3);
  text-align: center;
}
.closing-logo { display: block; width: 190px; height: auto; margin: 0 auto 34px; }
.closing h2 { font-size: clamp(24px, 3vw, 38px); margin-bottom: 0; }
.closing-lede { margin-top: 18px; color: var(--ivory-dim); font-size: var(--t-body); }
.closing .btn { margin-top: 34px; }

.foot-brand { display: inline-flex; align-items: center; gap: 10px; }
.foot-brand img { display: block; }
footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 26px var(--pad-x);
  font-size: 14px;
  color: var(--ivory-faint);
  background: var(--ink-3);
  border-top: 1px solid var(--hair);
}
footer a { color: inherit; }

/* ═══ TURUL VIRTUAL ═══ */
/* Pozele și clipurile sunt verticale (9:16); cadrul stă lângă text pe desktop
   și ocupă lățimea pe telefon. Săgețile sunt poziționate în procente din poză. */
.walk-frame {
  position: relative;
  justify-self: center;
  width: min(100%, 420px);
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ink-2);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5);
  user-select: none;
  -webkit-user-select: none;
}
.tour-photo, .tour-clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tour-photo { opacity: 0; transition: opacity 0.5s; }
.tour-stage.is-ready .tour-photo { opacity: 1; }
.tour-clip { opacity: 0; }
.tour-clip.is-on { opacity: 1; }
.walk-frame::before, .walk-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 3;
}
.walk-frame::before { top: 0; height: 90px; background: linear-gradient(rgba(20, 16, 14, 0.6), transparent); }
.walk-frame::after { bottom: 0; height: 90px; background: linear-gradient(transparent, rgba(20, 16, 14, 0.55)); }

/* eticheta camerei în care ești și pasul din tur */
.walk-now, .tour-step {
  position: absolute;
  top: 18px;
  z-index: 4;
  color: var(--ivory);
  text-shadow: 0 2px 14px rgba(20, 16, 14, 0.7);
  pointer-events: none;
}
.walk-now { left: 20px; font-family: var(--font-display); font-size: 21px; }
.tour-step { right: 20px; top: 22px; font-size: 13px; opacity: 0.75; font-variant-numeric: tabular-nums; }
.walk-now.swap { animation: walk-swap 0.6s ease; }
@keyframes walk-swap { from { opacity: 0; transform: translateY(6px); } }

/* săgețile: un cerc care pulsează, cu textul dedesubt */
.tour-arrows { position: absolute; inset: 0; z-index: 5; transition: opacity 0.2s; }
.tour-stage.is-moving .tour-arrows { opacity: 0; pointer-events: none; }
.tour-arrow {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ivory);
  cursor: pointer;
  font: inherit;
}
.tour-hit {
  position: absolute;
  left: -30px;
  top: -30px;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(20, 16, 14, 0.28);
  box-shadow: 0 0 0 2px rgba(244, 238, 227, 0.92), 0 6px 22px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform 0.2s, background 0.2s;
}
.tour-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--ivory);
  animation: tour-pulse 1.9s ease-out infinite;
}
@keyframes tour-pulse { from { transform: scale(1); opacity: 0.85; } to { transform: scale(1.7); opacity: 0; } }
.tour-hit svg { position: relative; width: 26px; height: 26px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
.tour-arrow:hover .tour-hit { transform: scale(1.08); background: rgba(232, 162, 74, 0.45); }
.tour-arrow:focus-visible .tour-hit { outline: 2px solid var(--sky); outline-offset: 4px; }
.tour-label {
  position: absolute;
  top: 38px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(20, 16, 14, 0.62);
  font-size: 13px;
  line-height: 1.2;
}
/* lângă margini, textul se aliniază spre interior ca să nu iasă din cadru */
.tour-arrow.at-left .tour-label { left: -30px; transform: none; }
.tour-arrow.at-right .tour-label { left: auto; right: -30px; transform: none; }
/* „Înapoi" e mai discret decât drumul înainte */
.tour-arrow.is-back .tour-hit { background: rgba(20, 16, 14, 0.4); box-shadow: 0 0 0 1.5px rgba(244, 238, 227, 0.6), 0 6px 22px rgba(0, 0, 0, 0.4); }
.tour-arrow.is-back .tour-pulse { display: none; }
.tour-arrow.is-back .tour-label { opacity: 0.85; }

.tour-hint {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 4;
  margin: 0;
  white-space: nowrap;
  font-size: 13px;
  color: var(--ivory);
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 0.4s;
}
.tour-hint.is-gone { opacity: 0; }
.tour-restart {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 6;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(244, 238, 227, 0.34);
  background: rgba(20, 16, 14, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ivory);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.tour-restart:hover { border-color: var(--ivory); }
.tour-stage.is-moving .tour-restart { opacity: 0; pointer-events: none; }

@media (max-width: 760px) {
  .walk-frame { width: 100%; max-width: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .walk-now.swap { animation: none; }
  .tour-pulse { animation: none; }
}

/* ── responsive ── */
@media (max-width: 980px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .specs { grid-template-columns: repeat(2, 1fr); }
  .spec:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .moments { grid-template-columns: repeat(2, 1fr); }
  .moment:nth-child(2) { border-right: 0; }
  .nav-links { gap: 18px; margin-right: 18px; }
}

@media (max-width: 760px) {
  .hero { padding: 110px 20px 120px; }
  .split-grid { grid-template-columns: 1fr; gap: 26px; }
  .section.split.reverse .split-media { order: 0; }
  .cards { grid-template-columns: 1fr; }
  .specs { grid-template-columns: 1fr; }
  .spec { padding: 18px 20px; }
  /* momentele devin o listă verticală: linia despărțitoare trece de la
     dreapta la jos, ca să rămână ritmul de citire */
  .moments { grid-template-columns: 1fr; margin-top: 36px; }
  .moment {
    border-right: 0;
    border-bottom: 1px solid var(--hair);
    padding: 26px 0 26px 22px;
  }
  .moment:last-child { border-bottom: 0; }
  .moment:not(:first-child) { padding-left: 22px; }
  .moment::before, .moment:not(:first-child)::before { left: 0; top: 32px; }
  .booking { background-attachment: scroll; }
  .nav-links { display: none; }
  .nav-cta { padding: 9px 15px; font-size: 13px; }
  .brand img { height: 36px; }
  .video-toggle { bottom: 26px; width: 38px; height: 38px; }
  .scroll-hint { display: none; }
  .steps li { padding-left: 60px; }
  .steps li::before { font-size: 27px; }
  .direct-links { flex-direction: column; }
  .btn-ghost { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-hint i { animation: none; }
  .split-media:hover img { transform: none; }
  [data-reveal] > * { transition: opacity 0.4s; transform: none; }
}