/* ==========================================================================
   HOTEL TOPAZ 4**** CAP AURORA — style.css
   Sistem de design transpus din fourseasons.com/taormina (valori măsurate live):
   titluri Neue Helvetica 200 uppercase cu tracking mare, text Garamond,
   alb / negru / panou gri, header dublu negru, bară de rezervare albă.
   ========================================================================== */

/* --- fonturi self-hosted, fără CDN --------------------------------------- */
@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/garamond-latin-ext.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display: swap;
  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: 'EB Garamond';
  src: url('../fonts/garamond-latin.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/garamond-italic-latin-ext.woff2') format('woff2');
  font-weight: 400 500; font-style: italic; font-display: swap;
  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: 'EB Garamond';
  src: url('../fonts/garamond-italic-latin.woff2') format('woff2');
  font-weight: 400 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 200 500; font-style: normal; font-display: swap;
  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';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 200 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-latin-ext.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  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: 'Playfair Display';
  src: url('../fonts/playfair-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-italic-latin-ext.woff2') format('woff2');
  font-weight: 400 600; font-style: italic; font-display: swap;
  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: 'Playfair Display';
  src: url('../fonts/playfair-italic-latin.woff2') format('woff2');
  font-weight: 400 600; font-style: italic; font-display: swap;
}

/* --- variabile ----------------------------------------------------------- */
:root {
  --ink:      #000;
  --ink-2:    #2b2b2b;
  --mute:     #6e6e6e;
  --paper:    #fff;
  --panel:    #f4f4f4;
  --panel-2:  #ebebeb;
  --line:     #dcdcdc;
  --bar:      #1a1a1a;
  --bar-2:    #111;
  --on-bar:   rgba(255,255,255,.72);
  --bar-line: rgba(255,255,255,.2);
  --topaz:    #006980;
  --brass:    #ffffff;   /* fost auriu; Edis l-a vrut alb */

  --sans:    'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif:   'EB Garamond', Garamond, 'Times New Roman', serif;
  --display: 'Playfair Display', 'EB Garamond', Georgia, serif;

  --pad:  clamp(18px, 4vw, 60px);
  --maxw: 1180px;
  --col:  660px;

  --hdr-top:  28px;   /* rândul utilitar */
  --hdr-main: 84px;  /* semn + nume + navigare, centrate */
  --hdr:      112px;
  --book:     78px;   /* bara de rezervare */

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --- reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 27px;
  letter-spacing: .5px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 200; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--topaz); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- tipografie -----------------------------------------------------------
   Titlurile mari sunt serif de contrast mare (ca headline-ul de pe homepage-ul
   Four Seasons), nav și butoanele rămân sans cu tracking, textul curent Garamond.
   -------------------------------------------------------------------------- */
.h1, h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 6vw, 78px);
  line-height: 1.03;
  letter-spacing: clamp(.4px, .06vw, 1.4px);
  text-transform: uppercase;
}
.h1 > span, .h1 > em, h1 > span, h1 > em { display: block; }
.h1 em, h1 em { font-style: italic; font-weight: 400; }
.h2, h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(23px, 2.9vw, 38px);
  line-height: 1.14;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.h2 em, h2 em { font-style: italic; }
.h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}
/* supratitlu: sans cu tracking larg, ca „FAIRMONT INTRODUCES" */
.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(10px, .85vw, 11px);
  line-height: 1.5;
  letter-spacing: 3.4px;
  text-transform: uppercase;
}
.label, .lnk, .btn, nav a, .kicker {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 10px;
  line-height: 13px;
  letter-spacing: 2.05px;
  text-transform: uppercase;
}
.lead { font-size: 19px; line-height: 30px; }
.small { font-size: 15px; line-height: 22.5px; }

/* link subliniat, ca „DISCOVER MOUNT ETNA" */
.lnk {
  display: inline-block;
  position: relative;
  padding-bottom: 6px;
  color: var(--ink);
}
.lnk::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform-origin: left; transition: transform .5s var(--ease);
}
.lnk:hover::after { transform: scaleX(0); transform-origin: right; }
.lnk--light { color: #fff; }

/* buton plin, ca „CHECK RATES" */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 30px;
  background: var(--ink); color: #fff;
  border: 1px solid var(--ink);
  transition: background .35s var(--ease), color .35s var(--ease);
  white-space: nowrap;
}
.btn:hover { background: #fff; color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--light:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* --- containere ---------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.col  { max-width: var(--col); }
.center { text-align: center; }
.center .col { margin-inline: auto; }

.section { padding-block: clamp(56px, 8vw, 104px); }
.section--panel { background: var(--panel); }
.section--dark { background: var(--bar); color: #fff; }
.section--tight { padding-block: clamp(40px, 5vw, 68px); }

.rule { width: 1px; height: 56px; background: var(--line); margin: 0 auto; }

/* ==========================================================================
   HEADER
   ========================================================================== */
/* ==========================================================================
   HEADER PE DOUA BENZI, ca pe fairmont.com
   1. banda alba: semnul si numele centrate, utilitarele in dreapta
   2. banda de navigare: intunecata si translucida, linkurile aliniate la stanga
   Inaltimea reala se masoara din JS si ajunge in --hdr.
   ========================================================================== */
.site-head { position: fixed; inset: 0 0 auto 0; z-index: 60; }

/* --- banda alba ---------------------------------------------------------- */
.head-brand {
  position: relative; z-index: 2;
  background: #fff; color: var(--ink);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 20px;
  padding: 12px var(--pad);
}
.head-brand .head-mid { grid-column: 2; text-align: center; }
.head-util {
  grid-column: 3; justify-self: end;
  display: flex; align-items: center; gap: 22px;
  color: var(--mute);
}
.head-util a { color: var(--mute); }
.head-util a:hover { color: var(--ink); }
.head-side { grid-column: 1; display: flex; align-items: center; gap: 14px; min-width: 0; }

.mark { width: 30px; height: 30px; margin: 0 auto 6px; display: block; color: var(--ink); }
.head-home .mark, .head-home .brandline { display: block; }
.head-side .mark { display: none; }
.mark svg { width: 100%; height: 100%; }
.head-div { display: none; }

.brandline {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(16px, 1.5vw, 23px);
  letter-spacing: clamp(2.6px, .32vw, 5px);
  text-transform: uppercase; line-height: 1.05; white-space: nowrap;
  color: var(--ink);
}

/* comutator de limba */
.langsw { display: inline-flex; align-items: center; gap: 7px; }
.langsw a { color: var(--mute); }
.langsw a:hover, .langsw a[aria-current="true"] { color: var(--ink); }
.langsw i { color: var(--line); font-style: normal; }

/* --- banda de navigare --------------------------------------------------- */
.head-nav {
  position: relative; z-index: 1;
  background: rgba(0,0,0,.34);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  transition: background .45s var(--ease);
}
.site-head.is-solid .head-nav { background: rgba(12,12,12,.86); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .head-nav { background: rgba(12,12,12,.72); }
}
.mainnav {
  display: flex; align-items: center; justify-content: flex-start;
  gap: clamp(18px, 2.4vw, 40px);
  padding: 15px var(--pad) 16px;
  overflow-x: auto; scrollbar-width: none;
}
.mainnav::-webkit-scrollbar { display: none; }
.mainnav a {
  position: relative; color: #fff; white-space: nowrap;
  font-family: var(--sans); font-weight: 600; font-size: 11.5px;
  letter-spacing: 1.7px; text-transform: uppercase; padding-bottom: 3px;
}
.mainnav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: #fff; transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.mainnav a:hover::after, .mainnav a[aria-current="page"]::after { transform: scaleX(1); }

.head-cta { display: contents; }
.phone { display: inline-flex; align-items: center; gap: 7px; color: var(--mute); white-space: nowrap; }
.phone:hover { color: var(--ink); }
.phone svg { width: 12px; height: 12px; fill: currentColor; }

.burger { display: none; width: 40px; height: 40px; position: relative; flex: none; z-index: 62; }
.burger span, .burger::before, .burger::after {
  content: ''; position: absolute; left: 9px; right: 9px; height: 1px;
  background: var(--ink); transition: transform .4s var(--ease), opacity .3s, background .3s;
}
.burger::before { top: 14px; }
.burger span    { top: 20px; }
.burger::after  { top: 26px; }
.burger[aria-expanded="true"]::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span { opacity: 0; }
.burger[aria-expanded="true"]::after { transform: translateY(-6px) rotate(-45deg); }
body.menu-open .burger span,
body.menu-open .burger::before,
body.menu-open .burger::after { background: #fff; }
body.menu-open .head-brand { background: transparent; }
body.menu-open .head-nav { display: none; }

/* meniu mobil */
.menu {
  position: fixed; inset: 0; z-index: 70;
  background: var(--bar); color: #fff;
  padding: calc(var(--hdr) + 24px) var(--pad) 40px;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
  overflow-y: auto;
}
.menu.is-open { opacity: 1; visibility: visible; transform: none; }
.menu ul { display: grid; gap: 4px; }
.menu li { border-bottom: 1px solid var(--bar-line); }
.menu a {
  display: block; padding: 18px 0;
  font-family: var(--sans); font-weight: 200; font-size: 18px;
  letter-spacing: 3px; text-transform: uppercase;
}
.menu .menu-foot { margin-top: 32px; color: var(--on-bar); }
.menu .menu-foot a { display: inline; padding: 0; font-size: 15px; letter-spacing: .5px;
  font-family: var(--serif); text-transform: none; }

/* ==========================================================================
   BARA DE REZERVARE
   ========================================================================== */
/* ==========================================================================
   BARA DE TARIFE, in josul hero-ului
   Un singur rand, panou intunecat translucid, etichete mici deasupra
   valorilor, fara casete de input vizibile. Buton alb in dreapta.
   ========================================================================== */
.bookbar {
  position: absolute; z-index: 4;
  left: var(--pad); right: var(--pad); bottom: clamp(20px, 2.6vw, 34px);
  color: #fff;
  background: rgba(10,10,10,.5);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(255,255,255,.12);
  transition: opacity .5s var(--ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bookbar { background: rgba(10,10,10,.78); }
}
.bookbar-in {
  display: flex; align-items: center;
  gap: clamp(18px, 3vw, 54px);
  padding: 16px clamp(16px, 2vw, 26px);
}
.bf {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  column-gap: 12px; row-gap: 0;
  padding-right: clamp(10px, 2vw, 26px);
}
.bf-ico { grid-row: 1 / span 2; width: 17px; height: 17px; color: rgba(255,255,255,.72);
  stroke: currentColor; fill: none; stroke-width: 1.2; }
.bf > .label, .bf label {
  grid-column: 2; color: rgba(255,255,255,.6);
  font-size: 10px; letter-spacing: 1.2px; text-transform: none;
  font-weight: 400; margin-bottom: 2px;
}
.bf-dates { grid-column: 2; display: flex; align-items: center; gap: 8px; }
.bf-dates::before { content: none; }
.bf input, .bf select {
  grid-column: 2;
  height: auto; padding: 0; border: 0; background: none; color: #fff;
  font-family: var(--serif); font-size: 16px; letter-spacing: .3px;
  border-radius: 0; appearance: none; min-width: 0;
}
.bf input::placeholder { color: rgba(255,255,255,.55); }
.bf input:focus, .bf select:focus { outline: none; box-shadow: 0 1px 0 #fff; }
.bf input[type="date"] { min-width: 118px; color-scheme: dark; cursor: pointer; }
.bf select {
  min-width: 150px; padding-right: 20px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center; background-size: 10px;
}
.bf select option { color: var(--ink); background: #fff; }
.bf--promo { display: none; }
.bookbar .btn {
  margin-left: auto; height: 50px; padding: 0 30px;
  background: #fff; color: var(--ink); border-color: #fff;
  font-size: 11px; letter-spacing: 2px;
}
.bookbar .btn:hover { background: transparent; color: #fff; border-color: #fff; }
.bookbar .callbtn { border-color: rgba(255,255,255,.45); color: #fff; width: 50px; height: 50px; }
.bookbar .toggle { display: none; }
.bookpeek { display: none !important; }

/* clapeta care readuce bara după ce a fost ascunsă */
.bookpeek {
  position: fixed; z-index: 57; top: var(--hdr); right: var(--pad);
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-top: 0;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  padding: 9px 18px;
  font-family: var(--sans); font-size: 10px; letter-spacing: 2.05px; text-transform: uppercase;
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform .5s var(--ease), opacity .35s var(--ease), visibility .5s;
}
.bookpeek.is-on { transform: none; opacity: 1; visibility: visible; }

/* ==========================================================================
   HERO
   ========================================================================== */
/* Videoul stă fix în spatele paginii, iar secțiunile urcă peste el pe măsură ce
   dai scroll. Hero-ul în sine e transparent, deci nu taie nimic. */
.hero {
  position: relative;
  height: calc(100svh - var(--hdr));
  min-height: 480px;
  margin-top: var(--hdr);
  background: transparent;
}
main > section:not(.hero) { position: relative; z-index: 2; background: var(--paper); }
main > section.section--panel { background: var(--panel); }
main > section.cover { background: #0b0b0b; }
main > section.iconbar { background: var(--bar-2); }
main > section.quiz { background: var(--panel); }
/* --hp merge de la 0 la 1 pe măsură ce hero-ul iese din ecran (setat din JS).
   Poza se stinge încet, textul se stinge mai repede și urcă. */
.hero-slides {
  position: absolute; inset: 0;
  opacity: calc(1 - var(--hp, 0) * .88);
  transform: scale(calc(1 + var(--hp, 0) * .07));
  transform-origin: 50% 40%;
}
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.6s var(--ease);
}
.hero-slide.is-on { opacity: 1; }
.hero-slide img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06); transition: transform 9s linear;
}
.hero-slide.is-on img { transform: scale(1.14); }

/* videoul de pe landing: fix în spatele întregii pagini, cu poster pentru primul cadru */
.hero-video {
  position: fixed; inset: 0; z-index: 0;
  opacity: calc(1 - var(--hp, 0) * .96);
  transform: scale(calc(1 + var(--hp, 0) * .1));
  will-change: transform, opacity;
  background: #0d0d0d;
}
.hero-video video { width: 100%; height: 100%; object-fit: cover; }
/* scrimul care ține header-ul transparent lizibil, plus întunecarea de jos */
.hero-video::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.12) 26%,
              rgba(0,0,0,.05) 52%, rgba(0,0,0,.66) 100%);
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 34%,
              rgba(0,0,0,.12) 58%, rgba(0,0,0,.62) 100%);
}
.hero-in {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(38px, 6vw, 74px);
  padding-inline: var(--pad); color: #fff;
  opacity: calc(1 - var(--hp, 0) * 1.6);
  transform: translateY(calc(var(--hp, 0) * -70px));
}
.hero .eyebrow { display: block; margin-bottom: 16px; color: rgba(255,255,255,.94); }
.hero h1 { color: #fff; max-width: 16ch; }
.hero .addr { margin-top: 20px; color: rgba(255,255,255,.82); }

/* filet subțire care se trage înainte de supratitlu */
.hero-rule { display: block; width: 56px; height: 1px; background: rgba(255,255,255,.85); margin-bottom: 20px; }
/* filetele de deasupra titlurilor au fost scoase: Edis le-a găsit prea „AI".
   Regula rămâne ca să nu se strice nimic dacă mai apare vreun element. */
.sec-rule { display: none; }

/* indicator de scroll: o dâră care coboară printr-un filet vertical */
.scrollcue {
  position: absolute; z-index: 3; left: 50%; translate: -50% 0; bottom: 26px;
  width: 1px; height: 56px; overflow: hidden;
  background: rgba(255,255,255,.22);
  transition: opacity .5s var(--ease);
}
.scrollcue span {
  position: absolute; left: 0; right: 0; top: 0; height: 42%;
  background: #fff; animation: cue 2.6s var(--ease) infinite;
}
.scrollcue.is-gone { opacity: 0; }
@keyframes cue {
  0%   { transform: translateY(-110%); }
  55%  { transform: translateY(240%); }
  100% { transform: translateY(240%); }
}

.hero-dots {
  position: absolute; z-index: 3; right: var(--pad); bottom: clamp(38px, 6vw, 74px);
  display: flex; gap: 10px;
}
.hero-dots button {
  width: 34px; height: 2px; background: rgba(255,255,255,.4);
  transition: background .4s var(--ease);
}
.hero-dots button[aria-current="true"] { background: #fff; }

/* hero scurt pentru paginile interioare */
/* poza intră sub header-ul transparent, altfel sus rămâne alb și textul alb
   al barei devine invizibil pe paginile interioare */
.pagehero {
  position: relative; height: clamp(440px, 58vh, 620px);
  margin-top: var(--hdr);
  overflow: hidden; background: #0d0d0d;
}
.pagehero img { width: 100%; height: 100%; object-fit: cover; }
.pagehero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.18) 30%,
              rgba(0,0,0,.12) 55%, rgba(0,0,0,.6) 100%);
}
.pagehero-in {
  position: absolute; z-index: 2; inset: auto 0 0 0;
  padding: 0 var(--pad) clamp(30px, 4vw, 52px); color: #fff;
}
.crumbs { color: rgba(255,255,255,.72); margin-bottom: 12px; }
.crumbs a:hover { color: #fff; }

/* ==========================================================================
   BLOCURI
   ========================================================================== */
.intro-panel { background: var(--panel); padding: clamp(40px, 6vw, 76px) clamp(20px, 5vw, 78px); }
.intro-panel h2 { margin-bottom: 26px; }

/* blocuri editoriale 50 / 50 */
.edito { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.edito + .edito { border-top: 1px solid var(--line); }
.edito .ph { position: relative; overflow: hidden; min-height: clamp(300px, 40vw, 520px); }
.edito .ph img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; }
.edito .tx {
  background: var(--panel);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(36px, 5vw, 76px) clamp(24px, 4.4vw, 68px);
}
.edito .tx h2 { margin-bottom: 22px; }
.edito .tx .lnk { margin-top: 12px; align-self: flex-start; }
.edito--flip .ph { order: 2; }
.edito--flip .tx { order: 1; }

/* carduri 3 pe rând */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 34px); }
.card .ph { position: relative; overflow: hidden; aspect-ratio: 3 / 2; }
.card .ph img { width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease); }
.card:hover .ph img { transform: scale(1.05); }
.card h3 { margin: 20px 0 10px; }
.card p { color: var(--ink-2); }
.card .lnk { margin-top: 6px; }

