/* «Африка», вторая версия (16.10.2026). Палитра — первой версии: ночь, уголь, шафран-лампы, ржавчина, зелень их диванов.
   Шрифты и композиция — как у «Kimky Altay-2» (слово Алексея): Yanone Kaffeesatz прописными + Mulish. */
:root {
  --noch: #17140F; --ugol: #221D17; --ugol2: #2B241C;
  --shafran: #F2A93B; --shafran-sv: #F7C46A; --shafran-t: #B97A16;
  --rzh: #C4512B; --rzh-kn: #B4441F;
  --zel: #0F5A50; --zel-g: #0A3F38;
  --malina: #B3204D;
  --pesok: #EBDCC0; --pesok-sv: #F4EBDA; --krem: #F7E9CF;
  --h: "Yanone Kaffeesatz", "Arial Narrow", sans-serif;
  --t: "Mulish", "Helvetica Neue", Arial, sans-serif;
  --pole: clamp(18px, 5vw, 72px);
  --uzor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23F2A93B' stroke-width='1.4' opacity='.07'%3E%3Cpath d='M0 12l6-6 6 6 6-6 6 6 6-6 6 6 6-6 6 6 6-6 6 6 6-6 6 6'/%3E%3Cpath d='M18 36h36M30 30v12M42 30v12'/%3E%3Cpath d='M0 60l6 6 6-6 6 6 6-6 6 6 6-6 6 6 6-6 6 6 6-6 6 6 6-6'/%3E%3C/g%3E%3Cg fill='%23F2A93B' opacity='.08'%3E%3Ccircle cx='6' cy='36' r='1.6'/%3E%3Ccircle cx='66' cy='36' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fon-sekcii, var(--noch)); color: var(--krem);
  font: 400 17px/1.6 var(--t); transition: background-color .6s ease; 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 { font-family: var(--h); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; margin: 0; line-height: .92; }
h2 { font-size: clamp(50px, 7.4vw, 108px); }
section { position: relative; scroll-margin-top: 76px; }
.sek-lead { max-width: 60ch; font-size: clamp(16px, 1.3vw, 19px); opacity: .86; margin: 18px 0 0; }

/* значок-солнце над заголовком */
.nad { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 700 13px/1.2 var(--t); letter-spacing: .18em; text-transform: uppercase; color: var(--shafran); }
.nad svg { width: 22px; height: 22px; flex: none; color: var(--shafran); }
.nad-t, .nad-t svg { color: var(--rzh-kn); }

/* кнопки — шафрановые таблетки */
.knopka {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 28px;
  border-radius: 999px; border: 0; background: var(--shafran); color: var(--noch); text-decoration: none;
  font: 700 15px/1 var(--t); letter-spacing: .04em; box-shadow: 0 10px 30px -12px rgba(242, 169, 59, .7);
  transition: transform .2s, background .2s;
}
.knopka:hover { background: var(--shafran-sv); transform: translateY(-2px); }
.knopka-kontur { background: transparent; color: var(--krem); border: 1.5px solid rgba(247, 233, 207, .55); box-shadow: none; }
.knopka-kontur:hover { background: rgba(247, 233, 207, .1); }
.knopka-mal { min-height: 44px; padding: 0 20px; font-size: 14px; }
.knopka-shir { width: 100%; }
.knopki { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* плашка демо */
.demo { position: relative; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 52px 10px var(--pole); background: var(--malina); color: #fff; font-size: 14px; line-height: 1.4; }
.demo[hidden] { display: none; }
.demo button { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); font-size: 20px; line-height: 1; }

/* ---------------------------------------------------------------- шапка */
.shapka {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 22px; height: 76px; padding: 0 var(--pole);
  margin-bottom: -76px; transition: background .3s, box-shadow .3s, height .3s;
}
.shapka.skolzit { box-shadow: 0 1px 0 rgba(242, 169, 59, .18); height: 66px; }
/* 26.10: фон и размытие шапки — на ::before, не на самой шапке. Шапка с backdrop-filter становится «рамкой» для меню
   (position: fixed внутри неё считается от шапки): после прокрутки меню сжималось до высоты шапки, а пункты вылезали поверх
   страницы без фона — «текст на текст» на айфоне менеджера 24.10 (снимок в ВК, видео Андрея 23.10). */
.shapka::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; transition: background .3s; }
.shapka.skolzit::before { background: rgba(23, 20, 15, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.logo img { width: 46px; height: 46px; }
.logo span { display: flex; flex-direction: column; line-height: 1; }
.logo b { font: 700 30px/0.9 var(--h); text-transform: uppercase; letter-spacing: .04em; color: var(--shafran); }
.logo i { font: italic 500 12px/1.2 var(--t); opacity: .8; margin-top: 3px; }
.menu { display: flex; gap: 22px; margin-left: auto; }
.menu a { text-decoration: none; font: 600 14px/1 var(--t); letter-spacing: .02em; opacity: .85; padding: 8px 0; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a.tut { opacity: 1; border-color: var(--shafran); }
.menu-tel { display: none; }
.shapka-tel { text-decoration: none; font: 700 22px/1 var(--h); letter-spacing: .03em; white-space: nowrap; }
.knopka-sh { min-height: 44px; padding: 0 22px; }
.burger { display: none; width: 46px; height: 46px; border: 1.5px solid rgba(247, 233, 207, .4); border-radius: 50%; background: rgba(23, 20, 15, .4); flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.burger span { width: 18px; height: 2px; background: var(--krem); border-radius: 2px; }

/* ---------------------------------------------------------------- первый экран */
.geroy { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--noch); }
.geroy-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.geroy-ten { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(23, 20, 15, .93) 0%, rgba(23, 20, 15, .78) 40%, rgba(23, 20, 15, .35) 70%, rgba(23, 20, 15, .12) 100%),
  linear-gradient(0deg, rgba(23, 20, 15, .95) 0%, rgba(23, 20, 15, 0) 45%),
  linear-gradient(180deg, rgba(23, 20, 15, .6) 0%, rgba(23, 20, 15, 0) 22%); }
.geroy-in { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: end; padding: 130px var(--pole) 46px; }
.geroy-title {
  font-size: clamp(110px, 20vw, 320px); line-height: .78; letter-spacing: .005em; margin-left: -.03em;
  background: linear-gradient(180deg, var(--shafran-sv) 0%, var(--shafran) 48%, var(--rzh) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 40px rgba(0, 0, 0, .45));
}
.geroy-pod { display: flex; align-items: center; gap: 16px; margin: 14px 0 0; font: 700 clamp(24px, 3vw, 40px)/1 var(--h); text-transform: uppercase; letter-spacing: .06em; }
.cherta { width: 54px; height: 3px; background: var(--shafran); flex: none; }
.geroy-lead { max-width: 54ch; margin: 18px 0 0; font-size: clamp(16px, 1.3vw, 19px); opacity: .9; }
.geroy-cifry { list-style: none; display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0; margin: 40px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(247, 233, 207, .22); }
.geroy-cifry li { padding-right: 34px; margin-right: 34px; border-right: 1px solid rgba(247, 233, 207, .18); }
.geroy-cifry li:last-child { border: 0; margin: 0; }
.geroy-cifry b { display: block; font: 700 clamp(36px, 3.6vw, 54px)/1 var(--h); color: var(--shafran); white-space: nowrap; }
.geroy-cifry span { font-size: 13px; opacity: .78; }

/* «Сегодня в Африке» */
.segodnya {
  background: rgba(23, 20, 15, .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(242, 169, 59, .4); border-radius: 22px; padding: 22px 22px 20px;
  box-shadow: 0 30px 80px -30px rgba(242, 169, 59, .35), inset 0 1px 0 rgba(247, 196, 106, .15);
}
.seg-nad { margin: 0 0 16px; font: 700 13px/1.3 var(--t); letter-spacing: .12em; text-transform: uppercase; color: var(--shafran-sv); display: flex; align-items: center; gap: 10px; }
.seg-nad b { color: var(--krem); }
.seg-lampa { width: 10px; height: 10px; border-radius: 50%; background: var(--shafran); box-shadow: 0 0 0 4px rgba(242, 169, 59, .2), 0 0 16px var(--shafran); flex: none; }
.js-anim .seg-lampa { animation: lampa 2.4s ease-in-out infinite; }
@keyframes lampa { 50% { box-shadow: 0 0 0 7px rgba(242, 169, 59, .05), 0 0 26px var(--shafran); } }

/* «Рассчитать стоимость онлайн» — огромная жёлтая над «Сегодня в Африке» (слово владельца 30.10) → календарь и расчёт #den */
.geroy-prav { display: grid; gap: 14px; align-self: end; min-width: 0; }
.knopka-raschet {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 96px; padding: 14px 16px 14px 26px; border-radius: 22px; text-decoration: none;
  background: linear-gradient(180deg, #FFE45C 0%, #FFC414 100%); color: #1E1206;
  font: 700 36px/.92 var(--h); text-transform: uppercase; letter-spacing: .02em; text-wrap: balance;
  box-shadow: 0 24px 54px -18px rgba(255, 196, 20, .9), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -4px 0 rgba(140, 86, 0, .2);
  transition: transform .2s, background .2s;
}
.knopka-raschet:hover { transform: translateY(-2px); background: linear-gradient(180deg, #FFEB80 0%, #FFCD2E 100%); }
.knopka-raschet:active { transform: translateY(1px); }
.knopka-raschet:focus-visible { outline: 3px solid var(--krem); outline-offset: 3px; }
.knopka-raschet span { position: relative; }
.knopka-raschet i { position: relative; flex: none; width: 56px; height: 56px; border-radius: 50%; background: #1E1206; box-shadow: 0 6px 16px -6px rgba(30, 18, 6, .7); }
.knopka-raschet i::after { content: ""; position: absolute; left: 50%; top: 45%; width: 15px; height: 15px; border: solid #FFD43B; border-width: 0 3px 3px 0; transform: translate(-50%, -50%) rotate(45deg); }
.knopka-raschet::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); transform: skewX(-18deg); pointer-events: none; opacity: 0; }
.js-anim .knopka-raschet { animation: raschet-svet 3.2s ease-in-out infinite; }
.js-anim .knopka-raschet::before { animation: raschet-blik 3.2s ease-in-out infinite; }
.js-anim .knopka-raschet i::after { animation: raschet-strelka 1.6s ease-in-out infinite; }
@keyframes raschet-svet { 50% { box-shadow: 0 26px 70px -12px rgba(255, 196, 20, 1), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -4px 0 rgba(140, 86, 0, .2); } }
@keyframes raschet-blik { 0%, 55% { left: -40%; opacity: 0; } 60% { opacity: 1; } 85%, 100% { left: 120%; opacity: 0; } }
@keyframes raschet-strelka { 50% { top: 55%; } }
.seg-chasy { display: flex; gap: 3px; height: 40px; align-items: flex-end; }
.seg-chasy i { flex: 1; border-radius: 3px 3px 1px 1px; background: var(--c, #555); height: var(--v, 60%); opacity: .9; position: relative; }
.seg-chasy i.seychas { outline: 2px solid var(--krem); outline-offset: 1px; opacity: 1; }
.seg-chasy i.proshlo { opacity: .28; }
.seg-shkala { display: flex; justify-content: space-between; font-size: 12px; opacity: .6; margin: 6px 0 16px; }
.seg-ceny { display: grid; gap: 8px; margin-bottom: 18px; }
.seg-ceny p { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 14px; border-bottom: 1px dashed rgba(247, 233, 207, .18); padding-bottom: 7px; }
.seg-ceny p:last-child { border: 0; padding: 0; }
.seg-ceny p span { display: flex; align-items: center; gap: 8px; opacity: .85; }
.seg-ceny p span i { width: 9px; height: 9px; border-radius: 2px; background: var(--c); flex: none; }
.seg-ceny b { font: 700 26px/1 var(--h); color: var(--shafran-sv); white-space: nowrap; }
.seg-ceny p.seychas-str b { font-size: 34px; color: var(--shafran); }

/* цвета цен — одни на «Сегодня» и в калькуляторе */
.c-den { --c: #2E8C7A; }
.c-vech { --c: #D49434; }
.c-vyh { --c: #C4512B; }
.c-utro { --c: #B3204D; }
.c-net { --c: #3A332A; }

/* бегущая строка */
.begushka { display: flex; overflow: hidden; background: var(--rzh-kn); color: var(--krem); padding: 15px 0; white-space: nowrap; position: relative; z-index: 2; }
.begushka-lenta { display: flex; flex: none; }
.begushka-lenta span { display: inline-flex; align-items: center; gap: 26px; padding-right: 26px; font: 700 28px/1 var(--h); text-transform: uppercase; letter-spacing: .06em; }
.begushka-lenta span::after { content: ""; width: 16px; height: 16px; flex: none; background: var(--shafran); -webkit-mask: url("favicon.svg") center/contain no-repeat; mask: url("favicon.svg") center/contain no-repeat; }
.begushka.idet .begushka-lenta { animation: begi 46s linear infinite; }
.begushka:not(.idet) .begushka-lenta { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; height: 28px; row-gap: 80px; overflow: hidden; padding-left: var(--pole); }
@keyframes begi { to { transform: translateX(-100%); } }

/* зигзаг на стыке — зубцы цветом своего раздела */
.domik::before, .kupel::before, .parmaster::before, .chaj::before, .otzyvy::before, .sertifikaty::before, .voprosy::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; z-index: 1;
  background: linear-gradient(-45deg, var(--zub) 8.5px, transparent 0), linear-gradient(45deg, var(--zub) 8.5px, transparent 0);
  background-size: 24px 24px; background-repeat: repeat-x; background-position: left bottom;
}

/* ---------------------------------------------------------------- светлые разделы */
.domik, .parmaster, .chaj, .otzyvy { color: #221D17; }
.domik { --zub: var(--pesok-sv); background: var(--pesok-sv); padding: 110px var(--pole) 100px; }
.sek-shapka { max-width: 1100px; margin-bottom: 46px; }
.sek-shapka-ryad { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.sek-shapka-ryad .sek-lead { margin: 0; max-width: 46ch; }
.cifry-4 { list-style: none; margin: 0 0 56px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid #221D17; }
.cifry-4 li { padding: 24px 24px 0 0; border-right: 1px solid rgba(34, 29, 23, .16); padding-left: 24px; }
.cifry-4 li:first-child { padding-left: 0; }
.cifry-4 li:last-child { border: 0; }
.cifry-4 b { font: 700 clamp(70px, 8vw, 128px)/.85 var(--h); color: var(--rzh-kn); white-space: nowrap; margin-right: 8px; }
/* 23.10: «10–12» не рвём на две строки — число не шире своей колонки, слово уходит под него */
.cifry-4 li { container-type: inline-size; }
.cifry-4 b { font-size: min(clamp(70px, 8vw, 128px), 48cqi); }
.cifry-4 em { font: 700 26px/1 var(--h); font-style: normal; text-transform: uppercase; color: #221D17; }
.cifry-4 p { margin: 10px 0 0; font-size: 14px; opacity: .75; max-width: 24ch; }
.vkladki-ryad { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.vkladki { display: flex; gap: 8px; flex-wrap: wrap; }
.vkladki button { border: 1.5px solid rgba(34, 29, 23, .25); background: transparent; border-radius: 999px; padding: 10px 20px; font: 700 20px/1 var(--h); text-transform: uppercase; letter-spacing: .05em; color: #221D17; }
.vkladki button.tut { background: #221D17; border-color: #221D17; color: var(--shafran); }
.strelki { display: flex; gap: 8px; flex: none; }
.strelki button { width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; font-size: 26px; line-height: 1; opacity: .75; }
.strelki button:hover { opacity: 1; }
.strelki-niz { justify-content: flex-end; margin-top: 18px; padding-right: var(--pole); }

/* ленты */
.lenta { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lenta::-webkit-scrollbar { display: none; }
.lenta > * { scroll-snap-align: start; flex: none; }
.kartochka { position: relative; border-radius: 18px; overflow: hidden; background: var(--ugol); cursor: zoom-in; }
.kartochka img, .kartochka video { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.kartochka:hover img { transform: scale(1.04); }
.kartochka figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 50px 18px 16px; background: linear-gradient(0deg, rgba(23, 20, 15, .85), transparent); color: var(--krem); font: 700 22px/1.05 var(--h); text-transform: uppercase; letter-spacing: .04em; }
.kartochka .metka { position: absolute; top: 14px; left: 14px; padding: 5px 10px; border-radius: 999px; background: rgba(23, 20, 15, .65); color: var(--shafran-sv); font: 700 12px/1 var(--t); letter-spacing: .1em; text-transform: uppercase; }
.lenta-domik .kartochka { width: clamp(270px, 30vw, 440px); aspect-ratio: 4 / 5; }
.lenta-domik .kartochka:first-child { width: clamp(300px, 44vw, 660px); aspect-ratio: auto; }

/* ---------------------------------------------------------------- кино */
.kino { min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--ugol); }
.kino-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kino-ten { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23, 20, 15, .9) 0%, rgba(23, 20, 15, .35) 55%, rgba(23, 20, 15, .1)), linear-gradient(0deg, rgba(23, 20, 15, .7), transparent 50%); }
.kino-in { position: relative; padding: 120px var(--pole) 80px; max-width: 900px; }
.kino-punkty { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 4px; }
.kino-punkty li { display: flex; align-items: center; gap: 18px; font: 700 clamp(26px, 3vw, 42px)/1.15 var(--h); text-transform: uppercase; letter-spacing: .03em; opacity: .32; transition: opacity .5s, color .5s, padding .5s; cursor: pointer; }
.kino-punkty li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: currentColor; flex: none; }
.kino-punkty li.tut { opacity: 1; color: var(--shafran); padding-left: 10px; }
.bez-anim .kino-punkty li { opacity: 1; }

/* ---------------------------------------------------------------- калькулятор */
.den { background: var(--noch) var(--uzor); padding: 110px var(--pole) 100px; }
.kalk { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 36px; align-items: start; }
.shag { background: var(--ugol); border: 1px solid rgba(247, 233, 207, .08); border-radius: 22px; padding: 26px 26px 24px; margin-bottom: 16px; }
.shag h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: 32px; margin-bottom: 18px; }
.shag h3 i { width: 34px; height: 34px; border-radius: 50%; background: var(--shafran); color: var(--noch); font: 700 20px/34px var(--h); text-align: center; font-style: normal; }
.shag h3 small { font: 500 13px/1.3 var(--t); text-transform: none; letter-spacing: 0; opacity: .6; }
.shag-tip { margin: 12px 0 0; font-size: 14px; opacity: .75; }
.shag-tip:empty { display: none; }
.shag-tip.vazhno { color: var(--shafran-sv); opacity: 1; }

.daty-blok { display: flex; align-items: stretch; gap: 8px; }
.daty-str { flex: none; width: 40px; border-radius: 14px; border: 1px solid rgba(247, 233, 207, .18); background: transparent; font-size: 22px; }
.daty-str:disabled { opacity: .25; cursor: default; }
.daty { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; flex: 1; min-width: 0; }
.data { border: 1px solid rgba(247, 233, 207, .14); background: var(--ugol2); border-radius: 14px; padding: 10px 4px 9px; text-align: center; line-height: 1.1; }
.data small { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.data b { display: block; font: 700 30px/1 var(--h); margin: 4px 0 2px; }
.data em { display: block; font-style: normal; font-size: 12px; opacity: .6; }
.data.vyh small { color: var(--shafran-sv); opacity: 1; }
.data.tut { background: var(--shafran); color: var(--noch); border-color: var(--shafran); }
.data.tut small, .data.tut em { color: var(--noch); opacity: .8; }

.chasy { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.chas { position: relative; border: 0; border-radius: 12px; padding: 11px 4px 9px; background: var(--ugol2); text-align: center; line-height: 1.05; box-shadow: inset 0 3px 0 var(--c); transition: background .15s, transform .15s; }
.chas b { display: block; font: 700 22px/1 var(--h); }
.chas small { display: block; font-size: 12px; opacity: .65; margin-top: 3px; }
.chas:hover { transform: translateY(-2px); }
.chas.v { background: var(--c); color: #fff; box-shadow: none; }
.chas.v small { opacity: .9; }
.chas.nach, .chas.kon { outline: 2px solid var(--krem); outline-offset: -2px; }
.chas.podarok::after { content: "🎁"; position: absolute; top: -8px; right: -4px; font-size: 15px; }
.chas:disabled { opacity: .25; cursor: default; transform: none; }
.chasy-legenda { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; font-size: 13px; opacity: .85; }
.chasy-legenda span { display: inline-flex; align-items: center; gap: 7px; }
.chasy-legenda i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.chasy-upr, .kto-ryad { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; align-items: center; }
.schetchik { display: inline-flex; align-items: center; gap: 4px; background: var(--ugol2); border-radius: 999px; padding: 5px; }
.schetchik span { font-size: 13px; opacity: .7; padding: 0 8px 0 12px; }
.schetchik button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(247, 233, 207, .1); font-size: 20px; line-height: 1; }
.schetchik button:hover { background: var(--shafran); color: var(--noch); }
.schetchik b { min-width: 58px; text-align: center; font: 700 24px/1 var(--h); }

.chipy { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 10px; border: 1.5px solid rgba(247, 233, 207, .2); background: transparent; border-radius: 16px; padding: 12px 16px; text-align: left; line-height: 1.25; }
.chip b { display: block; font: 700 21px/1 var(--h); text-transform: uppercase; letter-spacing: .03em; }
.chip small { display: block; font-size: 12px; opacity: .65; margin-top: 3px; }
.chip.tut { border-color: var(--shafran); background: rgba(242, 169, 59, .12); }
.chip.tut b { color: var(--shafran); }
.galka { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid rgba(247, 233, 207, .4); flex: none; position: relative; }
.chip.tut .galka { background: var(--shafran); border-color: var(--shafran); }
.chip.tut .galka::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--noch); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.chip-dr em { font-style: normal; color: var(--shafran-sv); font-weight: 700; }

.dop { display: grid; gap: 10px; }
.dop-str { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; background: var(--ugol2); border-radius: 16px; padding: 10px 14px 10px 10px; border: 1.5px solid transparent; }
.dop-str.tut { border-color: rgba(242, 169, 59, .6); }
.dop-str img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.dop-str b { display: block; font: 700 22px/1 var(--h); text-transform: uppercase; letter-spacing: .03em; }
.dop-str p { margin: 4px 0 0; font-size: 13px; opacity: .7; line-height: 1.35; overflow-wrap: break-word; }
.dop-str .cena { color: var(--shafran-sv); font-weight: 700; opacity: 1; }
.pereklyuch { width: 52px; height: 30px; border-radius: 999px; border: 0; background: rgba(247, 233, 207, .18); position: relative; flex: none; }
.pereklyuch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--krem); transition: left .2s; }
.pereklyuch.tut { background: var(--shafran); }
.pereklyuch.tut::after { left: 25px; background: var(--noch); }
.kupel-kogda { grid-column: 2 / 4; display: flex; gap: 6px; flex-wrap: wrap; }
.kupel-kogda button { border: 1px solid rgba(247, 233, 207, .25); background: transparent; border-radius: 999px; padding: 7px 14px; font-size: 13px; }
.kupel-kogda button.tut { background: var(--krem); color: var(--noch); border-color: var(--krem); }
.dop-str .schetchik { background: rgba(23, 20, 15, .5); }
.dop-str .schetchik b { min-width: 34px; }

/* чек */
.chek { position: sticky; top: 92px; color: #221D17; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .45)); }
.chek-zub { height: 12px; background: linear-gradient(-45deg, var(--pesok-sv) 8.5px, transparent 0), linear-gradient(45deg, var(--pesok-sv) 8.5px, transparent 0); background-size: 24px 24px; background-repeat: repeat-x; background-position: left bottom; }
.chek-in { background: var(--pesok-sv); border-radius: 0 0 22px 22px; padding: 18px 26px 26px; }
.chek-nad { margin: 0; font: 700 34px/1 var(--h); text-transform: uppercase; letter-spacing: .03em; }
.chek-kogda { margin: 8px 0 0; font-weight: 700; font-size: 15px; }
.chek-kto { margin: 2px 0 0; font-size: 13px; opacity: .7; }
.chek-stroki { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1.5px dashed rgba(34, 29, 23, .3); display: grid; gap: 8px; }
.chek-stroki li { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; line-height: 1.35; }
.chek-stroki li b { white-space: nowrap; }
.chek-stroki li.minus b { color: var(--zel); }
.chek-stroki li.pod { font-size: 12px; opacity: .65; margin-top: -6px; padding-left: 12px; }
.chek-stroki li.inf b { font-weight: 600; opacity: .7; }
.chek-stroki li.net { opacity: .5; }          /* пункт не выбран: «Купель — нет» (все пункты в чеке — правка владельца 30.10) */
.chek-stroki li.net b { font-weight: 600; }
.chek-itog { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 2px solid #221D17; }
.chek-itog span { font: 700 26px/1 var(--h); text-transform: uppercase; }
.chek-itog b { font: 700 64px/.9 var(--h); color: var(--rzh-kn); }
.chek-kak { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(15, 90, 80, .1); color: var(--zel-g); font-size: 13px; line-height: 1.45; }
.chek-kak:empty { display: none; }
.chek-var { margin-top: 12px; font-size: 13px; }
.chek-var summary { cursor: pointer; font-weight: 700; opacity: .8; }
.chek-var ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; }
.chek-var li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(34, 29, 23, .05); }
.chek-var li.vash { background: #221D17; color: var(--shafran-sv); font-weight: 700; }
.chek-var li.vash span::after { content: " · ваш"; color: var(--krem); font-weight: 600; }
.chek-var li.net { opacity: .45; }
.chek-ne { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; opacity: .75; }
.forma { margin-top: 18px; padding-top: 16px; border-top: 1.5px dashed rgba(34, 29, 23, .3); display: grid; gap: 10px; }
.forma-zag { margin: 0; font: 700 26px/1 var(--h); text-transform: uppercase; }
.forma-lead { margin: 0; font-size: 13px; opacity: .72; line-height: 1.45; }
.forma-ryad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.forma label span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; opacity: .7; margin-bottom: 4px; }
.forma input, .forma textarea { width: 100%; border: 1.5px solid rgba(34, 29, 23, .2); background: #fff; border-radius: 12px; padding: 12px 14px; font: 15px/1.3 var(--t); color: #221D17; }
.forma input:focus, .forma textarea:focus { outline: 0; border-color: var(--rzh-kn); }
.forma .knopka { background: var(--rzh-kn); color: #fff; box-shadow: 0 10px 30px -12px rgba(180, 68, 31, .8); }
.forma .knopka:hover { background: var(--rzh); }
.forma-otvet { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--zel); color: #fff; font-size: 14px; }
.forma-otvet.oshibka { background: var(--malina); }
.den-note { margin: 28px 0 0; font-size: 14px; opacity: .65; max-width: 80ch; }
.skidki { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.skidki li { border: 1px solid rgba(242, 169, 59, .28); border-radius: 18px; padding: 18px 16px; background: linear-gradient(160deg, rgba(242, 169, 59, .08), transparent 60%); }
.skidki b { display: block; font: 700 46px/.9 var(--h); color: var(--shafran); white-space: nowrap; }
.skidki strong { display: block; margin-top: 8px; font: 700 18px/1.05 var(--h); text-transform: uppercase; letter-spacing: .03em; }
.skidki span { display: block; margin-top: 5px; font-size: 12.5px; opacity: .65; line-height: 1.4; }

/* ---------------------------------------------------------------- купель */
.kupel { --zub: var(--zel); background: var(--zel) var(--uzor); padding: 110px 0 100px; color: var(--krem); }
.kupel-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; padding: 0 var(--pole); margin-bottom: 50px; }
.kupel-ceny { list-style: none; display: flex; gap: 14px; margin: 30px 0 0; padding: 0; flex-wrap: wrap; }
.kupel-ceny li { background: var(--zel-g); border-radius: 18px; padding: 16px 22px; }
.kupel-ceny b { display: block; font: 700 50px/.9 var(--h); color: var(--shafran); }
.kupel-ceny span { font-size: 13px; opacity: .8; }
.citata { margin: 30px 0 0; padding: 0 0 0 22px; border-left: 3px solid var(--shafran); }
.citata p { margin: 0; font: italic 500 22px/1.35 var(--t); }
.citata cite { display: block; margin-top: 8px; font-style: normal; font-size: 13px; opacity: .7; }
.kupel-video { border-radius: 26px; overflow: hidden; aspect-ratio: 16 / 10; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); }
.kupel-video video { width: 100%; height: 100%; object-fit: cover; }
.lenta-blok .lenta { padding: 0 var(--pole); scroll-padding: 0 var(--pole); }
.lenta-kupel .kartochka { width: clamp(220px, 22vw, 320px); aspect-ratio: 3 / 4; }

/* ---------------------------------------------------------------- пар-мастер */
.parmaster { --zub: var(--pesok); background: var(--pesok); padding: 110px var(--pole) 100px; display: grid; grid-template-columns: minmax(260px, 420px) minmax(0, 1fr); gap: 64px; align-items: center; }
.pm-video { border-radius: 200px 200px 26px 26px; overflow: hidden; aspect-ratio: 9 / 14; box-shadow: 0 40px 70px -30px rgba(34, 29, 23, .55); border: 6px solid var(--pesok-sv); }
.pm-video video { width: 100%; height: 100%; object-fit: cover; }
.pm-cena { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 0; }
.pm-cena b { font: 700 92px/.85 var(--h); color: var(--rzh-kn); }
.pm-cena span { font: 700 24px/1 var(--h); text-transform: uppercase; }
.pm-citaty { display: grid; gap: 14px; margin-top: 34px; }
.pm-citaty blockquote { margin: 0; background: var(--pesok-sv); border-radius: 18px; padding: 18px 22px 18px 58px; position: relative; }
.pm-citaty blockquote::before { content: "«"; position: absolute; top: 8px; left: 16px; font: 700 70px/1 var(--h); color: var(--shafran-t); }
.pm-citaty p { margin: 0; font: italic 500 17px/1.45 var(--t); }
.pm-citaty cite { display: block; margin-top: 8px; font-style: normal; font-size: 12.5px; opacity: .65; }
.pm-lenta-blok { grid-column: 1 / -1; margin: 0 calc(-1 * var(--pole)); min-width: 0; }
.pm-lenta-blok[hidden] { display: none; }
.lenta-pm .kartochka { width: clamp(220px, 22vw, 320px); aspect-ratio: 3 / 4; }

/* ---------------------------------------------------------------- истории */
.istorii-sek { background: var(--noch) var(--uzor); padding: 110px var(--pole); display: grid; grid-template-columns: minmax(0, 1fr) 380px minmax(0, 1fr); gap: 50px; align-items: center; }
.istorii-ramka { display: contents; }
.istorii { position: relative; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: var(--ugol); box-shadow: 0 0 0 1px rgba(242, 169, 59, .3), 0 50px 90px -30px rgba(242, 169, 59, .25); cursor: pointer; }
.polosy { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 3; display: flex; gap: 4px; }
.polosy span { flex: 1; height: 3px; border-radius: 3px; background: rgba(247, 233, 207, .3); overflow: hidden; }
.polosy span i { display: block; height: 100%; background: var(--krem); width: calc(var(--dolya, 0) * 100%); }
.kadry { position: absolute; inset: 0; }
.kadr { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
.kadr.tut { opacity: 1; }
.kadr video, .kadr img { width: 100%; height: 100%; object-fit: cover; }
.kadr p { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 70px 20px 22px; background: linear-gradient(0deg, rgba(23, 20, 15, .9), transparent); font-size: 15px; line-height: 1.4; }
.kadr p b { display: block; font: 700 30px/1 var(--h); text-transform: uppercase; color: var(--shafran); margin-bottom: 4px; }
.istorii-shagi { display: grid; gap: 4px; }
.istorii-shagi button { display: flex; align-items: center; gap: 14px; border: 0; background: transparent; text-align: left; padding: 8px 0; font: 700 30px/1 var(--h); text-transform: uppercase; letter-spacing: .03em; opacity: .4; transition: opacity .3s, color .3s; }
.istorii-shagi button small { font: 700 13px/1 var(--t); opacity: .7; width: 22px; }
.istorii-shagi button.tut { opacity: 1; color: var(--shafran); }

/* ---------------------------------------------------------------- круглый год */
.god { background: var(--god-fon, #141B2C) var(--uzor); padding: 110px 0 100px; transition: background-color .7s ease; }
.god .sek-shapka { padding: 0 var(--pole); }
.sezony { display: flex; gap: 10px; padding: 0 var(--pole); flex-wrap: wrap; }
.sezony button { border: 1.5px solid rgba(247, 233, 207, .35); background: transparent; border-radius: 999px; padding: 12px 26px; font: 700 26px/1 var(--h); text-transform: uppercase; letter-spacing: .05em; }
.sezony button.tut { background: var(--shafran); border-color: var(--shafran); color: var(--noch); }
.god-text { padding: 0 var(--pole); margin: 22px 0 28px; font-size: 18px; max-width: 60ch; opacity: .88; min-height: 2.6em; }
.lenta-god .kartochka { width: clamp(240px, 24vw, 350px); aspect-ratio: 4 / 5; }

/* ---------------------------------------------------------------- двор: пункты на гирлянде */
.dvor { min-height: 100vh; overflow: hidden; background: var(--ugol); display: flex; align-items: flex-end; }
.dvor-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dvor-ten { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 20, 15, .85) 0%, rgba(23, 20, 15, .2) 38%, rgba(23, 20, 15, .3) 60%, rgba(23, 20, 15, .92) 100%); }
.dvor-in { position: relative; width: 100%; padding: 120px var(--pole) 70px; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; }
.dvor-tekst { max-width: 720px; }
.girlyanda { position: relative; margin-top: 60px; }
.girlyanda-provod { position: absolute; left: 0; top: 0; width: 100%; height: 120px; }
.girlyanda ul { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.girlyanda li { padding-top: 34px; position: relative; }
.girlyanda li:nth-child(1) { margin-top: 18px; } .girlyanda li:nth-child(2) { margin-top: 62px; } .girlyanda li:nth-child(3) { margin-top: 56px; }
.girlyanda li:nth-child(4) { margin-top: 38px; } .girlyanda li:nth-child(5) { margin-top: 26px; }
.girlyanda li::before { content: ""; position: absolute; top: 0; left: 10px; width: 18px; height: 24px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--shafran-sv); box-shadow: 0 0 18px 4px rgba(247, 196, 106, .75), 0 0 50px 10px rgba(242, 169, 59, .35); }
.girlyanda li::after { content: ""; position: absolute; top: -10px; left: 15px; width: 8px; height: 10px; background: #4A4033; border-radius: 2px; }
.js-anim .girlyanda li::before { animation: migaet 3.2s ease-in-out infinite; }
.js-anim .girlyanda li:nth-child(2n)::before { animation-delay: -1.4s; }
.js-anim .girlyanda li:nth-child(3n)::before { animation-delay: -2.2s; }
@keyframes migaet { 50% { opacity: .55; box-shadow: 0 0 8px 2px rgba(247, 196, 106, .5); } }
.girlyanda b { display: block; font: 700 clamp(24px, 2.2vw, 32px)/1 var(--h); text-transform: uppercase; letter-spacing: .03em; color: var(--shafran-sv); }
.girlyanda span { display: block; margin-top: 6px; font-size: 14px; opacity: .85; max-width: 24ch; }

/* ---------------------------------------------------------------- чай */
.chaj { --zub: var(--pesok-sv); background: var(--pesok-sv); padding: 110px var(--pole) 100px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.chaj-video { border-radius: 26px; overflow: hidden; aspect-ratio: 16 / 11; box-shadow: 0 40px 70px -30px rgba(34, 29, 23, .5); }
.chaj-video video { width: 100%; height: 100%; object-fit: cover; }
.chaj-foto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 30px; }
.chaj-foto .kartochka { aspect-ratio: 1; border-radius: 14px; }
.chaj-foto .kartochka figcaption { font-size: 16px; padding: 30px 10px 10px; }
/* 2 или 4 фото — ровной сеткой 2 × 2, без одинокого кадра во втором ряду */
.chaj-foto:has(> :nth-child(2):last-child), .chaj-foto:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }

/* ---------------------------------------------------------------- подарочный сертификат (23.10): их электронный, сумма встаёт прямо на него */
.sertifikaty { --zub: var(--rzh-kn); background: var(--rzh-kn); padding: 100px var(--pole); color: var(--krem); }
.sertifikaty .nad, .sertifikaty .nad svg { color: var(--shafran-sv); }
.sert-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 60px; align-items: start; }
.sert-punkty { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.sert-punkty li { display: flex; gap: 12px; align-items: baseline; font-size: 17px; font-weight: 700; line-height: 1.35; }
.sert-punkty li::before { content: "✓"; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--shafran); color: var(--noch); font-size: 14px; font-weight: 800; line-height: 26px; text-align: center; transform: translateY(-1px); }
.sert-karta { position: relative; margin-top: 36px; border-radius: 18px; overflow: hidden; container-type: inline-size; transform: rotate(-1.6deg); transition: transform .5s ease; box-shadow: 0 0 0 1px rgba(247, 233, 207, .25), 0 44px 80px -30px rgba(0, 0, 0, .7); }
.sert-karta:hover { transform: none; }
.sert-karta[hidden] { display: none; }
.sert-karta img { width: 100%; height: auto; }
.sert-summa { position: absolute; left: 34%; top: 72.5%; transform: translateY(-50%); margin: 0; color: #3A1A0B; white-space: nowrap;
  font: italic 700 clamp(18px, 2.4vw, 34px)/1 Georgia, "Times New Roman", serif; font-size: 4.9cqw; }
.sert-summa:empty { display: none; }
.sert-forma { background: var(--pesok-sv); color: #221D17; border-radius: 26px; padding: 30px 30px 26px; display: grid; gap: 22px; box-shadow: 0 44px 80px -30px rgba(0, 0, 0, .6); }
.sert-forma .forma-zag { font-size: 38px; }
.sert-shag { display: grid; gap: 10px; }
.sert-shag-zag { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 22px/1 var(--h); text-transform: uppercase; letter-spacing: .03em; }
.sert-shag-zag i { width: 28px; height: 28px; border-radius: 50%; background: var(--rzh-kn); color: #fff; font: 800 14px/28px var(--t); text-align: center; font-style: normal; flex: none; }
.sert-forma .chip { border-color: rgba(34, 29, 23, .2); color: #221D17; padding: 11px 18px; border-radius: 14px; font-size: 14px; font-weight: 700; }
.sert-forma .chip b { font-size: 24px; letter-spacing: .02em; }
.sert-forma .chip:hover { border-color: var(--rzh-kn); }
.sert-forma .chip.tut { border-color: var(--rzh-kn); background: rgba(180, 68, 31, .1); color: var(--rzh-kn); }
.sert-forma .chip.tut b { color: var(--rzh-kn); }
.sert-forma label { display: block; }
.sert-forma label[hidden] { display: none; }
.sert-forma label span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; opacity: .7; margin-bottom: 4px; }
.sert-forma label span i { font-style: normal; font-weight: 400; letter-spacing: 0; }
.sert-forma input, .sert-forma textarea { width: 100%; border: 1.5px solid rgba(34, 29, 23, .2); background: #fff; border-radius: 12px; padding: 12px 14px; font: 15px/1.3 var(--t); color: #221D17; }
.sert-forma input:focus, .sert-forma textarea:focus { outline: 0; border-color: var(--rzh-kn); }
.sert-forma .forma-ryad + label, .sert-forma label + label { margin-top: 10px; }
.sert-forma .forma-ryad > label + label { margin-top: 0; }
.sert-forma .knopka { min-height: 56px; background: var(--rzh-kn); color: #fff; font-size: 16px; box-shadow: 0 10px 30px -12px rgba(180, 68, 31, .8); }
.sert-forma .knopka:hover { background: var(--rzh); }
.sert-forma .knopka:disabled { background: #8C7F6E; box-shadow: none; cursor: default; transform: none; }
.sert-forma .forma-pod { margin-top: -12px; }
.sert-forma .forma-otvet { margin-top: -8px; }
.sert-forma .forma-otvet[hidden] { display: none; }

/* ---------------------------------------------------------------- отзывы */
.otzyvy { --zub: var(--pesok-sv); background: var(--pesok-sv); padding: 110px var(--pole) 100px; }
.otzyvy-vse { display: flex; align-items: center; gap: 14px; text-decoration: none; background: #221D17; color: var(--krem); border-radius: 999px; padding: 8px 22px 8px 8px; }
.otzyvy-vse b { width: 58px; height: 58px; border-radius: 50%; background: var(--shafran); color: var(--noch); font: 700 30px/58px var(--h); text-align: center; }
.otzyvy-vse span { font-size: 14px; font-weight: 700; }
.temy { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.temy button { border: 1.5px solid rgba(34, 29, 23, .22); background: transparent; border-radius: 999px; padding: 9px 18px; font: 700 19px/1 var(--h); text-transform: uppercase; letter-spacing: .04em; color: #221D17; }
.temy button em { font-style: normal; font: 600 12px/1 var(--t); opacity: .55; margin-left: 4px; }
.temy button.tut { background: #221D17; color: var(--shafran); border-color: #221D17; }
.otzyvy-setka { display: grid; grid-template-columns: repeat(var(--kol, 3), minmax(0, 1fr)); gap: 16px; align-items: start; }
.ot-kol { display: grid; gap: 16px; min-width: 0; }
.otzyv { background: #fff; border-radius: 18px; padding: 22px 22px 20px; box-shadow: 0 10px 30px -20px rgba(34, 29, 23, .4); }
.otzyv[hidden] { display: none; }
.otzyv-sh { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.otzyv-sh i { width: 42px; height: 42px; border-radius: 50%; background: var(--zel); color: var(--shafran-sv); font: 700 22px/42px var(--h); text-align: center; font-style: normal; flex: none; }
.otzyv-sh b { display: block; font-size: 15px; }
.otzyv-sh small { display: block; font-size: 12px; opacity: .6; }
.otzyv .zv { color: var(--shafran-t); letter-spacing: 2px; font-size: 14px; margin-left: auto; }
.otzyv p { margin: 0; font-size: 15px; line-height: 1.55; }
.otzyv mark { background: rgba(242, 169, 59, .35); color: inherit; border-radius: 3px; padding: 0 2px; }

/* ---------------------------------------------------------------- вопросы */
.voprosy { --zub: var(--noch); background: var(--noch) var(--uzor); padding: 100px var(--pole); }
.voprosy-spisok { max-width: 980px; }
.voprosy details { border-top: 1px solid rgba(247, 233, 207, .16); }
.voprosy details:last-child { border-bottom: 1px solid rgba(247, 233, 207, .16); }
.voprosy summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font: 700 clamp(24px, 2.4vw, 34px)/1.05 var(--h); text-transform: uppercase; letter-spacing: .03em; }
.voprosy summary::-webkit-details-marker { display: none; }
.voprosy summary::after { content: "+"; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--shafran); color: var(--shafran); font: 400 26px/36px var(--t); text-align: center; flex: none; transition: transform .3s; }
.voprosy details[open] summary::after { transform: rotate(45deg); background: var(--shafran); color: var(--noch); }
.voprosy details p { margin: 0 0 24px; max-width: 70ch; font-size: 17px; opacity: .85; }

/* ---------------------------------------------------------------- финал */
.final { background: var(--noch); overflow: hidden; }
.final-foto { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .38; }
.final::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--noch) 15%, rgba(23, 20, 15, .55)); pointer-events: none; }
.final-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; padding: 120px var(--pole) 70px; align-items: center; }
.final h2 { font-size: clamp(64px, 9vw, 140px); color: var(--shafran); }
.final-kontakty { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; }
.final-kontakty li { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: baseline; border-bottom: 1px solid rgba(247, 233, 207, .14); padding-bottom: 10px; }
.final-kontakty span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.final-kontakty a, .final-kontakty b { font: 700 24px/1.15 var(--h); letter-spacing: .03em; text-decoration: none; }
.final-soc { display: flex; gap: 20px; margin: 24px 0 0; font-size: 14px; font-weight: 700; }
.final-soc a { text-decoration: none; border-bottom: 1px solid var(--shafran); padding-bottom: 2px; }
.final-soc a[hidden] { display: none; }
.final-karta { border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 3.4; border: 1px solid rgba(242, 169, 59, .3); background: var(--ugol); }
.final-karta iframe { width: 100%; height: 100%; border: 0; display: block; }
.podval { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px 30px; padding: 24px var(--pole) 100px; border-top: 1px solid rgba(247, 233, 207, .12); font-size: 13px; opacity: .6; }
.podval a { margin-left: auto; }

/* плавающая кнопка */
.plav-knopka { position: fixed; right: 22px; bottom: 22px; z-index: 40; display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; border-radius: 999px; background: var(--shafran); color: var(--noch); text-decoration: none; font: 700 15px/1 var(--t); box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .7); opacity: 0; visibility: hidden; transform: translateY(20px); pointer-events: none; transition: opacity .3s, transform .3s, visibility .3s; }
.plav-knopka.vidna { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }

/* лупа */
.lupa { position: fixed; inset: 0; z-index: 100; background: rgba(12, 10, 8, .95); display: flex; align-items: center; justify-content: center; padding: 60px 70px; }
.lupa[hidden] { display: none; }
.lupa img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }
.lupa button { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(247, 233, 207, .4); background: rgba(23, 20, 15, .6); font-size: 28px; line-height: 1; color: var(--krem); }
.lupa-x { top: 16px; right: 16px; }
.lupa-n { left: 12px; top: 50%; transform: translateY(-50%); }
.lupa-v { right: 12px; top: 50%; transform: translateY(-50%); }
.lupa-pod { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 14px; opacity: .85; }

/* появление — только под .js-anim */
.js-anim [data-poyav] { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; transition-delay: var(--zaderzhka, 0ms); }
.js-anim [data-poyav].vidno { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- планшет */
@media (max-width: 1240px) {
  .menu { gap: 16px; }
  .menu a { font-size: 13px; }
  .shapka-tel { display: none; }
  .skidki { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1080px) {
  .menu { position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; padding: 90px var(--pole) 40px; background: var(--noch) var(--uzor); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility .3s; margin: 0; }
  .menu.otkryto { opacity: 1; visibility: visible; pointer-events: auto; }
  .menu a { font: 700 40px/1.1 var(--h); text-transform: uppercase; border: 0; }
  .menu-tel { display: block; margin-top: 20px; color: var(--shafran); }
  .burger { display: flex; }
  .knopka-sh { margin-left: auto; }
  .geroy-in { grid-template-columns: 1fr; }
  .geroy-prav { max-width: 440px; }
  .kalk { grid-template-columns: 1fr; }
  .chek { position: relative; top: 0; max-width: 560px; }
  .kupel-in, .chaj { grid-template-columns: 1fr; }
  .parmaster { grid-template-columns: 1fr; }
  .pm-video { max-width: 380px; }
  .istorii-sek { grid-template-columns: 1fr; }
  .istorii-ramka { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 30px; align-items: center; }
  .final-in { grid-template-columns: 1fr; }
  .sert-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sert-karta { max-width: 640px; }
  .girlyanda ul { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .girlyanda-provod { display: none; }
  .girlyanda li { margin-top: 0 !important; }
}

/* ---------------------------------------------------------------- телефон */
@media (max-width: 700px) {
  body { font-size: 16px; }
  section { scroll-margin-top: 62px; }
  .shapka { height: 62px; margin-bottom: -62px; gap: 10px; }
  .shapka.skolzit { height: 58px; }
  .logo img { width: 38px; height: 38px; }
  .logo b { font-size: 25px; }
  .logo i { font-size: 12px; }
  .knopka-sh { min-height: 40px; padding: 0 14px; font-size: 13px; }
  .burger { width: 40px; height: 40px; }
  .geroy-in { padding: 100px var(--pole) 30px; gap: 28px; }
  .geroy-title { font-size: clamp(96px, 30vw, 150px); }
  .geroy-pod { font-size: 22px; gap: 10px; }
  .cherta { width: 30px; }
  .knopki .knopka { flex: 1 1 100%; }
  .geroy-cifry { grid-template-columns: 1fr 1fr; gap: 16px 0; }
  .geroy-cifry li { padding-right: 12px; margin-right: 12px; }
  .geroy-cifry li:nth-child(2n) { border: 0; margin: 0; padding: 0; }
  .segodnya { padding: 18px 16px 16px; }
  .knopka-raschet { min-height: 84px; padding: 12px 12px 12px 22px; font-size: 31px; border-radius: 20px; }
  .knopka-raschet i { width: 50px; height: 50px; }
  .begushka-lenta span { font-size: 22px; }
  .domik, .den, .parmaster, .chaj, .otzyvy, .sertifikaty, .voprosy { padding-top: 76px; padding-bottom: 70px; }
  .kupel, .god { padding-top: 76px; padding-bottom: 70px; }
  .istorii-sek { padding: 76px var(--pole); gap: 30px; }
  .sek-shapka { margin-bottom: 30px; }
  .cifry-4 { grid-template-columns: 1fr 1fr; }
  .cifry-4 li { padding: 18px 12px 18px 0; border-right: 0; border-bottom: 1px solid rgba(34, 29, 23, .14); }
  .cifry-4 li:nth-child(2n) { padding-left: 12px; border-left: 1px solid rgba(34, 29, 23, .14); }
  .cifry-4 li:first-child { padding-left: 0; }
  .cifry-4 b { font-size: 66px; }
  .cifry-4 em { font-size: 20px; }
  .vkladki-ryad { flex-direction: column; align-items: stretch; }
  .vkladki { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--pole) * -1); padding: 0 var(--pole); }
  .vkladki button { flex: none; font-size: 18px; }
  .vkladki-ryad .strelki { display: none; }
  .lenta-domik { margin: 0 calc(var(--pole) * -1); padding: 0 var(--pole); scroll-padding: 0 var(--pole); }
  .lenta-domik .kartochka, .lenta-domik .kartochka:first-child { width: 78vw; aspect-ratio: 4 / 5; }
  .kino { min-height: 86vh; }
  .kino-in { padding: 90px var(--pole) 50px; }
  .shag { padding: 20px 16px 18px; border-radius: 18px; }
  .shag h3 { font-size: 27px; }
  .daty-str { width: 30px; }
  .daty { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .data b { font-size: 25px; }
  .chasy { grid-template-columns: repeat(4, 1fr); }
  .chip { flex: 1 1 100%; }
  .dop-str { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; }
  .dop-str img { width: 48px; height: 48px; }
  .dop-str b { font-size: 19px; }
  .kupel-kogda { grid-column: 1 / 4; }
  .dop-str .schetchik button { width: 32px; height: 32px; }
  .dop-str .schetchik b { min-width: 22px; font-size: 21px; }
  .chek-in { padding: 16px 18px 22px; }
  .chek-itog b { font-size: 54px; }
  .forma-ryad { grid-template-columns: 1fr; }
  .skidki { grid-template-columns: 1fr 1fr; }
  .skidki b { font-size: 38px; }
  .kupel-in { gap: 30px; }
  .kupel-ceny b { font-size: 42px; }
  .lenta-kupel .kartochka, .lenta-pm .kartochka { width: 64vw; }
  .citata p { font-size: 19px; }
  .parmaster { gap: 36px; }
  .pm-video { max-width: 300px; margin: 0 auto; }
  .pm-cena b { font-size: 74px; }
  .istorii-ramka { grid-template-columns: 1fr; }
  .istorii { max-width: 340px; width: 100%; margin: 0 auto; }
  .istorii-shagi { grid-template-columns: 1fr 1fr; }
  .istorii-shagi button { font-size: 22px; }
  .sezony button { font-size: 21px; padding: 10px 18px; }
  .lenta-god .kartochka { width: 70vw; }
  .dvor-in { padding: 90px var(--pole) 50px; }
  .girlyanda ul { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .chaj-foto { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .chaj-foto .kartochka figcaption { display: none; }
  .sert-karta { margin-top: 28px; transform: rotate(-1deg); }
  .sert-forma { padding: 22px 16px 20px; border-radius: 20px; gap: 20px; }
  .sert-forma .forma-zag { font-size: 32px; }
  .sert-forma .chip { flex: 1 1 calc(50% - 4px); justify-content: center; text-align: center; }
  .final-in { padding: 90px var(--pole) 50px; gap: 30px; }
  .final-kontakty li { grid-template-columns: 1fr; gap: 2px; }
  .final-kontakty a, .final-kontakty b { font-size: 22px; }
  .podval a { margin-left: 0; }
  .plav-knopka { left: 16px; right: 16px; bottom: 14px; justify-content: center; }
  .lupa { padding: 60px 10px; }
}

/* ---------------------------------------------------------------- бронь (16.10): месяц с ценами и праздниками, часы, купели, чек */
.moya-bron { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: -18px 0 22px; padding: 14px 18px; border-radius: 16px; background: var(--ugol); border: 1px solid rgba(242, 169, 59, .4); font-size: 14px; }
.moya-bron[hidden] { display: none; }
.moya-bron b { font: 700 22px/1 var(--h); text-transform: uppercase; letter-spacing: .03em; color: var(--shafran); }

.blizh { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 14px; padding: 2px 0; }
.blizh::-webkit-scrollbar { display: none; }
.bl { flex: none; border: 1px solid rgba(247, 233, 207, .16); background: var(--ugol2); border-radius: 14px; padding: 9px 14px 8px; text-align: left; line-height: 1.15; }
.bl b { display: block; font: 700 19px/1 var(--h); text-transform: uppercase; letter-spacing: .03em; }
.bl small { display: block; font-size: 12px; opacity: .72; margin-top: 4px; white-space: nowrap; }
.bl:hover { border-color: rgba(242, 169, 59, .6); }
.bl.bl-net { opacity: .42; }
.bl.tut { border-color: var(--shafran); background: rgba(242, 169, 59, .14); }

.mes { background: var(--ugol2); border-radius: 18px; padding: 14px 14px 12px; }
.mes-shapka { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mes-shapka b { font: 700 30px/1 var(--h); text-transform: uppercase; letter-spacing: .04em; }
.mes-str { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(247, 233, 207, .22); background: transparent; font-size: 24px; line-height: 1; }
.mes-str:hover:not(:disabled) { background: var(--shafran); color: var(--noch); border-color: var(--shafran); }
.mes-str:disabled { opacity: .2; cursor: default; }
.mes-dn, .mes-setka { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.mes-dn span { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .5; padding-bottom: 4px; }
.mes-dn .vyh { color: var(--shafran-sv); opacity: .9; }
.mes-den { position: relative; isolation: isolate; border: 1px solid rgba(247, 233, 207, .1); background: var(--ugol); border-radius: 12px; padding: 8px 2px 11px; min-height: 64px; text-align: center; line-height: 1.05; overflow: hidden; transition: transform .15s, border-color .15s; }
.mes-den:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(242, 169, 59, .6); }
.mes-den b { display: block; font: 700 24px/1 var(--h); }
.mes-den small { display: block; font-size: 11px; opacity: .78; margin-top: 4px; white-space: nowrap; }
.mes-den small i { font-style: normal; }
.mes-den.vyh b { color: var(--shafran-sv); }
.mes-den.mimo { opacity: .2; background: transparent; cursor: default; }
.mes-den.net, .mes-den.zakr { background: transparent; border-style: dashed; }
.mes-den.net b, .mes-den.net small, .mes-den.zakr b, .mes-den.zakr small { opacity: .5; }
.mes-zap { position: absolute; left: 7px; right: 7px; bottom: 5px; height: 3px; border-radius: 2px; background: rgba(247, 233, 207, .12); }
.mes-zap::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--z); border-radius: 2px; background: #6CC59B; }
.mes-den.osob { border-color: var(--pc); }
.mes-den.osob::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pc); opacity: .34; }
.mes-den.osob b { color: #fff; }
.mes-znak { position: absolute; top: 3px; right: 4px; font-style: normal; font-size: 12px; line-height: 1; }
.mes-den.seg { box-shadow: inset 0 0 0 1.5px rgba(247, 233, 207, .55); }
.mes-den.tut { background: var(--shafran); color: var(--noch); border: 1px solid var(--shafran); box-shadow: 0 8px 22px -8px rgba(242, 169, 59, .8); }
.mes-den.tut b, .mes-den.tut.vyh b { color: var(--noch); }
.mes-den.tut small { opacity: .85; }
.mes-den.tut::before { opacity: 0; }
.mes-den.tut .mes-zap::after { background: var(--zel); }
.mes-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 12.5px; opacity: .85; }
.mes-leg span { display: inline-flex; align-items: center; gap: 7px; }
.mes-leg i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(247, 233, 207, .2); }
.ml-svob i { background: linear-gradient(to top, #6CC59B 3px, var(--ugol) 3px); }
.ml-chast i { background: linear-gradient(to right, #6CC59B 45%, rgba(247, 233, 207, .12) 45%) bottom / 100% 3px no-repeat, var(--ugol); }
.ml-net i { border-style: dashed; background: transparent; }
.ml-osob i { background: var(--pc); border-color: var(--pc); }

.pakety { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pakety:empty { display: none; }
.paket { border: 1.5px solid rgba(179, 32, 77, .65); background: rgba(179, 32, 77, .14); border-radius: 14px; padding: 9px 14px 8px; text-align: left; line-height: 1.15; }
.paket b { display: block; font: 700 19px/1 var(--h); text-transform: uppercase; letter-spacing: .03em; }
.paket small { display: block; font-size: 12px; opacity: .78; margin-top: 4px; }
.paket:hover:not(:disabled) { background: rgba(179, 32, 77, .3); }
.paket.tut { background: var(--malina); border-color: var(--malina); color: #fff; }
.paket:disabled { opacity: .35; cursor: default; }

.chasy { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.chas small { white-space: nowrap; }
.chas.st-zanyato { background: repeating-linear-gradient(-45deg, rgba(247, 233, 207, .07) 0 6px, transparent 6px 12px); box-shadow: none; opacity: .6; }
.chas.st-zanyato b { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .55; }
.chas.st-uborka, .chas-zakr { background: transparent; box-shadow: none; outline: 1px dashed rgba(247, 233, 207, .28); outline-offset: -3px; opacity: .6; }
.chas-zakr { display: block; border-radius: 12px; padding: 11px 4px 9px; text-align: center; line-height: 1.05; }
.chas-zakr b { display: block; font: 700 22px/1 var(--h); opacity: .5; }
.chas-zakr small { display: block; font-size: 12px; opacity: .65; margin-top: 3px; }
.chas.st-proshlo, .chas.st-malo { opacity: .28; box-shadow: none; }
.chas.st-zanyato:hover, .chas.st-uborka:hover, .chas.st-proshlo:hover, .chas.st-malo:hover { transform: none; }
.chas.v.st-zanyato, .chas.v.st-uborka, .chas.v.st-proshlo, .chas.v.st-malo { background: var(--malina); color: #fff; opacity: 1; outline: 0; }
.chas.c-utro small { color: #F08AA8; }
.chas.v.c-utro small { color: inherit; }
.chasy-legenda .l-zan i { background: repeating-linear-gradient(-45deg, rgba(247, 233, 207, .35) 0 3px, transparent 3px 6px); }
.chasy-legenda .l-ub i { background: transparent; outline: 1px dashed rgba(247, 233, 207, .5); outline-offset: -1px; }

.kalk-l, .shag { min-width: 0; }
.kupeli { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kup { position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left; border: 1.5px solid rgba(247, 233, 207, .14); background: var(--ugol2); border-radius: 16px; padding: 0 0 12px; overflow: hidden; line-height: 1.2; transition: border-color .15s, transform .15s; }
.kup:hover { transform: translateY(-2px); border-color: rgba(242, 169, 59, .6); }
.kup img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 10px; }
.kup-znak { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(23, 20, 15, .72); font-size: 16px; line-height: 1.2; }
.kup > b { padding: 0 12px; font: 700 21px/1 var(--h); text-transform: uppercase; letter-spacing: .03em; }
.kup > b i { font-style: normal; color: var(--shafran-sv); }
.kup-cena { padding: 0 12px; margin-top: 7px; font: 700 25px/1 var(--h); color: var(--shafran-sv); white-space: nowrap; }
.kup-cena s { font-size: 17px; opacity: .5; margin-right: 3px; }
.kup-akc { margin: 5px 12px 0; font-size: 11.5px; font-weight: 700; color: #7FD3B2; line-height: 1.3; }
.kup small { padding: 0 12px; margin-top: 6px; font-size: 12px; opacity: .65; line-height: 1.35; }
.kup.tut { border-color: var(--shafran); box-shadow: 0 0 0 1px var(--shafran), 0 14px 30px -14px rgba(242, 169, 59, .7); }
.kup.tut::after { content: "✓"; position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: var(--shafran); color: var(--noch); font-weight: 800; display: grid; place-items: center; }
.kup-net { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 10px 14px; }
.kup-net .kup-znak { position: static; background: rgba(247, 233, 207, .1); }
.kup-net > b, .kup-net small { padding: 0; margin: 0; }
.kup-net.tut::after { top: 50%; transform: translateY(-50%); }

.dop-ikon { width: 64px; height: 64px; border-radius: 12px; background: rgba(23, 20, 15, .5); display: grid; place-items: center; font-size: 28px; }
.dop-vybor { grid-column: 2 / 4; display: flex; gap: 6px; flex-wrap: wrap; }
.dop-vybor button { border: 1px solid rgba(247, 233, 207, .25); background: transparent; border-radius: 999px; padding: 7px 14px; font-size: 13px; }
.dop-vybor button.tut { background: var(--krem); color: var(--noch); border-color: var(--krem); }

.chek-prays { display: inline-block; margin: 10px 0 0; padding: 6px 12px; border-radius: 999px; background: var(--pc, var(--malina)); color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.chek-prays[hidden] { display: none; }
.chek-stroki li.osh { color: var(--malina); font-weight: 700; }
.chek-pred { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; margin-top: 10px; font-size: 13px; }
.chek-pred:empty { display: none; }
.chek-pred b { text-align: right; white-space: nowrap; }
.chek-sovety { display: grid; gap: 6px; margin-top: 10px; }
.chek-sovety:empty { display: none; }
.chek-sovety button { text-align: left; border: 1.5px dashed var(--shafran-t); background: rgba(242, 169, 59, .16); border-radius: 12px; padding: 9px 12px; font-size: 13px; line-height: 1.4; color: #221D17; }
.chek-sovety button:hover { background: rgba(242, 169, 59, .3); }
.chek-sovety button i { font-style: normal; font-weight: 800; color: var(--rzh-kn); margin-left: 6px; white-space: nowrap; }
.chek-zametki p { margin: 8px 0 0; font-size: 12.5px; opacity: .75; line-height: 1.4; }
.chek-var[hidden] { display: none; }
.forma label span i { font-style: normal; font-weight: 400; letter-spacing: 0; }
.forma .knopka:disabled { background: #8C7F6E; box-shadow: none; cursor: default; transform: none; }
.bron-ok { margin-top: 18px; padding: 20px 20px 18px; border-radius: 16px; background: var(--zel); color: var(--krem); }
.bron-ok[hidden] { display: none; }
.bok-zag { margin: 0; font: 700 36px/1 var(--h); text-transform: uppercase; }
.bok-kogda { margin: 6px 0 12px; font: 700 21px/1.1 var(--h); text-transform: uppercase; letter-spacing: .03em; color: var(--shafran-sv); }
.bron-ok p { margin: 0 0 8px; font-size: 14px; line-height: 1.45; }
.bok-knopki { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* после брони главный шаг — «Обязательно напишите нам в ВК» (просьба владельца 31.10: «приказным порядком, чтоб писали все») */
.bok-shag { margin: 14px 0 4px; padding: 16px 16px 14px; border-radius: 14px; background: var(--zel-g); border: 2px solid #FFD43B; box-shadow: 0 0 0 4px rgba(255, 212, 59, .12); }
.bron-ok .bok-shag-nad { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 800 13px/1.2 var(--t); letter-spacing: .14em; text-transform: uppercase; color: #FFD43B; }
.bok-shag-nad i { width: 10px; height: 10px; border-radius: 50%; background: #FFD43B; box-shadow: 0 0 0 4px rgba(255, 212, 59, .2), 0 0 14px #FFD43B; flex: none; }
.js-anim .bok-shag-nad i { animation: shag-lampa 1.4s ease-in-out infinite; }
@keyframes shag-lampa { 50% { box-shadow: 0 0 0 8px rgba(255, 212, 59, .04), 0 0 22px #FFD43B; } }
.bron-ok .bok-shag-t { margin: 0 0 14px; font: 700 19px/1.3 var(--t); color: var(--krem); }
.knopka-vk {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 72px; padding: 10px 10px 10px 24px; border-radius: 18px; text-decoration: none;
  background: linear-gradient(180deg, #FFE45C 0%, #FFC414 100%); color: #1E1206;
  font: 700 34px/.95 var(--h); text-transform: uppercase; letter-spacing: .02em;
  box-shadow: 0 18px 40px -16px rgba(255, 196, 20, .9), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -4px 0 rgba(140, 86, 0, .2);
  transition: transform .2s, background .2s;
}
.knopka-vk:hover { transform: translateY(-2px); background: linear-gradient(180deg, #FFEB80 0%, #FFCD2E 100%); }
.knopka-vk:active { transform: translateY(1px); }
.knopka-vk:focus-visible { outline: 3px solid var(--krem); outline-offset: 3px; }
.knopka-vk span { position: relative; }
.knopka-vk i { position: relative; flex: none; width: 50px; height: 50px; border-radius: 50%; background: #1E1206; }
.knopka-vk i::after { content: ""; position: absolute; left: 44%; top: 50%; width: 13px; height: 13px; border: solid #FFD43B; border-width: 3px 3px 0 0; transform: translate(-50%, -50%) rotate(45deg); }
.knopka-vk::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); transform: skewX(-18deg); opacity: 0; }
.js-anim .knopka-vk { animation: raschet-svet 3.2s ease-in-out infinite; }
.js-anim .knopka-vk::before { animation: raschet-blik 3.2s ease-in-out infinite; }
.js-anim .knopka-vk i::after { animation: vk-strelka 1.6s ease-in-out infinite; }
@keyframes vk-strelka { 50% { left: 56%; } }
.bron-ok .bok-shag-pod { margin: 10px 0 0; font-size: 13px; opacity: .85; }
.bok-shag-gotov { border-color: #8FE0BC; box-shadow: none; }
.bron-ok .bok-shag-gotov .bok-shag-nad { color: #8FE0BC; }
.bron-ok .bok-shag-gotov .bok-shag-t { margin: 0; font-size: 16px; font-weight: 600; }
.bron-ok .bok-net-vk { margin: 12px 0 0; font-size: 13px; opacity: .8; }
.bok-net-vk a { color: var(--krem); white-space: nowrap; }
.bron-ok .bok-zag { font-size: 28px; }          /* «.bron-ok p» перебивал размер — заголовок и дата были 14px */
.bron-ok .bok-kogda { font-size: 18px; }
.bok-shag-t span, .knopka-vk span { white-space: nowrap; }
@media (max-width: 700px) {
  .bok-shag { padding: 14px 12px 12px; }
  .knopka-vk { min-height: 64px; padding: 8px 8px 8px 18px; font-size: 28px; }
  .knopka-vk i { width: 44px; height: 44px; }
  .bron-ok .bok-shag-t { font-size: 17px; }
}
.moya-vk { flex-basis: 100%; color: #FFD43B; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .js-anim .knopka-vk, .js-anim .knopka-vk::before, .js-anim .knopka-vk i::after, .js-anim .bok-shag-nad i { animation: none; } }

.seg-chasy i.zanyat { opacity: .2; }
.seg-ceny p.seg-svob span { color: #8FE0BC; opacity: 1; }
.seg-ceny p.seg-svob b { font: 700 19px/1.1 var(--h); color: var(--krem); text-align: right; }

/* новость сверху: «Новогодний прайс-лист» — нажал, раскрылась */
.nov-bar { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; margin: 0 0 22px; padding: 7px 18px 7px 7px; border-radius: 999px; border: 1px solid rgba(108, 197, 155, .55); background: rgba(10, 63, 56, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-align: left; line-height: 1.2; transition: border-color .2s, transform .2s; }
.nov-bar:hover { border-color: var(--shafran); transform: translateY(-2px); }
.nov-bar[hidden] { display: none; }
.nov-bar-znak { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(247, 233, 207, .12); font-size: 22px; }
.nov-bar-t { min-width: 0; }
.nov-bar b { display: block; font: 700 21px/1 var(--h); text-transform: uppercase; letter-spacing: .04em; color: var(--shafran-sv); }
.nov-bar small { display: block; font-size: 12.5px; opacity: .88; margin-top: 3px; }
.nov-bar > i { flex: none; font-style: normal; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--shafran); }
.nov-okno { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(10, 8, 6, .74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.nov-okno[hidden] { display: none; }
.nov-karta { position: relative; width: min(660px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; background: var(--zel-g) var(--uzor); border: 1px solid rgba(242, 169, 59, .35); border-radius: 24px; padding: 30px 30px 26px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8); }
.nov-x { position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(247, 233, 207, .12); font-size: 24px; line-height: 1; }
.nov-x:hover { background: var(--shafran); color: var(--noch); }
.nov-znak { margin: 0; font-size: 42px; line-height: 1; }
.nov-karta h3 { font-size: clamp(38px, 6vw, 56px); margin: 10px 0 0; color: var(--shafran-sv); padding-right: 30px; }
.nov-kratko { margin: 10px 0 0; font-size: 15px; opacity: .92; }
.nov-blok { margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: rgba(23, 20, 15, .38); }
.nov-period { margin: 0 0 8px; font: 700 23px/1.05 var(--h); text-transform: uppercase; letter-spacing: .03em; }
.nov-period i { font: 600 12.5px/1 var(--t); text-transform: none; letter-spacing: .02em; opacity: .65; margin-left: 4px; }
.nov-blok ul { margin: 0; padding: 0 0 0 18px; font-size: 14px; line-height: 1.55; }
.nov-net { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; color: var(--shafran-sv); }
.nov-tekst { margin-top: 16px; font-size: 14px; opacity: .92; }
.nov-tekst p { margin: 0 0 4px; }
.nov-karta .knopka { margin-top: 20px; }
html.okno-otkryto { overflow: hidden; }

/* телефон: снизу — сумма и «Забронировать», пока листаешь калькулятор */
.niz-polosa { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 9px 9px 18px; border-radius: 18px; background: var(--pesok-sv); color: #221D17; text-decoration: none; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .6); transform: translateY(150%); transition: transform .3s; }
.niz-polosa.vidna { transform: none; }
.niz-polosa span { display: grid; font-size: 12px; line-height: 1.25; min-width: 0; }
.niz-polosa span b { font: 700 28px/1 var(--h); color: var(--rzh-kn); }
.niz-polosa i { flex: none; font-style: normal; font-weight: 800; font-size: 14px; background: var(--rzh-kn); color: #fff; border-radius: 999px; padding: 12px 16px; white-space: nowrap; }

@media (max-width: 1080px) {
  .kalk { grid-template-columns: minmax(0, 1fr); }
  .niz-polosa { display: flex; }
  .chek { max-width: none; }
}
@media (max-width: 700px) {
  .moya-bron { margin-top: -6px; }
  .mes { padding: 10px 7px 10px; margin: 0 -6px; }
  .mes-shapka b { font-size: 26px; }
  .mes-dn, .mes-setka { gap: 3px; }
  .mes-den { min-height: 54px; padding: 6px 0 9px; border-radius: 9px; }
  .mes-den b { font-size: 20px; }
  .mes-den small { font-size: 10px; letter-spacing: -.01em; }
  .mes-den small i { display: none; }
  .mes-zap { left: 5px; right: 5px; bottom: 4px; }
  .mes-znak { font-size: 10px; top: 2px; right: 2px; }
  .chasy { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
  .chas b, .chas-zakr b { font-size: 20px; }
  .chas small, .chas-zakr small { font-size: 11px; }
  .paket { flex: 1 1 100%; }
  .kupeli { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kup > b { font-size: 18px; }
  .kup-cena { font-size: 22px; }
  .kup small { display: none; }
  .kup.tut small { display: block; }
  .dop-ikon { width: 48px; height: 48px; font-size: 22px; }
  .dop-vybor { grid-column: 1 / 4; }
  .nov-bar { border-radius: 18px; padding-right: 12px; }
  .nov-bar > i { display: none; }
  .nov-karta { padding: 24px 18px 20px; border-radius: 20px; }
}

/* 23.10 — после звонков: взрослые и дети, перерыв 18–19, «1 янв» после полуночи, зачёркнутая цена по прайсу, подпись под кнопкой */
.chek-itog > span { font: 700 26px/1 var(--h); text-transform: uppercase; }
.chek-etalon { display: flex; justify-content: flex-end; align-items: baseline; gap: 10px; margin: 14px 0 -8px; }
.chek-etalon span { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .55; }
.chek-etalon s { font: 700 32px/1 var(--h); opacity: .5; text-decoration-thickness: 2px; }
.chek-etalon em { font-style: normal; font-size: 12.5px; font-weight: 800; color: #fff; background: var(--zel); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.chek-etalon[hidden] { display: none; }
.chip[hidden], .kto-ryad [hidden], .forma[hidden] { display: none; }
.chek-etalon + .chek-itog { margin-top: 6px; }
.forma-pod { margin: -2px 0 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--zel-g); }
.schetchik span i { display: block; font-style: normal; font-size: 10.5px; opacity: .75; margin-top: 1px; }
.schetchik button.zaperto { opacity: .3; }
.schetchik button.zaperto:hover { background: rgba(247, 233, 207, .1); color: inherit; }
.shag h3 small { font-weight: 600; }
.chas.st-pereryv { background: transparent; box-shadow: none; outline: 1px dashed rgba(240, 138, 168, .55); outline-offset: -3px; opacity: .7; }
.chas.st-pereryv small { color: #F08AA8; opacity: 1; }
.chas.st-pereryv:hover { transform: none; }
.chas.v.st-pereryv { background: var(--malina); color: #fff; opacity: 1; outline: 0; }
.chasy-legenda .l-per i { background: transparent; outline: 1px dashed rgba(240, 138, 168, .8); outline-offset: -1px; }
.chas-data { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); z-index: 1; padding: 2px 6px; border-radius: 6px; background: var(--shafran); color: var(--noch); font: 800 10px/1.1 var(--t); font-style: normal; letter-spacing: .02em; white-space: nowrap; }
.nov-foto { display: block; margin: 16px 0 0; border-radius: 16px; overflow: hidden; border: 1px solid rgba(242, 169, 59, .35); }
.nov-foto img { display: block; width: 100%; height: auto; }
@media (max-width: 700px) {
  .kto-ryad .schetchik { flex: 1 1 100%; justify-content: space-between; }
  .chek-etalon s { font-size: 27px; }
  .chas-data { font-size: 9px; padding: 1px 4px; }
}

/* ================================================================ 23.10 — после звонков: логотип, три кнопки, окна «Цены» и «Свободное время», ролики со звуком */
/* шапка: их «АФРИКА» с прайса вместо букв; название остаётся для чтения с экрана */
.logo img.logo-slovo { width: auto; height: 34px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .55)); }
.logo b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.logo i { max-width: 96px; margin-top: 0; line-height: 1.15; }
.menu { align-items: center; }
.menu a { white-space: nowrap; }
.menu .menu-dva { display: inline-flex; flex-direction: column; line-height: 1.12; padding: 3px 0; }
.shapka-tel { font-size: 21px; }
.geroy-pod[hidden] { display: none; }

/* первый экран */
.geroy-title.s-logo { background: none; color: inherit; -webkit-background-clip: border-box; background-clip: border-box; filter: none; font-size: 0; line-height: 0; margin: 0; }
.geroy-logo { display: block; width: clamp(260px, min(40vw, 62vh), 600px); height: auto; filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .55)); }
.geroy-title.s-logo picture { display: block; }
/* 25.10: «МЫ В ГОРОДЕ» — картинка той же ширины, что логотип: буквы того же размера и стиля, что «НА ДРОВАХ» */
.geroy-gorod { display: block; width: clamp(260px, min(40vw, 62vh), 600px); height: auto; margin-top: clamp(4px, 1vw, 12px);
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .55)); }
.geroy-cifry b em { font-style: normal; font-size: .5em; letter-spacing: .03em; text-transform: uppercase; }
/* невысокие экраны ноутбуков: с «МЫ В ГОРОДЕ» блок стал выше — логотип чуть меньше, чтобы кнопки остались на первом экране */
@media (min-width: 1000px) and (max-height: 820px) {
  .geroy-in { padding-top: 112px; }
  .geroy-logo, .geroy-gorod { width: clamp(300px, min(40vw, 50vh), 600px); }
}
.knopki-geroy { margin-top: 28px; }
.knopki-geroy .knopka { min-height: 58px; padding: 0 30px; font-size: 16px; }
.knopki-geroy .knopka:first-child, .knopka-yarko {
  background: linear-gradient(180deg, #FFB547 0%, #F0801F 100%); color: #1E1206;
  box-shadow: 0 14px 34px -12px rgba(240, 128, 31, .9), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.knopki-geroy .knopka:first-child:hover, .knopka-yarko:hover { background: linear-gradient(180deg, #FFC062 0%, #F48C2E 100%); }
.knopki-geroy .knopka-kontur { background: rgba(23, 20, 15, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.knopka[hidden] { display: none; }
.ikon-play { position: relative; display: inline-block; width: 22px; height: 22px; flex: none; border-radius: 50%; background: currentColor; }
.ikon-play::after { content: ""; position: absolute; inset: 28% 22% 28% 36%; background: var(--noch); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.knopka-kontur .ikon-play { color: var(--shafran); }

/* фон — картинка (обложка ВК или «пальмы и закат»): полосой под шапкой, целиком, текст и кнопки — под ней */
.geroy.fon-kartinka { display: block; min-height: 0; padding-top: 76px; }
.geroy-oblozhka { position: relative; display: block; width: 100%; height: auto; }
.geroy-oblozhka[hidden], .geroy-video[hidden] { display: none; }
.fon-kartinka .geroy-ten { display: none; }
.fon-kartinka .geroy-in { padding-top: 34px; }
.fon-kartinka .geroy-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.fon-kartinka .nad { margin-top: 0; }

/* окна */
.okno-ceny { width: min(1180px, 100%); padding: 26px 26px 0; }
.okno-ceny h3, .okno-svob h3 { font-size: clamp(36px, 5vw, 52px); }
.okno-prays { display: block; margin: 16px 0 0; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .8); }
.okno-prays img { display: block; width: 100%; height: auto; }
.okno-podzag { margin: 30px 0 0; font: 700 32px/1 var(--h); text-transform: uppercase; letter-spacing: .02em; color: var(--shafran-sv); }
.okno-niz { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: center; margin: 18px -26px 0; padding: 18px 26px 22px; background: linear-gradient(0deg, var(--zel-g) 72%, rgba(10, 63, 56, 0)); }
.nov-karta .okno-niz .knopka { margin-top: 0; }
.knopka-yarko { min-height: 58px; padding: 0 38px; font-size: 17px; }
.okno-svob { width: min(640px, 100%); padding: 26px 26px 0; }
.svob { display: grid; gap: 6px; margin-top: 18px; }
.svob-mes { margin: 14px 0 2px; font: 700 13px/1 var(--t); letter-spacing: .16em; text-transform: uppercase; color: var(--shafran); }
.svob-mes:first-child { margin-top: 0; }
.svob-den { display: flex; justify-content: space-between; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(247, 233, 207, .16); background: rgba(23, 20, 15, .4); text-align: left; transition: border-color .15s, background .15s; }
.svob-den b { font: 700 21px/1.1 var(--h); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.svob-den b em { font: 700 11px/1 var(--t); font-style: normal; letter-spacing: .06em; text-transform: uppercase; vertical-align: 3px; margin-left: 4px; padding: 3px 7px; border-radius: 999px; background: rgba(247, 233, 207, .14); }
.svob-den span { font-size: 15px; font-weight: 800; color: #8FE0BC; text-align: right; }
.svob-den:not(:disabled):hover { border-color: var(--shafran); background: rgba(242, 169, 59, .12); }
.svob-den.svob-net { opacity: .55; cursor: default; }
.svob-den.svob-net span { color: #F08AA8; }
.svob-den.svob-vs { margin-bottom: 10px; }
/* 23.10: с какого дня и на сколько — как в панели; поставили дату — список сразу с неё */
.svob-f { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin: 18px 0 4px; }
.svob-ot, .svob-skolko { display: grid; gap: 7px; }
.svob-ot > span, .svob-skolko > span { font: 700 11px/1 var(--t); letter-spacing: .14em; text-transform: uppercase; color: rgba(247, 233, 207, .62); }
.svob-ot input { -webkit-appearance: none; appearance: none; min-width: 180px; min-height: 44px; padding: 9px 14px; border-radius: 12px; border: 1px solid rgba(247, 233, 207, .28); background: rgba(23, 20, 15, .45); color: var(--krem); font: 700 16px/1.2 var(--t); text-align: left; color-scheme: dark; }
.svob-ot input::-webkit-date-and-time-value { text-align: left; }
.svob-ot input:focus { outline: 0; border-color: var(--shafran); }
.svob-chipy { display: flex; gap: 6px; flex-wrap: wrap; }
.svob-chipy button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(247, 233, 207, .28); background: transparent; color: var(--krem); font: 700 14px/1 var(--t); cursor: pointer; }
.svob-chipy button:hover { border-color: var(--shafran); }
.svob-chipy button.tut { background: var(--krem); color: var(--noch); border-color: var(--krem); }
.svob-gor { margin: 12px 0 0; font-size: 14px; line-height: 1.4; color: rgba(247, 233, 207, .75); }

/* ролик со звуком — большой, поверх всего */
.video-okno { position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 70px 16px 26px; background: rgba(8, 6, 4, .95); }
.video-okno[hidden] { display: none; }
.video-okno video { width: auto; height: auto; max-width: min(100%, 1280px); max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); border-radius: 14px; background: #000; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9); }
.video-okno-x { position: absolute; top: 14px; right: 14px; width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid rgba(247, 233, 207, .4); background: rgba(23, 20, 15, .6); color: var(--krem); font-size: 28px; line-height: 1; }
.video-okno-x:hover { background: var(--shafran); color: var(--noch); border-color: var(--shafran); }
.video-okno-pod { margin: 0; font: 700 22px/1.1 var(--h); text-transform: uppercase; letter-spacing: .04em; color: var(--shafran-sv); text-align: center; }
.video-okno-pod:empty { display: none; }

[data-video-iz], .kartochka-video { cursor: pointer; }
.kupel-video, .pm-video, .chaj-video { position: relative; }
.zvuk-metka { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px 7px 7px; border-radius: 999px; background: rgba(23, 20, 15, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--krem); font: 700 13px/1 var(--t); letter-spacing: .04em; pointer-events: none; transition: background .2s, color .2s; }
.zvuk-metka .ikon-play { width: 28px; height: 28px; color: var(--shafran); }
[data-video-iz]:hover .zvuk-metka { background: var(--shafran); color: var(--noch); }
.pm-video .zvuk-metka { left: 50%; transform: translateX(-50%); white-space: nowrap; }
.kartochka .metka { display: inline-flex; align-items: center; gap: 6px; }
.kartochka .metka .ikon-play { width: 16px; height: 16px; }
.knopka-zvuk { margin-top: 26px; }
.knopka-zvuk .ikon-play { width: 24px; height: 24px; }

/* шапка: девять пунктов меню — в одну строку; чем уже экран, тем раньше уходят подпись, отступы и телефон, ниже 1280 — бургер */
@media (max-width: 1700px) {
  .logo i { display: none; }
  .menu { gap: 18px; }
}
@media (max-width: 1560px) {
  .menu { gap: 14px; }
  .menu a { font-size: 13px; }
  .shapka-tel { font-size: 18px; }
}
@media (max-width: 1440px) {
  .shapka { gap: 16px; }
  .menu { gap: 12px; }
  .shapka-tel { font-size: 17px; }
  .knopka-sh { padding: 0 18px; }
}
@media (max-width: 1340px) {
  .shapka-tel { display: none; }
}
@media (max-width: 1279px) {
  .menu { position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; padding: 90px var(--pole) 40px; background: var(--noch) var(--uzor); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility .3s; margin: 0; }
  .menu.otkryto { opacity: 1; visibility: visible; pointer-events: auto; }
  .menu a { font: 700 40px/1.1 var(--h); text-transform: uppercase; border: 0; }
  .menu .menu-dva { display: block; line-height: 1.1; padding: 8px 0; white-space: normal; }   /* отступ как у остальных пунктов */
  .menu-tel { display: block; margin-top: 20px; color: var(--shafran); }
  .burger { display: flex; }
  .shapka { gap: 22px; }
  .knopka-sh { margin-left: auto; padding: 0 22px; }
  .logo i { display: block; }
  .shapka-tel { display: block; font-size: 20px; }
  /* 26.10: на невысоком экране пункты не обрезаются сверху — меню листается само, страница под ним стоит */
  .menu { top: 0; right: 0; bottom: 0; left: 0; justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-top: 86px; padding-bottom: 32px; }
  .menu > :first-child { margin-top: auto; }
  .menu > :last-child { margin-bottom: auto; }
  body:has(.menu.otkryto) { overflow: hidden; }   /* не html: при overflow-x у body шапка (sticky) уехала бы наверх страницы */
}
@media (max-width: 1279px) and (max-height: 760px) {
  .menu { gap: 2px; }
  .menu a { font-size: 32px; }
  .menu-tel { margin-top: 12px; }
}
@media (max-width: 760px) {
  .shapka-tel { display: none; }
}
@media (max-width: 700px) {
  .logo img.logo-slovo { height: 28px; }
  .logo i { max-width: 80px; font-size: 11px; }
  .geroy-logo, .geroy-gorod { width: min(80vw, 340px); }
  .knopki-geroy { gap: 10px; }
  .knopki-geroy .knopka { min-height: 54px; }
  .geroy.fon-kartinka { padding-top: 62px; }
  .fon-kartinka .geroy-in { padding-top: 24px; }
  .nov-okno { padding: 10px; }
  .okno-ceny { padding: 20px 12px 0; }
  .okno-ceny h3, .okno-svob h3 { font-size: 36px; }
  .okno-niz { margin: 14px -12px 0; padding: 14px 12px 16px; }
  .okno-niz .knopka { flex: 1 1 100%; }
  .okno-svob { padding-left: 14px; padding-right: 14px; }
  .okno-svob .okno-niz { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
  .svob-den { padding: 11px 12px; gap: 10px; }
  .svob-den b { font-size: 18px; }
  .svob-den span { font-size: 13.5px; }
  .svob-ot { flex: 1 1 100%; }
  .svob-ot input { width: 100%; }
  .video-okno { padding: 64px 8px 20px; }
  .video-okno video { max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); border-radius: 10px; }
  .zvuk-metka { left: 12px; bottom: 12px; font-size: 12px; }
}
@media (max-width: 480px) {
  .logo { gap: 0; }
  .logo i { display: none; }
}
@media (max-width: 360px) {
  .logo img.logo-slovo { height: 25px; }
  .knopka-sh { padding: 0 11px; }
}