/* www3D.site — страница отеля или ресторана для гостя (v8.39).
   Стилистика страницы для отельеров: чередование тёмных и светлых экранов, дорога с логотипом между ними,
   фото растворяются в фоне, призывы с эффектом CLICK. Углы фото — не больше 4 px (решение 29.10.2026). */
:root{--dk:#0e2a38;--dk2:#123545;--fgd:#edf6f8;--mud:#9fbccb;--lt:#f5efe4;--lt2:#e8dfd0;--fgl:#14303a;--mul:#5c6f74;--ac:#ff6a3d;--ac2:#ff8a63;--acd:#c4461f;--lake:#5cc8cc;--line:#1f4556;
 --rp:4px;--rb:8px;--eh:clamp(96px,12vw,170px);--gut:max(16px,env(safe-area-inset-left,0px));--gutr:max(16px,env(safe-area-inset-right,0px));
 --f:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;--hand:'Caveat','Onest',cursive;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--dk);color:var(--fgd);font:400 16px/1.6 var(--f);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;text-wrap:balance}
h1{font-weight:800;font-size:clamp(32px,4.4vw,54px);line-height:1.05;letter-spacing:-.02em}
h2{font-weight:800;font-size:clamp(28px,3.8vw,46px);line-height:1.08;letter-spacing:-.015em}
h3{font-weight:700;font-size:19px;line-height:1.25}
:focus-visible{outline:3px solid var(--lake);outline-offset:3px}
.nin{width:100%;max-width:1180px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gutr);position:relative;z-index:3}
.neb{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ac)}
.nld{margin:14px 0 0;font-size:clamp(16.5px,1.4vw,19px);max-width:52ch}
.dark .nld,.dark .muted{color:var(--mud)} .light .nld,.light .muted{color:var(--mul)}