/* carusel cazare */
.carousel { position: relative; }
.track {
  display: flex; gap: clamp(14px, 1.8vw, 26px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: var(--pad); padding-bottom: 6px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 clamp(260px, 30vw, 420px); scroll-snap-align: center; }
.slide .ph { position: relative; overflow: hidden; aspect-ratio: 3 / 2; }
.slide .ph img { width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease); }
.slide:hover .ph img { transform: scale(1.05); }
.slide .h3 { margin: 18px 0 8px; }
.slide p { color: var(--ink-2); }
.car-nav { display: flex; justify-content: center; gap: 10px; margin-top: 34px; }
.car-nav button {
  width: 46px; height: 46px; border: 1px solid var(--line);
  display: grid; place-items: center;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.car-nav button:hover { background: var(--ink); border-color: var(--ink); }
.car-nav button:hover svg { stroke: #fff; }
.car-nav svg { width: 15px; height: 15px; stroke: var(--ink); fill: none; stroke-width: 1; }

/* ==========================================================================
   BANDĂ CU ICONIȚE (facilități), peste o poză întunecată
   ========================================================================== */
/* fără poză în spate: peste o fotografie întunecată iconițele subțiri se pierdeau.
   Fundal plin, cu un singur filet brass sus. */
.iconbar { position: relative; overflow: hidden; background: var(--bar-2); }
.iconbar-bg { display: none; }
.iconbar::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  opacity: .6;
}
.iconbar-in { position: relative; z-index: 2; padding: clamp(30px, 4vw, 48px) 0 clamp(34px, 4vw, 52px); }

/* filetul subțire de deasupra, cu segmentul care arată cât s-a derulat */
.iconbar-rail {
  position: relative; height: 1px; background: rgba(255,255,255,.22);
  margin: 0 var(--pad) clamp(28px, 3.4vw, 44px);
}
.iconbar-rail span {
  position: absolute; left: 0; top: -1px; height: 3px; width: 30%;
  background: #fff; transition: transform .25s linear, width .25s linear;
}

.iconbar-list {
  display: flex; align-items: flex-start;
  gap: clamp(20px, 3vw, 46px);
  padding-inline: var(--pad);
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; -ms-overflow-style: none;
}
.iconbar-list::-webkit-scrollbar { display: none; }
.iconbar-list li {
  flex: 1 0 auto; min-width: 96px; max-width: 160px;
  text-align: center; color: rgba(255,255,255,.78);
  scroll-snap-align: center;
  transition: color .4s var(--ease);
}
.iconbar-list li:hover { color: #fff; }
.iconbar-list svg {
  width: 28px; height: 28px; margin: 0 auto 14px;
  stroke: currentColor; fill: none; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;
}
.iconbar-list .label { display: block; line-height: 1.7; }

/* listă de dotări */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(24px, 4vw, 60px); }
.facts li {
  padding: 15px 0; border-bottom: 1px solid var(--line);
  display: flex; gap: 14px; align-items: baseline;
  font-size: 16px; line-height: 24px;
}
.facts li::before { content: ''; width: 5px; height: 5px; flex: none; background: var(--ink); }

/* ==========================================================================
   CARUSEL COVERFLOW: cardul din centru e alb și plin, vecinii doar conturați,
   iar fundalul se schimbă odată cu cardul activ.
   ========================================================================== */
.cover { position: relative; overflow: hidden; background: #0b0b0b; color: #fff; }
.cover-bg { position: absolute; inset: 0; }
.cover-bg > div { position: absolute; inset: 0; opacity: 0; transition: opacity 1.3s var(--ease); }
.cover-bg > div.is-on { opacity: 1; }
.cover-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,6,6,.72), rgba(6,6,6,.82));
}
.cover-in { position: relative; z-index: 2; padding-block: clamp(52px, 7vw, 96px); }
.cover-head { text-align: center; padding-inline: var(--pad); margin-bottom: clamp(34px, 4vw, 56px); }
.cover-head h2 { color: #fff; }
.cover-head .sec-rule { background: rgba(255,255,255,.5); }
.cover-head p { color: rgba(255,255,255,.78); max-width: 620px; margin-inline: auto; }

/* Rândul are înălțime fixă, iar cardurile își schimbă doar propria înălțime în
   procente. Așa nu se mai mișcă nimic pe verticală la schimbarea cardului. */
.cover-view { overflow: hidden; }
.cover-track {
  --cw: clamp(250px, 30vw, 400px);
  height: clamp(400px, 47vw, 590px);
  display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px);
  transition: transform .9s var(--ease); will-change: transform;
}
.cover-card { flex: 0 0 var(--cw); width: var(--cw); height: 100%;
  display: flex; align-items: center; }
.cc {
  width: 100%; height: 74%; overflow: hidden;
  border: 1px solid rgba(255,255,255,.42);
  padding: 26px 22px 28px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  color: #fff;
  transition: background .7s var(--ease), color .7s var(--ease),
              border-color .7s var(--ease), height .7s var(--ease);
}
.cover-card.is-on .cc {
  background: #fff; color: var(--ink); border-color: #fff;
  height: 100%;
}
.cc-body {
  width: 100%; flex: 1; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s;
}
.cover-card.is-on .cc-body { opacity: 1; visibility: visible; transition-delay: .3s; }
.cc-ph { aspect-ratio: 3 / 2; overflow: hidden; margin: 22px 0 20px; }
.cc-ph img { width: 100%; height: 100%; object-fit: cover; }
.cc p { flex: 1; margin: 0 0 22px; }
.cc .btn { align-self: center; }
.cover-card:not(.is-on) { cursor: pointer; }

.cover-nav {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  margin-top: clamp(30px, 3.4vw, 46px); color: #fff;
}
.cover-nav button { width: 38px; height: 38px; display: grid; place-items: center; opacity: .75;
  transition: opacity .3s var(--ease); }
.cover-nav button:hover { opacity: 1; }
.cover-nav svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.2; }
.cover-count { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 2.2px; min-width: 64px; text-align: center; }

/* tabel de tipuri de cameră */
.rooms { display: grid; gap: clamp(40px, 6vw, 80px); }
.room { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
.room--flip .ph { order: 2; }
.room .ph { position: relative; overflow: hidden; aspect-ratio: 3 / 2; }
.room .ph img { width: 100%; height: 100%; object-fit: cover; }
.room h3 { margin-bottom: 8px; }
.room .qty { color: var(--mute); font-style: italic; margin-bottom: 18px; }

/* galerie */
.gal { columns: 3; column-gap: clamp(10px, 1.4vw, 18px); }
.gal button { display: block; width: 100%; margin-bottom: clamp(10px, 1.4vw, 18px);
  break-inside: avoid; overflow: hidden; background: var(--panel); }
.gal img { width: 100%; transition: transform 1.1s var(--ease), opacity .5s; }
.gal button:hover img { transform: scale(1.04); }

.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.94);
  display: grid; place-items: center; padding: 60px 16px;
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(1200px, 94vw); max-height: 82vh; object-fit: contain; }
.lb-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px;
  display: grid; place-items: center; color: #fff; }
.lb-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1; }
.lb-prev, .lb-next { position: absolute; top: 50%; translate: 0 -50%;
  width: 52px; height: 52px; display: grid; place-items: center; color: #fff; }
.lb-prev { left: 10px; } .lb-next { right: 10px; }
.lb-prev svg, .lb-next svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1; }
.lb-count { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.8);
  font-family: var(--sans); font-size: 11px; letter-spacing: 2px; }

/* bandă cu informații de rezervare */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--line); }
.strip > div { background: var(--panel); padding: clamp(24px, 3vw, 40px) clamp(18px, 2.4vw, 32px); }
.strip .h3 { margin-bottom: 12px; }
.strip p { margin: 0; font-size: 16px; line-height: 24px; }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.cinfo dl { margin: 0; display: grid; gap: 0; }
.cinfo dt { margin-top: 26px; margin-bottom: 6px; }
.cinfo dt:first-child { margin-top: 0; }
.cinfo dd { margin: 0; font-size: 18px; }
.cinfo dd a:hover { text-decoration: underline; text-underline-offset: 4px; }
.map { aspect-ratio: 4 / 3; background: var(--panel); border: 1px solid var(--line); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* formular */
.form { display: grid; gap: 18px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 7px; }
.field input, .field select, .field textarea {
  border: 1px solid var(--line); background: #fff; padding: 12px;
  font-family: var(--serif); font-size: 16px; border-radius: 0; appearance: none;
}
.field select { padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 11px; }
.field textarea { min-height: 118px; resize: vertical; }
.form .note { color: var(--mute); font-size: 15px; }

/* ==========================================================================
   IMAGINI CARE NU STAU CUMINȚI
   --------------------------------------------------------------------------
   1. warp   — toată pagina se îndoaie după viteza scrollului
   2. strips — imaginea se descoperă în fâșii verticale, decalate
   3. tilt   — cadrul se înclină în 3D după cursor, iar poza alunecă în el
   ========================================================================== */

/* 1. deformare la viteza scrollului */
[data-warp] {
  transform: skewY(var(--warp, 0deg)) scaleY(var(--warp-s, 1));
  transform-origin: 50% 50%;
}

/* 2. dezvăluire în fâșii */
.strips { position: relative; overflow: hidden; --strip-bg: var(--paper); }
.section--panel .strips, .edito .strips, .quiz .strips { --strip-bg: var(--panel); }
.cover .strips, .iconbar .strips { --strip-bg: #0b0b0b; }
.strips > i {
  position: absolute; top: -2%; bottom: -2%; width: 20.4%;
  background: var(--strip-bg); z-index: 2; pointer-events: none;
  transform: translateY(0);
  transition: transform 1.05s cubic-bezier(.76,0,.24,1);
}
.strips > i:nth-of-type(1) { left: 0;     transition-delay: 0ms; }
.strips > i:nth-of-type(2) { left: 20%;   transition-delay: 90ms; }
.strips > i:nth-of-type(3) { left: 40%;   transition-delay: 180ms; }
.strips > i:nth-of-type(4) { left: 60%;   transition-delay: 270ms; }
.strips > i:nth-of-type(5) { left: 80%;   transition-delay: 360ms; }
.strips.in > i { transform: translateY(-102%); }
.strips img { transform: scale(1.1); transition: transform 1.6s cubic-bezier(.22,.61,.36,1) .1s; }
.strips.in img { transform: scale(1); }

[data-rv="strips"] { opacity: 1; transform: none; }

/* 3. înclinare după cursor */
[data-tilt] { perspective: 1000px; }
[data-tilt] .ph, [data-tilt] .strips, [data-tilt].strips {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .6s var(--ease);
}
[data-tilt] .ph img, [data-tilt] .strips img, [data-tilt].strips img {
  transition: transform .6s var(--ease);
}
[data-tilt]:hover .ph img,
[data-tilt]:hover .strips img,
[data-tilt].strips:hover img {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(1.09);
}

/* ==========================================================================
   BANDĂ CARE CURGE (viteza depinde de scroll)
   ========================================================================== */
.marquee {
  overflow: hidden; background: var(--bar-2); color: #fff;
  padding: clamp(16px, 1.8vw, 24px) 0;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.marquee-in { display: flex; width: max-content; will-change: transform; }
.marquee span {
  display: inline-flex; align-items: center; gap: clamp(24px, 3vw, 48px);
  padding-right: clamp(24px, 3vw, 48px);
  font-family: var(--display); font-weight: 400;
  font-size: clamp(20px, 2.4vw, 34px); letter-spacing: 2px; text-transform: uppercase;
  white-space: nowrap;
}
.marquee i { font-style: normal; color: rgba(255,255,255,.4); font-size: .6em; }

/* ==========================================================================
   DISTANȚE (ce e în jur, în cifre)
   ========================================================================== */
.dist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.dist li { background: var(--panel); padding: clamp(26px, 3.2vw, 42px) clamp(20px, 2.4vw, 32px); }
.dist-n {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(34px, 4vw, 54px); line-height: 1; margin-bottom: 16px;
}
.dist .h3 { display: block; margin-bottom: 10px; }
.dist p { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.section--panel .dist li { background: #fff; }

/* ==========================================================================
   POPUP DE OFERTĂ
   ========================================================================== */
.promo {
  position: fixed; inset: 0; z-index: 95;
  display: grid; place-items: center; padding: 20px;
  background: rgba(8,8,8,.72);
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s;
}
.promo.is-on { opacity: 1; visibility: visible; }
.promo-box {
  position: relative; width: min(880px, 100%);
  background: #fff; color: var(--ink);
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  transform: translateY(18px) scale(.985);
  transition: transform .6s var(--ease);
  max-height: calc(100svh - 40px); overflow: auto;
}
.promo.is-on .promo-box { transform: none; }
.promo-ph { position: relative; overflow: hidden; min-height: 260px; }
.promo-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo-tx { padding: clamp(28px, 3.6vw, 48px); }
.promo-tx .kicker { display: block; color: var(--mute); margin-bottom: 16px; }
.promo-tx h2 { font-size: clamp(22px, 2.5vw, 33px); margin-bottom: 14px; }
.promo-tx p { color: var(--ink-2); }
.promo-form { display: flex; align-items: flex-end; gap: 16px;
  border-bottom: 1px solid var(--line); margin-top: 24px; }
.promo-form input {
  flex: 1; min-width: 0; border: 0; background: none; border-radius: 0;
  padding: 0 4px 12px; font-family: var(--serif); font-size: 17px;
}
.promo-form input::placeholder { color: var(--mute); }
.promo-form button {
  padding: 0 2px 12px; white-space: nowrap;
  font-family: var(--sans); font-weight: 500; font-size: 10px; letter-spacing: 2.05px; text-transform: uppercase;
}
.promo-form:focus-within { border-bottom-color: var(--ink); }
.promo-note { margin: 14px 0 0; color: var(--mute); font-size: 14px; line-height: 21px; }
.promo-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink);
  background: rgba(255,255,255,.9);
}
.promo-close svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.2; }
.promo-ok { display: none; }
.promo-box.is-done .promo-form, .promo-box.is-done .promo-note { display: none; }
.promo-box.is-done .promo-ok { display: block; margin-top: 24px; }

/* ==========================================================================
   BUTON DE APEL, FIX PE ECRAN
   ========================================================================== */
.callfab {
  position: fixed; z-index: 62; right: clamp(16px, 2.4vw, 34px); bottom: clamp(20px, 3vw, 38px);
  display: inline-flex; align-items: center; gap: 12px;
  height: 54px; padding: 0 24px;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease),
              background .35s var(--ease), color .35s var(--ease);
}
.callfab.is-on { opacity: 1; transform: none; pointer-events: auto; }
.callfab:hover { background: #fff; color: var(--ink); }
/* Butonul ținea odată o iconiță de telefon, desenată plin, de unde `fill`.
   Acum ține calendarul, care e desenat în contur, iar `fill` îl umplea complet:
   pe telefon se vedea un pătrat alb, fără linia antetului și fără inele. */
.callfab svg { width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.callfab .ring {
  position: absolute; inset: -1px; border: 1px solid rgba(255,255,255,.55);
  animation: fabring 2.8s var(--ease) infinite; pointer-events: none;
}
@keyframes fabring {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.16); opacity: 0; }
  100% { transform: scale(1.16); opacity: 0; }
}

/* ==========================================================================
   EVENIMENTE
   ========================================================================== */
.events { display: grid; gap: clamp(24px, 3vw, 40px); }
.event {
  display: grid; grid-template-columns: 150px 1fr auto;
  gap: clamp(20px, 3vw, 48px); align-items: center;
  border: 1px solid var(--line); padding: clamp(22px, 3vw, 38px);
  background: #fff;
  transition: border-color .5s var(--ease), background .5s var(--ease);
}
.event:hover { border-color: var(--ink); }
.event--past { opacity: .62; }
.event--past:hover { border-color: var(--line); }

.ev-date { text-align: center; border-right: 1px solid var(--line); padding-right: clamp(14px, 2vw, 28px); }
.ev-day { font-family: var(--display); font-size: clamp(38px, 4.4vw, 58px); line-height: 1; }
.ev-mon { display: block; margin-top: 8px; }
.ev-year { display: block; margin-top: 6px; color: var(--mute); }

.ev-body h3 { font-family: var(--display); font-weight: 400; font-size: clamp(21px, 2.4vw, 30px);
  line-height: 1.15; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 10px; }
.ev-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 14px; color: var(--mute); }
.ev-line { margin: 0 0 6px; }
.ev-line strong { font-weight: 500; font-family: var(--sans); font-size: 12px;
  letter-spacing: 1.6px; text-transform: uppercase; margin-right: 8px; }
