/* ============================================================
   Hotel Quercus — демо-редизайн (FLAI Studio)
   Палитра отеля, НЕ агентства: адриатический морской + песок.
   Ноль внешних запросов (DSGVO): шрифты системные, карт-iframe нет.
   ============================================================ */

:root{
  --sand:#faf7f2;
  --sand-2:#f2ece3;
  --ink:#17201f;
  --ink-soft:rgba(23,32,31,.66);
  --ink-faint:rgba(23,32,31,.45);
  --sea:#0f6b73;          /* акцент отеля */
  --sea-dark:#0a4f55;
  --sea-soft:rgba(15,107,115,.10);
  --gold:#c08a3e;
  --line:rgba(23,32,31,.12);
  --white:#fff;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --shadow:0 18px 50px rgba(23,32,31,.12);
  --r:6px;          /* сдержанные углы в духе chalet-moos, не «таблетки» */
  --r-btn:3px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--sand);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- Верхний бар ---------- */
.bar{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem clamp(1rem,4vw,2.6rem);
  transition:background .3s ease,box-shadow .3s ease,padding .3s ease;
}
.bar.is-solid{background:rgba(250,247,242,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.bar-logo{display:flex;align-items:center;gap:.6rem}
.bar-logo img{height:38px;width:auto;filter:brightness(0) invert(1);transition:filter .3s ease}
.bar.is-solid .bar-logo img{filter:none}
.bar-name{font-family:var(--serif);font-size:1.02rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;transition:color .3s ease}
.bar.is-solid .bar-name{color:var(--ink)}

.bar-nav{display:flex;align-items:center;gap:1.5rem}
.bar-nav a{font-size:.87rem;font-weight:600;color:rgba(255,255,255,.9);transition:color .2s ease}
.bar.is-solid .bar-nav a{color:var(--ink-soft)}
.bar-nav a:hover{color:var(--gold)}
.bar-right{display:flex;align-items:center;gap:.7rem}

/* переключатель языков */
.langs{display:flex;gap:.15rem;padding:.22rem;border-radius:5px;background:rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.bar.is-solid .langs{background:var(--sea-soft)}
.langs button{
  font:inherit;font-size:.76rem;font-weight:750;letter-spacing:.04em;
  padding:.36em .72em;border:0;border-radius:3px;cursor:pointer;
  background:transparent;color:rgba(255,255,255,.82);transition:background .18s,color .18s;
}
.bar.is-solid .langs button{color:var(--ink-soft)}
.langs button:hover{color:#fff}
.bar.is-solid .langs button:hover{color:var(--ink)}
.langs button.is-on{background:#fff;color:var(--sea-dark)}
.bar.is-solid .langs button.is-on{background:var(--sea);color:#fff}

/* Кнопки — прямоугольные, uppercase, тонкая рамка: язык chalet-moos */
.btn{
  font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;
  text-transform:uppercase;letter-spacing:.1em;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1em 1.9em;border-radius:var(--r-btn);border:1.5px solid transparent;
  transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-sea{background:var(--sea);color:#fff;box-shadow:0 8px 24px rgba(15,107,115,.24)}
.btn-sea:hover{background:var(--sea-dark)}
.btn-glass{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.6);backdrop-filter:blur(6px)}
.btn-glass:hover{background:#fff;color:var(--ink)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-wa{background:#25d366;color:#062e1c}
.btn-wa:hover{background:#1eb857}
.btn-sm{font-size:.72rem;padding:.65em 1.2em;letter-spacing:.09em}

.burger{display:none;background:none;border:0;cursor:pointer;padding:.4rem}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;transition:background .3s}
.bar.is-solid .burger span{background:var(--ink)}

/* ---------- HERO: логотип на галерее ---------- */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;text-align:center}
.hero-bg{position:absolute;inset:0}
.hero-bg figure{
  position:absolute;inset:0;margin:0;opacity:0;
  background-size:cover;background-position:center;
  animation:kenburns 32s infinite;
}
.hero-bg figure:nth-child(1){animation-delay:0s}
.hero-bg figure:nth-child(2){animation-delay:8s}
.hero-bg figure:nth-child(3){animation-delay:16s}
.hero-bg figure:nth-child(4){animation-delay:24s}
@keyframes kenburns{
  0%   {opacity:0;transform:scale(1.04)}
  6%   {opacity:1}
  25%  {opacity:1;transform:scale(1.12)}
  31%  {opacity:0}
  100% {opacity:0;transform:scale(1.04)}
}
/* затемняющий фильтр — логотип и текст обязаны читаться поверх любого кадра */
.hero-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(10,20,22,.55) 0%,rgba(10,20,22,.30) 38%,rgba(10,20,22,.62) 100%),
    radial-gradient(70% 60% at 50% 45%,rgba(10,20,22,.18),rgba(10,20,22,.55));
}
.hero-in{position:relative;z-index:2;padding:6rem clamp(1.2rem,5vw,2rem) 4rem;max-width:820px}
/* Их логотип тёмный (чёрная надпись + золотые точки) — на фото не читался.
   Перекрашиваем в белый силуэт: имя отеля видно с первой секунды,
   золото остаётся в звёздах и кнопках. */
.hero-logo{
  width:clamp(160px,24vw,250px);margin:0 auto 1.2rem;
  filter:brightness(0) invert(1) drop-shadow(0 6px 26px rgba(0,0,0,.5));
}
.hero .stars{display:block;margin-bottom:1.2rem;color:var(--gold);letter-spacing:.4em;font-size:.95rem}
/* одна строка среднего размера — вместо крупного заголовка + абзаца */
.hero-tag{
  margin:0 auto 2rem;max-width:40ch;color:rgba(255,255,255,.94);font-weight:500;
  font-size:clamp(1.05rem,2.1vw,1.35rem);line-height:1.5;text-shadow:0 1px 16px rgba(0,0,0,.45);
}
.hero-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.scrollcue{
  position:absolute;left:50%;bottom:1.8rem;transform:translateX(-50%);z-index:2;
  color:rgba(255,255,255,.75);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  animation:bob 2.6s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ---------- Общие секции ---------- */
.sec{padding:clamp(2.8rem,6vw,4.8rem) clamp(1.2rem,5vw,3rem);max-width:1180px;margin:0 auto}
/* факты сидят вплотную под hero — без большого пустого поля */
.sec--tight{padding-top:clamp(1.4rem,3vw,2.2rem);padding-bottom:clamp(1.2rem,2.4vw,1.8rem)}
.sec-head{max-width:640px;margin-bottom:clamp(2rem,5vw,3.2rem)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{
  display:block;font-size:.72rem;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sea);margin-bottom:.9rem;
}
h2{margin:0 0 1rem;font-family:var(--serif);font-weight:400;letter-spacing:-.015em;
   font-size:clamp(1.9rem,4.6vw,3.1rem);line-height:1.12}
.lead{font-size:clamp(1rem,2vw,1.16rem);color:var(--ink-soft);margin:0}

/* факты */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line);
       border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.fact{background:var(--sand);padding:1.6rem 1.3rem;text-align:center}
.fact b{display:block;font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.4rem);color:var(--sea);line-height:1}
.fact span{display:block;margin-top:.4rem;font-size:.83rem;color:var(--ink-soft)}

/* карточки-плитки */
.grid{display:grid;gap:1.3rem}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.card{background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
      display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-5px);box-shadow:0 26px 62px rgba(23,32,31,.17)}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.card-body{padding:1.4rem 1.4rem 1.6rem}
.card h3{margin:0 0 .45rem;font-family:var(--serif);font-weight:400;font-size:1.35rem}
.card p{margin:0;font-size:.93rem;color:var(--ink-soft)}

/* блок «картинка + текст» */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.4rem);align-items:center}
.split.rev .split-media{order:2}
.split-media img{border-radius:var(--r);box-shadow:var(--shadow);aspect-ratio:4/3;object-fit:cover;width:100%}
.split-text h2{margin-bottom:.8rem}
.ticks{list-style:none;margin:1.4rem 0 0;padding:0}
.ticks li{position:relative;padding-left:1.7rem;margin-bottom:.6rem;font-size:.96rem;color:var(--ink-soft)}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;
                  background:var(--sea);box-shadow:0 0 0 4px var(--sea-soft)}