/* шапка */
.w3h{position:sticky;top:0;z-index:40;background:rgba(14,42,56,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.w3in{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--gutr) 10px var(--gut);position:relative}
.w3logo{display:flex;align-items:center;gap:10px;color:var(--fgd);text-decoration:none;font-weight:800;font-size:18px}
.w3logo img{width:38px;height:38px}
.w3m{display:flex;gap:2px}
.w3m a{color:var(--mud);text-decoration:none;font-weight:500;font-size:15px;padding:8px 12px;border-radius:6px;white-space:nowrap}
.w3m a:hover{color:#fff}
.w3m a[aria-current="page"]{color:#fff;box-shadow:inset 0 -2px 0 var(--ac);border-radius:0}
.w3m a.w3biz{margin-left:6px;box-shadow:inset 0 0 0 1px var(--line)}
.w3b{display:none;flex-direction:column;justify-content:center;gap:4px;width:40px;height:36px;padding:0 9px;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer}
.w3b i{display:block;height:2px;background:#fff}
@media (max-width:760px){.w3b{display:inline-flex}.w3m{display:none}
 .w3h.open .w3m{display:flex;flex-direction:column;position:absolute;top:100%;right:var(--gutr);min-width:230px;padding:6px;border:1px solid var(--line);border-radius:8px;background:var(--dk2);box-shadow:0 16px 40px rgba(0,0,0,.5)}
 .w3h.open .w3m a{padding:13px 14px;font-size:16px}}

/* экраны */
.ns{position:relative;padding-block:clamp(56px,8vw,96px)}
.ns.dark{background:var(--dk);color:var(--fgd)}
.ns.light{background:var(--lt);color:var(--fgl)}
.ns.has-road{padding-bottom:calc(clamp(40px,5vw,64px) + var(--eh))}
.ns.under-road{margin-top:calc(-1 * var(--eh))}
.ns.under-road>.nin{padding-top:calc(var(--eh) * .6)}

/* дорога с логотипом между экранами (рисует hotel.js) */
.edge{position:absolute;left:0;right:0;bottom:-1px;height:var(--eh);z-index:4;pointer-events:none}
.edge svg{position:absolute;left:0;top:0;overflow:visible;display:block}

/* сцена: фото во весь экран, тень только под текстом */
.scene{position:relative;overflow:hidden;color:#fff}
.scene .bg{position:absolute;inset:0;z-index:0}
.scene .bg img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center)}
.scene .shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--dk) 0%,rgba(14,42,56,.9) 30%,rgba(14,42,56,.45) 55%,rgba(14,42,56,.1) 80%),linear-gradient(0deg,var(--dk) 0%,rgba(14,42,56,0) 24%),linear-gradient(180deg,rgba(14,42,56,.6) 0%,rgba(14,42,56,0) 18%)}
.scene.r .shade{background:linear-gradient(270deg,var(--dk) 0%,rgba(14,42,56,.9) 30%,rgba(14,42,56,.45) 55%,rgba(14,42,56,.1) 80%),linear-gradient(0deg,var(--dk) 0%,rgba(14,42,56,0) 24%),linear-gradient(180deg,rgba(14,42,56,.6) 0%,rgba(14,42,56,0) 18%)}
.scene .nld{color:#dbe9ee}
.scene .tag{position:absolute;z-index:3;right:var(--gutr);bottom:calc(var(--eh) + 14px);font-size:13px;font-weight:600;color:#fff;background:rgba(10,24,30,.55);backdrop-filter:blur(6px);padding:6px 12px 6px 30px;border-radius:4px;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23edf6f8' stroke-width='3'%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3Cpath d='M40 6 L46 36 L40 40 L34 36 Z' fill='%23ff6a3d' stroke='%23ff6a3d'/%3E%3Cpath d='M40 74 L34 44 L40 40 L46 44 Z' fill='%23edf6f8'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-size:16px 16px;background-position:9px 50%}
.scene.r .tag{right:auto;left:var(--gut)}
.scene.r .nin>.txt{margin-left:auto}

/* фото, растворённое в фоне экрана */
.melt{position:relative}
.melt img{width:100%;height:100%;object-fit:cover}
.melt.mr img{-webkit-mask:linear-gradient(90deg,#000 55%,transparent),linear-gradient(0deg,transparent,#000 22%);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,#000 55%,transparent) intersect,linear-gradient(0deg,transparent,#000 22%)}
.melt.ml img{-webkit-mask:linear-gradient(270deg,#000 55%,transparent),linear-gradient(0deg,transparent,#000 22%);-webkit-mask-composite:source-in;mask:linear-gradient(270deg,#000 55%,transparent) intersect,linear-gradient(0deg,transparent,#000 22%)}
.melt.mv img{-webkit-mask:linear-gradient(180deg,transparent,#000 18%,#000 72%,transparent);mask:linear-gradient(180deg,transparent,#000 18%,#000 72%,transparent)}

/* кнопки и ссылки */
.btn{position:relative;display:inline-flex;align-items:center;gap:8px;background:var(--ac);color:#fff;text-decoration:none;font:700 15px/1.2 var(--f);padding:11px 20px;border-radius:var(--rb);min-height:44px;border:0;cursor:pointer;transition:background .2s,transform .2s;box-shadow:0 10px 26px rgba(255,106,61,.28)}
.btn:hover{background:var(--ac2)}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn .arr{display:inline-block;transition:transform .2s}
.lnk{position:relative;color:inherit;font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--ac);padding-bottom:2px;background:none;border-top:0;border-left:0;border-right:0;font-family:inherit;font-size:inherit;cursor:pointer}
.light .lnk{color:var(--fgl)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:28px}

/* появление при прокрутке */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.rv.show{opacity:1;transform:none}

/* первый экран: окно 3D-тура поверх фото отеля */
.hero{min-height:min(92svh,860px);display:flex;align-items:center}
.hero .nin{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:center;padding-top:28px}
.crumbs{font-size:14px;color:#cfe0e5;margin-bottom:16px}
.crumbs a{color:#cfe0e5}
.hero h1 span{display:block;color:var(--lake);font-weight:700;font-size:.56em;letter-spacing:0;margin-top:8px}
.facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin:20px 0 0;padding:0;list-style:none;font-size:15px;color:#e3eff3}
.facts li{position:relative;padding-left:16px}
.facts li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--ac);transform:rotate(45deg)}
.note{font-family:var(--hand);font-size:26px;color:var(--lake);margin:22px 0 0;transform:rotate(-2deg);transform-origin:left}

/* галерея-миниатюры: лупа при наведении, нажатие — на весь экран */
.gal{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 10px;scroll-snap-type:x mandatory}
.gal::-webkit-scrollbar{display:none}
.gal>button{flex:0 0 clamp(200px,22%,260px);scroll-snap-align:start;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:zoom-in;font:inherit}
.gal>button .im{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--rp);background:var(--lt2)}
.dark .gal>button .im{background:var(--dk2)}
.gal>button img{width:100%;height:100%;object-fit:cover;transition:transform .6s,filter .4s}
.gal>button:hover img,.gal>button:focus-visible img{transform:scale(1.05)}
.gal>button b{display:block;margin-top:10px;font-size:15.5px}
.gal>button small{display:block;font-size:13.5px}
.light .gal>button small{color:var(--mul)} .dark .gal>button small{color:var(--mud)}
.gal.sm>button{flex-basis:clamp(130px,15%,170px)}
.gal.sm>button .im{aspect-ratio:3/2}
.galhint{font-size:13.5px;margin:8px 0 0}
.light .galhint{color:var(--mul)} .dark .galhint{color:var(--mud)}
@media (hover:none){.galhint{display:none}}

/* где жить */
.opts{display:grid;gap:clamp(36px,6vw,72px);margin-top:36px}
.opt{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,4vw,48px);align-items:center}
.opt.rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.opt.rev .melt{order:2}
.opt .melt{aspect-ratio:16/11}
.opt ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:15px}
.opt li{position:relative;padding-left:14px}
.opt li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--ac);transform:rotate(45deg)}
.opt .cta{margin-top:22px}

/* места рядом */
.spots{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;scrollbar-width:thin}
.spot{flex:0 0 clamp(250px,30%,330px);scroll-snap-align:start;display:flex;flex-direction:column;gap:10px}
.spot .pic{aspect-ratio:16/10;overflow:hidden;border-radius:var(--rp)}
.spot .pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s;cursor:zoom-in}
.spot:hover .pic img{transform:scale(1.04)}
.spot p{margin:0;font-size:14.5px;flex:1}
.light .spot p{color:var(--mul)}
.rtb{display:flex;gap:8px;flex-wrap:wrap}
.rtb button{font:700 13.5px/1 var(--f);padding:10px 13px;border-radius:6px;border:0;cursor:pointer}
.rtb .r1{background:var(--ac);color:#fff}
.rtb .r2{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}

/* бронирование */
.book{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center}
.tel{display:inline-block;font-size:clamp(30px,3.8vw,46px);font-weight:800;text-decoration:none;margin:16px 0 6px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.book .melt{aspect-ratio:4/5;max-height:560px}

.own{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;padding-block:26px;border-top:1px solid var(--line);color:var(--mud);font-size:15px}
footer .nin{padding-block:22px 110px;color:var(--mud);font-size:14px}

/* маршрут в окне */
.w3ov{position:fixed;inset:0;z-index:70;background:rgba(5,15,18,.9);display:grid;place-items:center;padding:max(12px,env(safe-area-inset-top,0px)) 12px max(12px,env(safe-area-inset-bottom,0px))}
.w3ov[hidden]{display:none}
.w3box{width:min(980px,100%);height:min(720px,100%);display:grid;grid-template-rows:auto 1fr auto;background:var(--dk2);border-radius:var(--rb);overflow:hidden}
.w3bh,.w3bf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px}
.w3bh b{font-size:16px}.w3bh span{display:block;font-size:13px;color:var(--mud)}
.w3box iframe{width:100%;height:100%;border:0;background:var(--dk)}
.w3x{font:600 14px/1 var(--f);background:var(--dk);color:#fff;border:1px solid var(--line);border-radius:6px;padding:10px 14px;cursor:pointer}
.w3go{color:#fff;background:var(--ac);text-decoration:none;font-weight:700;border-radius:6px;padding:11px 16px}
.w3wait{font-size:13px;color:var(--mud)}

/* липкая панель на телефоне */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;gap:8px;padding:10px var(--gutr) calc(10px + env(safe-area-inset-bottom,0px)) var(--gut);background:rgba(14,42,56,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .3s}
.dock a{flex:1;text-align:center;text-decoration:none;font-weight:700;padding:13px;border-radius:6px}
.dock .d1{background:var(--ac);color:#fff}.dock .d2{box-shadow:inset 0 0 0 1.5px var(--line);color:#fff}
.dock.on{transform:none}

@media (max-width:960px){
 .hero{min-height:0}
 .hero .nin{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:18px}
 .hero .txt{display:contents}.crumbs{order:0;margin:0}.hero h1{order:1}.stg{order:2}.hero .nld,.facts,.cta,.note{order:3}.hero .nld,.facts,.cta,.note{margin-top:0}
 .scene .shade,.scene.r .shade{background:linear-gradient(0deg,var(--dk) 0%,rgba(14,42,56,.9) 35%,rgba(14,42,56,.55) 60%,rgba(14,42,56,.35) 100%)}
 .opt,.opt.rev{grid-template-columns:minmax(0,1fr)}.opt.rev .melt{order:0}
 .melt.mr img,.melt.ml img{-webkit-mask:linear-gradient(0deg,transparent,#000 26%);mask:linear-gradient(0deg,transparent,#000 26%)}
 .book{grid-template-columns:minmax(0,1fr)}.book .melt{max-width:420px;aspect-ratio:4/3}
}
@media (max-width:760px){
 :root{--eh:clamp(70px,20vw,120px)}
 .dock{display:flex}
 .gal>button{flex-basis:62%}.gal.sm>button{flex-basis:38%}
 .spot{flex-basis:80%}
 .scene .tag{display:none}
 .fx-jmi{font-size:11px;padding:4px 9px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}.fx-jmi,.fx-on.lv{animation:none}}

/* экран перед фото: фон кончается над дорогой, ниже видно фото следующей сцены */
.ns.pre-photo{z-index:3}
.ns.light.pre-photo{background:linear-gradient(var(--lt),var(--lt)) 0 0/100% calc(100% - var(--eh) + 2px) no-repeat}
.ns.dark.pre-photo{background:linear-gradient(var(--dk),var(--dk)) 0 0/100% calc(100% - var(--eh) + 2px) no-repeat}
.scene.under-road{z-index:1}
.scene.has-road{padding-bottom:calc(clamp(56px,7vw,90px) + var(--eh))}
button.melt{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;color:inherit}
.opt .melt img{transition:transform .8s}
.opt .melt:hover img{transform:scale(1.03)}
.opts>.gal{margin-top:-18px}
.hero .stg{position:relative;z-index:2}
.hero .stg-hint,.hero .stg-line{color:#dbe9ee}
.hero .shade{background:linear-gradient(90deg,var(--dk) 0%,rgba(14,42,56,.92) 30%,rgba(14,42,56,.6) 55%,rgba(14,42,56,.45) 100%),linear-gradient(0deg,var(--dk) 0%,rgba(14,42,56,0) 26%),linear-gradient(180deg,rgba(14,42,56,.6) 0%,rgba(14,42,56,0) 18%)}
@media (max-width:960px){.hero .shade{background:linear-gradient(0deg,var(--dk) 0%,rgba(14,42,56,.88) 45%,rgba(14,42,56,.6) 100%)}}

/* список отелей «Где остановиться» */
.hcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,34px);margin-top:34px}
.hcard{display:flex;flex-direction:column;gap:10px;color:inherit;text-decoration:none}
.hcard .pic{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--rp);box-shadow:0 18px 40px -20px rgba(20,48,58,.5)}
.hcard .pic img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.hcard:hover .pic img{transform:scale(1.05)}
.hcard .pic i{position:absolute;left:12px;bottom:12px;font-style:normal;font-size:12.5px;font-weight:700;color:#fff;background:rgba(14,42,56,.72);backdrop-filter:blur(6px);padding:6px 10px;border-radius:4px}
.hcard .where{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acd)}
.hcard h3{font-size:clamp(21px,2vw,26px)}
.hcard p{margin:0;color:var(--mul);font-size:15px}
.hcard .lnk{align-self:flex-start;margin-top:4px}
.hsub{margin-top:clamp(48px,6vw,72px)}
@media (max-width:960px){.hcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.hcards{grid-template-columns:minmax(0,1fr)}}
/* v8.49: подпись бургер-меню разделов сайта */
.w3b{width:auto!important;min-width:48px;height:40px!important;padding:3px 7px!important;align-items:center;gap:3px!important}.w3b i{width:18px}.w3b::after{content:"Разделы";font:700 9px/1 Onest,system-ui,sans-serif;color:#fff;margin-top:1px}