/* «Русская баня на дровах» — вид. 19.10.2026, замысел — _ishodniki/ЗАМЫСЕЛ.md.
   Ночь и тёплое дерево её кадров, тауповые «таблички» её прайса и правил с белой обводкой, янтарь гирлянд, вода купели.
   Cormorant — заголовки и крупные цифры, Montserrat — её фирменный: текст, кнопки, цены. Поведение — premium.js. */

:root {
  --noch: #13100E; --kopot: #1C1815; --kopot2: #241E1A; --derevo: #2A1E16; --ozero: #0C1520;
  --taup: #75685F; --taup-gl: #4E4540; --shalfey: #6E7363;
  --krem: #F2ECE4; --bumaga: #FAF6F0;
  --yantar: #F2A94E; --yantar-svet: #FFC27A; --zhar: #D9822B; --voda: #4CC3F5; --kozha: #B8642E;
  --t: #F4EEE7; --t2: #B8ADA2; --t3: #8C8178;
  --tt: #231C17; --tt2: #5E5249; --tt3: #857869;
  --lin: rgba(255, 255, 255, .1); --lin-t: rgba(35, 28, 23, .13);
  --serif: "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --r: 18px;
  --shir: 1240px;
}

/* ---------------------------------------------------------------- основа */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--noch); }
body { margin: 0; background: var(--noch); color: var(--t); font: 400 16px/1.62 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
input, textarea { font: inherit; }
[hidden] { display: none !important; }
section[id], .shag { scroll-margin-top: 92px; }
.obertka { width: min(var(--shir), calc(100% - 48px)); margin-inline: auto; }

.metka { display: inline-flex; align-items: center; gap: 12px; font: 600 11.5px/1.3 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--yantar); margin-bottom: 18px; }
.metka::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.metka-temn { color: var(--kozha); }
.metka-svet { color: #F6EBDD; }
h2 { font: 400 clamp(38px, 4.6vw, 66px)/1.02 var(--serif); letter-spacing: -.005em; }
h2 em, h1 em { font-style: italic; }
.lid { font-size: 17px; line-height: 1.65; color: var(--t2); max-width: 600px; margin-top: 18px; }
.razdel { position: relative; padding: 120px 0; }
.razdel-zag { margin-bottom: 56px; }
.razdel-zag-shir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.razdel-zag-shir .lid { margin-top: 0; }

/* кнопки */
.knopka { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 13px 24px; border-radius: 999px; border: 1px solid transparent;
  font: 600 13px/1.2 var(--sans); letter-spacing: .09em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s; }
.knopka:active { transform: translateY(1px); }
.knopka-l { min-height: 58px; padding: 17px 32px; font-size: 13.5px; }
.knopka-yantar { background: var(--yantar); color: #1E140B; box-shadow: 0 10px 30px rgba(242, 169, 78, .28); }
.knopka-yantar:hover { background: var(--yantar-svet); box-shadow: 0 14px 38px rgba(242, 169, 78, .4); }
.knopka-steklo { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .32); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.knopka-steklo:hover { background: rgba(255, 255, 255, .16); }
.knopka-temn { background: var(--tt); color: var(--krem); }
.knopka-temn:hover { background: #3A2E26; }
.knopka-kontur { border-color: currentColor; background: transparent; }
.knopka-kontur:hover { background: rgba(127, 110, 98, .12); }
.knopka-krem { background: var(--bumaga); color: var(--tt); }
.knopka-krem:hover { background: #fff; }
.knopka:disabled { opacity: .45; cursor: default; box-shadow: none; }
.ssylka { background: none; border: 0; padding: 0; color: var(--yantar-svet); text-decoration: underline; text-underline-offset: 3px; font: inherit; }
.ssylka-strelka { display: inline-block; margin-top: 16px; font: 600 13px var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--yantar); text-decoration: none; }

/* появление — только когда движение разрешено */
.js-anim [data-poyav] { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1) var(--zaderzhka, 0ms), transform .9s cubic-bezier(.2, .7, .2, 1) var(--zaderzhka, 0ms); }
.js-anim [data-poyav].vidno { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- плашка демо */
.demo { position: relative; z-index: 60; background: #2B2118; color: #F1E3D1; font-size: 13.5px; line-height: 1.5; padding: 10px 56px 10px 20px; text-align: center; border-bottom: 1px solid rgba(242, 169, 78, .3); }
.demo #demoX { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); font-size: 20px; line-height: 1; }

/* ---------------------------------------------------------------- шапка */
.shapka { position: sticky; top: 0; z-index: 50; height: 80px; margin-bottom: -80px; display: flex; align-items: center; gap: 22px;
  padding: 0 max(24px, calc((100vw - 1340px) / 2)); transition: background .35s, box-shadow .35s; }
.shapka.skolzit, .shapka.menu-otkryto { background: rgba(17, 14, 12, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(242, 169, 78, .14); }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; flex-shrink: 0; }
.logo img { width: 34px; height: auto; }
.logo span { display: flex; flex-direction: column; line-height: 1.05; }
.logo b { font: 600 11.5px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.logo i { font: italic 400 19px/1.1 var(--serif); color: var(--yantar-svet); }
.menu { display: flex; gap: 26px; }
.menu a { font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: rgba(244, 238, 231, .8); padding: 8px 0; white-space: nowrap; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.menu a:hover, .menu a.tut { color: var(--yantar-svet); border-bottom-color: rgba(242, 169, 78, .6); }
.menu .menu-tel { display: none; }
.shapka-tel { font: 600 14px var(--sans); text-decoration: none; white-space: nowrap; }
.knopka-karta { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px 0 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .05);
  font: 500 12.5px var(--sans); white-space: nowrap; }
.knopka-karta:hover { border-color: var(--yantar); }
.knopka-karta b { color: var(--yantar-svet); font-weight: 700; }
.mini-karta { width: 30px; height: 20px; border-radius: 4px; background: linear-gradient(135deg, #8A7C72, #4E4540); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); position: relative; flex-shrink: 0; }
.mini-karta::after { content: ""; position: absolute; left: 5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .85); }
.shapka-bron { min-height: 42px; padding: 10px 20px; font-size: 12px; }
.burger { display: none; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: transparent; position: relative; }
.burger span, .burger span::before, .burger span::after { position: absolute; left: 50%; width: 18px; height: 1.5px; margin-left: -9px; background: currentColor; transition: transform .3s, opacity .3s; }
.burger span { top: 50%; }
.burger span::before, .burger span::after { content: ""; left: 0; margin-left: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.menu-otkryto .burger span { background: transparent; }
.menu-otkryto .burger span::before { transform: translateY(6px) rotate(45deg); }
.menu-otkryto .burger span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------------------------------------------------------------- 1. первый экран */
.geroy { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: 150px 0 64px; overflow: hidden; isolation: isolate; }
.geroy-fon { position: absolute; inset: 0; z-index: -2; background: #0B0907; }
.geroy-foto, .geroy-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.geroy-foto { object-position: 62% 50%; }
.js-anim .geroy-foto { animation: priblizh 28s cubic-bezier(.2, .6, .3, 1) both; }
@keyframes priblizh { from { transform: scale(1.14); } to { transform: scale(1.02); } }
.geroy-video { display: none; }
.geroy-ten { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(11, 9, 7, .86) 0%, rgba(11, 9, 7, .62) 38%, rgba(11, 9, 7, .12) 68%, rgba(11, 9, 7, .2) 100%),
              linear-gradient(0deg, rgba(11, 9, 7, .9) 0%, rgba(11, 9, 7, 0) 42%),
              linear-gradient(180deg, rgba(11, 9, 7, .6) 0%, rgba(11, 9, 7, 0) 24%); }
.geroy-in { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; align-items: end; }
.geroy-znak { width: 92px; height: auto; margin-bottom: 26px; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .45)); }
.nad { font: 600 12px/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--yantar-svet); margin-bottom: 18px; }
h1 { font: 300 clamp(54px, 7.2vw, 108px)/.94 var(--serif); letter-spacing: -.012em; }
h1 .h1-imya { display: block; font: 600 13px/1.4 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: rgba(244, 238, 231, .82); margin-bottom: 16px; }
h1 em { color: var(--yantar-svet); font-weight: 300; }
.geroy-pod { font-size: 18px; line-height: 1.6; color: rgba(244, 238, 231, .86); max-width: 560px; margin-top: 26px; }
.geroy-knopki { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.geroy-fakty { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 46px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .14); }
.geroy-fakty li { display: flex; flex-direction: column; }
.geroy-fakty b { font: 400 44px/1 var(--serif); color: #fff; }
.geroy-fakty span { font-size: 12.5px; letter-spacing: .04em; color: var(--t2); margin-top: 6px; }

/* табло «Свободно сегодня»: окно парной светится — свободно */
.tablo { background: rgba(18, 14, 11, .58); border: 1px solid rgba(255, 255, 255, .14); border-radius: 24px; padding: 22px 22px 18px; -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.tablo-verh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.tablo-verh b { font: 500 26px/1.1 var(--serif); }
.tablo-verh span { font-size: 12.5px; color: var(--t2); text-transform: lowercase; }
.tablo-setka { display: grid; gap: 7px; }
.tablo-ryad { display: grid; grid-template-columns: 92px repeat(var(--n, 14), minmax(0, 1fr)); gap: 4px; align-items: center; }
.tablo-ryad.chasy-ryad span { font-size: 10px; color: var(--t3); text-align: center; }
.tablo-ryad .imya { font: 500 13px/1.2 var(--sans); color: var(--t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; }
.okno { height: 30px; border-radius: 6px; border: 0; padding: 0; background: rgba(255, 255, 255, .05); position: relative; }
.okno.svob { background: linear-gradient(180deg, #FAC27A, #E2912F); box-shadow: 0 0 14px rgba(242, 169, 78, .42), inset 0 1px 0 rgba(255, 255, 255, .45); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.okno.svob:hover, .okno.svob:focus-visible { transform: translateY(-2px); box-shadow: 0 0 22px rgba(255, 194, 122, .75), inset 0 1px 0 rgba(255, 255, 255, .55); outline: none; }
.okno.zan { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 4px, rgba(255, 255, 255, .02) 4px 8px); cursor: default; }
.okno.proshlo, .okno.zakr { background: rgba(255, 255, 255, .025); cursor: default; }
.tablo-zhdem { font-size: 14px; color: var(--t2); padding: 20px 0; }
.tablo-podp { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 16px; font-size: 12.5px; color: var(--t2); }
.tablo-podp a { color: var(--yantar-svet); text-decoration: none; white-space: nowrap; font-weight: 600; }

/* ---------------------------------------------------------------- 2. три бани */
.bani { background: var(--fon-bani, #1B1917); transition: background-color 1s ease; padding-bottom: 0; }
.bani .razdel-zag { max-width: 760px; }
.dveri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.dver { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 22px; overflow: hidden; background: #000; text-align: left; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); transition: box-shadow .4s, transform .4s; }
.dver img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; filter: brightness(.62) saturate(.95); transition: filter .6s, transform 1.2s cubic-bezier(.2, .6, .2, 1); }
.dver::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 6, 5, .92) 0%, rgba(8, 6, 5, .1) 55%, rgba(8, 6, 5, .35) 100%); z-index: 1; }
.dver:hover img, .dver.tut img { filter: brightness(.95) saturate(1.05); transform: scale(1.035); }
.dver.tut { box-shadow: 0 0 0 2px var(--yantar), 0 26px 60px rgba(0, 0, 0, .45); }
.dver-nomer { position: absolute; top: 20px; left: 24px; z-index: 2; font: italic 300 52px/1 var(--serif); color: rgba(255, 255, 255, .78); }
.dver-tekst { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 2; }
.dver-tekst b { display: block; font: 400 38px/1.05 var(--serif); color: #fff; }
.dver-tekst small { display: block; font: 600 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--yantar-svet); margin-top: 8px; }
.dver-tekst span { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 13.5px; color: rgba(244, 238, 231, .86); }
.dver-tekst span em { font-style: normal; font-weight: 600; color: #fff; }
.dver-otkr { position: absolute; top: 24px; right: 22px; z-index: 2; font: 600 10.5px var(--sans); letter-spacing: .18em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: var(--yantar); color: #1E140B; opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s; }
.dver.tut .dver-otkr { opacity: 1; transform: none; }

.banya-panel { padding: 56px 0 120px; }
.bp-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.albom { position: relative; }
.al-lenta { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; scrollbar-width: none; border-radius: 22px; }
.al-lenta::-webkit-scrollbar { display: none; }
.al-lenta figure { flex: 0 0 100%; width: 100%; scroll-snap-align: start; }
.al-lenta img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; cursor: zoom-in; background: #0B0907; }
.al-lenta figcaption { font-size: 14px; color: var(--t2); margin-top: 12px; }
.al-niz { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; }
.al-tochki { display: flex; flex-wrap: wrap; gap: 6px; }
.al-tochki button { width: 22px; height: 3px; border-radius: 2px; border: 0; padding: 0; background: rgba(255, 255, 255, .22); transition: background .3s, width .3s; }
.al-tochki button.tut { background: var(--yantar); width: 34px; }
.strelki { display: flex; gap: 10px; flex-shrink: 0; }
.strelki button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); background: transparent; font-size: 18px; transition: background .2s, border-color .2s, opacity .2s; }
.strelki button:hover { background: rgba(255, 255, 255, .1); border-color: var(--yantar); }
.v-nachale ~ * [data-lenta-nazad], .strelki-temn button { }
.strelki-temn button { border-color: rgba(35, 28, 23, .3); color: var(--tt); }
.strelki-temn button:hover { background: rgba(35, 28, 23, .06); border-color: var(--tt); }
.bp-info .bp-nomer { font: italic 300 22px var(--serif); color: var(--yantar-svet); }
.bp-info h3 { font: 400 clamp(40px, 4.2vw, 58px)/1.02 var(--serif); margin-top: 4px; }
.bp-moto { font: italic 400 24px/1.3 var(--serif); color: var(--yantar-svet); margin-top: 8px; }
.bp-text { font-size: 16px; color: var(--t2); margin-top: 18px; }
.bp-fakty { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.bp-fakty li { font-size: 13px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); }
.bp-ceny { margin-top: 28px; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); padding: 8px 20px; }
.bp-ceny div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px dashed rgba(255, 255, 255, .12); }
.bp-ceny div:last-child { border-bottom: 0; }
.bp-ceny span { font-size: 14px; color: var(--t2); }
.bp-ceny span small { display: block; font-size: 12px; color: var(--t3); }
.bp-ceny b { font: 600 18px var(--sans); white-space: nowrap; }
.bp-ceny b i { font-style: normal; font-weight: 400; font-size: 13px; color: var(--t3); }
.bp-ceny .tut b { color: var(--yantar-svet); }
.bp-ceny .tut span::after { content: "сейчас"; margin-left: 8px; font: 600 10px var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: var(--yantar); color: #1E140B; vertical-align: 2px; }
.bp-snoska { font-size: 13px; color: var(--t3); margin-top: 12px; }
.bp-knopki { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---------------------------------------------------------------- 3. прайс — тауповая табличка */
.prays { background: var(--krem); color: var(--tt); }
.tablichka { position: relative; background: var(--taup); color: #fff; border-radius: 28px; padding: 46px 48px 40px; box-shadow: 0 40px 90px rgba(78, 69, 64, .35); }
.tablichka::before { content: ""; position: absolute; inset: 14px; border: 1.5px solid rgba(255, 255, 255, .78); border-radius: 18px; pointer-events: none; }
.tablichka-verh { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: center; margin-bottom: 30px; }
.tablichka-verh img { width: 56px; height: auto; }
.tablichka-verh .metka { margin-bottom: 8px; }
.tablichka-verh h2 { font-size: clamp(44px, 5vw, 70px); }
.tablichka-lid { font-size: 15px; color: rgba(255, 255, 255, .86); }
.prays-vkl { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; padding-left: 30%; }
.prays-vkl button { border: 1px solid rgba(255, 255, 255, .45); background: transparent; border-radius: 14px; padding: 12px 10px; text-align: center; color: #fff; transition: background .25s, color .25s; }
.prays-vkl button b { display: block; font: 600 12.5px/1.25 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.prays-vkl button small { display: block; font-size: 11.5px; opacity: .8; margin-top: 3px; }
.prays-vkl button.tut { background: var(--bumaga); color: var(--tt); border-color: var(--bumaga); }
.prays-vkl button i { display: inline-block; font: 600 9.5px var(--sans); font-style: normal; letter-spacing: .14em; text-transform: uppercase; margin-top: 6px; padding: 2px 7px; border-radius: 999px; background: var(--yantar); color: #1E140B; }
.prays-tab { position: relative; }
.pt-ryad { display: grid; grid-template-columns: 30% repeat(4, minmax(0, 1fr)); gap: 8px; align-items: center; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .28); }
.pt-imya b { display: block; font: 500 30px/1.05 var(--serif); }
.pt-imya small { display: block; font-size: 12.5px; opacity: .85; margin-top: 5px; }
.pt-cena { text-align: center; font: 500 21px/1.2 var(--sans); padding: 14px 6px; border-radius: 14px; transition: background .3s, color .3s, transform .3s; }
.pt-cena small { display: block; font-size: 11px; font-weight: 500; opacity: .75; margin-top: 2px; }
.prays-tab[data-rezhim="utro"] .k-utro, .prays-tab[data-rezhim="vecher"] .k-vecher,
.prays-tab[data-rezhim="vyh"] .k-vyh, .prays-tab[data-rezhim="prazd"] .k-prazd { background: var(--bumaga); color: var(--tt); font-weight: 700; }
.pt-cena.utochn { font-size: 15px; font-weight: 500; }
.prays-snoski { position: relative; margin-top: 22px; display: grid; gap: 6px; }
.prays-snoski li { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .88); padding-left: 16px; position: relative; }
.prays-snoski li::before { content: "*"; position: absolute; left: 2px; top: 0; color: var(--yantar-svet); font-weight: 700; }
.dopy { margin-top: 64px; }
.dopy-zag { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.dopy-zag .metka { margin-bottom: 8px; }
.dopy-zag h3 { font: 400 46px/1 var(--serif); }
.dopy-setka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 40px; }
.dop-gruppa h4 { font: 600 11.5px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--kozha); margin-bottom: 10px; }
.dop-str { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; font-size: 15px; }
.dop-str span { flex-shrink: 1; }
.dop-str span small { display: block; font-size: 12.5px; color: var(--tt3); }
.dop-str i { flex: 1; border-bottom: 1px dotted rgba(35, 28, 23, .35); transform: translateY(-4px); min-width: 16px; }
.dop-str b { font-weight: 600; white-space: nowrap; }

/* ---------------------------------------------------------------- 4. бронь */
.bron { background: radial-gradient(1200px 600px at 85% -10%, rgba(242, 169, 78, .1), transparent 60%), var(--noch); }
.bron-setka { display: grid; grid-template-columns: minmax(0, 1fr) 392px; gap: 48px; align-items: start; }
.shag { padding: 30px 0; border-top: 1px solid var(--lin); }
.shag:first-child { border-top: 0; padding-top: 0; }
.shag-zag { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.shag-zag i { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--yantar); color: var(--yantar); display: grid; place-items: center; font: 600 14px var(--sans); font-style: normal; }
.shag-zag h3 { font: 400 32px/1 var(--serif); }
.shag-zag span { font-size: 13px; color: var(--t3); margin-left: auto; }
.bani-vybor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bv { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--lin); border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, .03); transition: border-color .25s, box-shadow .25s, background .25s; }
.bv img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; filter: brightness(.82); transition: filter .3s; }
.bv .bv-t { display: block; padding: 12px 14px 14px; }
.bv b { display: block; font: 500 22px/1.1 var(--serif); }
.bv small { display: block; font-size: 12px; color: var(--t3); margin-top: 4px; }
.bv em { display: block; font-style: normal; font: 600 13px var(--sans); color: var(--yantar-svet); margin-top: 8px; }
.bv:hover { border-color: rgba(242, 169, 78, .5); }
.bv.tut { border-color: var(--yantar); box-shadow: 0 0 0 1px var(--yantar), 0 16px 40px rgba(242, 169, 78, .14); background: rgba(242, 169, 78, .07); }
.bv.tut img { filter: none; }

.dni { position: relative; display: flex; align-items: stretch; gap: 8px; }
.dni-str { flex: 0 0 34px; border: 1px solid var(--lin); border-radius: 12px; background: transparent; font-size: 22px; color: var(--t2); }
.dni-str:hover { border-color: var(--yantar); color: var(--yantar); }
.dni-lenta { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px; }
.dni-lenta::-webkit-scrollbar { display: none; }
.den { flex: 0 0 74px; width: 74px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 10px; border-radius: 14px; border: 1px solid var(--lin); background: rgba(255, 255, 255, .03); transition: background .2s, border-color .2s; }
.den small { font-size: 11.5px; color: var(--t3); text-transform: lowercase; }
.den b { font: 500 30px/1 var(--serif); }
.den span { font-size: 10.5px; color: var(--t2); white-space: nowrap; }
.den .polosa { width: 46px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .12); margin-top: 5px; overflow: hidden; }
.den .polosa i { display: block; height: 100%; background: var(--yantar); }
.den.vyh b { color: var(--yantar-svet); }
.den.prazd b { color: #F0A27A; }
.den.prazd span { color: #F0A27A; }
.den.pusto { opacity: .4; }
.den:hover { border-color: rgba(242, 169, 78, .5); }
.den.tut { background: var(--yantar); border-color: var(--yantar); color: #1E140B; }
.den.tut small, .den.tut span, .den.tut b { color: #1E140B; }
.den.tut .polosa { background: rgba(30, 20, 11, .2); }
.den.tut .polosa i { background: #1E140B; }
.den-mes { flex: 0 0 auto; display: flex; align-items: center; padding: 0 4px; writing-mode: vertical-rl; transform: rotate(180deg); font: 600 11px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--t3); }

.chasy { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; transition: opacity .2s; }
.chas { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 66px; padding: 8px 2px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .035); transition: background .2s, border-color .2s, transform .2s; }
.chas b { font: 600 15px/1 var(--sans); }
.chas small { font-size: 11.5px; color: var(--t2); }
.chas.svob:hover { border-color: var(--yantar); background: rgba(242, 169, 78, .1); }
.chas.t-utro small { color: #8FD3F2; }
.chas.t-vyh small { color: var(--yantar-svet); }
.chas.t-prazd small { color: #F0A27A; }
.chas.zan, .chas.proshlo, .chas.zakr { cursor: default; border-color: transparent; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 5px, rgba(255, 255, 255, .015) 5px 10px); }
.chas.zan b, .chas.proshlo b, .chas.zakr b { color: var(--t3); font-weight: 500; }
.chas.proshlo { opacity: .45; }
.chas.malo { border-style: dashed; }
.chas.vybran, .chas.svob.vybran:hover { background: linear-gradient(180deg, #FAC27A, #E7973A); border-color: transparent; color: #1E140B; box-shadow: 0 8px 26px rgba(242, 169, 78, .3); }
.chas.vybran small { color: rgba(30, 20, 11, .78); }
/* час в подарок за отзыв — последний в брони, «лентой» */
.chas.vybran.podarok, .chas.svob.vybran.podarok:hover { background: repeating-linear-gradient(135deg, #FFE2BC 0 7px, #F7B865 7px 14px); box-shadow: 0 8px 26px rgba(242, 169, 78, .22); }
.chas.vybran.podarok small { color: #1E140B; font-weight: 700; }
.legenda { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 12.5px; color: var(--t2); }
.legenda span { display: inline-flex; align-items: center; gap: 7px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; }
.vremya-itog { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding: 16px 20px; border-radius: 16px; background: rgba(242, 169, 78, .08); border: 1px solid rgba(242, 169, 78, .3); }
.vremya-itog small { display: block; font-size: 12.5px; color: var(--t2); }
.vremya-itog b { font: 500 30px/1.1 var(--serif); }
.pol-sdvig { display: block; margin-top: 6px; padding: 2px 0; border: 0; background: none; font: 500 13px var(--sans); color: var(--yantar-svet); text-decoration: underline dotted; text-underline-offset: 4px; cursor: pointer; }
.pol-sdvig:hover { color: var(--yantar); }
.pm { display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; padding: 4px; }
.pm button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .08); font-size: 20px; line-height: 1; }
.pm button:hover:not(:disabled) { background: var(--yantar); color: #1E140B; }
.pm button:disabled { opacity: .3; cursor: default; }
.pm output { min-width: 74px; text-align: center; font: 600 15px var(--sans); }
.podskazka { font-size: 13.5px; color: var(--t2); margin-top: 12px; }
.podskazka.oshibka { color: #FFB38A; }
.gosti { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.gosti .pm output { min-width: 54px; font-size: 18px; }
.figurki { display: flex; flex-wrap: wrap; gap: 5px; max-width: 420px; }
.figurki i { width: 12px; height: 22px; border-radius: 6px 6px 3px 3px; background: rgba(255, 255, 255, .14); position: relative; }
.figurki i::before { content: ""; position: absolute; left: 1px; right: 1px; top: -9px; height: 10px; border-radius: 50%; background: inherit; }
.figurki i.on { background: var(--yantar); }
.figurki i.dop { background: var(--zhar); }
.dob-gruppa + .dob-gruppa { margin-top: 18px; }
.dob-gruppa h4 { font: 600 11px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--t3); margin-bottom: 8px; }
.dob-spisok { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dob { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--lin); background: rgba(255, 255, 255, .03); text-align: left; transition: border-color .2s, background .2s; min-width: 0; }
.dob .gal { flex: 0 0 22px; height: 22px; border-radius: 7px; border: 1.5px solid rgba(255, 255, 255, .35); display: grid; place-items: center; font-size: 13px; color: transparent; transition: background .2s, border-color .2s; }
.dob .dob-t { flex: 1; min-width: 0; }
.dob .dob-t b { display: block; font: 500 14.5px/1.3 var(--sans); }
.dob .dob-t small { display: block; font-size: 12px; color: var(--t3); line-height: 1.4; margin-top: 2px; }
.dob .dob-t em { display: block; font-style: normal; font: 600 13px var(--sans); color: var(--yantar-svet); margin-top: 4px; }
.dob .pochemu { display: block; font-size: 12px; color: #FFB38A; margin-top: 3px; }
.dob.on { border-color: rgba(242, 169, 78, .7); background: rgba(242, 169, 78, .08); }
.dob.on .gal { background: var(--yantar); border-color: var(--yantar); color: #1E140B; }
.dob.nelzya { opacity: .55; }
.dob.vkl { opacity: 1; cursor: default; border-style: dashed; }
.dob .pm { padding: 2px; flex-shrink: 0; }
.dob .pm button { width: 30px; height: 30px; font-size: 17px; }
.dob .pm output { min-width: 26px; font-size: 14px; }
.pravila-bron { margin-top: 10px; padding: 22px 24px; border-radius: 18px; border: 1px dashed rgba(255, 255, 255, .16); display: grid; gap: 8px; }
.pravila-bron p { font-size: 13.5px; color: var(--t2); padding-left: 18px; position: relative; }
.pravila-bron p::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--yantar); opacity: .8; }

/* чек — бумага на ночном */
.chek { position: sticky; top: 100px; background: var(--bumaga); color: var(--tt); border-radius: 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); overflow: hidden; }
.chek-verh { padding: 24px 26px 18px; background: var(--krem); border-bottom: 1px dashed rgba(35, 28, 23, .22); }
.chek-verh small { display: block; font: 600 10.5px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--kozha); }
.chek-verh b { display: block; font: 500 32px/1.08 var(--serif); margin-top: 6px; }
.chek-verh span { display: block; font-size: 13.5px; color: var(--tt2); margin-top: 6px; }
.chek-telo { padding: 18px 26px 24px; }
.chek-pusto { font-size: 14.5px; color: var(--tt2); padding: 10px 0 16px; }
.chek-str { display: flex; align-items: baseline; gap: 6px; font-size: 13.5px; padding: 5px 0; }
.chek-str span { color: var(--tt2); }
.chek-str i { flex: 1; border-bottom: 1px dotted rgba(35, 28, 23, .3); transform: translateY(-4px); min-width: 10px; }
.chek-str b { font-weight: 600; white-space: nowrap; }
.chek-str.minus b { color: #2F7D4F; }
.chek-itog { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 14px; border-top: 1.5px solid var(--tt); }
.chek-itog span { font: 600 12px var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.chek-itog b { font: 500 42px/1 var(--serif); }
.chek-prim { font-size: 12.5px; color: var(--tt3); margin-top: 8px; }
.chek-karta { margin: 16px 0; padding: 14px 16px; border-radius: 14px; background: var(--taup); color: #fff; font-size: 13.5px; line-height: 1.5; }
.chek-karta b { color: #FFE2BC; }
.chek-karta .ssylka { color: #FFE2BC; }
.chek-novichok { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255, 226, 188, .35); }
.chek-str.podarok b { color: var(--kozha); font-weight: 700; }
.chek-podarok { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1.5px dashed rgba(255, 226, 188, .45); cursor: pointer; transition: background .2s, border-color .2s; }
.chek-podarok:hover { border-color: #FFE2BC; }
.chek-podarok .gal { flex: 0 0 22px; height: 22px; border-radius: 7px; border: 1.5px solid rgba(255, 255, 255, .55); display: grid; place-items: center; font-size: 13px; color: transparent; transition: background .2s, border-color .2s; }
.chek-podarok b { display: block; font: 600 14px/1.3 var(--sans); }
.chek-podarok small { display: block; font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, .8); margin-top: 2px; }
.chek-podarok.on { border-style: solid; border-color: var(--yantar); background: rgba(242, 169, 78, .16); }
.chek-podarok.on .gal { background: var(--yantar); border-color: var(--yantar); color: #1E140B; }
.chek-podarok.nelzya small { color: #FFC9A8; }
.chek-podarok:focus-visible { outline: 2px solid #FFE2BC; outline-offset: 2px; }
.bonus-polzunok { margin-top: 10px; }
.bonus-polzunok label { display: flex; justify-content: space-between; font-size: 12.5px; }
.bonus-polzunok input { width: 100%; accent-color: var(--yantar); margin-top: 6px; }
.chek .knopka { width: 100%; margin-top: 4px; }
.chek-mel { font-size: 12px; color: var(--tt3); margin-top: 12px; line-height: 1.5; }
.niz-chek { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 18px; background: rgba(250, 246, 240, .97); color: var(--tt); box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
.niz-chek small { display: block; font-size: 11.5px; color: var(--tt2); }
.niz-chek b { font: 500 26px/1 var(--serif); }
.niz-chek .knopka { min-height: 46px; padding: 12px 18px; }

/* ---------------------------------------------------------------- шторка оформления и кабинет */
.fon-zatemn { position: fixed; inset: 0; z-index: 90; background: rgba(8, 6, 5, .62); opacity: 0; pointer-events: none; transition: opacity .3s; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.fon-zatemn.on { opacity: 1; pointer-events: auto; }
/* закрытая — ещё и невидима: кнопки внутри не ловят Tab, длинный снимок страницы её не показывает */
.shtorka, .kabinet { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(520px, 100%); display: flex; flex-direction: column; transform: translateX(104%); visibility: hidden; transition: transform .45s cubic-bezier(.2, .7, .2, 1), visibility 0s .45s; box-shadow: -30px 0 80px rgba(0, 0, 0, .4); }
.shtorka.on, .kabinet.on { transform: none; visibility: visible; transition-delay: 0s; }
.shtorka { background: var(--bumaga); color: var(--tt); }
.kabinet { background: #15110F; color: var(--t); width: min(560px, 100%); }
.sht-verh, .kab-verh { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--lin-t); }
.kab-verh { border-bottom-color: var(--lin); }
.sht-verh b { display: block; font: 500 28px/1.1 var(--serif); }
.sht-verh small { display: block; font-size: 13px; color: var(--tt2); margin-top: 3px; }
.kab-verh div { display: flex; align-items: center; gap: 12px; }
.kab-verh img { width: 26px; height: auto; }
.kab-verh b { font: 500 26px var(--serif); }
.zakryt { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; border: 1px solid currentColor; background: transparent; font-size: 22px; line-height: 1; opacity: .7; }
.zakryt:hover { opacity: 1; }
.sht-telo, .kab-telo { flex: 1; overflow-y: auto; padding: 22px 24px 40px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* «Написать нам» (20.10.2026): на компьютере — карточка над кнопкой внизу справа, на телефоне — шторка снизу */
.napisat-knopka { position: fixed; right: max(24px, calc((100vw - 1340px) / 2)); bottom: 24px; z-index: 45; display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 22px 0 18px;
  border-radius: 999px; border: 1px solid rgba(242, 169, 78, .45); background: rgba(17, 14, 12, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--t);
  font: 600 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); transition: border-color .2s, transform .2s, opacity .3s; }
.napisat-knopka:hover { border-color: var(--yantar); transform: translateY(-2px); }
.napisat-knopka svg, .niz-ikonka svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: var(--yantar-svet); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.zamok .napisat-knopka, .napisat-knopka.pod-nim { opacity: 0; pointer-events: none; }
.napisat-knopka.pod-nim { transform: translateY(8px); }
.napisat { position: fixed; right: max(24px, calc((100vw - 1340px) / 2)); bottom: 88px; z-index: 100; width: min(380px, calc(100% - 32px)); background: #15110F; color: var(--t);
  border: 1px solid rgba(242, 169, 78, .22); border-radius: 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(14px); visibility: hidden;
  transition: opacity .3s, transform .4s cubic-bezier(.2, .7, .2, 1), visibility 0s .4s; }
.napisat.on { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.nap-verh { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px 16px; border-bottom: 1px solid var(--lin); }
.nap-verh b { display: block; font: 500 27px/1.1 var(--serif); }
.nap-verh small { display: block; font-size: 13px; color: var(--t2); margin-top: 4px; }
.nap-spisok { display: grid; gap: 6px; padding: 12px 12px 14px; }
.nap-ryad { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1);
  text-decoration: none; color: var(--t); transition: border-color .2s, background .2s, color .2s; }
.nap-ryad b { font: 600 13px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.nap-ryad small { font-size: 13px; color: var(--t2); text-align: right; }
.nap-ryad:hover, .nap-ryad:focus-visible { border-color: var(--yantar); background: rgba(242, 169, 78, .06); }
.nap-ryad:hover b, .nap-ryad:focus-visible b { color: var(--yantar-svet); }
.nap-tel { margin-top: 6px; border-style: dashed; }
.sht-svodka { display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; background: var(--krem); font-size: 14px; color: var(--tt2); margin-bottom: 20px; }
.sht-svodka b { color: var(--tt); }
.forma { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.forma .shir, .zayavka .shir { grid-column: 1 / -1; }
.pole { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pole span { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--tt2); }
.pole input, .pole textarea { width: 100%; min-height: 50px; padding: 13px 15px; border-radius: 12px; border: 1px solid rgba(35, 28, 23, .2); background: #fff; color: var(--tt); font-size: 16px; outline: none; transition: border-color .2s, box-shadow .2s; }
.pole textarea { min-height: 96px; resize: vertical; }
.pole input:focus, .pole textarea:focus { border-color: var(--kozha); box-shadow: 0 0 0 3px rgba(184, 100, 46, .15); }
.galka { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--tt2); cursor: pointer; }
.galka input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--kozha); flex-shrink: 0; }
.galka b { color: var(--tt); }
.sht-oshibka { color: #B23A1E; font-size: 14px; min-height: 1px; margin: 12px 0 0; }
.shtorka .knopka-l { width: 100%; margin-top: 16px; }
.soglasie { font-size: 12px; color: var(--tt3); margin-top: 12px; line-height: 1.5; }
.gotovo { text-align: center; padding: 10px 0; }
.gotovo .galka-krug { width: 76px; height: 76px; margin: 6px auto 16px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; background: var(--taup); color: #fff; box-shadow: 0 0 0 8px rgba(117, 104, 95, .15); }
.gotovo h3 { font: 500 36px/1.1 var(--serif); }
.gotovo p { font-size: 15px; color: var(--tt2); margin-top: 10px; }
.gotovo-karta { display: flex; gap: 14px; align-items: center; text-align: left; margin-top: 20px; padding: 16px; border-radius: 16px; background: var(--taup); color: #fff; font-size: 14px; }
.gotovo-karta b { color: #FFE2BC; }
.gotovo p.gotovo-podarok { color: var(--kozha); font-weight: 600; }
.gotovo-knopki { display: grid; gap: 10px; margin-top: 22px; }
.gotovo h3 span { white-space: nowrap; }
.gotovo-perevod { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; text-align: left; margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: var(--krem); border-left: 3px solid var(--yantar); font-size: 14px; color: var(--tt2); }
.gotovo-perevod > b { font: 600 15.5px/1.35 var(--sans); color: var(--tt); }
.perevod-nomer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 8px 8px 14px; border-radius: 12px; background: var(--bumaga); box-shadow: inset 0 0 0 1px var(--lin-t); }
.perevod-nomer b { font: 600 19px/1.2 var(--sans); letter-spacing: .02em; color: var(--tt); font-variant-numeric: tabular-nums; white-space: nowrap; }
.perevod-nomer .knopka, .perevod-chek .knopka { min-height: 38px; padding: 8px 16px; font-size: 12px; color: var(--tt); }
.perevod-chek { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.gotovo-perevod small { font-size: 12.5px; line-height: 1.45; color: var(--tt3); }
.kruzhok { width: 40px; height: 40px; margin: 40px auto; border-radius: 50%; border: 3px solid rgba(127, 110, 98, .25); border-top-color: var(--yantar); animation: krug 1s linear infinite; }
@keyframes krug { to { transform: rotate(360deg); } }

/* кабинет гостя */
.kab-telo .pole span { color: var(--t2); }
.kab-telo .pole input { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: var(--t); }
.kab-telo .pole input:focus { border-color: var(--yantar); box-shadow: 0 0 0 3px rgba(242, 169, 78, .18); }
.kab-telo .galka { color: var(--t2); }
.kab-telo .galka b { color: var(--t); }
.kab-telo .galka input { accent-color: var(--yantar); }
.kab-telo .sht-oshibka { color: #FFB38A; }
.kab-telo .soglasie { color: var(--t3); }
.kab-telo .knopka-l { width: 100%; margin-top: 16px; }
.kab-zag { font: 500 30px/1.1 var(--serif); margin: 20px 0 6px; }
.kab-lid { font-size: 14.5px; color: var(--t2); margin-bottom: 20px; }
.kab-kod { letter-spacing: .6em; text-align: center; font-size: 26px !important; font-weight: 600; }
.kab-demo { font-size: 13.5px; padding: 12px 14px; border-radius: 12px; background: rgba(76, 195, 245, .1); border: 1px solid rgba(76, 195, 245, .35); color: #BDE9FB; margin-bottom: 14px; }
.kab-demo b { color: #fff; letter-spacing: .2em; }
.kab-alt { text-align: center; margin-top: 18px; font-size: 13.5px; color: var(--t3); }
.kab-forma { display: grid; gap: 14px; }
.kab-forma .galka, .kab-forma .sht-oshibka, .kab-forma .soglasie { margin-top: 0; }
.kab-forma .knopka-l { margin-top: 2px; }
.kab-telo h4 { font: 600 11px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--t3); margin: 30px 0 12px; }
.kab-primer { font-size: 13.5px; padding: 12px 14px; border-radius: 12px; background: rgba(242, 169, 78, .1); border: 1px solid rgba(242, 169, 78, .35); color: var(--t2); margin-bottom: 14px; }
.kab-primer b { color: var(--yantar-svet); }
/* 19.10.2026: вход через бота бани — ВКонтакте и MAX вместо СМС */
.kab-boty { display: grid; gap: 10px; min-height: 58px; }
.kab-boty .kruzhok { margin: 8px auto; }
.kab-telo .kab-boty .knopka-l { margin-top: 0; }
.knopka-vk { background: #0077FF; color: #fff; box-shadow: 0 10px 28px rgba(0, 119, 255, .28); }
.knopka-vk:hover { background: #1A86FF; }
.knopka-max { background: linear-gradient(120deg, #2E5BFF, #7B3FF2); color: #fff; box-shadow: 0 10px 28px rgba(91, 76, 255, .3); }
.knopka-max:hover { filter: brightness(1.08); }
.kab-kod-bot { text-align: center; font-size: 13px; color: var(--t3); margin-top: 2px; }
.kab-kod-bot b, .kab-zhdem b { color: var(--yantar-svet); letter-spacing: .08em; }
.kab-zhdem { text-align: center; padding: 4px 0; font-size: 14.5px; color: var(--t2); }
.kab-zhdem .kruzhok { margin: 4px auto 14px; }
.kab-zhdem p + p { margin-top: 8px; font-size: 13px; color: var(--t3); }
.kab-op .knopka { min-height: 36px; padding: 8px 16px; font-size: 12px; text-decoration: none; }
.gotovo p.gotovo-bot { font-size: 13.5px; margin-top: 14px; opacity: .85; }
.stupeni { margin-top: 18px; }
.stupeni-ryad { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 6px; }
.stupeni-ryad i { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); }
.stupeni-ryad i.proyden { background: rgba(242, 169, 78, .55); }
.stupeni-ryad i.tut { background: var(--yantar); box-shadow: 0 0 12px rgba(242, 169, 78, .6); }
.stupeni-podp { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 6px; margin-top: 8px; font-size: 11.5px; color: var(--t3); }
.stupeni-podp b { display: block; color: var(--t); font-size: 12.5px; }
.stupeni-sled { font-size: 13.5px; color: var(--t2); margin-top: 12px; }
.stupeni-sled b { color: var(--yantar-svet); }
.kab-dr { margin-top: 20px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(135deg, rgba(242, 169, 78, .14), rgba(184, 100, 46, .1)); border: 1px solid rgba(242, 169, 78, .3); }
.kab-dr b { font: 500 22px/1.2 var(--serif); }
.kab-dr p { font-size: 13.5px; color: var(--t2); margin-top: 6px; }
.kab-dr .ryad { display: flex; gap: 8px; margin-top: 12px; }
.kab-dr .ryad .pole { flex: 1; }
.kab-bron { padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--lin); margin-bottom: 10px; }
.kab-bron .v { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--t3); }
.kab-bron .st { padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--t2); }
.kab-bron .st.zel { background: rgba(76, 195, 245, .16); color: #BDE9FB; }
.kab-bron .st.zhdet { background: rgba(242, 169, 78, .18); color: var(--yantar-svet); }
.kab-bron > b { display: block; font: 500 24px/1.15 var(--serif); margin-top: 8px; }
.kab-bron p { font-size: 13.5px; color: var(--t2); margin-top: 4px; }
.kab-bron .prosba { margin-top: 10px; font-size: 13px; color: var(--yantar-svet); }
.kab-bron .podarok { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--yantar-svet); }
/* час в подарок за отзыв — «купон» с пунктиром, чтобы не спорить с блоком дня рождения */
.kab-podarok { margin-top: 14px; padding: 16px 18px; border-radius: 16px; border: 1.5px dashed rgba(242, 169, 78, .55); background: rgba(242, 169, 78, .05); }
.kab-podarok b { font: 500 22px/1.2 var(--serif); }
.kab-podarok p { font-size: 13.5px; color: var(--t2); margin-top: 6px; }
.kab-podarok .ryad { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kab-podarok p.kab-podarok-zhdem { color: var(--yantar-svet); font-weight: 600; }
.kab-bron .knopki { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kab-bron .knopki button { min-height: 38px; padding: 8px 14px; font-size: 11.5px; }
.kab-prosba-forma { margin-top: 12px; display: grid; gap: 8px; }
.kab-prosba-forma textarea { width: 100%; min-height: 70px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: var(--t); font-size: 15px; }
.kab-op { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--lin); font-size: 14px; }
.kab-op small { display: block; font-size: 12px; color: var(--t3); }
.kab-op b { white-space: nowrap; font-weight: 600; color: var(--t2); }
.kab-op b.plus { color: var(--yantar-svet); }
.kab-pusto { font-size: 14px; color: var(--t3); }
.vybor { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vybor button { min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: transparent; font-size: 13.5px; }
.vybor button.tut { background: var(--yantar); border-color: var(--yantar); color: #1E140B; font-weight: 600; }
.kab-niz { display: grid; gap: 10px; margin-top: 30px; }

/* карта гостя — тауповая, её знак, наклон за пальцем */
.karta-stsena { perspective: 1100px; display: flex; justify-content: center; padding: 10px 0; }
.karta3d { --rx: 6deg; --ry: -14deg; --bx: 50%; --by: 30%; position: relative; width: min(420px, 100%); aspect-ratio: 1.586; border-radius: 22px; color: #fff; overflow: hidden;
  background: radial-gradient(120% 90% at 10% 0%, #9A8C81 0%, #75685F 45%, #4E4540 100%); box-shadow: 0 30px 70px rgba(35, 28, 23, .45), inset 0 0 0 1px rgba(255, 255, 255, .22);
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .15s; }
.karta3d::before { content: ""; position: absolute; inset: 10px; border: 1.2px solid rgba(255, 255, 255, .55); border-radius: 15px; pointer-events: none; }
.karta3d .blik { position: absolute; inset: 0; background: radial-gradient(60% 50% at var(--bx) var(--by), rgba(255, 255, 255, .28), transparent 70%); pointer-events: none; mix-blend-mode: soft-light; }
.karta3d .k-znak { position: absolute; left: 26px; top: 24px; width: 56px; height: auto; }
.karta3d .k-nazv { position: absolute; left: 96px; top: 30px; font: 600 11px/1.35 var(--sans); letter-spacing: .26em; text-transform: uppercase; }
.karta3d .k-nazv small { display: block; font: italic 400 17px/1.2 var(--serif); letter-spacing: 0; text-transform: none; opacity: .85; }
.karta3d .k-ur { position: absolute; right: 24px; top: 26px; font: 600 10px var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); }
.karta3d .k-niz { position: absolute; left: 26px; right: 26px; bottom: 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.karta3d .k-imya { font: 500 26px/1.1 var(--serif); }
.karta3d .k-nomer { font: 500 12px var(--sans); letter-spacing: .16em; opacity: .85; margin-top: 4px; }
.karta3d .k-bal { text-align: right; }
.karta3d .k-bal b { display: block; font: 500 40px/1 var(--serif); }
.karta3d .k-bal small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }

/* ---------------------------------------------------------------- 5. как у нас и двор */
.kak { background: linear-gradient(180deg, var(--kopot) 0%, var(--derevo) 100%); padding-bottom: 90px; }
.kak-in { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 72px; align-items: center; }
.ist-ramka { position: relative; border-radius: 28px; overflow: hidden; background: #000; box-shadow: 0 40px 90px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08); }
.ist-kadry { position: relative; aspect-ratio: 9 / 16; }
.ist-kadr { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; cursor: pointer; }
.ist-kadr.tut { opacity: 1; }
.ist-kadr video { width: 100%; height: 100%; object-fit: cover; }
.ist-kadr figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 22px 22px; background: linear-gradient(0deg, rgba(0, 0, 0, .78), transparent); }
.ist-kadr figcaption b { display: block; font: 500 28px/1.1 var(--serif); }
.ist-kadr figcaption span { display: block; font-size: 13.5px; color: rgba(255, 255, 255, .85); margin-top: 4px; }
.ist-polosy { position: absolute; left: 14px; right: 14px; top: 14px; z-index: 3; display: flex; gap: 5px; }
.ist-polosy i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .3); overflow: hidden; position: relative; }
.ist-polosy i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(var(--dolya, 0)); }
.kak-tekst h2 { max-width: 560px; }
.ist-shagi { margin-top: 34px; display: grid; gap: 4px; counter-reset: sh; }
.ist-shagi li { position: relative; padding: 16px 18px 16px 62px; border-radius: 16px; cursor: pointer; transition: background .3s; counter-increment: sh; }
.ist-shagi li::before { content: "0" counter(sh); position: absolute; left: 18px; top: 15px; font: italic 400 24px/1 var(--serif); color: var(--t3); }
.ist-shagi li b { display: block; font: 500 24px/1.15 var(--serif); }
.ist-shagi li span { display: block; font-size: 14px; color: var(--t2); margin-top: 3px; }
.ist-shagi li::after { content: ""; position: absolute; left: 62px; right: 18px; bottom: 8px; height: 2px; border-radius: 1px; background: var(--yantar); transform-origin: left; transform: scaleX(0); }
.ist-shagi li.tut { background: rgba(255, 255, 255, .05); }
.ist-shagi li.tut::before { color: var(--yantar); }
.ist-shagi li.tut::after { transform: scaleX(var(--dolya, 0)); }
.dvor { margin-top: 110px; }
.dvor-zag { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: 34px; }
.dvor-zag h3 { font: 400 clamp(34px, 3.6vw, 52px)/1.05 var(--serif); }
.dvor-zag .metka { margin-bottom: 14px; }
.dvor-pravo { display: flex; gap: 24px; align-items: flex-end; justify-content: space-between; }
.dvor-pravo p { font-size: 15.5px; color: var(--t2); max-width: 460px; }
.dvor-lenta { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 max(24px, calc((100vw - var(--shir)) / 2)); scroll-padding: 0 max(24px, calc((100vw - var(--shir)) / 2)); cursor: grab; }
.dvor-lenta::-webkit-scrollbar { display: none; }
.dvor-lenta.tyanut { cursor: grabbing; scroll-snap-type: none; }
.dvor-lenta figure { flex: 0 0 340px; width: 340px; scroll-snap-align: start; }
.dvor-lenta img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; cursor: zoom-in; background: #0B0907; }
.dvor-lenta figcaption { margin-top: 12px; }
.dvor-lenta figcaption b { display: block; font: 500 22px/1.2 var(--serif); }
.dvor-lenta figcaption span { display: block; font-size: 13px; color: var(--t3); margin-top: 2px; }
.bassein { margin-top: 30px; font-size: 14.5px; color: var(--t2); padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(76, 195, 245, .3); background: rgba(76, 195, 245, .06); display: inline-block; }
.bassein::before { content: "≈ "; color: var(--voda); font-weight: 700; }

/* ---------------------------------------------------------------- 6. «Свой пар» — светлый */
.svoy { background: var(--bumaga); color: var(--tt); }
.svoy .lid { color: var(--tt2); }
.svoy-verh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.svoy-shagi { margin-top: 28px; display: grid; gap: 14px; counter-reset: s; }
.svoy-shagi li { position: relative; padding-left: 50px; counter-increment: s; }
.svoy-shagi li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--taup); color: #fff; font: 600 14px var(--sans); }
.svoy-shagi b { display: block; font: 600 15.5px/1.4 var(--sans); }
.svoy-shagi p { font-size: 14.5px; color: var(--tt2); margin-top: 2px; }
.svoy-knopki { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.svoy .knopka-kontur { color: var(--tt); }
.polki { margin-top: 90px; display: grid; gap: 10px; position: relative; padding-right: 120px; }
.polki::after { content: "жарче"; position: absolute; right: 0; top: 0; bottom: 0; width: 90px; display: flex; align-items: flex-start; justify-content: center; padding-top: 4px;
  font: 600 11px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--kozha);
  background: linear-gradient(180deg, var(--kozha), rgba(184, 100, 46, 0)) right 44px top 26px / 2px calc(100% - 30px) no-repeat; }
.polok { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 26px; border-radius: 12px; color: #fff;
  background: linear-gradient(180deg, #B28458 0%, #8E6340 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 24px rgba(78, 52, 30, .22); }
.polok:nth-child(1) { width: 56%; margin-left: 44%; background: linear-gradient(180deg, #C5935F, #9C6B41); }
.polok:nth-child(2) { width: 78%; margin-left: 22%; }
.polok:nth-child(3) { width: 100%; background: linear-gradient(180deg, #9E7550, #7A5536); }
.polok b { font: 500 26px/1.1 var(--serif); }
.polok b small { display: block; font: 500 12px var(--sans); opacity: .85; margin-top: 2px; }
.polok em { font: 500 38px/1 var(--serif); font-style: normal; }
.plyusy { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.plyusy div { padding: 26px; border-radius: 20px; background: #fff; border: 1px solid var(--lin-t); }
.plyusy b { display: block; font: 500 26px/1.15 var(--serif); }
.plyusy p { font-size: 14.5px; color: var(--tt2); margin-top: 8px; }
.primer-note { margin-top: 26px; font-size: 13.5px; color: var(--tt3); font-style: italic; }

/* ---------------------------------------------------------------- 7. сертификат — шалфей её макета */
.sert { background: var(--shalfey); color: #fff; }
.sert-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.sert-karta { position: relative; aspect-ratio: 1.42; width: 100%; border-radius: 16px; padding: 40px 44px; background: linear-gradient(140deg, #8D9282 0%, #767B6B 100%); box-shadow: 0 40px 80px rgba(20, 22, 16, .4); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-2deg); }
.sert-karta::before { content: ""; position: absolute; inset: 14px; border: 1.2px solid rgba(255, 255, 255, .7); border-radius: 8px; pointer-events: none; }
.sert-karta img { width: 64px; height: auto; margin-bottom: 12px; }
.sert-nad { font: 300 22px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; }
.sert-zag { font: 600 34px/1.1 var(--sans); letter-spacing: .14em; text-transform: uppercase; margin-top: 6px; }
.sert-pod { font: italic 400 20px var(--serif); margin-top: 8px; opacity: .92; }
.sert-karta dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; width: 100%; max-width: 420px; margin-top: 22px; text-align: left; }
.sert-karta dl div { border-bottom: 1px solid rgba(255, 255, 255, .55); padding-bottom: 4px; }
.sert-karta dt { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.sert-karta dd { height: 14px; }
.sert-niz { font-size: 11.5px; letter-spacing: .08em; margin-top: 18px; opacity: .85; }
.sert .lid { color: rgba(255, 255, 255, .86); }
.sert-usl { margin: 24px 0 32px; display: grid; gap: 10px; }
.sert-usl li { padding-left: 26px; position: relative; font-size: 15.5px; }
.sert-usl li::before { content: "✦"; position: absolute; left: 0; top: 0; color: #E9E4D6; font-size: 13px; }

/* ---------------------------------------------------------------- 8. условия — её карточки */
.usl { background: var(--taup); color: #fff; }
.usl .lid { color: rgba(255, 255, 255, .85); }
.usl-setka { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; counter-reset: u; }
.usl-setka li { grid-column: span 2; position: relative; padding: 30px 28px 28px; border-radius: 20px; border: 1.5px solid rgba(255, 255, 255, .85); counter-increment: u; min-height: 170px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.usl-setka li:nth-child(4):nth-last-child(2), .usl-setka li:nth-child(5):nth-last-child(1) { grid-column: span 3; }  /* пять условий: 3 + 2, шесть: 3 + 3 */
.usl-setka li::before { content: counter(u); font: italic 300 46px/1 var(--serif); opacity: .7; }
.usl-setka li span { font: 500 19px/1.4 var(--sans); }
.usl-setka li.vazhno { background: rgba(255, 255, 255, .08); }
.usl-snoska { margin-top: 24px; font-size: 14px; color: rgba(255, 255, 255, .85); font-style: italic; }

/* ---------------------------------------------------------------- 9. новости */
.novosti { background: var(--kopot); }
.nov-setka { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.nov { display: flex; flex-direction: column; text-decoration: none; border-radius: 20px; overflow: hidden; background: rgba(255, 255, 255, .035); border: 1px solid var(--lin); transition: border-color .3s, transform .3s; }
.nov:hover { border-color: rgba(242, 169, 78, .5); transform: translateY(-3px); }
.nov img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #0B0907; }
.nov div { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.nov .nov-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--t3); }
.nov .nov-meta i { font-style: normal; font: 600 10.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: var(--yantar); color: #1E140B; }
.nov b { font: 500 24px/1.15 var(--serif); }
.nov p { font-size: 14px; color: var(--t2); }
.nov .dalee { margin-top: auto; padding-top: 6px; font: 600 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--yantar); }

/* ---------------------------------------------------------------- 10. отзывы — крем */
.otzyvy { background: var(--krem); color: var(--tt); }
.reyting { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: flex-end; }
.reyting-ya { display: flex; align-items: center; gap: 16px; }
.reyting-ya b { font: 400 86px/.9 var(--serif); }
.reyting-ya .zv { color: var(--zhar); font-size: 18px; letter-spacing: 2px; }
.reyting-ya small { display: block; font-size: 13px; color: var(--tt2); margin-top: 4px; }
.reyting-znak { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--tt2); }
.reyting-znak span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--lin-t); }
.reyting-znak span b { color: var(--tt); }
.otzyvy .lid { color: var(--tt2); }
.otz-lenta { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px max(24px, calc((100vw - var(--shir)) / 2)) 10px; scroll-padding: 0 max(24px, calc((100vw - var(--shir)) / 2)); cursor: grab; align-items: flex-start; }
.otz-lenta::-webkit-scrollbar { display: none; }
.otz { flex: 0 0 390px; width: 390px; scroll-snap-align: start; background: #fff; border-radius: 22px; padding: 28px 28px 24px; border: 1px solid var(--lin-t); display: flex; flex-direction: column; gap: 14px; }
.otz .tag { align-self: flex-start; font: 600 10.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--taup); color: #fff; }
.otz .zv { color: var(--zhar); letter-spacing: 2px; font-size: 14px; }
.otz p { font-size: 15px; line-height: 1.62; color: var(--tt); overflow-wrap: anywhere; }
.otz p.dlinnyy { max-height: 12.9em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.otz p.dlinnyy.otkryt { max-height: none; -webkit-mask-image: none; mask-image: none; }
.otz .eshe { align-self: flex-start; background: none; border: 0; padding: 0; font: 600 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--kozha); }
.otz .kto { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--lin-t); }
.otz .kto b { font: 500 20px/1.2 var(--serif); }
.otz .kto small { font-size: 12px; color: var(--tt3); white-space: nowrap; }
.otz .otvet { font-size: 13.5px; color: var(--tt2); padding: 12px 14px; border-radius: 12px; background: var(--krem); white-space: pre-line; }
.otz .otvet b { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--kozha); margin-bottom: 3px; }
.otz-niz { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 30px; }
.otzyvy .knopka-kontur { color: var(--tt); }

/* ---------------------------------------------------------------- 11. вопросы */
.chasto { background: var(--noch); }
.chasto-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.chasto-in .lid a { color: var(--yantar-svet); }
.chasto-spisok details { border-bottom: 1px solid var(--lin); }
.chasto-spisok summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font: 500 24px/1.25 var(--serif); }
.chasto-spisok summary::-webkit-details-marker { display: none; }
.chasto-spisok summary::after { content: "+"; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); display: grid; place-items: center; font: 400 20px var(--sans); color: var(--yantar); transition: transform .3s; }
.chasto-spisok details[open] summary::after { transform: rotate(45deg); }
.chasto-spisok details p { font-size: 15.5px; color: var(--t2); padding: 0 50px 24px 0; }

/* ---------------------------------------------------------------- 12. палатка — ночное озеро */
.palatka { background: radial-gradient(900px 500px at 20% 30%, rgba(76, 195, 245, .1), transparent 65%), var(--ozero); }
.palatka-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: center; }
.palatka-video { border-radius: 26px; overflow: hidden; box-shadow: 0 40px 90px rgba(0, 0, 0, .5); }
.palatka-video video { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.palatka-cena { font: 400 46px/1 var(--serif); color: #BDE9FB; margin-top: 18px; }
.palatka-cena small { display: block; font: 500 15px/1.4 var(--sans); color: #D8F1FC; margin-top: 10px; }
.palatka-detali { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 30px; }
.palatka-detali li { font-size: 13.5px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(76, 195, 245, .35); color: #D8F1FC; }
.palatka-komplekty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.palatka-komplekty:empty { display: none; }
.pk { border: 1px solid rgba(76, 195, 245, .28); border-radius: 20px; padding: 20px 20px 18px; background: rgba(76, 195, 245, .05); }
.pk-nazv { display: block; font: 400 26px/1.1 var(--serif); color: #BDE9FB; margin-bottom: 14px; }
.pk-ceny { display: grid; gap: 7px; margin-bottom: 14px; }
.pk-ceny div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 7px; border-bottom: 1px dashed rgba(76, 195, 245, .22); }
.pk-ceny dt { font-size: 13px; color: #D8F1FC; opacity: .78; }
.pk-ceny dd { font: 600 16px var(--sans); color: #F4FBFE; white-space: nowrap; }
.pk-ceny dd small { font: 500 12px var(--sans); color: #D8F1FC; opacity: .7; }
.pk p { font-size: 13px; line-height: 1.55; color: #D8F1FC; opacity: .82; }
.palatka-usl { font-size: 13.5px; line-height: 1.55; color: #D8F1FC; opacity: .9; margin: -12px 0 28px; max-width: 560px; }

/* ---------------------------------------------------------------- 13. финал и контакты */
.final { overflow: hidden; isolation: isolate; padding-bottom: 100px; }
.final-fon { position: absolute; inset: 0; z-index: -1; }
.final-fon img { width: 100%; height: 100%; object-fit: cover; }
.final-fon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 10, 8, .72) 0%, rgba(13, 10, 8, .9) 45%, var(--noch) 100%); }
.final-verh { text-align: center; max-width: 760px; margin: 0 auto 64px; }
.final-verh .lid { margin-inline: auto; }
.final-verh h2 { font-size: clamp(46px, 6vw, 86px); }
.final-knopki { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 32px; }
.svyaz-ikonki { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.svyaz-ikonki a { font: 600 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); transition: border-color .2s, color .2s; }
.svyaz-ikonki a:hover { border-color: var(--yantar); color: var(--yantar-svet); }
.final-setka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.kontakty-dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 26px; margin-bottom: 22px; }
.kontakty-dl dt { font: 600 10.5px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--yantar); margin-bottom: 4px; }
.kontakty-dl dd { font-size: 15px; color: var(--t); }
.kontakty-dl dd a { text-decoration: none; }
.kontakty-dl dd small { display: block; font-size: 13px; color: var(--t2); margin-top: 2px; }
.kontakty-puti { display: grid; gap: 0; margin: -4px 0 22px; border-top: 1px solid rgba(242, 169, 78, .14); }
.kontakty-puti li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(242, 169, 78, .14); }
.kontakty-puti b { font: 600 10.5px/1.9 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--yantar); }
.kontakty-puti span { font-size: 14px; line-height: 1.5; color: var(--t2); }
.karta-ramka { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 10; background: #0B0907; border: 1px solid var(--lin); }
.karta-ramka iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.karta-zaglushka { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: #0B0907; }
.karta-zaglushka img { width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.karta-zaglushka span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 14px 24px; border-radius: 999px; background: var(--yantar); color: #1E140B; font: 600 13px var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.karta-ssylki { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; font-size: 14px; }
.karta-ssylki a { color: var(--yantar-svet); text-decoration: none; }
.zayavka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; background: var(--bumaga); color: var(--tt); border-radius: 24px; padding: 30px; }
.zayavka h3 { grid-column: 1 / -1; font: 500 34px/1.1 var(--serif); }
.zayavka-lid { grid-column: 1 / -1; font-size: 14.5px; color: var(--tt2); margin-top: -6px; }
.chto-vybor { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.chto-vybor button { min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(35, 28, 23, .25); background: transparent; font-size: 13.5px; color: var(--tt); }
.chto-vybor button.tut { background: var(--taup); border-color: var(--taup); color: #fff; font-weight: 600; }
.zayavka:not(.sert-rezhim) .sert-pole { display: none; }
.zayavka .knopka-l { width: 100%; }
.forma-otvet { font-size: 14.5px; color: #2F7D4F; min-height: 1px; }
.forma-otvet.oshibka { color: #B23A1E; }

/* ---------------------------------------------------------------- подвал, нижняя полоса, лупа, тост */
.podval { background: #0D0B09; padding: 56px 0 120px; border-top: 1px solid rgba(242, 169, 78, .12); }
.podval-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 36px; align-items: center; }
.podval-logo img { width: 104px; height: auto; }
.podval p { font-size: 13.5px; color: var(--t3); }
.podval p small { display: block; font-size: 12px; margin-top: 6px; opacity: .85; }
.podval-ssylki { display: flex; flex-wrap: wrap; gap: 20px; }
.podval-ssylki a { text-decoration: none; color: var(--t2); }
.podval-ssylki a:hover { color: var(--yantar-svet); }
.niz-bar { display: none; }

.lupa { position: fixed; inset: 0; z-index: 300; background: rgba(8, 6, 5, .95); align-items: center; justify-content: center; padding: 60px 70px; }
.lupa:not([hidden]) { display: flex; }
.lupa figure { max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.lupa img { max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; border-radius: 10px; }
.lupa figcaption { display: flex; gap: 18px; justify-content: center; margin-top: 14px; font-size: 14.5px; color: var(--t2); text-align: center; }
.lupa-schet { color: var(--t3); }
.lupa-x { position: absolute; top: 18px; right: 18px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; font-size: 26px; line-height: 1; }
.lupa-str { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .3); color: #fff; font-size: 20px; }
.lupa-nazad { left: 14px; }
.lupa-vpered { right: 14px; }
.tost { position: fixed; left: 50%; bottom: 90px; z-index: 400; transform: translate(-50%, 20px); padding: 12px 20px; border-radius: 999px; background: var(--bumaga); color: var(--tt); font-size: 14px; font-weight: 500; box-shadow: 0 16px 40px rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; max-width: calc(100% - 32px); text-align: center; }
.tost.on { opacity: 1; transform: translate(-50%, 0); }
html.lupa-otkryta, html.zamok { overflow: hidden; }

/* ---------------------------------------------------------------- планшет */
/* шапка: телефон — от 1400, меню под «бургер» — до 1189 (с 19.10 пункт «Бронирование» длиннее); иначе пункты переносятся в две строки, а кнопка бронирования вылезает за край */
@media (max-width: 1399px) {
  .shapka-tel { display: none; }
  .menu { gap: 18px; }
}
@media (max-width: 1189px) {
  .menu { position: fixed; left: 0; right: 0; top: 80px; flex-direction: column; gap: 0; padding: 8px 24px 24px; background: rgba(17, 14, 12, .97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(242, 169, 78, .18); transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, transform .3s, visibility 0s .3s; max-height: calc(100vh - 80px); overflow-y: auto; }
  .menu.otkryto { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .menu a { padding: 16px 0; font-size: 13px; border-bottom: 1px solid var(--lin); }
  .menu .menu-tel { display: block; color: var(--yantar-svet); }
  .burger { display: block; }
}
@media (max-width: 1180px) {
  .geroy-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .tablo { max-width: 680px; }
  .bron-setka { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }
  .nov-setka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dopy-setka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plyusy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usl-setka { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* шесть условий: уже 1180 — по два в ряд, иначе текст в карточке в пять строк */
  .usl-setka li, .usl-setka li:nth-child(4):nth-last-child(2), .usl-setka li:nth-child(5):nth-last-child(1) { grid-column: span 1; }
  .usl-setka li:nth-child(odd):last-child { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .razdel-zag-shir, .dvor-zag, .chasto-in, .palatka-in, .sert-in, .svoy-verh, .final-setka { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .bp-in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .bron-setka { grid-template-columns: minmax(0, 1fr); }
  .chek { position: relative; top: 0; }
  .kak-in { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; }
  .prays-vkl { padding-left: 0; }
  .pt-ryad { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); }
  .reyting { justify-content: flex-start; }
  .sert-karta { max-width: 560px; }
}

/* ---------------------------------------------------------------- телефон */
@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .obertka { width: calc(100% - 40px); }
  .razdel { padding: 84px 0; }
  .razdel-zag { margin-bottom: 36px; }
  .lid { font-size: 16px; }
  .shapka { height: 66px; margin-bottom: -66px; gap: 10px; padding: 0 16px; }
  .menu { top: 66px; max-height: calc(100vh - 66px); }
  .logo img { width: 28px; }
  .logo b { font-size: 10px; letter-spacing: .18em; }
  .logo i { font-size: 16px; }
  .shapka-bron { display: none; }
  .knopka-karta { height: 40px; padding: 0 10px; }
  .knopka-karta #kartaMini { display: none; }
  .burger { width: 40px; height: 40px; }
  .geroy { padding: 112px 0 34px; align-items: flex-end; }
  .geroy-foto { display: none; }
  .geroy-video { display: block; }
  .geroy-ten { background: linear-gradient(0deg, rgba(11, 9, 7, .95) 0%, rgba(11, 9, 7, .55) 55%, rgba(11, 9, 7, .45) 100%); }
  .geroy-znak { width: 64px; margin-bottom: 18px; }
  .nad { font-size: 10.5px; letter-spacing: .24em; margin-bottom: 12px; }
  h1 { font-size: clamp(46px, 13.4vw, 60px); }
  h1 .h1-imya { font-size: 10.5px; letter-spacing: .26em; margin-bottom: 12px; }
  .geroy-pod { font-size: 15.5px; margin-top: 18px; }
  .geroy-knopki { margin-top: 24px; gap: 10px; }
  .geroy-knopki .knopka { flex: 1 1 150px; }
  .geroy-fakty { gap: 12px 26px; margin-top: 28px; padding-top: 20px; }
  .geroy-fakty b { font-size: 34px; }
  .geroy-fakty span { font-size: 11.5px; }
  .tablo { padding: 16px 14px 14px; border-radius: 20px; }
  .tablo-verh b { font-size: 22px; }
  .tablo-ryad { grid-template-columns: 64px repeat(var(--n, 14), minmax(0, 1fr)); gap: 3px; }
  .tablo-ryad .imya { font-size: 11.5px; }
  .okno { height: 24px; border-radius: 5px; }
  .tablo-ryad.chasy-ryad span:nth-child(odd):not(:first-child) { visibility: hidden; }
  .dveri { gap: 8px; }
  .dver { border-radius: 14px; }
  .dver-nomer { font-size: 26px; top: 10px; left: 12px; }
  .dver-tekst { left: 10px; right: 10px; bottom: 10px; }
  .dver-tekst b { font-size: 19px; }
  .dver-tekst small { display: none; }
  .dver-tekst span { display: none; }
  .dver-otkr { display: none; }
  .banya-panel { padding: 30px 0 84px; }
  .al-lenta, .al-lenta img { border-radius: 16px; }
  .bp-ceny { padding: 4px 16px; }
  .tablichka { padding: 30px 22px 26px; border-radius: 22px; }
  .tablichka::before { inset: 8px; border-radius: 15px; }
  .tablichka-verh { grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
  .tablichka-verh img { width: 44px; }
  .tablichka-lid { grid-column: 1 / -1; }
  .prays-vkl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prays-vkl button { padding: 10px 8px; }
  .pt-ryad { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px 0; }
  .pt-imya b { font-size: 25px; }
  .pt-cena { display: none; min-width: 120px; font-size: 20px; }
  .prays-tab[data-rezhim="utro"] .k-utro, .prays-tab[data-rezhim="vecher"] .k-vecher,
  .prays-tab[data-rezhim="vyh"] .k-vyh, .prays-tab[data-rezhim="prazd"] .k-prazd { display: block; }
  .prays-tab:not([data-rezhim]) .k-vecher { display: block; }
  .dopy { margin-top: 48px; }
  .dopy-zag h3 { font-size: 38px; }
  .dopy-setka { grid-template-columns: minmax(0, 1fr); }
  .bani-vybor { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .bv .bv-t { padding: 8px 10px 10px; }
  .bv b { font-size: 17px; }
  .bv small { display: none; }
  .bv em { font-size: 11.5px; margin-top: 4px; }
  .shag-zag h3 { font-size: 27px; }
  .shag-zag span { margin-left: 0; width: 100%; }
  .dni-str { display: none; }
  .den { flex-basis: 64px; width: 64px; }
  .den.ng { flex-basis: 76px; width: 76px; }
  .den b { font-size: 26px; }
  .chas { min-height: 58px; border-radius: 12px; }
  .chas b { font-size: 13.5px; }
  .chas small { font-size: 10.5px; }
  .chasy { gap: 6px; }
  .dob-spisok { grid-template-columns: minmax(0, 1fr); }
  .figurki { max-width: 100%; }
  .chek-itog b { font-size: 36px; }
  .forma, .zayavka { grid-template-columns: minmax(0, 1fr); }
  .zayavka { padding: 24px 20px; }
  .shtorka, .kabinet { top: auto; left: 0; width: 100%; height: 94vh; height: 94dvh; border-radius: 22px 22px 0 0; transform: translateY(104%); }
  .kak-in { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .ist-ramka { width: min(320px, 86%); margin: 0 auto; }
  .ist-shagi li { padding: 12px 12px 14px 52px; }
  .ist-shagi li::before { left: 14px; top: 13px; font-size: 20px; }
  .ist-shagi li::after { left: 52px; }
  .ist-shagi li b { font-size: 21px; }
  .dvor { margin-top: 70px; }
  .dvor-pravo { flex-direction: column; align-items: flex-start; }
  .dvor-lenta figure { flex-basis: 78vw; width: 78vw; }
  .dvor-lenta { padding: 0 20px; scroll-padding: 0 20px; }
  .karta3d .k-znak { width: 42px; left: 18px; top: 18px; }
  .karta3d .k-nazv { left: 70px; top: 22px; font-size: 9.5px; }
  .karta3d .k-ur { right: 16px; top: 18px; font-size: 8.5px; padding: 5px 8px; }
  .karta3d .k-niz { left: 18px; right: 18px; bottom: 16px; }
  .karta3d .k-imya { font-size: 21px; }
  .karta3d .k-bal b { font-size: 30px; }
  .polki { padding-right: 0; margin-top: 60px; }
  .polki::after { display: none; }
  .polok { padding: 14px 16px; }
  .polok:nth-child(1) { width: 78%; margin-left: 22%; }
  .polok:nth-child(2) { width: 89%; margin-left: 11%; }
  .polok b { font-size: 20px; }
  .polok em { font-size: 28px; }
  .plyusy { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .sert-karta { padding: 26px 22px; transform: none; aspect-ratio: auto; }
  .sert-nad { font-size: 15px; }
  .sert-zag { font-size: 22px; }
  .sert-pod { font-size: 17px; }
  .sert-karta dl { gap: 8px 16px; }
  .usl-setka { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .usl-setka li, .usl-setka li:nth-child(odd):last-child { grid-column: auto; min-height: 0; padding: 22px 22px; flex-direction: row; align-items: center; }
  .usl-setka li::before { font-size: 34px; }
  .usl-setka li span { font-size: 16.5px; }
  .nov-setka { grid-template-columns: minmax(0, 1fr); }
  .reyting-ya b { font-size: 66px; }
  .otz { flex-basis: 84vw; width: 84vw; padding: 22px 20px; }
  .otz-lenta { padding: 4px 20px 10px; scroll-padding: 0 20px; }
  .chasto-spisok summary { font-size: 21px; padding: 18px 0; }
  .chasto-spisok details p { padding-right: 0; }
  .palatka-cena { font-size: 38px; }
  .palatka-komplekty { grid-template-columns: minmax(0, 1fr); }
  .kontakty-puti li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .final-verh { text-align: left; margin-bottom: 40px; }
  .final-knopki, .svyaz-ikonki { justify-content: flex-start; }
  .kontakty-dl { grid-template-columns: minmax(0, 1fr); }
  .podval-in { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .podval { padding-bottom: 110px; }
  .niz-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; display: grid; grid-template-columns: 48px 48px 1.35fr 1fr; gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: rgba(17, 14, 12, .95);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid rgba(242, 169, 78, .18); transition: transform .3s; }
  .niz-bar a, .niz-bar button { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .16); background: transparent; font: 600 11.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--t); }
  .niz-bar .niz-bron { background: var(--yantar); border-color: var(--yantar); color: #1E140B; }
  .niz-bar.skryt, body.niz-chek-vidno .niz-bar { transform: translateY(110%); }
  .niz-bar .niz-ikonka svg { width: 21px; height: 21px; }
  .napisat-knopka { display: none; }
  .napisat { left: 0; right: 0; bottom: 0; width: 100%; border-width: 1px 0 0; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom);
    opacity: 1; transform: translateY(104%); transition: transform .45s cubic-bezier(.2, .7, .2, 1), visibility 0s .45s; }
  .napisat.on { transform: none; }
  .nap-spisok { padding: 12px 16px 18px; }
  .niz-chek { bottom: calc(10px + env(safe-area-inset-bottom)); }
  .tost { bottom: 86px; }
  .lupa { padding: 56px 8px 70px; }
  .lupa-str { top: auto; bottom: 14px; transform: none; }
  .lupa-nazad { left: calc(50% - 64px); }
  .lupa-vpered { right: calc(50% - 64px); }
}
@media (min-width: 761px) { .niz-chek { display: none !important; } }
@media (max-width: 400px) {
  .geroy-knopki .knopka-l { padding: 15px 18px; font-size: 12.5px; }
  .chasy { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tablo-ryad { grid-template-columns: 56px repeat(var(--n, 14), minmax(0, 1fr)); gap: 2px; }
}

/* ---------------------------------------------------------------- длинные названия и мелочь (обзор 19.10) */
/* «Потрясающая баня» — самое длинное имя: кегль идёт от ширины экрана, чтобы слово не вылезало из двери и прайса */
.tablo-ryad { grid-template-columns: 116px repeat(var(--n, 14), minmax(0, 1fr)); }
.dver-tekst b { font-size: min(38px, 3.4vw); }
.pt-imya b { font-size: clamp(22px, 2.6vw, 30px); }
.dopy-zag { flex-direction: column; align-items: flex-start; gap: 0; }
@media (max-width: 760px) {
  /* табло: имя бани — строкой над её часами, клетки во всю ширину */
  .tablo-ryad { grid-template-columns: repeat(var(--n, 14), minmax(0, 1fr)); gap: 3px; }
  .tablo-ryad .imya { grid-column: 1 / -1; font-size: 12px; padding: 0; margin-top: 4px; }
  .tablo-ryad.chasy-ryad span:first-child { display: none; }
  .tablo-ryad.chasy-ryad span { font-size: 12px; }
  .dver-tekst b { font-size: min(19px, 3.5vw); }
  .pt-imya b { font-size: 25px; }
  .bv b { font-size: min(17px, 3.7vw); }
  .usl-setka li { justify-content: flex-start; gap: 18px; }
  /* текст на телефоне — не мельче 12 px */
  .metka { font-size: 12px; letter-spacing: .2em; }
  .logo b { font-size: 12px; letter-spacing: .14em; }
  .nad { font-size: 12px; letter-spacing: .16em; }
  h1 .h1-imya { font-size: 12px; letter-spacing: .2em; }
  .geroy-fakty span { font-size: 12px; }
  .prays-vkl button small { font-size: 12px; }
  .prays-vkl button i { font-size: 12px; letter-spacing: .08em; padding: 2px 8px; }
  .pt-cena small { font-size: 12px; }
  .dop-gruppa h4, .dob-gruppa h4 { font-size: 12px; letter-spacing: .16em; }
  .bv em { font-size: 12px; }
  .den small, .den span { font-size: 12px; }
  .chas small { font-size: 12px; }
  .chek-verh small { font-size: 12px; letter-spacing: .16em; }
  .karta3d .k-nazv { font-size: 12px; letter-spacing: .18em; }
  .karta3d .k-ur { left: 18px; right: auto; top: 74px; font-size: 12px; letter-spacing: .04em; padding: 4px 9px; }
  .karta3d .k-bal small { font-size: 12px; }
  .nov .nov-meta i { font-size: 12px; letter-spacing: .08em; }
  .otz .tag { font-size: 12px; letter-spacing: .08em; }
  .otz .otvet b { font-size: 12px; }
  .kontakty-dl dt, .kontakty-puti b { font-size: 12px; letter-spacing: .16em; }
  .niz-bar a, .niz-bar button { font-size: 12px; letter-spacing: .03em; }
  .niz-chek small { font-size: 12px; }
  .den-mes { font-size: 12px; letter-spacing: .16em; }
  .sert-karta dt { font-size: 12px; letter-spacing: .04em; }
  .sert-niz { font-size: 12px; letter-spacing: .02em; }
}

/* ---------------------------------------------------------------- «О бане» и страницы под запросы (20.10.2026)
   Мария прислала запросы: «аренда бани Горелово», «с бассейном», «с чаном», «походная баня»… Текст «О бане» на главной и
   страницы /banya-s-basseynom/ и т. п. собирает сервер (str_poisk) из её данных. Таблички, вопросы, финал и подвал — как на
   главной; свои — первый экран с её кадром в рамке, текст с полосой кадров, ячейки цен одной бани, дорога, бани карточками. */
.o-bane { background: var(--bumaga); color: var(--tt); }
.o-bane-in { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 72px; align-items: start; }
.o-bane-tekst h2 { max-width: 560px; }
.o-bane-abzacy p { font-size: 16.5px; line-height: 1.72; color: var(--tt2); margin-top: 18px; max-width: 600px; }
.o-bane-abzacy p:first-child { margin-top: 28px; }
.o-bane-ssylki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.o-bane-k { position: relative; display: block; border-radius: 20px; overflow: hidden; background: #0B0907; color: #fff; text-decoration: none; isolation: isolate;
  box-shadow: 0 18px 40px rgba(35, 28, 23, .16); transition: transform .4s, box-shadow .4s; }
.o-bane-k img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; filter: brightness(.8) saturate(1.02); transition: filter .5s, transform 1.1s cubic-bezier(.2, .6, .2, 1); }
.o-bane-k::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(8, 6, 5, .92) 0%, rgba(8, 6, 5, .4) 46%, rgba(8, 6, 5, 0) 72%); }
.o-bane-k > span { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.o-bane-k b { font: 400 28px/1.05 var(--serif); }
.o-bane-k small { font-size: 13px; line-height: 1.45; color: rgba(244, 238, 231, .86); }
.o-bane-k i { margin-top: 4px; font: 600 11px var(--sans); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--yantar-svet); }
.o-bane-k:hover { transform: translateY(-3px); box-shadow: 0 26px 54px rgba(35, 28, 23, .24); }
.o-bane-k:hover img { filter: brightness(.95) saturate(1.06); transform: scale(1.035); }

/* первый экран страницы: слева запрос заголовком, справа её кадр в рамке (кадры у неё вертикальные) */
.str-geroy { position: relative; padding: 140px 0 96px; overflow: hidden; isolation: isolate;
  background: radial-gradient(900px 560px at 82% 18%, rgba(242, 169, 78, .12), transparent 62%), linear-gradient(180deg, var(--kopot) 0%, var(--noch) 100%); }
.str-geroy-in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 72px; align-items: center; }
.str-geroy h1 { font-size: clamp(50px, 6vw, 92px); }
.kroshki { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 26px; font-size: 13px; color: var(--t3); }
.kroshki a { color: var(--t2); text-decoration: none; border-bottom: 1px solid rgba(244, 238, 231, .25); transition: color .2s, border-color .2s; }
.kroshki a:hover { color: var(--yantar-svet); border-color: currentColor; }
.str-fakty { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .12); }
.str-fakty li { font-size: 13px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); }
.str-geroy-foto { position: relative; }
.str-geroy-foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: min(700px, 76vh); object-fit: cover; border-radius: 28px; cursor: zoom-in; background: #0B0907;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08); }
.str-geroy-foto.shir img { aspect-ratio: 4 / 3; }
.str-geroy-foto figcaption { position: absolute; left: 18px; bottom: 18px; padding: 8px 12px; border-radius: 999px; background: rgba(11, 9, 7, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 600 11px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; }

/* текст о бане и полоса её кадров */
.str-tekst { background: var(--kopot); }
.str-tekst-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
.str-abzacy p { font-size: 17px; line-height: 1.72; color: var(--t2); }
.str-abzacy p + p { margin-top: 16px; }
.str-tekst .str-abzacy p:first-child { font-size: 19px; color: var(--t); }
.palatka-tekst .str-abzacy { margin-top: 20px; max-width: 600px; }
.str-lenta { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; margin-top: 64px; }
.str-lenta img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; cursor: zoom-in; background: #0B0907; }
.str-lenta figcaption { margin-top: 12px; font: 500 21px/1.2 var(--serif); }

/* цены одной бани — в её тауповой табличке */
.str-prays .tablichka-verh h2 { font-size: clamp(40px, 4.4vw, 62px); }
.str-ceny { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.str-ceny > div { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 150px; padding: 18px 18px 20px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .45); }
.str-ceny span { font: 600 12.5px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.str-ceny span small { display: block; margin-top: 5px; font: 400 12.5px/1.45 var(--sans); letter-spacing: 0; text-transform: none; opacity: .85; }
.str-ceny b { font: 500 30px/1 var(--sans); white-space: nowrap; }
.str-ceny b i { font: 400 13px var(--sans); font-style: normal; opacity: .78; }
.str-ceny .tut { background: var(--bumaga); color: var(--tt); border-color: var(--bumaga); }
.str-ceny .tut span::after { content: "сейчас"; display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: var(--yantar); color: #1E140B;
  font: 600 9.5px/1.4 var(--sans); letter-spacing: .14em; vertical-align: 1px; }
.str-prays-niz { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 44px; }
.str-prays-niz .ssylka-strelka { margin-top: 0; color: var(--kozha); }

/* дорога: её пост — адрес, пути, парковка — и карта */
.str-put { background: var(--kopot); }
.str-put-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.str-put .str-abzacy { margin: 18px 0 30px; }
.str-put .karta-ramka { aspect-ratio: 4 / 3; }
.str-put .str-lenta { margin-top: 80px; }

/* три бани карточками — куда едете */
.str-bani-r { background: var(--krem); color: var(--tt); }
.str-bani-r .lid { color: var(--tt2); }
.str-bani { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.str-banya { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--lin-t); color: var(--tt); text-decoration: none; transition: transform .35s, box-shadow .35s; }
.str-banya:hover { transform: translateY(-3px); box-shadow: 0 24px 50px rgba(35, 28, 23, .14); }
.str-banya img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #0B0907; }
.str-banya > span { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 20px 22px 24px; }
.str-banya small { font: 600 11px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--kozha); }
.str-banya b { font: 400 32px/1.05 var(--serif); }
.str-banya span span { font-size: 14px; color: var(--tt2); }
.str-banya em { margin-top: auto; padding-top: 14px; font: 600 15px var(--sans); font-style: normal; }

/* ещё у нас и финал страницы */
.str-eshe .o-bane-ssylki { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.str-eshe .o-bane-k img { aspect-ratio: 4 / 5; }
.str-kontakty { max-width: 780px; margin: 0 auto; padding: 28px 30px 24px; border-radius: 22px; background: rgba(13, 10, 8, .6); border: 1px solid var(--lin);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.str-kontakty .karta-ssylki { margin-top: 0; }

/* новости и акции — у каждой своя страница (19.10.2026) */
.nv-shapka { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px;
  padding: 12px max(20px, calc((100vw - 1240px) / 2)); background: rgba(17, 14, 12, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(242, 169, 78, .14); }
.nv-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; font: italic 400 22px/1.1 var(--serif); color: var(--yantar-svet); }
.nv-logo img { width: 36px; height: auto; }
.nv-shapka .knopka { min-height: 42px; padding: 10px 20px; font-size: 12px; }
.nv-telo { width: min(780px, calc(100% - 40px)); margin: 0 auto; padding: 72px 0 96px; }
.nv-telo > p { color: var(--t2); }
.nv-zag { margin: 12px 0 30px; font: 300 clamp(40px, 6vw, 72px)/1 var(--serif); }
.nv-kartochka { display: block; padding: 24px 0; border-bottom: 1px solid var(--lin); text-decoration: none; }
.nv-kartochka b { display: block; margin-top: 6px; font: 500 30px/1.15 var(--serif); transition: color .2s; }
.nv-kartochka p { margin-top: 8px; font-size: 15px; color: var(--t2); }
.nv-kartochka:hover b { color: var(--yantar-svet); }
.nv-data { font: 600 11.5px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--yantar); }
.nv-statya p { margin-top: 16px; font-size: 17px; line-height: 1.75; color: var(--t2); }
.nv-statya .nv-do { color: var(--yantar-svet); font-weight: 600; }
.nv-foto { width: 100%; height: auto; margin: 4px 0 12px; border-radius: 20px; }
.nv-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.nv-podval { padding: 32px 20px 48px; text-align: center; font-size: 14px; color: var(--t3); border-top: 1px solid rgba(242, 169, 78, .12); }
.nv-podval a { color: var(--t2); text-decoration: none; }
.nv-podval a:hover { color: var(--yantar-svet); }

@media (max-width: 1180px) {
  .str-eshe .o-bane-ssylki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .o-bane-in, .str-geroy-in, .str-tekst-in, .str-put-in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .str-geroy-foto { max-width: 620px; }
  .str-ceny { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .str-bani { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .str-geroy { padding: 86px 0 60px; }
  .str-geroy-in { gap: 26px; }
  .str-geroy-foto { order: -1; }
  .str-geroy-foto img, .str-geroy-foto.shir img { aspect-ratio: 4 / 3; max-height: none; border-radius: 20px; }
  .str-geroy-foto figcaption { left: 12px; bottom: 12px; font-size: 12px; letter-spacing: .08em; }
  .str-geroy h1 { font-size: clamp(42px, 11.6vw, 56px); }
  .kroshki { margin-bottom: 18px; font-size: 12.5px; }
  .str-fakty { margin-top: 26px; padding-top: 20px; }
  .str-fakty li { padding: 7px 12px; font-size: 12.5px; }
  .str-abzacy p { font-size: 16px; }
  .str-tekst .str-abzacy p:first-child { font-size: 17px; }
  .str-lenta { display: flex; gap: 12px; margin: 40px -20px 0; padding: 0 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none; }
  .str-lenta::-webkit-scrollbar { display: none; }
  .str-lenta figure { flex: 0 0 68vw; scroll-snap-align: start; }
  .str-lenta figcaption { font-size: 19px; }
  .str-put .str-lenta { margin-top: 56px; }
  .str-ceny { gap: 8px; }
  .str-ceny > div { min-height: 0; padding: 14px 14px 16px; gap: 14px; }
  .str-ceny span, .str-ceny span small { font-size: 12px; }
  .str-ceny b { font-size: 22px; }
  .str-ceny b i { font-size: 12px; }
  .str-ceny .tut span::after { display: table; margin: 6px 0 0; font-size: 12px; letter-spacing: .06em; }
  .str-prays-niz .knopka { width: 100%; }
  .str-put .karta-ramka { aspect-ratio: 1 / 1; }
  .str-bani { grid-template-columns: minmax(0, 1fr); }
  .str-banya small { font-size: 12px; letter-spacing: .12em; }
  .str-banya b { font-size: 28px; }
  .o-bane-abzacy p { font-size: 16px; }
  .o-bane-ssylki, .str-eshe .o-bane-ssylki { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .o-bane-k { display: grid; grid-template-columns: 112px minmax(0, 1fr); background: #fff; color: var(--tt); border: 1px solid var(--lin-t); box-shadow: none; }
  .o-bane-k img, .str-eshe .o-bane-k img { height: 100%; min-height: 112px; aspect-ratio: auto; filter: none; }
  .o-bane-k::after { display: none; }
  .o-bane-k > span { position: static; justify-content: center; gap: 4px; padding: 14px 16px; }
  .o-bane-k b { font-size: 23px; }
  .o-bane-k small { font-size: 13px; color: var(--tt2); }
  .o-bane-k i { font-size: 12px; letter-spacing: .1em; color: var(--kozha); }
  .str-kontakty { padding: 22px 20px 20px; }
  .nv-shapka { min-height: 64px; padding: 10px 16px; }
  .nv-logo { font-size: 19px; }
  .nv-telo { padding: 48px 0 72px; }
  .nv-kartochka b { font-size: 26px; }
  .nv-data { font-size: 12px; letter-spacing: .14em; }
}
@media (max-width: 480px) {
  .nv-logo span { display: none; }
}