.ev-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 500; font-size: 9.5px; letter-spacing: 1.8px;
  text-transform: uppercase; padding: 4px 10px; border: 1px solid currentColor;
  margin-bottom: 16px;
}
.ev-tag--soon { color: var(--ink); background: var(--ink); color: #fff; border-color: var(--ink); }
.ev-tag--past { color: var(--mute); }
.ev-cta { display: grid; gap: 12px; justify-items: stretch; text-align: center; }
.ev-cta .small { color: var(--mute); }

/* ==========================================================================
   QUIZ
   ========================================================================== */
.quiz { background: var(--panel); }
.quiz-box { max-width: 780px; margin: 0 auto; }
.quiz-bar { height: 2px; background: var(--line); margin-bottom: clamp(28px, 3.4vw, 44px); }
.quiz-bar span { display: block; height: 100%; width: 0; background: var(--ink);
  transition: width .6s var(--ease); }
.quiz-step { display: none; }
.quiz-step.is-on { display: block; }
.quiz-step .kicker { display: block; color: var(--mute); margin-bottom: 14px; }
.quiz-step h3 { font-family: var(--display); font-weight: 400;
  font-size: clamp(22px, 2.6vw, 34px); line-height: 1.15; text-transform: uppercase;
  letter-spacing: .6px; margin-bottom: clamp(22px, 2.6vw, 34px); }
.quiz-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.quiz-opts button {
  border: 1px solid var(--line); background: #fff; padding: 18px 20px; text-align: left;
  font-family: var(--serif); font-size: 17px; line-height: 25px;
  transition: border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.quiz-opts button:hover { border-color: var(--ink); }
.quiz-opts button.is-sel { background: var(--ink); color: #fff; border-color: var(--ink); }
.quiz-nav { display: flex; align-items: center; gap: 18px; margin-top: 26px; }
.quiz-nav .back { color: var(--mute); }
.quiz-nav .back:hover { color: var(--ink); }

.quiz-res { display: none; }
.quiz-res.is-on { display: block; }
.quiz-res .rec {
  background: #fff; border: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr;
}
.quiz-res .rec-ph { position: relative; overflow: hidden; min-height: 280px; }
.quiz-res .rec-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quiz-res .rec-tx { padding: clamp(24px, 3.4vw, 44px); }
.quiz-res .rec-tx h3 { font-family: var(--display); font-weight: 400;
  font-size: clamp(21px, 2.4vw, 30px); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 12px; }
.quiz-res dl { margin: 22px 0 0; }
.quiz-res dt { margin-top: 18px; margin-bottom: 5px; color: var(--mute); }
.quiz-res dt:first-child { margin-top: 0; }
.quiz-res dd { margin: 0; }
.quiz-res .rec-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ==========================================================================
   BLOG
   ========================================================================== */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 40px); }
.post .ph { position: relative; overflow: hidden; aspect-ratio: 3 / 2; }
.post .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.post:hover .ph img { transform: scale(1.05); }
.post .meta { display: block; margin: 18px 0 10px; color: var(--mute); }
.post h3 { font-family: var(--display); font-weight: 400; font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.2; margin-bottom: 10px; }
.post p { color: var(--ink-2); }

.article { max-width: 720px; margin: 0 auto; }
.article > p:first-of-type { font-size: 20px; line-height: 32px; }
.article h2 { font-size: clamp(21px, 2.2vw, 29px); margin: clamp(38px, 4vw, 56px) 0 16px; }
.article h3 { font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: 2.2px;
  text-transform: uppercase; margin: 32px 0 12px; }
.article ul { margin: 0 0 1.2em; }
.article ul li { position: relative; padding-left: 20px; margin-bottom: 9px; }
.article ul li::before { content: ''; position: absolute; left: 0; top: 12px;
  width: 6px; height: 1px; background: var(--ink); }
.article .toc { background: var(--panel); padding: 26px 28px; margin: 34px 0; }
.article .toc .label { display: block; margin-bottom: 14px; color: var(--mute); }
.article .toc li { margin-bottom: 9px; }
.article .toc a:hover { text-decoration: underline; text-underline-offset: 4px; }
.faq { border-top: 1px solid var(--line); margin-top: clamp(40px, 4.4vw, 60px); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative;
  font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 6px; top: 17px;
  font-size: 20px; font-weight: 300; transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; margin: 0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-foot { background: var(--bar-2); color: #fff; }
.foot-hr { height: 1px; background: rgba(255,255,255,.13); }

/* --- newsletter, banda de sus a footerului ------------------------------- */
.foot-news { padding: clamp(44px, 5.5vw, 76px) 0; }
.foot-news-in { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: end; }
.foot-news .kicker { display: block; color: rgba(255,255,255,.6); margin-bottom: 16px; }
.foot-news h2 { font-size: clamp(21px, 2.3vw, 31px); margin-bottom: 12px; }
.foot-news p { color: rgba(255,255,255,.66); margin: 0; font-size: 16px; line-height: 25px; }

.news-form { display: flex; align-items: flex-end; gap: 0; border-bottom: 1px solid rgba(255,255,255,.35); }
.news-form input {
  flex: 1; min-width: 0; background: none; border: 0; border-radius: 0;
  padding: 0 6px 13px; color: #fff;
  font-family: var(--serif); font-size: 17px; letter-spacing: .3px;
}
.news-form input::placeholder { color: rgba(255,255,255,.42); }
.news-form button {
  display: inline-flex; align-items: center; gap: 12px; padding: 0 2px 13px;
  font-family: var(--sans); font-weight: 500; font-size: 10px; letter-spacing: 2.05px;
  text-transform: uppercase; color: #fff; white-space: nowrap;
}
.news-form button svg { width: 18px; height: 10px; stroke: currentColor; fill: none; stroke-width: 1; }
.news-form:focus-within { border-bottom-color: var(--brass); }
.news-note { margin-top: 14px; color: rgba(255,255,255,.45); font-size: 14px; line-height: 21px; }

/* --- semnul mare + coloane ------------------------------------------------ */
.foot-main { padding: clamp(48px, 6vw, 86px) 0 0; }
.foot-mark { text-align: center; margin-bottom: clamp(40px, 5.5vw, 68px); }
.foot-mark .mark { width: 58px; height: 58px; margin: 0 auto 20px; color: rgba(255,255,255,.9); }
.foot-mark .wm {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(24px, 3vw, 40px); letter-spacing: 3px; text-transform: uppercase;
  line-height: 1.1;
}
.foot-mark .stars { display: block; margin-top: 12px; color: rgba(255,255,255,.75); letter-spacing: 6px; font-size: 11px; }
.foot-mark .place { display: block; margin-top: 14px; color: rgba(255,255,255,.5); }

.foot-cols {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(26px, 3vw, 48px);
  padding-bottom: clamp(44px, 5vw, 70px);
}
.foot-cols h4 {
  font-family: var(--sans); font-weight: 500; font-size: 10px;
  letter-spacing: 2.05px; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-bottom: 24px;
}
.foot-cols li { margin-bottom: 13px; }
.foot-cols a, .foot-cols span, .foot-cols address {
  color: rgba(255,255,255,.75);
  font-family: var(--serif); font-style: normal; font-size: 16px; line-height: 26px;
  letter-spacing: .3px; text-transform: none;
}
.foot-cols a { position: relative; }
.foot-cols a:hover { color: #fff; }
.foot-cols a:not(.plain)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.foot-cols a:not(.plain):hover::after { transform: scaleX(1); }
.foot-cols .tel { font-family: var(--display); font-size: clamp(19px, 1.7vw, 24px); letter-spacing: 1px; }

/* --- social + jos --------------------------------------------------------- */
.foot-social { display: flex; gap: 14px; margin-top: 22px; }
.foot-social a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.24); color: rgba(255,255,255,.8);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.foot-social a::after { display: none; }
.foot-social a:hover { background: #fff; color: var(--bar-2); border-color: #fff; }
.foot-social svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

.foot-bot {
  padding: 26px 0 30px;
  display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center;
  color: rgba(255,255,255,.5);
}
.foot-bot a:hover { color: #fff; }
.foot-bot .credit { margin-left: auto; }
.foot-bot .credit a { color: rgba(255,255,255,.72); }

.totop {
  display: inline-flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,.55);
}
.totop:hover { color: #fff; }
.totop svg { width: 10px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1; }

/* ==========================================================================
   ANIMAȚII LA SCROLL
   ========================================================================== */
[data-rv] { opacity: 0; transform: translateY(26px);
  transition: opacity .95s var(--ease), transform .95s var(--ease);
  transition-delay: var(--d, 0ms); }
[data-rv].in { opacity: 1; transform: none; }

/* masca se pune pe imagine, nu pe containerul observat: un element cu
   clip-path: inset(100%) nu mai raporteaza intersectie, deci nu s-ar declansa */
[data-rv="mask"] { opacity: 1; transform: none; }
[data-rv="mask"] img {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.09);
  transition: clip-path 1.15s var(--ease), transform 1.5s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-rv="mask"].in img { clip-path: inset(0 0 0 0); transform: none; }

/* filet care se trage de la stânga la dreapta */
[data-rv="line"] {
  opacity: 1;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease); transition-delay: var(--d, 0ms);
}
[data-rv="line"].in { transform: scaleX(1); }

/* titlu care urcă din mască, cuvânt cu cuvânt */
[data-rv="words"] { opacity: 1; transform: none; }
[data-rv="words"] .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
[data-rv="words"] .w > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1s var(--ease);
  transition-delay: calc(var(--d, 0ms) + var(--wi, 0) * 55ms);
}
[data-rv="words"].in .w > span { transform: none; }

/* parallax pe imaginile din blocurile editoriale */
[data-para] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-rv] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-rv="words"] .w > span { transform: none !important; }
  [data-rv="mask"] img { clip-path: none !important; transform: none !important; }
  .hero-slide img { transform: none !important; }
  .scrollcue { display: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .facts { grid-template-columns: repeat(2, 1fr); }
  .posts { grid-template-columns: repeat(2, 1fr); }
  .dist { grid-template-columns: repeat(2, 1fr); }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .foot-cols { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
  .foot-news-in { grid-template-columns: 1fr; gap: 30px; }
  .gal { columns: 2; }
}

@media (max-width: 960px) {
  :root { --hdr-top: 0px; --hdr-main: 58px; --hdr: 58px; --book: 0px; }
  .head-top { display: none; }
  .head-main { grid-template-columns: 44px 1fr 44px; padding: 10px var(--pad); gap: 8px; }
  .site-head.is-solid .head-main { padding-top: 8px; padding-bottom: 8px; }
  .mark { width: 34px; height: 34px; margin: 0 auto; }
  .head-mid .mark { display: none; }
  .head-side--l .mark { display: block; }
  .brandline { font-size: 13px; letter-spacing: 2.4px; }
  .mainnav { display: none; }
  .burger { display: block; }
  .head-side--l { justify-content: flex-start; }
  .phone { display: none; }

  /* blur pe suprafețe mari e scump pe telefon: fundal aproape opac în loc */
  .bookbar { background: #fff; }

  /* bara stă jos și coboară din ecran când derulezi în jos */
  .bookbar {
    top: auto; bottom: 0; border-bottom: 0; border-top: 1px solid var(--line);
  }
  .bookbar.is-hidden { transform: translateY(calc(100% + 2px)); }
  .bookbar-in { flex-wrap: nowrap; align-items: center; gap: 10px; padding: 11px var(--pad); }
  .bookbar .bf { display: none; }
  .bookbar .btn { flex: 1 1 auto; height: 46px; }
  .bookbar .toggle, .bookpeek { display: none; }
  .callbtn { display: inline-flex; }
  /* când meniul e deschis, bara nu mai stă peste el */
  body.menu-open .bookbar, body.menu-open .callfab { transform: translateY(calc(100% + 6px)); }

  .hero { height: calc(100svh - var(--hdr)); margin-top: var(--hdr); min-height: 440px; }
  .hero-in { bottom: 100px; }
  .hero-dots { bottom: 76px; }
  .scrollcue { display: none; }
  .pagehero { margin-top: var(--hdr); }

  .edito { grid-template-columns: 1fr; }
  .edito--flip .ph { order: 0; }
  .edito--flip .tx { order: 0; }
  .edito .ph { min-height: clamp(240px, 56vw, 360px); }
  .cards { grid-template-columns: 1fr; gap: 40px; }
  .posts { grid-template-columns: 1fr; gap: 40px; }
  /* pe telefon bara de rezervare stă jos, deci butonul de apel urcă peste ea */
  .callfab { bottom: 84px; right: 16px; height: 48px; padding: 0 18px; }
  .room, .room--flip { grid-template-columns: 1fr; gap: 22px; }
  .room--flip .ph { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .site-foot { padding-bottom: 96px; }
}

@media (max-width: 620px) {
  body { font-size: 17px; line-height: 26px; }
  .facts { grid-template-columns: 1fr; }

  .strip { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr; }
  .gal { columns: 1; }
  .foot-bot { flex-direction: column; align-items: flex-start; }
  .foot-bot .credit { margin-left: 0; }
  .slide { flex-basis: 78vw; }
  .form .row2 { grid-template-columns: 1fr; }
  .news-form { flex-wrap: wrap; }
  .cover-track { --cw: 76vw; }
  .iconbar-list li { min-width: 116px; }
  .quiz-opts { grid-template-columns: 1fr; }
  .dist { grid-template-columns: 1fr; }
  .promo-box { grid-template-columns: 1fr; }
  .promo-ph { min-height: 170px; }
  .event { grid-template-columns: 1fr; gap: 20px; }
  .ev-date { text-align: left; border-right: 0; border-bottom: 1px solid var(--line);
    padding: 0 0 16px; display: flex; align-items: baseline; gap: 12px; }
  .ev-mon, .ev-year { margin: 0; }
  .quiz-res .rec { grid-template-columns: 1fr; }
}
.cards--2 { grid-template-columns: repeat(2, 1fr); }

/* ==========================================================================
   GALERIE PE CATEGORII
   ========================================================================== */
.galfilter {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.galfilter button {
  padding: 11px 20px; border: 1px solid var(--line);
  font-family: var(--sans); font-weight: 500; font-size: 10px;
  letter-spacing: 2.05px; text-transform: uppercase;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.galfilter button:hover { border-color: var(--ink); }
.galfilter button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.gal button[hidden] { display: none; }

/* ==========================================================================
   BANDĂ DE BENEFICII PENTRU REZERVARE DIRECTĂ
   ========================================================================== */
.perks { background: var(--bar-2); color: #fff; }
.perks-in { padding-block: clamp(44px, 5.5vw, 78px); }
.perks-head { text-align: center; margin-bottom: clamp(34px, 4vw, 54px); }
.perks-head h2 { color: #fff; }
.perks-head .sec-rule { background: rgba(255,255,255,.45); }
.perks-head p { color: rgba(255,255,255,.7); max-width: 620px; margin-inline: auto; }
.perks-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.14); }
.perks-list li { background: var(--bar-2); padding: clamp(24px, 2.8vw, 36px) clamp(18px, 2.2vw, 28px); }
.perks-list svg { width: 26px; height: 26px; margin-bottom: 18px;
  stroke: rgba(255,255,255,.85); fill: none; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.perks-list .h3 { display: block; margin-bottom: 10px; }
.perks-list p { margin: 0; color: rgba(255,255,255,.68); font-size: 15px; line-height: 23px; }
.perks-cta { text-align: center; margin-top: clamp(30px, 3.4vw, 46px); }

/* ==========================================================================
   RECENZII
   ========================================================================== */
.scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.scores li { background: var(--paper); padding: clamp(26px, 3vw, 40px) clamp(20px, 2.4vw, 30px); text-align: center; }
.section--panel .scores li { background: var(--panel); }
.score-n { display: block; font-family: var(--display); font-size: clamp(36px, 4.2vw, 56px); line-height: 1; }
.score-n small { font-size: .42em; color: var(--mute); letter-spacing: 1px; }
.score-src { display: block; margin: 14px 0 8px; }
.scores p { margin: 0; color: var(--mute); font-size: 15px; line-height: 23px; }
.scores a { text-decoration: underline; text-underline-offset: 4px; }
.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 34px); margin-top: clamp(34px, 4vw, 52px); }
.themes li { border-top: 1px solid var(--line); padding-top: 20px; }
.themes .h3 { display: block; margin-bottom: 10px; }
.themes p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 25px; }
.reviews-note { margin-top: clamp(28px, 3vw, 40px); color: var(--mute); font-size: 14px; line-height: 22px; text-align: center; }

/* ==========================================================================
   CONSIMȚĂMÂNT COOKIEURI
   ========================================================================== */
.cc-bar {
  position: fixed; z-index: 96; left: clamp(12px, 2vw, 26px); right: clamp(12px, 2vw, 26px);
  bottom: clamp(12px, 2vw, 26px); max-width: 560px;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
  padding: clamp(22px, 2.6vw, 30px);
  opacity: 0; visibility: hidden; transform: translateY(18px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.cc-bar.is-on { opacity: 1; visibility: visible; transform: none; }
.cc-bar h2 { font-size: clamp(18px, 1.7vw, 22px); margin-bottom: 10px; }
.cc-bar p { font-size: 15px; line-height: 23px; color: var(--ink-2); margin-bottom: 6px; }
.cc-bar a { text-decoration: underline; text-underline-offset: 3px; }
.cc-opts { display: grid; gap: 10px; margin: 18px 0; }
.cc-opts label { display: flex; align-items: flex-start; gap: 11px;
  font-family: var(--sans); font-size: 12px; letter-spacing: .4px; line-height: 1.5; }
.cc-opts input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--ink); }
.cc-opts .fixed { color: var(--mute); }
.cc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cc-actions .btn { height: 42px; padding: 0 20px; flex: 1 1 auto; }

/* locul unde stă harta până se acceptă */
.map-block { display: grid; place-items: center; text-align: center; height: 100%;
  background: var(--panel); padding: 30px; }
.map-block p { max-width: 34ch; color: var(--mute); font-size: 15px; line-height: 23px; }

/* ==========================================================================
   ANPC
   ========================================================================== */
.anpc { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; }
.anpc a { display: inline-block; line-height: 0; }
.anpc img { width: 230px; height: auto; max-width: 100%; background: #fff;
  opacity: .92; transition: opacity .35s var(--ease); }
.anpc a:hover img { opacity: 1; }

/* ==========================================================================
   PAGINI LEGALE
   ========================================================================== */
.legal { max-width: 760px; margin: 0 auto; }
.legal h2 { font-size: clamp(20px, 2vw, 27px); margin: clamp(34px, 3.6vw, 50px) 0 14px; }
.legal h3 { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 2.2px;
  text-transform: uppercase; margin: 28px 0 10px; }
.legal ul li { position: relative; padding-left: 20px; margin-bottom: 9px; }
.legal ul li::before { content: ''; position: absolute; left: 0; top: 12px; width: 6px; height: 1px; background: var(--ink); }
.legal table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 16px; }
.legal th, .legal td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal th { font-family: var(--sans); font-weight: 500; font-size: 10px; letter-spacing: 2.05px; text-transform: uppercase; }
.legal .todo { background: var(--panel); border-left: 2px solid var(--ink); padding: 18px 22px; margin: 20px 0; }
.legal .todo p { margin: 0; font-size: 15px; line-height: 24px; }

@media (max-width: 1100px) {
  .perks-list { grid-template-columns: repeat(2, 1fr); }
  .scores, .themes { grid-template-columns: 1fr; }
  .themes li { border-top: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .perks-list { grid-template-columns: 1fr; }
  .cc-actions .btn { flex: 1 1 100%; }
}

/* --- popup pe ecrane mici: titlul se rupea in afara cardului -------------- */
@media (max-width: 620px) {
  .promo-tx { padding: 22px 20px 24px; }
  .promo-tx h2 { font-size: 20px; line-height: 1.16; overflow-wrap: anywhere; }
  .promo-tx p { font-size: 15px; line-height: 23px; }
  .promo-ph { min-height: 140px; }
  .promo-form { flex-wrap: wrap; gap: 8px; }
  .promo-form input { flex: 1 1 100%; }
  .promo-form button { padding: 0 0 12px; }
  .cc-bar { padding: 20px 18px; }
  .cc-bar h2 { font-size: 18px; }
}

/* ==========================================================================
   HEADER COMPACT
   Înălțimea reală se măsoară din JS și se scrie în --hdr, deci bara de
   rezervare și hero-ul nu se mai pot suprapune cu el, oricât text ar avea.
   ========================================================================== */









/* bara de rezervare, mai joasă */










@media (max-width: 960px) {

}

/* ==========================================================================
   HEADER: numele și navigarea, mai depărtate și mai citibile
   Erau prea lipite una de alta și navigarea era prea ștearsă.
   ========================================================================== */

.mainnav {
  margin-top: 16px;
  gap: clamp(16px, 2.1vw, 34px);
}



/* pagina curentă rămâne subliniată permanent */
.mainnav a[aria-current="page"]::after { transform: scaleX(1); }



@media (max-width: 960px) {

}

/* ==========================================================================
   HEADER LA SCROLL: cele două benzi se strâng în una neagră
   semn stânga, meniu la mijloc, buton alb în dreapta (ca pe fairmont.com)
   ========================================================================== */
.head-nav-in {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: clamp(14px, 2vw, 34px);
  padding-inline: var(--pad);
}
.mark--bar { width: 0; height: 30px; margin: 0; overflow: hidden; color: #fff;
  opacity: 0; transition: width .4s var(--ease), opacity .35s var(--ease); }
.nav-cta {
  width: 0; padding: 0; overflow: hidden; opacity: 0; height: 42px;
  background: #fff; color: var(--ink); border-color: #fff;
  font-size: 10.5px; letter-spacing: 2px; white-space: nowrap;
  transition: width .4s var(--ease), opacity .35s var(--ease), padding .4s var(--ease);
}
.nav-cta:hover { background: transparent; color: #fff; border-color: #fff; }
.mainnav { padding-inline: 0; }

.site-head.is-solid .head-brand {
  height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden;
  opacity: 0; pointer-events: none;
  transition: height .4s var(--ease), padding .4s var(--ease), opacity .3s var(--ease);
}
.site-head.is-solid .head-nav {
  background: #0d0d0d;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.site-head.is-solid .mainnav { justify-content: center; }
.site-head.is-solid .mark--bar { width: 30px; opacity: 1; }
.site-head.is-solid .nav-cta { width: auto; padding: 0 26px; opacity: 1; }
.head-brand { transition: height .4s var(--ease), padding .4s var(--ease), opacity .3s var(--ease); }

@media (max-width: 960px) {
  .head-nav { display: none; }
  .site-head.is-solid .head-brand { height: auto; padding: 8px var(--pad); opacity: 1; pointer-events: auto; }
  .site-head.is-solid .head-nav { display: none; }
}

/* afișul evenimentului, pe cardul din pagina de evenimente */
.event--poster { grid-template-columns: 200px 130px 1fr auto; }
.ev-poster { display: block; overflow: hidden; align-self: stretch; background: var(--panel); }
.ev-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.event--poster:hover .ev-poster img { transform: scale(1.04); }
@media (max-width: 1100px) {
  .event--poster { grid-template-columns: 160px 110px 1fr; }
  .event--poster .ev-cta { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .event--poster { grid-template-columns: 1fr; }
  .ev-poster { max-height: 380px; }
  .ev-poster img { object-position: top; }
}

/* ==========================================================================
   HEADER LA SCROLL, varianta fără sacadare
   Nu mai animăm înălțimi. Tot header-ul alunecă în sus cu exact înălțimea
   benzii albe, iar semnul și butonul sunt poziționate absolut, deci apariția
   lor nu mișcă nimic în layout.
   ========================================================================== */
.site-head {
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.site-head.is-solid { transform: translateY(calc(-1 * var(--brandh, 0px))); }

/* anulăm animațiile de înălțime de dinainte */
.site-head.is-solid .head-brand {
  height: auto; padding-top: 12px; padding-bottom: 12px; overflow: visible;
  opacity: 1; pointer-events: auto; transition: none;
}
.head-brand { transition: none; }

.head-nav { position: relative; }
.mark--bar {
  position: absolute; left: var(--pad); top: 50%; translate: 0 -50%;
  width: 30px; height: 30px; margin: 0; overflow: visible;
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease);
}
.nav-cta {
  position: absolute; right: var(--pad); top: 50%; translate: 0 -50%;
  width: auto; height: 40px; padding: 0 24px; overflow: visible;
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease);
}
.site-head.is-solid .mark--bar,
.site-head.is-solid .nav-cta { opacity: 1; pointer-events: auto; }

.head-nav-in { display: block; padding-inline: 0; }
.mainnav {
  justify-content: flex-start;
  padding-inline: var(--pad);
  transition: padding .5s cubic-bezier(.4,0,.2,1);
}
.site-head.is-solid .mainnav {
  padding-left: calc(var(--pad) + 48px);
  padding-right: calc(var(--pad) + 210px);
}

/* textul din hero urcă deasupra panoului de tarife, nu mai intră peste el */
.hero-in { bottom: clamp(148px, 15vh, 200px); }
.scrollcue { display: none; }

@media (max-width: 960px) {
  .site-head.is-solid { transform: none; }
  .hero-in { bottom: 108px; }
}

/* banda de navigare: negru cu opacitate mică, fără blur.
   Blurul o făcea să pară gri lăptos peste pozele deschise. */
.head-nav {
  background: rgba(0,0,0,.5);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-head.is-solid .head-nav { background: #0d0d0d; }

/* peste o poză deschisă, 50% negru citea gri. Urcăm opacitatea ca banda să fie
   neagră, dar să lase poza să se ghicească pe dedesubt. */
.head-nav { background: rgba(0,0,0,.82); }
.site-head.is-solid .head-nav { background: #0b0b0b; }

/* numele hotelului duce acasă, la fel ca semnul */
.head-home { display: block; color: inherit; }
.head-home .brandline { transition: opacity .3s var(--ease); }
.head-home:hover .brandline { opacity: .62; }

/* ==========================================================================
   HEADER: cele două benzi lipite, banda de meniu mai transparentă
   ========================================================================== */
/* fâșia goală de 16px dintre banda albă și meniu venea dintr-un gap moștenit */
.site-head { display: flex; flex-direction: column; gap: 0; row-gap: 0; }
.head-brand { margin: 0; }
.head-nav { margin: 0; }

/* mai transparentă, ca în poza de la Fairmont. Ca să se citească peste cadre
   deschise, întunecarea vine din scrimul hero-ului, nu din bandă. */
.head-nav { background: rgba(0,0,0,.42); }
.site-head.is-solid .head-nav { background: #0b0b0b; }

/* scrim mai puternic sus, exact în zona în care stă header-ul */
.hero-video::after {
  background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.3) 14%,
              rgba(0,0,0,.06) 34%, rgba(0,0,0,.05) 56%, rgba(0,0,0,.66) 100%);
}
.pagehero::after {
  background: linear-gradient(180deg, rgba(0,0,0,.76) 0%, rgba(0,0,0,.34) 16%,
              rgba(0,0,0,.12) 40%, rgba(0,0,0,.14) 60%, rgba(0,0,0,.6) 100%);
}

/* ==========================================================================
   Paginile interioare: poza intră sub header
   Banda de meniu e translucidă, deci dacă deasupra ei stă fundalul alb al
   paginii se vede o fâșie deschisă. Poza trebuie să treacă pe dedesubt.
   ========================================================================== */
.pagehero { margin-top: 0; height: clamp(520px, 66vh, 700px); }
@media (max-width: 960px) { .pagehero { margin-top: 0; height: clamp(380px, 56vh, 520px); } }

/* ==========================================================================
   Bara neagră apare cu fade, după ce header-ul de sus a ieșit din ecran
   ========================================================================== */
.site-head {
  transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .3s var(--ease);
}
.site-head.is-solid { transform: translateY(-101%); opacity: 0; }
.site-head.is-solid.is-in {
  transform: translateY(calc(-1 * var(--brandh, 0px)));
  opacity: 1;
  transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .45s var(--ease);
}

/* un pixel de suprapunere, ca să nu rămână o linie din banda albă */
.site-head.is-solid.is-in {
  transform: translateY(calc(-1 * var(--brandh, 0px) - 1px));
}

/* ==========================================================================
   SELECTOR DE LOCAȚII (hotelul și apartamentele)
   ========================================================================== */
.props { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 44px); }
.prop { display: block; }
.prop .ph { aspect-ratio: 3 / 2; overflow: hidden; }
.prop .ph img { width: 100%; height: 100%; object-fit: cover; }
.prop-place { display: block; margin: 20px 0 8px; color: var(--mute); }
.prop-name {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(21px, 2.3vw, 30px); line-height: 1.15;
  text-transform: uppercase; letter-spacing: .8px; margin-bottom: 10px;
}
.prop-tx { display: block; color: var(--ink-2); font-size: 16px; line-height: 25px; margin-bottom: 14px; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) {
  .props { grid-template-columns: 1fr; gap: 40px; }
  .cards--3 { grid-template-columns: 1fr; }
}

/* pe paginile interioare bara de tarife stă tot în hero, deci titlul trebuie
   ridicat deasupra ei, la fel ca pe prima pagină */
.pagehero-in { padding-bottom: clamp(150px, 16vh, 205px); }
@media (max-width: 960px) {
  /* pe telefon bara e fixă jos, nu în hero, deci nu mai e nevoie de spațiu */
  .pagehero-in { padding-bottom: clamp(28px, 5vw, 46px); }
}

@media (max-width: 960px) {
  /* pe telefon bara iese din hero și se lipește de marginea de jos a ecranului */
  .bookbar {
    position: fixed; z-index: 58;
    left: 0; right: 0; top: auto; bottom: 0;
    background: #fff; color: var(--ink);
    border: 0; border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(0,0,0,.1);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .bookbar.is-hidden { transform: translateY(calc(100% + 2px)); }
  .bookbar-in { padding: 11px var(--pad); gap: 10px; }
  .bookbar .btn { height: 46px; background: var(--ink); color: #fff; border-color: var(--ink); }
  .bookbar .callbtn { width: 46px; height: 46px; border-color: var(--ink); color: var(--ink); }
}

/* ==========================================================================
   TELEFON: header doar cu semnul pe mijloc
   Numele și emailul se suprapuneau cu burgerul. Rămâne burgerul în stânga
   și semnul centrat. La scroll banda devine neagră, ca pe desktop.
   ========================================================================== */
@media (max-width: 960px) {
  .head-brand {
    grid-template-columns: 44px 1fr 44px;
    padding: 11px var(--pad);
    transition: background .4s var(--ease);
  }
  .head-util { display: none; }
  .brandline { display: none; }
  .head-side .mark { display: none; }
  .head-mid { grid-column: 2; }
  .head-mid .mark { display: block; width: 30px; height: 30px; margin: 0 auto; }
  .head-side { grid-column: 1; justify-content: flex-start; }
  .head-side--r { grid-column: 3; }
  .burger { display: block; }
  .head-nav { display: none; }

  /* la scroll: bandă neagră, semn și burger albe */
  .site-head.is-solid, .site-head.is-solid.is-in { transform: none; opacity: 1; }
  .site-head.is-solid .head-brand { background: #0b0b0b; }
  .site-head.is-solid .head-mid .mark { color: #fff; }
  .site-head.is-solid .burger span,
  .site-head.is-solid .burger::before,
  .site-head.is-solid .burger::after { background: #fff; }

  /* butonul de apel: mai jos și mai mic, ca să nu stea peste conținut */
  .callfab {
    bottom: 74px; right: 12px;
    height: 40px; padding: 0 14px; gap: 8px;
    font-size: 9px; letter-spacing: 1.5px;
  }
  .callfab svg { width: 13px; height: 13px; }
  .callfab .ring { display: none; }
}

@media (max-width: 960px) {
  /* .head-home .brandline avea specificitate mai mare, de aceea textul
     rămânea vizibil. Pe telefon în header stă doar semnul. */
  .head-home .brandline { display: none; }
  .head-home .mark { display: block; }
}

@media (max-width: 960px) {
  /* sus, header-ul e aproape transparent, se ghicește doar puțin alb.
     La scroll rămâne banda neagră. */
  .head-brand {
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(8px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
  }
  .site-head:not(.is-solid) .head-mid .mark { color: #fff; }
  .site-head:not(.is-solid) .burger span,
  .site-head:not(.is-solid) .burger::before,
  .site-head:not(.is-solid) .burger::after { background: #fff; }
  .site-head:not(.is-solid) .head-brand { text-shadow: 0 1px 14px rgba(0,0,0,.5); }
  .site-head.is-solid .head-brand {
    background: #0b0b0b;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

@media (max-width: 960px) {
  /* negrul vine dintr-un strat care se aprinde, nu din schimbarea bruscă a
     fundalului. Așa merge fade și peste backdrop-filter. */
  .head-brand { position: relative; transition: none; }
  .head-brand::before {
    content: ''; position: absolute; inset: 0; background: #0b0b0b;
    opacity: 0; pointer-events: none;
    transition: opacity .65s cubic-bezier(.33,0,.2,1);
  }
  .head-brand > * { position: relative; z-index: 1; }
  .site-head.is-solid .head-brand::before { opacity: 1; }
  /* fundalul de dedesubt rămâne cel translucid, stratul negru îl acoperă */
  .site-head.is-solid .head-brand {
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(8px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
  }
  .head-mid .mark { transition: color .65s var(--ease); }
  .site-head.is-solid .head-mid .mark { color: #fff; }
}

/* câmpul de locație din bara de tarife */
.bf--place select { min-width: 210px; }
@media (max-width: 1180px) { .bf--place select { min-width: 170px; } }

/* ==========================================================================
   TRANZIȚII ÎNTRE PAGINI
   Conținutul se stinge la click și se aprinde la încărcare, header-ul rămâne
   pe loc. Animația e pur CSS, deci dacă JavaScript-ul cade pagina tot apare.
   ========================================================================== */
/* fara transform: un transform pe main il face bloc de referinta pentru
   elementele cu position: fixed dinauntru (videoul din hero, bara de pe telefon),
   iar acelea sar din ecran cat tine animatia */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
main, .site-foot { animation: pageIn .55s cubic-bezier(.22,.61,.36,1) both; }
.site-foot { animation-delay: .05s; }
html.is-leaving main, html.is-leaving .site-foot {
  opacity: 0;
  transition: opacity .26s cubic-bezier(.4,0,1,1);
  animation: none;
}
html.is-leaving .callfab { opacity: 0; transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) {
  main, .site-foot { animation: none; }
  html.is-leaving main, html.is-leaving .site-foot { opacity: 1; }
}

/* ==========================================================================
   NAVIGARE CU SUBMENIU
   Panou alb care coboară din banda de meniu, ca pe fairmont.com.
   Se deschide la hover pe desktop și la apăsarea săgeții pe touch.
   ========================================================================== */
.mainnav { overflow: visible; }
.nav-i { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.nav-tog {
  display: inline-grid; place-items: center; width: 14px; height: 14px;
  color: currentColor; opacity: .7; transition: transform .35s var(--ease), opacity .3s;
}
.nav-tog svg { width: 10px; height: 7px; }
.nav-i:hover .nav-tog, .nav-i.is-open .nav-tog { opacity: 1; }
.nav-i.is-open .nav-tog, .nav-i:hover .nav-tog { transform: rotate(180deg); }

.nav-sub {
  position: absolute; top: 100%; left: -18px; z-index: 5;
  padding-top: 14px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.nav-i:hover .nav-sub, .nav-i:focus-within .nav-sub, .nav-i.is-open .nav-sub {
  opacity: 1; visibility: visible; transform: none;
}
.nav-sub-in {
  background: #fff; color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0,0,0,.16);
  padding: 10px;
  min-width: 320px;
}
.nav-sub-in a {
  display: block; padding: 13px 16px;
  text-transform: none; letter-spacing: normal; font-weight: 400;
  color: var(--ink);
  transition: background .3s var(--ease);
}
.nav-sub-in a::after { display: none; }
.nav-sub-in a:hover { background: var(--panel); }
.ns-name {
  display: block; font-family: var(--sans); font-weight: 500; font-size: 11.5px;
  letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 5px;
}
.ns-note {
  display: block; font-family: var(--serif); font-size: 15px; line-height: 21px;
  color: var(--mute); letter-spacing: .2px;
}

/* submeniul din meniul de pe telefon */
.menu-sub { margin: 0 0 14px; padding-left: 2px; }
.menu-sub li { border: 0; }
.menu-sub a {
  padding: 9px 0 9px 18px; font-family: var(--serif); font-size: 16px;
  letter-spacing: .3px; text-transform: none; color: rgba(255,255,255,.66);
  position: relative;
}
.menu-sub a::before {
  content: ''; position: absolute; left: 0; top: 19px; width: 8px; height: 1px;
  background: rgba(255,255,255,.4);
}
.menu-sub a:hover { color: #fff; }

@media (max-width: 960px) { .nav-tog, .nav-sub { display: none; } }

/* ==========================================================================
   TEMA RUINS
   Paletă și tipografie luate de pe ruinshotels.com: crem cald, teracotă,
   serif de afiș pentru titluri, Montserrat subțire pentru text.
   Fontul lor de titluri, „Miracle", e licențiat. Marcellus e cel mai apropiat
   dintre cele libere, si e chiar incarcat pe pagina lor ca rezervă.
   ========================================================================== */
@font-face {
  font-family: 'Marcellus';
  src: url('../fonts/marcellus-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  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: 'Marcellus';
  src: url('../fonts/marcellus-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  font-weight: 300 500; font-style: normal; font-display: swap;
  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: 'Montserrat';
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  font-weight: 300 500; font-style: normal; font-display: swap;
}

:root {
  --paper:   #FCF8EE;   /* crem, masurat din capturile lor */
  --panel:   #F5EEE0;
  --panel-2: #EFE6D4;
  --line:    #E3D8C6;
  --ink:     #23201D;
  --ink-2:   #4A423B;
  --mute:    #8A7C6E;
  --terra:   #A3623B;   /* teracota, masurata din bara lor de navigare */
  --terra-d: #8C5230;
  --bar:     #A3623B;
  --bar-2:   #23201D;
  --bar-line: rgba(255,255,255,.24);
  --brass:   #E9DCC6;

  --display: 'Marcellus', 'Playfair Display', Georgia, serif;
  --sans:    'Montserrat', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --serif:   'Montserrat', 'EB Garamond', Georgia, serif;
}

/* --- tipografie ---------------------------------------------------------- */
body { font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 26px;
  letter-spacing: 0; color: var(--ink); background: var(--paper); }
.h1, h1 { font-family: var(--display); font-weight: 400; letter-spacing: clamp(2px, .28vw, 5px); }
.h1 em, h1 em { font-style: normal; }
.h2, h2 { font-family: var(--display); font-weight: 400; color: var(--terra);
  letter-spacing: clamp(1.6px, .22vw, 3.4px); }
.h3 { font-family: var(--display); font-weight: 400; font-size: 14px; letter-spacing: 2px; color: var(--ink); }
.eyebrow { font-family: var(--sans); font-weight: 400; letter-spacing: 2.6px; }
.label, .lnk, .btn, nav a, .kicker { font-family: var(--sans); font-weight: 400; letter-spacing: 1.4px; }
.lead { font-size: 18px; line-height: 30px; font-weight: 300; }
.small { font-size: 14px; line-height: 22px; }
p { margin: 0 0 1.1em; }

/* butoane teracotă, ca al lor de căutare */
.btn { background: var(--terra); color: #fff; border-color: var(--terra); letter-spacing: 1.6px; }
.btn:hover { background: var(--terra-d); border-color: var(--terra-d); color: #fff; }
.btn--ghost { background: transparent; color: var(--terra); border-color: var(--terra); }
.btn--ghost:hover { background: var(--terra); color: #fff; }
.btn--light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--light:hover { background: #fff; color: var(--terra); border-color: #fff; }

/* header: bandă crem sus, bandă teracotă pentru meniu */
.head-brand { background: var(--paper); }
.head-nav { background: var(--terra); }
.site-head.is-solid .head-nav { background: var(--terra); }
.mainnav a { color: #fff; font-family: var(--display); font-weight: 400;
  font-size: 13.5px; letter-spacing: 1.2px; text-transform: uppercase; }
.mainnav a::after { background: #fff; }
.brandline { font-family: var(--display); color: var(--terra); }
.mark { color: var(--terra); }
.head-top, .head-util { color: var(--mute); }
.nav-cta { background: #fff; color: var(--terra); border-color: #fff; }
.nav-cta:hover { background: transparent; color: #fff; border-color: #fff; }
.mark--bar { color: #fff; }
.burger span, .burger::before, .burger::after { background: var(--terra); }

/* secțiuni și panouri */
main > section:not(.hero) { background: var(--paper); }
main > section.section--panel { background: var(--panel); }
.section--panel { background: var(--panel); }
.intro-panel { background: var(--panel); }
.edito .tx { background: var(--panel); }
.strip > div, .dist li { background: var(--panel); }
.section--panel .strip > div, .section--panel .dist li { background: var(--paper); }
.scores li { background: var(--paper); }
.section--panel .scores li { background: var(--panel); }
.quiz, main > section.quiz { background: var(--panel); }
.quiz-opts button { background: var(--paper); }
.quiz-opts button.is-sel { background: var(--terra); border-color: var(--terra); color: #fff; }
.iconbar, main > section.iconbar { background: var(--bar-2); }
.cover, main > section.cover { background: #1a1512; }
.marquee { background: var(--bar-2); }
.marquee i { color: var(--terra); }
.site-foot { background: var(--bar-2); }
.foot-cols h4, .foot-news .kicker { color: var(--terra); }
.foot-mark .mark, .foot-mark .stars { color: var(--terra); }
.iconbar::before { background: linear-gradient(90deg, transparent, var(--terra), transparent); opacity: .8; }
.perks-list svg { stroke: var(--terra); }

/* accente */
:focus-visible { outline-color: var(--terra); }
.lnk { color: var(--terra); }
.ev-tag--soon { background: var(--terra); border-color: var(--terra); }
.event:hover { border-color: var(--terra); }
.legal .todo { border-left-color: var(--terra); }
.progress { background: var(--terra); }
.strips > i { background: var(--strip-bg); }
.nav-sub-in { background: var(--paper); border-color: var(--line); }
.nav-sub-in a:hover { background: var(--panel); }
.ns-name { font-family: var(--display); font-weight: 400; letter-spacing: 1.4px; }
.ns-note { font-family: var(--sans); font-weight: 300; }
.bookbar { background: rgba(252,248,238,.96); color: var(--ink); border-color: var(--line); }
.bf > .label, .bf label { color: var(--mute); }
.bf input, .bf select { color: var(--ink); }
.bf-ico { color: var(--terra); }
.bookbar .btn { background: var(--terra); color: #fff; border-color: var(--terra); }
.bookbar .callbtn { border-color: var(--terra); color: var(--terra); }
/* ==========================================================================
   TEMA: structura si tipografia de la Ruins, culoarea de brand a Topaz
   Albastrul e luat direct din logo: #006980 inchis, #4D91A3 mediu.
   Fundalul ramane cremul lor, care merge foarte bine cu albastru de mare.
   ========================================================================== */
:root {
  --terra:   #006980;   /* albastrul din logo, in locul teracotei lor */
  --terra-d: #004F60;
  --bar:     #006980;
  --topaz-l: #4D91A3;
}


/* ==========================================================================
   STRUCTURA RUINS
   Header pe un singur rand, logo la stanga, navigare langa el, buton de
   rezervare in dreapta. Trei stari: transparent peste hero, crem la scroll,
   teracota pe paginile interioare.
   Bara de tarife e un card alb rotunjit, fixat jos in centrul ecranului.
   ========================================================================== */
:root { --hdr: 110px; }

.site-head { position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: block; background: transparent; border: 0; box-shadow: none;
  transition: background .5s cubic-bezier(.4,0,.2,1); }
.head-brand, .head-nav, .head-top, .head-util, .head-nav-in,
.head-side, .head-mid, .head-div, .mark--bar, .nav-cta, .bookpeek { display: none !important; }

.head-in {
  display: flex; align-items: center; gap: clamp(18px, 2.4vw, 44px);
  padding: 14px var(--pad);
  max-width: 1720px; margin: 0 auto;
}

/* --- logo --------------------------------------------------------------- */
.brand { display: block; flex: none; color: #fff; text-align: center; }
.brand-mark { display: block; width: 29px; height: 29px; margin: 0 auto 5px; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-name {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(21px, 2vw, 29px); line-height: .95; letter-spacing: 2px;
  text-transform: uppercase;
}
.brand-sub {
  display: block; font-family: var(--sans); font-weight: 400;
  font-size: 8px; letter-spacing: 3.2px; text-transform: uppercase;
  margin-top: 4px; opacity: .85;
}
.brand-stars {
  display: block; width: 43px; margin: 6px auto 0;
  opacity: .85;
}
.brand-stars svg { display: block; width: 100%; height: auto; }

/* --- navigare ------------------------------------------------------------ */
.mainnav {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 1.9vw, 32px); padding: 0; overflow: visible;
}
.mainnav a {
  font-family: var(--display); font-weight: 400; font-size: clamp(13px, 1.12vw, 16px);
  letter-spacing: .5px; text-transform: uppercase; color: #fff;
  padding-bottom: 2px; white-space: nowrap;
}
.mainnav a::after { background: currentColor; bottom: -1px; }
.nav-i { gap: 5px; }
.nav-tog { color: currentColor; }

/* --- buton de rezervare -------------------------------------------------- */
.head-book {
  flex: none; height: 38px; padding: 0 24px;
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.85);
  font-family: var(--sans); font-weight: 500; font-size: 10.5px; letter-spacing: 1.8px;
  text-transform: uppercase; display: inline-flex; align-items: center;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.head-book:hover { background: #fff; color: var(--terra); border-color: #fff; }
.head-lang { flex: none; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 10.5px; letter-spacing: 1.6px; color: rgba(255,255,255,.72); }
.head-lang a { color: inherit; }
.head-lang a[aria-current="true"], .head-lang a:hover { color: #fff; }
.head-lang i { font-style: normal; opacity: .5; }

/* --- starea 2: la scroll, banda crem ------------------------------------- */
.site-head.is-solid { background: var(--paper); box-shadow: 0 4px 30px rgba(35,32,29,.07); }
.site-head.is-solid .brand,
.site-head.is-solid .mainnav a { color: var(--terra); }
.site-head.is-solid .head-book { background: var(--terra); color: #fff; border-color: var(--terra); }
.site-head.is-solid .head-book:hover { background: var(--terra-d); border-color: var(--terra-d); }
.site-head.is-solid .head-lang { color: var(--mute); }
.site-head.is-solid .head-lang a[aria-current="true"], .site-head.is-solid .head-lang a:hover { color: var(--terra); }
.site-head.is-solid .burger span,
.site-head.is-solid .burger::before,
.site-head.is-solid .burger::after { background: var(--terra); }

/* --- starea 3: pagini interioare, banda teracota ------------------------- */
body.no-hero .site-head { background: var(--terra); }
body.no-hero .site-head.is-solid { background: var(--terra); box-shadow: 0 4px 30px rgba(35,32,29,.12); }
body.no-hero .site-head .brand,
body.no-hero .site-head .mainnav a { color: #fff; }
body.no-hero .site-head .head-book { background: transparent; color: #fff; border-color: rgba(255,255,255,.85); }
body.no-hero .site-head .head-book:hover { background: #fff; color: var(--terra); }
body.no-hero .site-head .head-lang { color: rgba(255,255,255,.72); }
body.no-hero .site-head .burger span,
body.no-hero .site-head .burger::before,
body.no-hero .site-head .burger::after { background: #fff; }

/* --- submeniu: panou crem, ca al lor ------------------------------------- */
.nav-sub { left: -20px; padding-top: 12px; }
.nav-sub-in {
  background: var(--paper); border: 0; box-shadow: 0 18px 44px rgba(35,32,29,.16);
  padding: 8px 0; min-width: 260px;
}
.nav-sub-in a { padding: 14px 26px; }
.ns-name { font-family: var(--display); font-weight: 400; font-size: 13.5px;
  letter-spacing: .8px; color: var(--ink); margin-bottom: 3px; }
.ns-note { font-size: 12.5px; line-height: 18px; color: var(--mute); }
.nav-sub-in a:hover { background: var(--panel-2); }

/* --- bara de tarife: card alb rotunjit, fixat jos ------------------------ */
.bookbar {
  position: fixed; z-index: 59;
  left: 50%; right: auto; top: auto; bottom: clamp(18px, 2.2vw, 30px);
  transform: translateX(-50%);
  width: min(1010px, calc(100% - 2 * var(--pad)));
  background: #fff; color: var(--ink);
  border: 1px solid rgba(35,32,29,.08);
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(35,32,29,.16);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: transform .5s var(--ease), opacity .4s var(--ease);
}
.bookbar.is-hidden { transform: translateX(-50%) translateY(calc(100% + 40px)); opacity: 0; }
.bookbar-in { display: flex; align-items: stretch; gap: 0; padding: 9px; }
.bf {
  flex: 1 1 0; min-width: 0;
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  column-gap: 12px; padding: 10px 18px;
  border-right: 1px solid rgba(35,32,29,.12);
}
.bf:last-of-type { border-right: 0; }
.bf--promo { display: grid; }
/* Iconitele erau gri si subtiri langa un buton albastru plin, deci se pierdeau.
   Trec pe culoarea marcii si pe un traseu ceva mai gros. */
.bf-ico { grid-row: 1 / span 2; width: 21px; height: 21px; color: var(--terra);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bf > .label, .bf label {
  grid-column: 2; font-family: var(--sans); font-weight: 400; font-size: 12.5px;
  letter-spacing: 0; text-transform: none; color: var(--mute); margin-bottom: 1px;
}
.bf input, .bf select {
  grid-column: 2; font-family: var(--sans); font-weight: 400; font-size: 15px;
  letter-spacing: 0; color: var(--ink); background: none; border: 0; padding: 0; height: auto;
}
.bf input::placeholder { color: var(--ink); }
.bf input[type="date"] { min-width: 104px; }
.bf-dates { grid-column: 2; display: flex; align-items: center; gap: 6px; }
.bf select { min-width: 0; background-position: right 0 center; padding-right: 16px; }
.bookbar .btn {
  flex: none; margin: 0; height: auto; align-self: stretch;
  padding: 0 clamp(26px, 3vw, 46px);
  background: var(--terra); color: #fff; border: 0; border-radius: 8px;
  font-family: var(--sans); font-weight: 400; font-size: clamp(16px, 1.5vw, 21px);
  letter-spacing: 0; text-transform: none;
}
.bookbar .btn:hover { background: var(--terra-d); color: #fff; }
.bookbar .callbtn, .bookbar .toggle { display: none; }

/* hero-ul si paginile interioare nu mai au bara in interior */
.hero { margin-top: 0; height: 100svh; }
.pagehero { margin-top: 0; }
.hero-in { bottom: clamp(150px, 17vh, 220px); }
.pagehero-in { padding-bottom: clamp(120px, 13vh, 170px); }
.site-foot { padding-bottom: clamp(120px, 12vw, 150px); }
.callfab { bottom: clamp(120px, 13vw, 150px); }

@media (max-width: 1180px) {
  .mainnav { gap: 14px; }
  .mainnav a { font-size: 12px; }
  .head-lang { display: none; }
}

/* ==========================================================================
   TELEFON, dupa referinta lor
   Bara mereu crem, logo centrat in teracota, burger gros in dreapta.
   Meniul e un panou crem care intra din dreapta, cu randuri mari separate
   de filete si un buton rotunjit de rezervare jos.
   Bara de tarife dispare, ramane doar butonul pastila.
   ========================================================================== */
@media (max-width: 960px) {
  :root { --hdr: 76px; }

  .site-head, .site-head.is-solid,
  body.no-hero .site-head, body.no-hero .site-head.is-solid {
    background: var(--paper); box-shadow: 0 2px 18px rgba(35,32,29,.08);
  }
  .head-in { padding: 9px var(--pad); gap: 10px; justify-content: space-between; }
  .mainnav, .head-book, .head-lang { display: none; }
  .brand, .site-head.is-solid .brand,
  body.no-hero .site-head .brand { color: var(--terra); flex: 1 1 auto; }
  .brand-name { font-size: 23px; letter-spacing: 3px; }
  .brand-sub { font-size: 7.5px; letter-spacing: 3px; }
  .brand-stars { width: 35px; margin-top: 5px; }
  .brand-mark { width: 23px; height: 23px; margin-bottom: 4px; }

  /* burger gros, in dreapta */
  .burger { display: block; order: 2; width: 38px; height: 38px; }
  .burger span, .burger::before, .burger::after,
  .site-head.is-solid .burger span, .site-head.is-solid .burger::before, .site-head.is-solid .burger::after,
  body.no-hero .site-head .burger span, body.no-hero .site-head .burger::before,
  body.no-hero .site-head .burger::after { background: var(--terra); height: 3px; left: 6px; right: 6px; }
  .burger::before { top: 11px; }
  .burger span    { top: 18px; }
  .burger::after  { top: 25px; }
  body.menu-open .burger span, body.menu-open .burger::before,
  body.menu-open .burger::after { background: var(--terra); }

  /* meniul, panou crem care intra din dreapta */
  .menu {
    inset: 0 0 0 auto; width: min(86%, 430px);
    background: var(--panel-2); color: var(--terra);
    padding: 22px 26px 30px; transform: translateX(100%); opacity: 1;
    transition: transform .55s cubic-bezier(.4,0,.2,1);
    display: flex; flex-direction: column;
  }
  .menu.is-open { transform: none; }
  .menu-logo { text-align: center; margin: 34px 0 30px; color: var(--terra); }
  .menu-logo .brand-mark { width: 46px; height: 46px; margin-bottom: 10px; }
  .menu-logo .brand-name { font-size: 42px; letter-spacing: 4px; }
  .menu-logo .brand-sub { font-size: 10px; letter-spacing: 5px; margin-top: 8px; }
  .menu-logo .brand-stars { width: 63px; margin-top: 9px; }
  .menu ul { display: block; }
  .menu li { border-bottom: 1px solid rgba(0,105,128,.22); }
  .menu a {
    font-family: var(--sans); font-weight: 500; font-size: 21px;
    letter-spacing: .4px; text-transform: uppercase; color: var(--terra);
    padding: 19px 0;
  }
  .menu-sub { margin: 0 0 12px; padding-left: 0; }
  .menu-sub li { border: 0; }
  .menu-sub a { font-size: 14px; font-weight: 400; text-transform: uppercase;
    color: rgba(0,105,128,.72); padding: 8px 0 8px 16px; letter-spacing: .6px; }
  .menu-sub a::before { background: rgba(0,105,128,.5); top: 18px; }
  .menu-foot { margin-top: auto; color: rgba(0,105,128,.7); }
  .menu-foot a { display: inline; font-family: var(--sans); font-size: 14px;
    text-transform: none; color: inherit; padding: 0; }
  .menu-close {
    position: absolute; top: 18px; right: 20px; width: 42px; height: 42px;
    display: grid; place-items: center; color: var(--terra); z-index: 2;
  }
  .menu-close svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
  .menu-book {
    align-self: flex-end; margin-top: 26px;
    display: inline-flex; align-items: center; gap: 12px;
    background: var(--terra); color: #fff; border-radius: 999px;
    padding: 17px 30px; font-family: var(--sans); font-weight: 500;
    font-size: 16px; letter-spacing: 1px; text-transform: uppercase;
  }
  .menu-book svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }

  /* bara de tarife dispare, ramane pastila de rezervare */
  .bookbar { display: none; }
  .callfab {
    display: inline-flex; bottom: 22px; right: 16px;
    height: 56px; padding: 0 28px; gap: 12px;
    background: var(--terra); color: #fff; border: 0; border-radius: 999px;
    box-shadow: 0 12px 30px rgba(35,32,29,.24);
    font-family: var(--sans); font-weight: 500; font-size: 15px; letter-spacing: 1px;
    opacity: 1; transform: none; pointer-events: auto;
  }
  .callfab:hover { background: var(--terra-d); color: #fff; }
  .callfab svg { width: 17px; height: 17px; }
  .callfab .ring { display: none; }

  .hero-in { bottom: 110px; }
  .pagehero-in { padding-bottom: 34px; }
  .site-foot { padding-bottom: 110px; }
  .hero { height: calc(100svh - var(--hdr)); margin-top: var(--hdr); }
  .pagehero { margin-top: var(--hdr); }
}

/* ==========================================================================
   CORECTII
   ========================================================================== */
/* fundal alb cald, nu crem galbui: cremul se batea cu albastrul */
:root { --paper: #FAF8F5; --panel: #F2EEE8; --panel-2: #E9E3DA; --line: #E0D9CF; }

/* butonul negru fix nu mai are rost pe desktop, e si in header */
.callfab { display: none; }

/* submeniurile din meniul de telefon apar doar la apasare */
@media (max-width: 960px) {
  .menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .menu-row a { flex: 1 1 auto; }
  .menu-tog {
    flex: none; width: 40px; height: 40px; display: grid; place-items: center;
    color: var(--terra); transition: transform .35s var(--ease);
  }
  .menu-tog svg { width: 14px; height: 9px; }
  .menu li.is-open > .menu-row .menu-tog { transform: rotate(180deg); }
  .menu-sub {
    display: grid; grid-template-rows: 0fr; overflow: hidden; margin: 0;
    transition: grid-template-rows .45s cubic-bezier(.4,0,.2,1);
  }
  .menu-sub > li { min-height: 0; }
  .menu li.is-open > .menu-sub { grid-template-rows: 1fr; }
  .menu-sub-in { min-height: 0; }
  .menu-close { z-index: 5; }
  .callfab { display: inline-flex; }
}

/* ==========================================================================
   RITMUL SECTIUNILOR, ca la Ruins
   Titlu serif mare aliniat la stanga, subtitlu bold in sans, paragraf subtire,
   coloana ingusta, aer mult, imagini mari fara chenare.
   ========================================================================== */
.section { padding-block: clamp(64px, 8.5vw, 128px); }
.wrap { max-width: 1280px; }

.h2, h2 {
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.12;
  letter-spacing: clamp(1.4px, .2vw, 3px);
  color: var(--ink);
  margin-bottom: 22px;
}
.section .center h2, .cover-head h2 { text-align: center; }

/* subtitlul bold, randul care la ei vine imediat sub titlu */
.lead {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(17px, 1.5vw, 22px); line-height: 1.45;
  color: var(--ink); letter-spacing: 0;
  max-width: 30ch;
}
.center .lead { max-width: 46ch; margin-inline: auto; }
body { font-size: 16px; line-height: 26px; }
p { max-width: 62ch; }
.center p { margin-inline: auto; }

/* introducerea de pe prima pagina: aliniata la stanga, ca la ei */
.intro-panel { background: transparent; padding: 0; text-align: left; }
.intro-panel h2 { text-align: left; }
.intro-panel .col { margin-inline: 0; max-width: 54ch; }

/* blocurile editoriale: fara panou colorat, doar aer si o linie fina */
.edito { border-top: 1px solid var(--line); }
.edito .tx { background: transparent; padding: clamp(40px, 5vw, 84px) clamp(24px, 4.4vw, 76px); }
.edito .tx h2 { color: var(--ink); }
.edito + .edito { border-top: 1px solid var(--line); }

/* carduri fara chenar, cu titlu serif */
.card h3, .post h3 { font-family: var(--display); font-weight: 400;
  font-size: clamp(17px, 1.6vw, 22px); letter-spacing: 1px; color: var(--ink);
  text-transform: uppercase; margin: 20px 0 10px; }
.card p, .post p { color: var(--ink-2); font-size: 15px; line-height: 24px; }

/* cifrele din grila de distante, in albastru */
.dist-n { color: var(--terra); font-size: clamp(38px, 4.4vw, 62px); }
.dist li { background: transparent; }
.dist { background: var(--line); }
.section--panel .dist li { background: var(--panel); }

/* butoane rotunjite, ca ale lor */
.btn { border-radius: 6px; height: 48px; padding: 0 32px; font-size: 12px; }
.head-book { border-radius: 4px; }

/* linkul subliniat, in albastru */
.lnk { color: var(--terra); font-weight: 500; }

/* filete mai discrete peste tot */
.facts li, .themes li, .legal table th, .legal table td { border-color: var(--line); }

/* acordeonul din meniul de telefon: grid-template-rows 0fr colapsa doar primul
   rand cand sunt mai multi copii, deci mergem pe max-height */
@media (max-width: 960px) {
  .menu-sub {
    display: block; max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .5s cubic-bezier(.4,0,.2,1), opacity .35s var(--ease), margin .4s;
    margin: 0;
  }
  .menu li.is-open > .menu-sub { max-height: 520px; opacity: 1; margin: 4px 0 14px; }
}

/* ==========================================================================
   BLOC EDITORIAL ASIMETRIC, ca la Ruins
   Text ingust in stanga, poza mare in dreapta, a doua poza decalata dedesubt
   care urca peste prima. Multa liniste in jur.
   ========================================================================== */
.split {
  display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(30px, 5vw, 90px);
  align-items: start;
}
.split-tx { padding-top: clamp(10px, 3vw, 46px); }
.split-tx h2 { color: var(--ink); }
.split-tx .lead { margin-bottom: 20px; }
.split-tx p { max-width: 46ch; }
.split-tx .lnk { margin-top: 12px; }
.split-ph { position: relative; }
.split-ph .big { aspect-ratio: 4 / 3; overflow: hidden; }
.split-ph .big img { width: 100%; height: 100%; object-fit: cover; }
.split-ph .small {
  width: 46%; aspect-ratio: 3 / 4; overflow: hidden;
  position: absolute; left: clamp(-120px, -9vw, -40px); bottom: clamp(-70px, -6vw, -30px);
  box-shadow: 0 24px 60px rgba(35,32,29,.18);
}
.split-ph .small img { width: 100%; height: 100%; object-fit: cover; }
.split + .split { margin-top: clamp(90px, 11vw, 190px); }
.split--flip .split-tx { order: 2; }
.split--flip .split-ph .small { left: auto; right: clamp(-120px, -9vw, -40px); }

@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split--flip .split-tx { order: 0; }
  .split-ph .small { position: static; width: 62%; margin: -40px 0 0 auto; aspect-ratio: 3 / 4; }
  .split--flip .split-ph .small { margin: -40px auto 0 0; }
  .split + .split { margin-top: 70px; }
}

/* poza mica statea peste text: o tinem in coloana de imagine, sub jumatatea ei */
.split-ph .small {
  width: 42%; left: -8%; right: auto; bottom: -12%;
  aspect-ratio: 3 / 4;
}
.split--flip .split-ph .small { left: auto; right: -8%; }
.split-tx { padding-right: clamp(0px, 2vw, 30px); }
.split + .split { margin-top: clamp(120px, 14vw, 230px); }
@media (max-width: 960px) {
  .split-ph .small { position: static; width: 60%; margin: -46px 0 0 auto; }
  .split--flip .split-ph .small { margin: -46px auto 0 0; }
}

/* ==========================================================================
   PALETA FINALA, dupa masuratoare pe ruinshotels.com
   Fundalurile lor sunt TOATE deschise: #FFFEFC, #FCF8EE, #F5F5F5, #EEEEEE, alb.
   Nu au nicio sectiune intunecata. Eu aveam patru negruri diferite, de aceea
   arata ca prea multe culori. Ramane: doua deschise, negru doar pentru text,
   gri pentru text secundar, albastru pentru accent.
   ========================================================================== */
:root {
  --paper:   #FFFEFC;
  --panel:   #F5F2EC;
  --panel-2: #EEEEEE;
  --line:    #E4E0D8;
  --ink:     #1A1A1A;
  --ink-2:   #463939;
  --mute:    #999999;
  --terra:   #006980;
  --terra-d: #004F60;
  --bar:     #006980;
  --bar-2:   #F5F2EC;
  --bar-line: rgba(26,26,26,.12);
  --brass:   #006980;
}

/* --- tot ce era intunecat devine deschis -------------------------------- */
.site-foot { background: var(--panel); color: var(--ink); }
.foot-hr { background: var(--line); }
.foot-news p { color: var(--mute); }
.foot-news .kicker, .foot-cols h4 { color: var(--terra); }
.foot-mark .mark, .foot-mark .stars { color: var(--terra); }
.foot-mark .wm { color: var(--ink); }
.foot-mark .place { color: var(--mute); }
.foot-cols a, .foot-cols span, .foot-cols address { color: var(--ink-2); }
.foot-cols a:hover { color: var(--terra); }
.foot-bot { color: var(--mute); }
.foot-bot a:hover, .foot-bot .credit a { color: var(--terra); }
.totop { color: var(--mute); }
.totop:hover { color: var(--terra); }
.news-form { border-bottom-color: var(--line); }
.news-form input { color: var(--ink); }
.news-form input::placeholder { color: var(--mute); }
.news-form button { color: var(--terra); }
.news-note { color: var(--mute); }
.foot-social a { border-color: var(--line); color: var(--ink-2); }
.foot-social a:hover { background: var(--terra); color: #fff; border-color: var(--terra); }

.iconbar, main > section.iconbar { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.iconbar::after { content: none; }
.iconbar::before { content: none; }
.iconbar-list li { color: var(--ink-2); }
.iconbar-list li:hover { color: var(--terra); }
.iconbar-list svg { color: var(--terra); }
.iconbar-rail { background: var(--line); }
.iconbar-rail span { background: var(--terra); }

.marquee { background: var(--panel); color: var(--ink); border-color: var(--line); }
.marquee span { color: var(--ink); }
.marquee i { color: var(--terra); }

.cover, main > section.cover { background: var(--panel); color: var(--ink); }
.cover::after { content: none; }
.cover-bg { opacity: .13; }
.cover-head h2 { color: var(--ink); }
.cover-head p { color: var(--ink-2); }
.cover-nav { color: var(--ink-2); }
.cc { border-color: var(--line); color: var(--ink); background: rgba(255,255,255,.55); }
.cover-card.is-on .cc { background: #fff; border-color: #fff; box-shadow: 0 20px 50px rgba(26,26,26,.1); }

.perks, .quiz, main > section.quiz { background: var(--panel); color: var(--ink); }
.perks-head h2 { color: var(--ink); }
.perks-head p, .perks-list p { color: var(--ink-2); }
.perks-list { background: var(--line); }
.perks-list li { background: var(--paper); }
.perks-list svg { stroke: var(--terra); }

.promo { background: rgba(26,26,26,.5); }
.cc-bar { background: var(--paper); border-color: var(--line); }

/* --- meniul de telefon: butonul de rezervare era mare cat toata latimea -- */
@media (max-width: 960px) {
  .menu { background: var(--panel); }
  .menu li { border-bottom-color: rgba(26,26,26,.1); }
  .menu a { color: var(--ink); }
  .menu li.is-open > .menu-row a, .menu-row a:hover { color: var(--terra); }
  .menu-sub a { color: var(--mute); }
  .menu-tog { color: var(--terra); }
  .menu-foot { color: var(--mute); }
  .menu-logo, .menu-close { color: var(--terra); }

  /* regula generala .menu a il facea bloc pe toata latimea */
  .menu-book {
    display: inline-flex; width: auto; align-self: flex-end;
    padding: 15px 26px; font-size: 14px; color: #fff;
    border-radius: 999px; background: var(--terra);
  }
  .menu-book:hover { color: #fff; background: var(--terra-d); }
}

/* --- accente uniforme ---------------------------------------------------- */
.h2, h2 { color: var(--ink); }
.h3 { color: var(--ink); }
.dist { background: var(--line); }
.dist li { background: var(--paper); }
.section--panel .dist li { background: var(--panel); }
.strip { background: var(--line); }
.strip > div { background: var(--paper); }
.section--panel .strip > div { background: var(--panel); }
.scores { background: var(--line); }
.event { background: var(--paper); border-color: var(--line); }
.ev-tag--soon { background: transparent; color: var(--terra);
  border-color: color-mix(in srgb, var(--terra) 42%, transparent); }
.ev-day { color: var(--terra); }
.quiz-bar span { background: var(--terra); }
.quiz-opts button { background: var(--paper); border-color: var(--line); }
.hero-video::after {
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.16) 22%,
              rgba(0,0,0,.05) 50%, rgba(0,0,0,.5) 100%);
}
.pagehero::after {
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.2) 24%,
              rgba(0,0,0,.12) 55%, rgba(0,0,0,.46) 100%);
}

@media (max-width: 960px) {
  /* .menu a bate .menu-book, de aceea butonul iesea cat toata latimea */
  .menu a.menu-book {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: auto; align-self: flex-end; margin-top: 22px;
    padding: 14px 24px; border-radius: 999px;
    background: var(--terra); color: #fff;
    font-family: var(--sans); font-weight: 500; font-size: 13px;
    letter-spacing: 1px; text-transform: uppercase; line-height: 1;
  }
  .menu a.menu-book svg { width: 16px; height: 16px; flex: none; }
  .menu a.menu-book:hover { background: var(--terra-d); color: #fff; }
  /* semnul si numele din meniu raman albastre */
  .menu a.menu-logo { color: var(--terra); display: block; padding: 0; }
  .menu a.menu-logo .brand-name { color: var(--terra); }
  .menu a.menu-logo .brand-sub { color: var(--terra); opacity: .7; }
}

/* ==========================================================================
   ULTIMELE DOUA CULORI STRAINE
   1. --panel era #F5F2EC, adica un crem galbui care se bate cu albastrul.
      Devine gri neutru cald, ca la ei (#F5F5F5 / #EEEEEE).
   2. Negrul din spatele videoului si al pozelor de hero se vedea la incarcare.
      Devine tot deschis, deci nu mai apare niciun cadru negru.
   ========================================================================== */
:root {
  --panel:   #F4F4F2;
  --panel-2: #EDEDEA;
  --line:    #E6E5E1;
}
.hero-video, .hero, .pagehero, .hero-slides { background: var(--panel); }
.cover-bg { background: var(--panel); }
.lightbox { background: rgba(26,26,26,.92); }
.promo { background: rgba(26,26,26,.42); }
.map-block { background: var(--panel); }

/* ==========================================================================
   UN SINGUR FUNDAL
   Griul de la panouri era ultima culoare in plus. Il scoatem: toata pagina
   sta pe acelasi alb cald, iar sectiunile se despart prin filete fine si aer,
   nu prin blocuri colorate. Alb curat ramane doar pe carduri, ca sa iasa.
   ========================================================================== */
:root { --panel: #FFFEFC; --panel-2: #FAFAF8; }

.section--panel, main > section.section--panel,
.perks, .quiz, main > section.quiz,
.cover, main > section.cover,
.marquee, .site-foot, .menu,
.intro-panel, .edito .tx, .quiz-opts button,
.dist li, .strip > div, .scores li, .event,
.section--panel .dist li, .section--panel .strip > div,
.section--panel .scores li, .perks-list li,
.hero, .hero-video, .hero-slides, .pagehero, .cover-bg, .map-block { background: var(--paper); }

/* separarea vine din filete, nu din culoare */
.section--panel { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--panel + .section--panel { border-top: 0; }
.marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.site-foot { border-top: 1px solid var(--line); }
.iconbar, main > section.iconbar { background: var(--paper); }

/* cardurile raman alb curat ca sa se ridice de pe fundal */
.bookbar, .promo-box, .cc-bar, .nav-sub-in { background: #fff; }
.cover-card.is-on .cc { background: #fff; }
.cc { background: rgba(255,255,255,.6); }
.gal button, .card .ph, .post .ph { background: var(--panel-2); }

/* ==========================================================================
   ULTIMUL GRI: era culoarea textului, nu a fundalului
   --ink-2 ramasese #463939, un maro-gri din paleta lor de teracota. Pe fundal
   alb cu accent albastru citea murdar. Trece pe neutru, ca la ei, unde textul
   e negru curat cu gri doar pentru randurile secundare.
   ========================================================================== */
:root { --ink-2: #2B2B2B; --mute: #8C8C8C; }

.iconbar-list li { color: var(--ink); }
.iconbar-list li:hover { color: var(--terra); }
.iconbar-list .label { color: inherit; }
.foot-cols a, .foot-cols span, .foot-cols address { color: var(--ink); }
.foot-cols a:hover { color: var(--terra); }
.foot-news p, .news-note, .foot-bot, .totop, .foot-mark .place { color: var(--mute); }
.card p, .post p, .split-tx p, .cover-head p, .strip p, .dist p { color: var(--ink-2); }

/* sectiunea de rezervare directa pe alb curat, ca blocul lor de jos */
.section--panel { background: #fff; }
main > section.section--panel { background: #fff; }

/* ==========================================================================
   FOOTER ALBASTRU DESCHIS
   Nuante derivate din albastrul logoului (#006980), tinute foarte diluate ca
   sa ramana aerisit. Textul nu e negru, e un bleumarin adanc, altfel pe fundal
   albastru citeste dur.
   ========================================================================== */
:root {
  --foot-1:   #F4F9FD;
  --foot-2:   #E4EFF8;
  --foot-ink: #16324B;
  --foot-mut: #6B8AA3;
  --foot-ln:  rgba(0,105,128,.16);
}

.site-foot {
  background: linear-gradient(180deg, var(--foot-1) 0%, var(--foot-2) 100%);
  color: var(--foot-ink);
  border-top: 1px solid var(--foot-ln);
  position: relative;
}
/* fir subtire de accent pe muchia de sus, se stinge spre margini */
.site-foot::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--terra) 28%, var(--terra) 72%, transparent);
  opacity: .5;
}
/* aura difuza in coltul din dreapta sus, da adancime fara sa incarce */
.site-foot::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 82% 0%, rgba(0,105,128,.10), transparent 70%);
}
.site-foot > * { position: relative; z-index: 1; }

.foot-hr { background: var(--foot-ln); }
.foot-news .kicker, .foot-cols h4 { color: var(--terra-d); }
.foot-news h3 { color: var(--foot-ink); }
.foot-news p, .news-note { color: var(--foot-mut); }

.foot-cols a, .foot-cols span, .foot-cols address { color: var(--foot-ink); }
.foot-cols a { transition: color .25s ease; }
.foot-cols a:hover { color: var(--terra); }

.foot-mark .mark, .foot-mark .stars { color: var(--terra); }
.foot-mark .wm { color: var(--foot-ink); }
.foot-mark .place { color: var(--foot-mut); }

.news-form { border-bottom-color: rgba(0,105,128,.3); }
.news-form input { color: var(--foot-ink); }
.news-form input::placeholder { color: var(--foot-mut); }
.news-form button { color: var(--terra-d); }
.news-form:focus-within { border-bottom-color: var(--terra); }

.foot-social a {
  border-color: var(--foot-ln); color: var(--terra-d);
  background: rgba(255,255,255,.6);
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.foot-social a:hover {
  background: var(--terra); color: #fff; border-color: var(--terra);
  transform: translateY(-2px);
}

.foot-bot {
  color: var(--foot-mut);
  border-top: 1px solid var(--foot-ln);
  background: rgba(0,105,128,.05);
}
.foot-bot a { color: var(--foot-mut); }
.foot-bot a:hover, .foot-bot .credit a { color: var(--terra-d); }
.totop { color: var(--foot-mut); }
.totop:hover { color: var(--terra-d); }

/* --- banda legala de jos: acum e o fasie proprie, pe toata latimea ---------
   Inainte fundalul statea pe .foot-bot, care e in interiorul .wrap, deci se
   oprea la marginile continutului si se vedea ca un dreptunghi lipit.        */
.site-foot { background-color: var(--foot-1); }
.foot-legal {
  background: #DCE9F5;
  border-top: 1px solid rgba(0,105,128,.18);
  padding: 26px 0 8px;
  margin-top: 8px;
}
.foot-bot { background: none; border-top: 0; padding-top: 4px; }
/* siglele ANPC vin cu fundal alb, multiply le aseaza pe albastru fara caseta */
.anpc img { mix-blend-mode: multiply; opacity: .9; }
.anpc a:hover img { opacity: 1; }

/* banda legala inchide pagina, fara fasie goala sub ea */
.site-foot { padding-bottom: 0; }
.foot-legal { padding: 30px 0 26px; margin-top: 0; }
@media (max-width: 960px) {
  /* loc pentru pastila fixa de rezervare, sa nu acopere randul de credit */
  .foot-legal { padding-bottom: 104px; }
}

/* ==========================================================================
   HEADER PE TELEFON: transparent peste imagine, alb la scroll
   Toate paginile au imagine mare sus, deci pe telefon o urc sub bara si las
   headerul sa pluteasca peste ea. Logoul si burgerul sunt albe cu o umbra fina
   ca sa se citeasca pe orice cadru. Cand pagina se misca, fundalul alb intra
   treptat si literele trec pe albastru.
   ========================================================================== */
@media (max-width: 960px) {
  /* imaginea urca sub bara; textul ei sta oricum jos, nu se ascunde */
  .pagehero { margin-top: 0; }
  .pagehero-in { padding-top: calc(var(--hdr) + 20px); }

  .site-head, .site-head.is-solid,
  body.no-hero .site-head, body.no-hero .site-head.is-solid {
    background: transparent;
    box-shadow: none;
    transition: background .55s cubic-bezier(.4,0,.2,1),
                box-shadow .55s cubic-bezier(.4,0,.2,1);
  }
  /* degrade slab sub bara, altfel logoul alb se pierde pe cadrele deschise */
  .site-head::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,0));
    transition: opacity .55s cubic-bezier(.4,0,.2,1);
  }

  .brand, .site-head .brand, .site-head.is-solid .brand,
  body.no-hero .site-head .brand { color: #fff; }
  .brand-name, .brand-sub { text-shadow: 0 1px 16px rgba(0,0,0,.45); }
  .burger span, .burger::before, .burger::after,
  .site-head.is-solid .burger span, .site-head.is-solid .burger::before,
  .site-head.is-solid .burger::after,
  body.no-hero .site-head .burger span, body.no-hero .site-head .burger::before,
  body.no-hero .site-head .burger::after {
    background: #fff;
    box-shadow: 0 1px 8px rgba(0,0,0,.3);
    transition: background .45s ease, box-shadow .45s ease;
  }

  /* --- starea de dupa scroll, si cea cu meniul deschis --------------------- */
  .site-head.is-solid, body.no-hero .site-head.is-solid,
  body.menu-open .site-head, body.no-hero.menu-open .site-head {
    background: var(--paper);
    box-shadow: 0 2px 18px rgba(35,32,29,.08);
  }
  .site-head.is-solid::after, body.menu-open .site-head::after { opacity: 0; }
  .site-head.is-solid .brand, body.no-hero .site-head.is-solid .brand,
  body.menu-open .site-head .brand { color: var(--terra); }
  .site-head.is-solid .brand-name, .site-head.is-solid .brand-sub,
  body.menu-open .site-head .brand-name,
  body.menu-open .site-head .brand-sub { text-shadow: none; }
  .site-head.is-solid .burger span, .site-head.is-solid .burger::before,
  .site-head.is-solid .burger::after,
  body.no-hero .site-head.is-solid .burger span,
  body.no-hero .site-head.is-solid .burger::before,
  body.no-hero .site-head.is-solid .burger::after,
  body.menu-open .burger span, body.menu-open .burger::before,
  body.menu-open .burger::after { background: var(--terra); box-shadow: none; }
}

/* nota de sub recenzii: era pe latimea intreaga si nu se vedea centrata */
p.reviews-note {
  text-align: center;
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

/* hero-ul urca sub bara transparenta, altfel se vedea o cusatura orizontala
   exact sub header: deasupra ei videoul fix, dedesubt imaginea din .hero */
@media (max-width: 960px) {
  .hero { margin-top: 0; height: 100svh; background: transparent; }
  .hero-in, .hero-tx { padding-top: calc(var(--hdr) + 12px); }
  /* scrimul de sub bara continua putin peste marginea ei, sa nu taie brusc */
  .site-head::after { inset: 0 0 -46px 0; }
}

/* logoul de pe telefon era cu 24px la stanga de centru: burgerul de 38px plus
   spatiul lui impingeau cutia marcii, iar centrul ei nu mai cadea pe centrul
   ecranului. Un spatiu gol de aceeasi latime in stanga echilibreaza randul. */
@media (max-width: 960px) {
  .head-in::before { content: ''; flex: none; width: 38px; height: 1px; order: 0; }
  .brand { order: 1; }
  .burger { order: 2; }
}

/* ==========================================================================
   FONTURI CA LA RUINS
   Titlurile lor sunt Miracle (Artem Nevsky), corpul e Montserrat 300. Miracle
   nu avea t cu virgula, l-am mapat pe glifa care exista deja in font, altfel
   cuvinte ca "Receptie" ieseau cu litera din alt font.
   Great Vibes e adaugat pentru accentele scrise de mana.
   ========================================================================== */
@font-face {
  font-family: 'Miracle';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/miracle-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Miracle';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/miracle-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
                 U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Great Vibes';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/greatvibes-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: 'Great Vibes';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/greatvibes-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
                 U+2215, U+FEFF, U+FFFD;
}

:root {
  --display: 'Miracle', 'Marcellus', Georgia, serif;
  --serif:   'Miracle', 'Marcellus', Georgia, serif;
  --script:  'Great Vibes', 'Snell Roundhand', cursive;
}

/* valorile masurate la ei: 30px, greutate 400, spatiere 3px pe titluri,
   13px cu spatiere mica pe meniu, corp Montserrat 300 la 16px */
h1, h2, h3, .h2, .h3, .wm, .brand-name, .score-src {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .1em;
}
.mainnav a, .head-book, .menu a {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .03em;
}
body, p, li, address, input, button, .label {
  font-family: var(--sans);
}
p, li, address { font-weight: 300; }

/* accentul scris de mana */
.script, .kicker--script {
  font-family: var(--script);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.1;
}

/* ==========================================================================
   PAGINI INTERIOARE CA LA RUINS
   Sub bara plina de meniu vine o banda deschisa cu titlul mare, centrat, si
   abia dupa ea imaginea pe toata latimea. Inainte titlul statea peste poza si
   se citea greu pe cadrele deschise.
   ========================================================================== */
.pagetitle {
  background: var(--paper);
  padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6.5vw, 88px);
  margin-top: var(--hdr);
  text-align: center;
  position: relative; z-index: 2;
}
.pagetitle .crumbs {
  color: var(--mute); margin: 0 0 clamp(18px, 2.4vw, 28px);
  font-size: 11px; letter-spacing: .18em;
}
.pagetitle .crumbs a { color: var(--mute); }
.pagetitle .crumbs a:hover { color: var(--terra); }
.pagetitle h1 {
  color: var(--terra);
  font-size: clamp(30px, 5.4vw, 74px);
  line-height: 1.08;
  letter-spacing: .1em;
  margin: 0;
  text-transform: uppercase;
}
.pagetitle-sub {
  color: var(--ink-2); margin: clamp(20px, 2.6vw, 30px) auto 0;
  max-width: 62ch; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.75;
}

/* imaginea, curata, fara text si fara valul intunecat */
.pagehero {
  margin-top: 0;
  height: clamp(320px, 52vh, 620px);
  position: relative; z-index: 1;
}
.pagehero::after { content: none; }
.pagehero-in { display: none; }

@media (max-width: 960px) {
  .pagetitle { margin-top: var(--hdr); padding: 44px 0 38px; }
  .pagehero { height: clamp(240px, 36vh, 380px); }
  .pagehero-in { padding-top: 0; }
}

/* Bara de meniu ramane transparenta doar pe prima pagina, unde are videoul
   dedesubt. Pe paginile interioare titlul e pe fundal deschis, deci un logo
   alb ar disparea; acolo bara ramane plina. */
@media (max-width: 960px) {
  body.no-hero .site-head, body.no-hero .site-head.is-solid {
    background: var(--paper); box-shadow: 0 2px 18px rgba(35,32,29,.08);
  }
  body.no-hero .site-head::after { opacity: 0; }
  body.no-hero .site-head .brand { color: var(--terra); }
  body.no-hero .site-head .brand-name,
  body.no-hero .site-head .brand-sub { text-shadow: none; }
  body.no-hero .site-head .burger span,
  body.no-hero .site-head .burger::before,
  body.no-hero .site-head .burger::after { background: var(--terra); box-shadow: none; }
}

/* ==========================================================================
   PAGINA DE REZERVARE, dupa reservations.png
   Bara cu pasii sub titlu, cautarea intr-un card alb, banda de beneficii si
   cardurile de camera cu randuri separate prin filete, ca la ei.
   ========================================================================== */
.pagetitle--book { padding-bottom: clamp(34px, 4vw, 52px); }

/* --- pasii ---------------------------------------------------------------- */
.steps {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(10px, 1.6vw, 20px); flex-wrap: wrap;
  margin-top: clamp(30px, 3.6vw, 46px);
}
.step { display: inline-flex; align-items: center; gap: 12px; }
.step-n {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: #E7E5E1; color: var(--mute);
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  transition: background .4s ease, color .4s ease;
}
.step-t {
  font-family: var(--sans); font-size: 14px; font-weight: 400;
  color: var(--mute); letter-spacing: .01em;
}
.step.is-on .step-n { background: var(--terra); color: #fff; }
.step.is-on .step-t { color: var(--ink); font-weight: 500; }
.step-line {
  width: clamp(26px, 5vw, 74px); height: 1px; flex: none;
  background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 8px);
}

/* --- cautarea ------------------------------------------------------------- */
.rsearch {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr auto;
  align-items: stretch;
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  max-width: 980px; margin: 0 auto; overflow: hidden;
  box-shadow: 0 18px 50px rgba(26,26,26,.07);
}
.rsearch-f {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 16px clamp(16px, 1.8vw, 26px);
  border-right: 1px solid var(--line);
}
.rsearch-l { font-family: var(--sans); font-size: 12px; color: var(--mute); }
.rsearch-v { font-family: var(--sans); font-size: 15px; color: var(--ink); }
.rsearch-go {
  display: grid; place-items: center;
  padding: 0 clamp(26px, 3vw, 44px);
  background: var(--terra); color: #fff;
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  transition: background .3s ease;
}
.rsearch-go:hover { background: var(--terra-d); color: #fff; }

/* --- beneficiile ---------------------------------------------------------- */
.rbenef {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); margin-top: clamp(22px, 2.6vw, 34px);
}
.rbenef li { background: var(--panel); padding: clamp(24px, 2.6vw, 34px); }
.rbenef .h3 { display: block; margin-bottom: 10px; }
.rbenef p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.7; }

/* --- cardurile de camera -------------------------------------------------- */
.rgrid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.2vw, 30px);
}
.rcard {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  overflow: hidden;
  transition: box-shadow .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1);
}
.rcard:hover { box-shadow: 0 24px 60px rgba(26,26,26,.1); transform: translateY(-3px); }
.rcard-img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.rcard-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.4,0,.2,1);
}
.rcard:hover .rcard-img img { transform: scale(1.06); }
.rcard-count {
  position: absolute; right: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 3px;
  background: rgba(26,26,26,.62); color: #fff;
  font-family: var(--sans); font-size: 12px;
}
.rcard-count svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.rcard-badge {
  position: absolute; left: 12px; top: 12px;
  padding: 5px 11px; border-radius: 3px;
  background: var(--terra); color: #fff;
  font-family: var(--sans); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}
.rcard-spec {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  padding: 14px clamp(18px, 1.8vw, 24px);
  border-bottom: 1px solid var(--line);
}
.rcard-spec span {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 13px; color: var(--ink-2);
}
.rcard-spec svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--terra); stroke-width: 1.4; }
.rcard-body { padding: clamp(18px, 1.8vw, 24px); }
.rcard-body h3 {
  margin: 0 0 14px; font-size: clamp(19px, 1.5vw, 23px);
  color: var(--ink); letter-spacing: .06em;
}
.rcard-f { margin: 0 0 16px; display: grid; gap: 9px; }
.rcard-f li {
  display: flex; align-items: flex-start; gap: 9px;
  font-family: var(--sans); font-size: 14.5px; color: var(--ink-2); line-height: 1.5;
}
.rcard-f svg { width: 17px; height: 17px; flex: none; margin-top: 1px; fill: none; stroke: var(--terra); stroke-width: 1.4; }
.rcard-more {
  font-family: var(--sans); font-size: 14px; color: var(--terra);
  text-decoration: underline; text-underline-offset: 4px;
}
.rcard-more:hover { color: var(--terra-d); }
.rcard-row { padding: clamp(16px, 1.7vw, 22px) clamp(18px, 1.8vw, 24px); border-top: 1px solid var(--line); }
.rcard-row h4 {
  margin: 0 0 7px; font-family: var(--sans); font-size: 14px; font-weight: 600;
  color: var(--ink); letter-spacing: 0;
}
.rcard-row p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--mute); }
.rcard-row a { color: var(--terra); text-decoration: underline; text-underline-offset: 3px; }
.rcard-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: clamp(18px, 1.8vw, 24px); border-top: 1px solid var(--line);
}
.rcard-price { display: block; font-family: var(--display); font-size: 20px; color: var(--ink); letter-spacing: .06em; }
.rcard-note { display: block; margin-top: 4px; font-family: var(--sans); font-size: 12.5px; color: var(--mute); }
.rcard-book {
  flex: none; padding: 13px 26px; border-radius: 3px;
  background: var(--terra); color: #fff;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  transition: background .3s ease;
}
.rcard-book:hover { background: var(--terra-d); color: #fff; }

/* --- pasii care urmeaza --------------------------------------------------- */
.rnext { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.rnext li { background: var(--panel); padding: clamp(26px, 2.8vw, 38px); }
.rnext-n {
  display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 16px;
  border-radius: 50%; border: 1px solid var(--terra); color: var(--terra);
  font-family: var(--sans); font-size: 14px;
}
.rnext .h3 { display: block; margin-bottom: 10px; }
.rnext p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.7; }

@media (max-width: 1100px) {
  .rgrid { grid-template-columns: repeat(2, 1fr); }
  .rbenef { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .rgrid, .rbenef, .rnext { grid-template-columns: 1fr; }
  .rsearch { grid-template-columns: 1fr; }
  .rsearch-f { border-right: 0; border-bottom: 1px solid var(--line); }
  .rsearch-go { padding: 16px; }
  .steps { gap: 8px; }
  .step-t { font-size: 12.5px; }
  .step-line { width: 16px; }
  .rcard-foot { flex-direction: column; align-items: stretch; }
  .rcard-book { text-align: center; }
}

/* ==========================================================================
   BARA DE MENIU: fara saritura la scroll
   Ramasese o animatie din headerul vechi, pe doua randuri: la scroll bara iesea
   complet din ecran si revenea urcata cu inaltimea logoului. De aici clipirea
   pe paginile interioare si RO taiat din selectorul de limba, se vedea doar EN.
   Bara are acum o singura stare de miscare: isi schimba fundalul, atat.
   ========================================================================== */
.site-head, .site-head.is-solid, .site-head.is-solid.is-in {
  transform: none;
  opacity: 1;
}
.site-head {
  transition: background .5s cubic-bezier(.4,0,.2,1),
              box-shadow .5s cubic-bezier(.4,0,.2,1);
}
.head-lang { overflow: visible; white-space: nowrap; }

/* ==========================================================================
   DOUA FONTURI, atat: Miracle pentru titluri, Montserrat pentru text
   ========================================================================== */
:root {
  --display: 'Miracle', Georgia, serif;
  --serif:   'Miracle', Georgia, serif;
  --sans:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --script:  'Miracle', Georgia, serif;
}
.script, .kicker--script { font-family: var(--display); letter-spacing: .08em; }

/* ==========================================================================
   Firul Ariadnei, centrat sub bara, ca titlul
   ========================================================================== */
.pagetitle .crumbs, .pagetitle .crumbs.label {
  text-align: center;
  justify-content: center;
  display: block;
}

/* ==========================================================================
   MENIUL DE TELEFON: logoul sus, lista sub el
   ========================================================================== */
@media (max-width: 960px) {
  .menu { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 16px; }
  .menu-logo {
    order: -1;
    margin: 4px 0 26px;
    text-align: left;
    align-self: flex-start;
  }
  .menu-logo .brand-mark { width: 34px; height: 34px; margin-bottom: 6px; }
  .menu-logo .brand-name { font-size: 27px; letter-spacing: 3px; }
  .menu-logo .brand-sub { font-size: 8px; letter-spacing: 4px; margin-top: 5px; }
  .menu-logo .brand-stars { width: 48px; margin-top: 6px; }
  .menu-close { top: 14px; }
}

/* ==========================================================================
   Cautarea de pe pagina de rezervare, acum cu campuri reale
   ========================================================================== */
.rsearch { grid-template-columns: 1fr 1fr 1fr 1fr auto; }
.rsearch-f { cursor: pointer; transition: background .25s ease; }
.rsearch-f:hover { background: #FAFAF8; }
.rsearch-f:focus-within { background: #F4F9FD; }
.rsearch input, .rsearch select {
  width: 100%; border: 0; background: none; padding: 0;
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.rsearch input:focus, .rsearch select:focus { outline: none; }
.rsearch input::placeholder { color: var(--mute); }
.rsearch input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .5; margin-left: 4px;
}
.rsearch input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
.rsearch-go { border: 0; cursor: pointer; font-family: var(--sans); }
.rsearch-note {
  max-width: 980px; margin: 16px auto 0; text-align: center;
  font-family: var(--sans); font-size: 13px; line-height: 1.65; color: var(--mute);
}

@media (max-width: 900px) {
  .rsearch { grid-template-columns: 1fr 1fr; }
  .rsearch-f:nth-child(1), .rsearch-f:nth-child(3) { border-right: 1px solid var(--line); }
  .rsearch-f:nth-child(2), .rsearch-f:nth-child(4) { border-right: 0; }
  .rsearch-f { border-bottom: 1px solid var(--line); }
  .rsearch-go { grid-column: 1 / -1; padding: 17px; }
}
@media (max-width: 520px) {
  .rsearch { grid-template-columns: 1fr; }
  .rsearch-f, .rsearch-f:nth-child(1), .rsearch-f:nth-child(3) { border-right: 0; }
}

/* ==========================================================================
   Pachete Beach, Please! si accentele "mai prietenos"
   Blocul asta e aditiv si sta la finalul fisierului intentionat: se sterge
   integral daca Edis vrea site-ul inapoi la tonul sobru de dinainte.
   ========================================================================== */

:root {
  --r-s:  10px;   /* butoane, tag-uri */
  --r-m:  14px;   /* carduri, imagini */
  --r-l:  20px;   /* panouri mari */
  --sun:  #E08A3C;  /* accentul cald, folosit doar pe festival */
  --sun-d:#C4722A;
}

/* --- accente de forma: colturi rotunjite peste tot unde se vede ---------- */
.btn, .btn--ghost, .head-book, .callbtn, .callfab { border-radius: var(--r-s); }
.card .ph, .cc-ph, .split-ph .big, .split-ph .small, .pagehero img,
.cover-card .cc, .ph.strips { border-radius: var(--r-m); overflow: hidden; }
.intro-panel, .section--panel .wrap > .dist, .faq { border-radius: var(--r-l); }
.bookbar { border-radius: var(--r-m); }
.bf-dates input, .bookbar select { border-radius: 8px; }

/* Cardurile capata o umbra foarte joasa, ca sa se ridice de pe crem. */
.card { border-radius: var(--r-m); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(35,32,29,.10); }

/* --- pachetele Beach, Please --------------------------------------------- */
.bp-card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  padding: 14px 14px 24px;
}
.bp-card .ph { aspect-ratio: 3 / 2; margin-bottom: 18px; }
.bp-card h3 { margin: 4px 0 10px; }
.bp-card > p.small { margin-bottom: 18px; }

.bp-card--hero { border-color: var(--terra); box-shadow: 0 10px 30px rgba(0,105,128,.10); }

.bp-tag {
  display: inline-flex; align-items: center; align-self: flex-start;
  height: 26px; padding: 0 12px; border-radius: 999px;
  background: var(--panel-2); color: var(--ink-2);
  font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
  margin-bottom: 12px;
}
.bp-tag--hot { background: var(--sun); color: #fff; }

.bp-list { list-style: none; margin: 0 0 22px; padding: 0; }
.bp-list li {
  position: relative; padding: 7px 0 7px 26px;
  font-size: 15px; line-height: 23px; color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.bp-list li:last-child { border-bottom: 0; }
.bp-list li::before {
  content: ""; position: absolute; left: 4px; top: 15px;
  width: 9px; height: 5px; border-left: 1.6px solid var(--terra);
  border-bottom: 1.6px solid var(--terra); transform: rotate(-45deg);
}

.bp-price { margin: auto 0 18px; display: flex; flex-direction: column; gap: 4px; }
.bp-unit { font-family: var(--sans); font-size: 10px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--mute); }

/* Marcajul de pret necompletat. Tipat intentionat: nu vrem sa ajunga live. */
.bp-todo {
  display: inline-block; align-self: flex-start;
  padding: 6px 14px; border-radius: var(--r-s);
  border: 2px dashed var(--sun); background: rgba(224,138,60,.10);
  color: var(--sun-d); font-family: var(--sans); font-weight: 600;
  font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase;
}

.bp-card .btn { width: 100%; }

@media (max-width: 900px) {
  .bp-card { padding: 12px 12px 20px; }
}

/* --- banda de pe prima pagina -------------------------------------------- */
.bpstrip { position: relative; overflow: hidden; }
.bpstrip-bg { position: absolute; inset: 0; }
.bpstrip-bg img { width: 100%; height: 100%; object-fit: cover; }
.bpstrip-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,28,32,.86) 0%, rgba(20,28,32,.72) 48%, rgba(20,28,32,.42) 100%);
}
.bpstrip-in {
  position: relative; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(54px, 7vw, 96px) var(--pad);
  color: #fff;
}
.bpstrip-in .col { max-width: 620px; }
.bpstrip-when {
  display: inline-flex; align-items: center; gap: 10px;
  height: 30px; padding: 0 16px; border-radius: 999px;
  background: var(--sun); color: #fff;
  font-family: var(--sans); font-size: 11px; letter-spacing: 1.8px;
  text-transform: uppercase; margin-bottom: 20px;
}
.bpstrip h2 { color: #fff; margin-bottom: 18px; }
.bpstrip p { color: rgba(255,255,255,.88); }
.bpstrip-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.bpstrip .btn--light { background: #fff; color: var(--ink); border-color: #fff; }
.bpstrip .btn--light:hover { background: var(--sun); border-color: var(--sun); color: #fff; }
.bpstrip .btn--ghost { color: #fff; border-color: rgba(255,255,255,.7); }
.bpstrip .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .card:hover { transform: none; }
}

/* Pretul pachetelor cat timp nu avem cifrele. Se inlocuieste cu suma reala. */
.bp-ask {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(20px, 1.7vw, 25px); line-height: 1.1; color: var(--terra);
}

/* --- linkurile legale din bara de jos a footerului -------------------- */
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot-links a { color: inherit; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- Beach, Please! ca buton separat in bara de sus (oct 2026) ----------- */
.site-head .mainnav .nav-i.nav-bp > a,
.site-head.is-solid .mainnav .nav-i.nav-bp > a,
body.no-hero .site-head .mainnav .nav-i.nav-bp > a {
  background: var(--sun); color: #fff;
  padding: 7px 14px 6px; border-radius: 999px;
  transition: background .3s var(--ease);
}
.site-head .mainnav .nav-i.nav-bp > a:hover { background: var(--sun-d); }
.mainnav .nav-bp a::after { display: none; }
.menu .menu-bp .menu-row a { color: var(--sun-d); }

/* --- Rezerva acum, la finalul sectiunilor ------------------------------- */
.tx-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 26px; }
.closing { text-align: center; }
.closing { margin-top: clamp(30px, 4vw, 48px); }
.closing .h3 { color: var(--terra); max-width: 780px; margin-inline: auto; font-size: clamp(19px, 1.8vw, 26px); line-height: 1.35; }
.closing .btn { margin-top: 24px; }

/* --- programul restaurantului ------------------------------------------- */
.hours { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line, rgba(0,0,0,.1));
  max-width: 920px; margin: 0 auto; border-radius: var(--r-m, 10px); overflow: hidden; }
.hours > div { background: #fff; padding: 26px 18px; text-align: center; }
.hours .label { display: block; color: var(--mute); margin-bottom: 10px; }
.hours strong { font-family: var(--display); font-weight: 400; font-size: clamp(19px, 1.6vw, 23px); color: var(--terra); }
@media (max-width: 760px) { .hours { grid-template-columns: 1fr 1fr; } }

.info-list { text-align: left; }
.info-list p + p { margin-top: 14px; }

/* Cu Beach, Please! in bara sunt opt butoane: le strangem pe ecranele medii,
   altfel "Rezerva acum" iese din ecran intre 960 si 1300px. */
@media (max-width: 1480px) {
  .head-in { gap: 22px; }
  .mainnav { gap: 18px; }
  .mainnav a { font-size: 12.5px; letter-spacing: .6px; }
  .head-book { padding: 0 16px; }
}
@media (max-width: 1320px) {
  .mainnav { gap: 16px; }
  .head-lang { display: none; }
}
@media (max-width: 1120px) {
  .head-in { gap: 14px; }
  .mainnav { gap: 11px; }
  .mainnav a { font-size: 11.5px; letter-spacing: .3px; }
  .nav-i { gap: 2px; }
  .site-head .mainnav .nav-i.nav-bp > a { padding: 6px 10px 5px; }
  .brand-name { font-size: 22px; }
}

/* --- blocurile de intro, centrate (cerut de client, oct 2026) ------------ */
.intro-panel.center { text-align: center; }
.intro-panel.center h2 { text-align: center; }
.intro-panel.center .col { margin-inline: auto; max-width: 64ch; }
.intro-panel.center .col p + p { margin-top: 16px; }

/* trei poze sub textul de pe prima pagina */
.intro-pics {
  display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: clamp(10px, 1.6vw, 22px);
  align-items: center; max-width: 1080px; margin: clamp(36px, 4.5vw, 60px) auto 0;
}
.intro-pics .ph { overflow: hidden; border-radius: var(--r-m, 10px); aspect-ratio: 4 / 5; }
.intro-pics .ph:nth-child(2) { aspect-ratio: 4 / 5.6; }
.intro-pics img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .intro-pics { grid-template-columns: 1fr 1fr; }
  .intro-pics .ph:nth-child(2) { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 4 / 3; }
}

/* --- formulare legate la /admin ----------------------------------------- */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-ok {
  padding: 22px 24px; border-radius: var(--r-m, 10px); background: #fff;
  border: 1px solid var(--line); color: var(--terra); font-weight: 500; line-height: 1.5;
}

/* --- NIBIRU ca buton separat in bara de sus, langa Beach, Please! (oct 2026) --- */
:root { --nb: #6B3FA0; --nb-d: #55308A; }
.site-head .mainnav .nav-i.nav-nb > a,
.site-head.is-solid .mainnav .nav-i.nav-nb > a,
body.no-hero .site-head .mainnav .nav-i.nav-nb > a { background: var(--nb); }
.site-head .mainnav .nav-i.nav-nb > a:hover { background: var(--nb-d); }
.menu .menu-nb .menu-row a { color: var(--nb); }
.nb-tag { background: var(--nb); border-color: var(--nb); }
/* intervalul de zile (15-18) pe cardurile de festival */
.ev-day--range { font-size: clamp(30px, 3.1vw, 44px); white-space: nowrap; }
.nb-events .ev-cta .lnk { justify-self: center; }
.nb-credit { color: var(--mute); font-size: 12px; line-height: 1.6; }
.nb-credit a { color: inherit; }