.band{background:var(--sand-2)}
.band-dark{background:var(--ink);color:#f3efe9}
.band-dark h2{color:#fff}
.band-dark .lead,.band-dark p{color:rgba(243,239,233,.72)}
.band-dark .ticks li{color:rgba(243,239,233,.78)}
.band-dark .eyebrow{color:var(--gold)}

/* ---------- Форма запроса ---------- */
.book-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:start}
.form{display:grid;gap:1.05rem;background:var(--white);padding:clamp(1.5rem,3vw,2.3rem);
      border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.field{display:flex;flex-direction:column;gap:.4rem}
/* микро-подписи полей (баг был: стилизовался label, а в разметке span) */
.field span{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.form input,.form select,.form textarea{
  font:inherit;font-size:.97rem;padding:.82em 1em;border-radius:4px;
  border:1px solid var(--line);background:#fff;color:var(--ink);width:100%;
  transition:border-color .16s,box-shadow .16s;
}
/* селекты — свой шеврон вместо системной стрелки «2001» */
.form select{
  appearance:none;-webkit-appearance:none;padding-right:2.4em;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230f6b73' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1em center;
}
.form textarea{min-height:104px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--sea);box-shadow:0 0 0 3px var(--sea-soft);
}
.form input::placeholder,.form textarea::placeholder{color:var(--ink-faint)}
.form>.btn{margin-top:.3rem}
.form-note{font-size:.8rem;color:var(--ink-faint);margin:.1rem 0 0;text-align:center}
.contact-list{list-style:none;margin:1.6rem 0 0;padding:0}
.contact-list li{margin-bottom:1rem;font-size:1rem}
.contact-list b{display:block;font-size:.74rem;font-weight:800;letter-spacing:.16em;
                text-transform:uppercase;color:var(--ink-faint);margin-bottom:.15rem}
.contact-list a{color:var(--sea);font-weight:650}
.contact-list a:hover{color:var(--sea-dark)}
.direct-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin:.4rem 0 0}
/* карта — статичная картинка (быстрая, без внешних запросов), клик → маршрут в Google Maps */
.map{position:relative;display:block;margin-top:1.6rem;border-radius:var(--r);overflow:hidden;
     box-shadow:var(--shadow);border:1px solid var(--line)}
.map img{width:100%;height:auto;display:block;aspect-ratio:1000/560;object-fit:cover}
.map .map-pin{
  position:absolute;left:.9rem;bottom:.9rem;display:inline-flex;align-items:center;gap:.4rem;
  padding:.5em .9em;border-radius:4px;background:rgba(255,255,255,.94);color:var(--sea-dark);
  font-size:.78rem;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.14);
}
.map:hover .map-pin{background:#fff}

footer{background:var(--ink);color:rgba(243,239,233,.62);padding:3rem clamp(1.2rem,5vw,3rem) 2rem}
.foot-in{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
footer img{height:44px;width:auto;filter:brightness(0) invert(1);opacity:.85;margin-bottom:.8rem}
footer a{color:rgba(243,239,233,.72)}
footer a:hover{color:#fff}
.foot-bottom{max-width:1180px;margin:2.4rem auto 0;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.1);
             display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem}
.demo-tag{display:inline-block;padding:.3em .8em;border-radius:3px;background:rgba(192,138,62,.2);
          color:var(--gold);font-size:.74rem;font-weight:700}

/* ---------- Мобильная ---------- */
@media (max-width:900px){
  .split,.book-wrap{grid-template-columns:1fr}
  .split.rev .split-media{order:0}
}
@media (max-width:760px){
  .bar-nav{
    position:fixed;inset:0 0 0 auto;width:min(78vw,320px);
    background:var(--sand);flex-direction:column;justify-content:center;gap:1.6rem;
    transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
    box-shadow:-10px 0 40px rgba(0,0,0,.16);
  }
  .bar-nav.is-open{transform:translateX(0)}
  .bar-nav a{font-size:1.15rem;color:var(--ink)}
  .burger{display:block}
  .bar-right .btn{display:none}
  .hero-actions .btn{width:100%;max-width:320px}
  .row2{grid-template-columns:1fr}
  .langs button{padding:.34em .6em;font-size:.72rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-bg figure{animation:none;opacity:0}
  .hero-bg figure:first-child{opacity:1}
  .scrollcue{animation:none}
}

/* появление секций */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}