/* Секции страницы, сверху вниз */

/* ═══ ШАПКА ═══ */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  transition: background .25s ease, box-shadow .25s ease;
}

/* при прокрутке под шапку уезжает контент — тогда ей нужен фон */
.header.is-stuck {
  background: rgba(247, 248, 248, .92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(20, 60, 80, .07), 0 6px 20px rgba(20, 60, 80, .05);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 132px;              /* в макете шапка 132px */
}

/* ── Логотип: знак 78×78, надпись в две строки + подпись ── */
.logo { display: flex; align-items: center; gap: 14px; }
/* цвет знака наследуется: в шапке бирюзовый, в футере белый */
.logo__mark { flex: 0 0 78px; color: var(--brand); }
.logo__mark svg { display: block; width: 78px; height: 78px; }
.footer__logo .logo__mark { flex-basis: 46px; color: var(--brand); }
.footer__logo .logo__mark svg { width: 46px; height: 46px; }
.logo__name {
  display: block;
  font-family: var(--font-text);
  font-weight: 800;
  font-size: 27px;
  line-height: 1.08;
  letter-spacing: .005em;
  /* как в оригинальном логотипе: название бирюзой, подпись тёмная */
  color: var(--brand);
  text-transform: uppercase;
}
.logo__sub {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--ink);
}

/* ── Меню: первый пункт на x=402, промежутки 60px ── */
.nav {
  display: flex;
  gap: 60px;
  margin-left: 103px;
  margin-right: auto;
  font-size: var(--fs-body);
}
.nav a { position: relative; padding-block: 6px; transition: color .16s ease; }
.nav a:hover { color: var(--brand); }
.nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.nav a:hover::after { transform: scaleX(1); }

.header__phone {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.header__phone svg { width: 23px; height: 23px; }

.burger { display: none; }

/* ═══ ГЕРОЙ ═══
   Размеры и положения сняты с макета по координатной сетке (эталон — экран 1440).
   Врач и фото интерьера стоят абсолютно: в макете они перекрывают колонки,
   обычной сеткой это не выражается. */
.hero {
  position: relative;
  /* clip по горизонтали: ботаника выходит за правый край и иначе растягивает
     документ на 56px, давая горизонтальную прокрутку. По вертикали обрезки нет —
     сияние должно заходить под шапку, как в макете. */
  overflow-x: clip;
  overflow-y: visible;
}

.hero__inner {
  position: relative;
  /* минимальная, а не жёсткая: на средних экранах текст выше расчётной
     и должен раздвигать секцию, а не налезать на следующую */
  min-height: clamp(540px, 47vw, 676px);
  /* воздух под фигурой: подпись врача идёт в три строки, и волнистая полоса
     следующей секции (она поднята на 76px) иначе перерезает её */
  padding-bottom: var(--s-4);
}

/* Слоты под арт */
.hero__halo,
.hero__botanical {
  position: absolute;
  pointer-events: none;
}
/* голубой ореол: в макете круг r≈230 с центром (720, 300) */
.hero__halo {
  top: -26px; left: 55%;
  width: clamp(290px, 31vw, 445px);
  aspect-ratio: 1;
  transform: translateX(-47%);
  background: url(../img/art-halo.webp) center / contain no-repeat;
  z-index: 0;
}
/* контурные листья: в макете стоят у правого края, позади фотографий */
.hero__botanical {
  top: 30px; right: -56px;
  width: clamp(230px, 29vw, 420px);
  aspect-ratio: 1024 / 1536;
  background: url(../img/art-botanical.webp) center / contain no-repeat;
  z-index: 0;
}

/* ── Текстовая колонка: в макете начинается на 85px при контейнере от 40px ── */
.hero__text {
  position: relative;
  z-index: 2;
  padding-top: 76px;
  /* Без собственного отступа: колонка должна начинаться там же, где логотип
     в шапке. Прежние 45px сдвигали заголовок вправо, и левый край страницы
     выглядел сломанным. */
  padding-left: 0;
  /* колонка чуть шире: длинный заголовок иначе встаёт лесенкой */
  max-width: 560px;
}

.hero__lead {
  margin-top: 30px;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text);
}

.hero__cta { margin-top: 38px; }

/* Рейтинг с наградой держим в одну строку: с антиквой в заголовке колонка
   стала теснее, и в прежних размерах награда переносилась под рейтинг. */
/* Рейтинг и награда стоят рядом и должны читаться как одна пара: медаль
   не мельче значка Яндекса, нижняя строка награды — того же размера, что
   «Более 250 отзывов». Раньше здесь всё было ужато на два-три пункта ради
   одной строки, и блоки выглядели разными по важности. */
.hero__proof .stars svg { width: 116px; height: 21px; }
.hero__proof .award img { width: 62px; height: 62px; }
.hero__proof .award__text strong { font-size: 17px; }
.hero__proof .award__text span { font-size: 16px; }

.hero__proof {
  display: flex;
  align-items: center;
  /* было 46px: с антиквой Lora заголовок занимает колонку шире, места
     стало меньше, и награда уезжала под рейтинг */
  gap: clamp(14px, 1.2vw, 24px);
  /* Не даём паре доходить до фигуры врача: справа от текста награды должен
     оставаться воздух, иначе хвост строки ложится на халат и штанину. */
  max-width: 448px;
  margin-top: 56px;
}

.rating__top { display: flex; align-items: center; gap: 10px; }
.rating__score {
  /* в макете «5.0» набрано антиквой, как заголовки, а не гротеском.
     Кегль ниже прежнего: у Lora нет узкого начертания, которым
     держался размер у Playfair. */
  font-family: var(--font-display);
  font-size: 33px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.rating__caption {
  margin-top: 11px;
  font-size: 16px;
  color: var(--text);
  white-space: nowrap;
}

.award { display: flex; align-items: center; gap: 14px; }
.award__text {
  width: auto;
  color: var(--text);
}
.award__text strong {
  display: block;
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ink);
}
.award__text span {
  display: block;
  font-size: 16px;
  line-height: 1.4;
}

/* ── Врач: кадр 895px по макету, фигура занимает 38% его ширины ── */
.hero__doctor {
  position: absolute;
  top: -104px;
  /* 53%, а не 48.4%: подпись под фигурой наезжала на блок с наградой слева.
     Ореол и ветка сдвинуты на столько же, иначе композиция расходится. */
  left: 53%;
  z-index: 1;
  width: clamp(430px, 62vw, 895px);
  transform: translateX(-50%);
  text-align: center;
}
/* Селектор через `picture`: на главной фигура обёрнута в <picture> (для
   телефона отдаётся кадр по грудь), и прямой ребёнок figure — не img.
   Правило вида `.hero__doctor > img` из-за этого молча перестало работать:
   пропадала маска растворения, а фигура вставала в натуральные 700×875. */
.hero__doctor > picture { display: block; }

.hero__doctor > img,
.hero__doctor > picture > img {
  width: 100%;
  height: clamp(430px, 48vw, 695px);
  object-fit: cover;
  object-position: center top;
  /* низ фигуры плавно растворяется в фоне, как в макете */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 74%, rgba(0,0,0,.55) 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 74%, rgba(0,0,0,.55) 88%, transparent 100%);
}
/* ветка: в макете x 800..960, y 100..340 — справа от головы */
.hero__branch {
  position: absolute;
  /* в файле сам рисунок занимает 67% кадра — ширину задаём с этой поправкой,
     чтобы видимая ветка совпала с макетными 165px */
  top: -14px;
  left: 58.8%;
  width: clamp(130px, 14.9vw, 215px);
  z-index: 0;
}
.hero__doctor figcaption {
  /* Подпись заходит на растворённый низ фигуры: в три строки она иначе
     доезжает до волнистой полосы следующей секции, которая поднята вверх.
     Чтобы строки не терялись на белом халате, под ними лёгкая подложка
     цвета фона — на снимке «16 лет стажа» читалось с трудом. */
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-top: -22px;
  padding: 11px 20px;
  border-radius: 16px;
  background: #fff;
  box-shadow:
    0 10px 26px rgba(16, 42, 67, .10),
    inset 0 0 0 1px rgba(5, 188, 211, .12);
  font-size: var(--fs-tiny);
  line-height: 1.5;
  color: var(--text);
}

/* ── Фото интерьера: координаты с макета ── */
.hero__photos { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero__photo {
  position: absolute;
  border: 7px solid #fff;
  border-radius: var(--r-md);
  box-shadow: var(--sh-photo);
}
/* верхнее: x 995..1370, y 130..410 */
.hero__photo--1 {
  width: clamp(210px, 23.5vw, 340px);
  /* 26px, а не 8: из-за наклона угол снимка выходит за рамку блока и на 1440
     упирался в край экрана — правая сторона выглядела обрезанной */
  top: 26px; right: 26px;
  transform: rotate(3.2deg);
}
/* нижнее: x 1010..1330, y 480..790 */
.hero__photo--2 {
  width: clamp(182px, 20vw, 290px);
  top: 330px; right: 46px;
  transform: rotate(-2.4deg);
}

/* Страница направления, по которому своего врача нет: фигуры на первом
   экране не будет, и ореол с веткой остались бы висеть вокруг пустоты.
   Убираем их, а фотографии клиники сдвигаем к середине — они и заполняют
   освободившееся место. */
.hero--no-doctor .hero__halo,
.hero--no-doctor .hero__branch { display: none; }
/* Страницы без врача: фотографии остаются у правого края, как на страницах
   с фигурой. Раньше они сдвигались к центру (left: 52% и 66%) и предмет
   услуги налезал на верхний снимок — владелец увидел это на хирургии. */
.hero--no-doctor .hero__photo--2 { top: 306px; }

/* ═══ ПОЛОСА ПРЕИМУЩЕСТВ ═══ */
.benefits {
  position: relative;
  padding-block: 0 var(--s-6);
  /* Небольшой запас против волнистой полосы: она поднята на 76px, а под
     фигурой врача идут три строки подписи. */
  margin-top: clamp(24px, 2.4vw, 40px);
}

/* Волнистая полоса позади иконок */
.benefits__ribbon {
  position: absolute;
  top: -76px; left: 0; right: 0;
  height: 250px;
  /* Волна в файле заметно круче макетной: её амплитуда относительно ширины
     примерно вдесятеро больше. Поэтому сжимаем по высоте — иначе лента
     перекрывает всю полосу; при слишком сильном сжатии она вырождается в нитку. */
  background: url(../img/art-wave.webp) center / 100% 100% no-repeat;
  pointer-events: none;
}

.benefits__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-3);
}

.benefit { text-align: center; }
.benefit img {
  margin-inline: auto;
  width: 128px; height: 128px;
  object-fit: contain;
  /* контактная тень снизу плюс фирменное свечение по контуру */
  filter:
    drop-shadow(var(--glow-icon-near))
    drop-shadow(var(--glow-icon-far))
    drop-shadow(var(--sh-icon));
}
/* Подписи под иконками: Manrope в полужирном на 19px читался тяжело —
   плотные округлые формы в крупном кегле выглядят как системный шрифт.
   Средний вес, чуть меньший кегль, отрицательный трекинг и больше
   интерлиньяжа дают ту же читаемость, но спокойнее. */
.benefit p {
  margin-top: var(--s-2);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.012em;
  color: var(--ink);
}

/* ═══ ОБЩЕЕ ДЛЯ СЕКЦИЙ ═══ */
/* Единое спокойное начертание заголовков сохраняет фирменную Lora. */
.section-title {
  margin-bottom: var(--s-5);
  text-align: center;
  font-size: var(--fs-h2);
  line-height: 1.18;
}

/* Обрезающая обёртка: сама дорожка не должна прятать своё содержимое —
   правила для сенсорных экранов включают ей прокрутку, и обрезка слетает,
   из-за чего карточки вылезали за края секции. */
.slider-viewport {
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.slider-arrow {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--sh-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
.slider-arrow:hover { transform: scale(1.06); box-shadow: var(--sh-hover); }

/* В галерее стрелки золотые — как на образце */
.gallery .slider-arrow {
  background: linear-gradient(180deg, #fdf1c6 0%, #f2c23a 45%, #cf9a10 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgba(140, 105, 10, .2), 0 8px 18px rgba(205, 160, 30, .28);
}
.gallery .slider-arrow:hover {
  box-shadow: 0 2px 4px rgba(140, 105, 10, .24), 0 12px 26px rgba(205, 160, 30, .36);
}

.dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: var(--s-3);
}
.dots span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #cfd8dd;
  transition: background .2s ease;
}
.dots span.is-active { background: var(--brand); }

/* ═══ ОТЗЫВЫ ═══
   Внутренность блока рисует сторонний виджет MyReviews, наших стилей
   почти нет — только отступы секции и рамка вокруг вставки. */
/* У виджета отзывов свои поля внутри: сверху до строки с оценкой, снизу
   после точек-пагинации остаётся ещё полтораста пикселей воздуха. Поэтому
   секции даём меньше собственных отступов, чем соседним, — на экране ритм
   получается одинаковым. */
.reviews { padding-block: var(--s-5) var(--s-3); }
.reviews .section-title { margin-bottom: var(--s-3); }

.reviews__widget {
  display: flex;
  justify-content: center;
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* Виджет подменяет наш iframe своим, поэтому правило по тегу, а не по id.
   Ширину не ограничиваем: 1170px из их примера обрезали карточки. */
.reviews__widget iframe {
  width: 100%;
  /* Высоту виджет выставляет сам инлайновым стилем; наш минимум нужен
     только на время загрузки и не должен мешать ему стать ниже. */
  min-height: 320px;
  border: 0;
  outline: none;
  padding: 0;
  margin: 0;
}

/* ═══ НАПРАВЛЕНИЯ ═══ */
.directions { padding-block: var(--s-6); }

.directions__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
/* последняя строка из трёх — по центру */
.directions__grid li:nth-child(13) { grid-column: 2; }

.dir { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--r-md); }
.dir img {
  width: 100%;
  aspect-ratio: 323 / 205;
  object-fit: cover;
}
.dir__foot {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 11px 16px;
  font-size: var(--fs-body);
  color: var(--ink);
}

/* ═══ ВРАЧИ ═══
   Композиция снята с макета: фигура растворяется книзу, ФИО лежит поверх
   халата, справа от дипломов — кружок с числом документов. */
.doctors { padding-block: var(--s-6); }
.doctors__slider { display: flex; align-items: center; gap: var(--s-3); }
.doctors__track {
  display: grid;
  grid-auto-flow: column;
  /* Четыре карточки в ряду — все врачи видны сразу, как в макете */
  grid-auto-columns: calc((100% - 72px) / 4);
  gap: var(--s-3);
}

/* Стаж известен не у всех врачей: без выравнивания карточка без этой строки
   становится короче, и её дипломы с кнопкой уезжают вверх относительно ряда. */
.doc {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
}
/* Кнопка записи у всех врачей на одной линии: блок дипломов занимает свою
   строку сетки, даже когда сканов ещё нет. */
.doc .btn { margin-top: auto; }
/* Врачи, чьих сканов ещё нет: та же стопка, но без числа и без клика.
   Ряд карточек держится ровным, а обещания, которого не выполнить, нет. */
.doc__credentials--soon { opacity: 1; }
.doc__credentials--soon .doc__docs { color: var(--muted); }
.doc__soon {
  display: block;
  width: 100%;
  margin-top: 1px;
  font-size: var(--fs-tiny);
  color: var(--muted);
}

/* Цветная подложка позади врача — у каждого своя */
.doc__blob[data-blob="1"] { background-image: url(../img/blob-1.webp); }
.doc__blob[data-blob="2"] { background-image: url(../img/blob-2.webp); }
.doc__blob[data-blob="3"] { background-image: url(../img/blob-3.webp); }
.doc__blob[data-blob="4"] { background-image: url(../img/blob-4.webp); }

.doc__blob {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 8px; left: 50%;
  width: min(110%, 440px); height: 330px;
  transform: translateX(-50%);
  z-index: 0;
  /* Пятно — фон, а не объект. В полную силу оно читалось как цветная клякса
     поверх врача: низ фигуры растворяется, и краска просвечивала сквозь халат. */
  opacity: .42;
  filter: blur(3px);
}

/* Рамка без увеличения внутри: фигуры у четырёх врачей разной ширины
   (от 50% до 60% кадра), и общий сдвиг срезал бы кому-то руки.
   Крупный масштаб достигается тем, что в ряду три карточки, а не четыре. */
.doc__frame {
  position: relative;
  z-index: 1;
  margin-inline: auto;
  width: 100%;
  max-width: 360px;
  /* Файлы врачей заранее обрезаны по грудь (см. tools/prepare-images.py),
     поэтому рамка почти квадратная — кадрировать в браузере больше нечего. */
  height: 330px;
}

/* Врач без фотографии: вместо чужого лица — инициалы в фирменном круге.
   Размер круга равен ширине лица на портретах рядом, чтобы ряд не «прыгал». */
.doc__frame--soon { display: grid; place-items: center; }
.doc__initials {
  display: grid;
  place-items: center;
  width: 152px; height: 152px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--brand-deep);
  background:
    radial-gradient(120% 120% at 30% 22%, #ffffff 0%, #eaf7fa 48%, #d5eef4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 2px 6px rgba(20, 60, 75, .08),
    0 16px 34px rgba(5, 188, 211, .16);
}

.doc__photo {
  position: relative;
  z-index: 1;
  margin-inline: auto;
  /* Кадр во всю ширину колонки: так лица читаются на большом экране.
     Фигура занимает 60% ширины файла, поэтому кадр заметно шире врача.
     При object-fit: cover более низкий кадр даёт больший масштаб. */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* низ фигуры уходит в фон, как у главного врача в первом экране */
  /* растворение начинается с середины груди */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,.5) 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,.5) 70%, transparent 100%);
  /* мягкое свечение по контуру: отделяет фигуру от цветной подложки,
     два слоя — ближний плотнее, дальний рассеянный */
  filter:
    drop-shadow(0 0 11px rgba(255, 255, 255, 1))
    drop-shadow(0 4px 29px rgba(255, 255, 255, .78));
}

/* ФИО лежит поверх нижней части фигуры */
.doc__name {
  position: relative;
  z-index: 2;
  margin-top: -62px;
  font-size: 19px;
  font-family: var(--font-text);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
.doc__spec { position: relative; z-index: 2; margin-top: 6px; font-size: var(--fs-small); color: var(--text); }
.doc__exp  { position: relative; z-index: 2; font-size: var(--fs-small); color: var(--muted); }

/* Дипломы + кружок с их числом */
.doc__credentials {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* кнопка тоже: у неё сброс собственных полей внутри карточки */
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  /* auto прижимает дипломы с кнопкой к низу карточки: стаж известен
     не у всех врачей, и без этого нижняя часть ряда съезжает */
  margin-top: auto;
  padding-top: var(--s-2);
}
.doc__credentials img { width: 118px; }
.doc__count {
  position: absolute;
  top: 6px;
  right: calc(50% - 74px);
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(5, 188, 211, .35);
}

.doc__docs {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 6px;
  margin-top: 4px;
  font-size: var(--fs-tiny);
  color: var(--brand);
}
.doc__docs span { text-decoration: none; }

.doc .btn--sm { position: relative; z-index: 2; display: inline-flex; align-self: center; margin-top: var(--s-2); }

/* ═══ ГАЛЕРЕЯ ═══
   Центральный кадр крупный и с аркой сверху, соседние — мельче и приглушены.
   Лента зациклена клонами по краям, поэтому листается бесконечно. */
.gallery { padding-block: var(--s-6); overflow: hidden; }

.gallery__slider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding-inline: var(--gutter);
}

.gallery__viewport { overflow: hidden; flex: 1; min-width: 0; }

.gallery__track {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  will-change: transform;
}

.gallery__track img {
  flex: 0 0 auto;
  width: var(--gal-w);
  height: var(--gal-h);
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-photo);
  opacity: .78;
  /* размер анимируется вместе со сдвигом ленты: положение центра
     вычисляется заранее по будущим размерам, а не замеряется по факту */
  transition:
    width .45s cubic-bezier(.4, 0, .2, 1),
    height .45s cubic-bezier(.4, 0, .2, 1),
    border-radius .45s cubic-bezier(.4, 0, .2, 1),
    opacity .45s ease;
}

/* Активный кадр: крупнее и с аркой — верхние углы скруглены сильно,
   нижние обычным радиусом. */
.gallery__track img.is-current {
  width: var(--gal-w-active);
  height: var(--gal-h-active);
  opacity: 1;
  border-radius: 240px 240px var(--r-lg) var(--r-lg);
}

.gallery__counter {
  margin-top: var(--s-3);
  text-align: center;
  font-size: var(--fs-body);
  color: var(--muted);
}
.gallery__counter strong { color: var(--ink); font-weight: 700; }

/* ═══ КАК ДОБРАТЬСЯ ═══ */
.route {
  padding-block: var(--s-6);
  background: url(../img/art-blobs.webp) center / max(1500px, 100%) auto no-repeat;
}
.route__inner {
  display: grid;
  grid-template-columns: 270px 1fr 270px;
  gap: var(--s-4);
  align-items: start;
}
.route__title {
  /* не flex: заголовок переносится на две строки, и значок-пин уезжал
     на отдельную строку справа, будто он сам по себе */
  display: block;
  font-size: 40px;
  margin-bottom: var(--s-2);
}
.route__address svg { display: inline-block; vertical-align: -3px; margin-right: 6px; width: 15px; height: 15px; }
.route__address { font-size: var(--fs-body); margin-bottom: var(--s-2); }
.route__list li,
.route__buses li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 4px;
  font-size: var(--fs-small);
}
/* Знаки транспорта: узнаваемые кружки, как на схеме города. Бледный
   квадрат с буквой цвета бренда читался пустой плашкой — владелец принял
   его за неподгрузившуюся иконку. */
.route__badge {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  color: var(--brand-deep);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}
/* Значки транспорта: линейные пиктограммы в палитре сайта. Раньше здесь были
   плоские кружки с буквами «Д» и «М» на красном и синем — владелец назвал их
   некрасивыми, и они действительно выпадали из бирюзово-золотой гаммы. */
.route__badge svg { width: 24px; height: 24px; }
.route__badge--metro svg { width: 19px; height: 19px; }
.route__map iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
}
.route__subtitle { font-family: var(--font-text); font-size: 20px; font-weight: 700; margin-bottom: var(--s-2); }
.route__buses { margin-bottom: var(--s-2); }

/* ═══ ПРИЗЫВ ═══ */
.cta { padding-block: var(--s-6) var(--s-7); }
.cta__panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  min-height: 132px;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #f4f9fb 0%, var(--bg-soft) 100%);
  box-shadow: inset 0 1px 0 #fff, 0 12px 34px rgba(20, 60, 80, .06);
}
/* Фигура вынута из потока, поэтому место под неё держит отступ панели:
   без него длинный заголовок начинался прямо под ней и буквы уходили
   за фигуру. На узких экранах фигура скрыта и отступ снимается. */
.cta__person {
  position: absolute;
  left: 60px; bottom: 0;
  width: 158px;
  /* Фигура обрезана по голени, и без растворения она выглядела висящей
     в воздухе: ровная линия среза, ступней нет, тени нет. Гасим низ,
     как у врачей на первом экране. */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, rgba(0,0,0,.5) 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, rgba(0,0,0,.5) 88%, transparent 100%);
}
.cta__panel { padding-left: clamp(200px, 16vw, 246px); }
.cta__title {
  font-size: 42px;
  line-height: 1.15;
}

/* ═══ ФУТЕР ═══ */
.footer {
  position: relative;
  background: var(--brand-deep);
  color: #dCEaee;
  overflow: hidden;
}
/* Слот под арт: растительный узор справа */
.footer__pattern {
  position: absolute;
  right: 0; top: 0;
  width: 420px; height: 100%;
  pointer-events: none;
}
.footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 360px 1fr 1fr 1fr;
  gap: var(--s-4);
  padding-block: var(--s-3);
}
.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  background: #fff;
}
.footer__logo .logo__name { color: var(--brand); }
.footer__about { margin-top: var(--s-2); font-size: var(--fs-small); line-height: 1.55; color: #b9d3d9; }
.footer__social { display: flex; gap: 10px; margin-top: var(--s-2); }
.social {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: #fff;
}
.social--wa { background: #25d366; }

.footer__col h3 {
  font-family: var(--font-text);
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--s-2);
}
.footer__col li { padding-block: 3px; }
.footer__col a { font-size: var(--fs-small); color: #cfe3e8; transition: color .16s ease; }
.footer__col a:hover { color: #fff; }
.footer__contacts p { font-size: var(--fs-small); color: #cfe3e8; margin-bottom: 10px; }
.footer__phone a { font-size: 22px; font-weight: 700; color: #fff; }

.footer__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--s-5);
  padding-block: 14px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: var(--fs-tiny);
  color: #a9c8cf;
}
.footer__bottom p:first-child { margin-right: auto; }

/* ═══ ШАПКА ВНУТРЕННЕЙ СТРАНИЦЫ ═══
   Тот же приём, что в герое главной: сияние заходит под шапку,
   поэтому обрезаем только по горизонтали. */
.pagehead {
  position: relative;
  overflow-x: clip;
  padding-block: var(--s-2) var(--s-7);
}
.pagehead .container { position: relative; z-index: 1; }

/* голубое сияние справа — тот же ореол, что в герое */
.pagehead__glow {
  position: absolute;
  top: -190px; right: -90px;
  width: clamp(300px, 34vw, 500px);
  aspect-ratio: 1;
  background: url(../img/art-halo.webp) center / contain no-repeat;
  /* картинка рассчитана на герой; здесь она крупнее по месту, и кольца
     градиента становятся заметны — приглушаем */
  opacity: .6;
  pointer-events: none;
}

.crumbs {
  display: flex;
  gap: 10px;
  margin-bottom: var(--s-4);
  font-size: var(--fs-small);
  color: var(--muted);
}
.crumbs a { color: var(--brand-deep); transition: opacity .16s ease; }
.crumbs a:hover { opacity: .7; }

.pagehead__title {
  font-size: var(--fs-h2);
  line-height: 1.18;
}
.pagehead__lead {
  max-width: 640px;
  margin-top: var(--s-3);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text);
}
.pagehead__actions {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-5);
  flex-wrap: wrap;
}
.pagehead__phone { font-size: 21px; font-weight: 700; color: var(--ink); }
.pagehead__phone:hover { color: var(--brand); }

/* ═══ ПЛИТКИ ДОКУМЕНТОВ ═══ */
.certs { padding-block: 0 var(--s-7); }

.certs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}

/* Плитка стоит на подложке, а не лежит плоско: светлый градиент сверху вниз,
   контактная тень у основания и рассеянная дальняя. */
.cert {
  position: relative;
  display: flex;
  flex-direction: column;
  /* на всю высоту ячейки: у карточек с заголовком в две строки ряд выше,
     и соседние карточки не дотягивались до низа — цены стояли вразнобой */
  height: 100%;
  min-height: 232px;
  padding: 26px 26px 20px;
  border-radius: var(--r-md);
  background: linear-gradient(168deg, #fff 0%, #fff 58%, #f4fafc 100%);
  box-shadow: var(--sh-card);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
/* бирюзовая дымка в правом верхнем углу — глубина без лишних элементов */
.cert::before {
  content: '';
  position: absolute;
  top: -70px; right: -60px;
  width: 190px; height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(5,188,211,.16) 0%, rgba(5,188,211,0) 70%);
  transition: opacity .22s ease, transform .22s ease;
}
.cert:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-hover);
}
.cert:hover::before { transform: scale(1.25); }

.cert__icon {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin-bottom: 20px;
  border-radius: 18px;
  color: var(--brand);
  background: linear-gradient(160deg, #eaf9fc 0%, #d8f1f6 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 12px rgba(5,140,160,.14);
  transition: transform .22s ease;
}
.cert:hover .cert__icon { transform: translateY(-2px) rotate(-3deg); }

.cert__name {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.28;
  color: var(--ink);
}
.cert__sub {
  margin-top: 7px;
  font-size: var(--fs-small);
  color: var(--muted);
}
.cert__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-3);
}
.cert__price {
  font-size: var(--fs-small);
  color: var(--muted);
}
/* сумму набираем антиквой, как «5.0» в герое */
.cert__price b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 27px;
  color: var(--brand-deep);
}
/* знак рубля антиква не содержит — берём гротеск */
.rub { font-family: var(--font-text); font-size: 19px; color: var(--brand-deep); }
.cert__price--ask { font-size: var(--fs-body); color: var(--brand-deep); }

.cert:hover .arrow-pill { background: var(--gold); color: #fff; }

/* ═══ ПОЧЕМУ У НАС ═══ */
.why { padding-block: 0 var(--s-7); }
.why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
.why__item {
  position: relative;
  padding: 30px 26px 26px;
  overflow: hidden;
  background: linear-gradient(168deg, #fff 0%, #fff 58%, #f4fafc 100%);
}
.why__item::before {
  content: '';
  position: absolute;
  top: -80px; right: -70px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(5,188,211,.13) 0%, rgba(5,188,211,0) 70%);
}
.why__item > * { position: relative; }
.why__num {
  display: block;
  margin-bottom: 14px;
  opacity: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 34px;
  color: var(--brand);
  line-height: 1;
}
.why__item h3 { font-family: var(--font-text); font-size: 19px; font-weight: 700; color: var(--ink); }
.why__item p { margin-top: 10px; font-size: var(--fs-small); line-height: 1.55; color: var(--text); }

/* Последняя плитка — услуга для организаций, а не для человека.
   Ставим её отдельной широкой строкой: и смысл разделён, и ряд не рвётся. */
/* растягивается элемент сетки, а не ссылка внутри него */
.certs__wide { grid-column: 1 / -1; }
.cert--wide {
  height: 100%;
  flex-direction: row;
  align-items: center;
  gap: var(--s-4);
  min-height: 0;
  padding: 24px 30px;
  background: linear-gradient(100deg, #fff 0%, #fff 55%, #f2fafc 100%);
}
.cert--wide .cert__icon { margin-bottom: 0; flex: 0 0 62px; }
.cert--wide .cert__text { flex: 1; min-width: 0; }
/* внутри строки оба span инлайновые — разводим по строкам */
.cert--wide .cert__name,
.cert--wide .cert__sub { display: block; }
.cert--wide .cert__sub { margin-top: 5px; }
.cert--wide .cert__foot { margin-top: 0; padding-top: 0; flex: 0 0 auto; gap: var(--s-3); }
.cert--wide::before { top: -90px; right: 40px; }

/* ═══ ШАПКА СТРАНИЦЫ ДОКУМЕНТА ═══ */
.pagehead--doc { padding-bottom: var(--s-6); }

.pagehead__icon {
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  margin-bottom: 22px;
  border-radius: 20px;
  color: var(--brand);
  background: linear-gradient(160deg, #eaf9fc 0%, #d5eff5 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 18px rgba(5,140,160,.16);
}

/* ── Три факта: цена, срок действия, готовность ── */
/* Плашки фактов держатся компактно: на первом экране важнее заголовок,
   кнопка и фотография, а это справочная строка. */
/* Факты идут строкой под текстом: карточки съедали первый экран,
   а сведения здесь справочные. */
.facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 26px;
  margin-top: var(--s-4);
}
.facts__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
/* разделители не ставим: при переносе на вторую строку чёрточка
   оставалась висеть перед первым пунктом */
.facts__label {
  font-size: var(--fs-tiny);
  color: var(--muted);
}
.facts__val {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
}
.facts__val b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--brand-deep);
}
.facts__val--sm { font-size: 16px; font-weight: 600; color: var(--ink); }

/* ═══ ТАБЛИЦА ЦЕН ═══ */
.prices { padding-block: 0 var(--s-7); }

.price-table {
  /* Прайс не растягиваем на всю ширину контейнера: на широком экране строка
     уезжала за тысячу пикселей, и глаз терял связь между услугой и суммой. */
  max-width: 1080px;
  margin-inline: auto;
  border-radius: var(--r-md);
  background: var(--card);
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.price-table table {
  width: 100%;
  border-collapse: collapse;
}

/* Градиент рисуем на строке, а не на ячейках: у каждой ячейки он начинался
   бы заново, и на стыке была видна вертикальная граница. */
.price-table thead tr {
  background: linear-gradient(100deg, var(--brand-deep) 0%, #037286 100%);
}
.price-table thead th {
  padding: 18px 30px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  text-align: left;
  color: #fff;
  background: transparent;
}
.price-table thead th:last-child { text-align: right; }

.price-table td {
  padding: 16px 30px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--text);
  /* Линия только под строкой, без чередования фона: полосатая заливка
     спорила с ценником справа и делала длинный прайс рябым. */
  border-bottom: 1px solid rgba(1, 86, 102, .10);
  vertical-align: top;
  transition: background-color .18s ease;
}
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table tbody tr:hover td { background: rgba(5, 188, 211, .06); }

/* Сумма — гротеском и крупно: в длинном прайсе антиква мельчит и читается
   хуже цифр названия. Моноширинные цифры держат колонку ровной. */
/* Сумма стоит ценником: светлая плашка держит колонку цифр вместе
   и отделяет её от длинных названий услуг. */
.price-table__val {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brand-deep);
  letter-spacing: -.01em;
}
.price-table__val > .amount {
  display: inline-block;
  /* Одна ширина у всех ценников: иначе «700 ₽» и «3 200 ₽» давали
     рваный правый край и колонка переставала читаться как колонка. */
  min-width: 108px;
  text-align: center;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(5, 188, 211, .09);
  box-shadow: inset 0 0 0 1px rgba(5, 188, 211, .14);
  transition: background-color .18s ease, box-shadow .18s ease;
}
.price-table tbody tr:hover .price-table__val > .amount {
  background: rgba(5, 188, 211, .16);
  box-shadow: inset 0 0 0 1px rgba(5, 188, 211, .3);
}
.price-table__val .rub {
  font-size: 17px;
  font-weight: 600;
  color: #4a8b99;
}

.prices__note {
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  color: var(--muted);
}

/* когда прайса нет — панель с призывом вместо таблицы */
.prices__ask {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: 30px 34px;
  background: linear-gradient(120deg, #fff 0%, #fff 55%, #f0f9fb 100%);
}
.prices__ask p { max-width: 560px; font-size: var(--fs-lead); line-height: 1.55; }

/* ═══ ВОПРОСЫ ═══ */
.qa { padding-block: 0 var(--s-7); }
.qa__list { display: grid; gap: 14px; }

.qa__item {
  border-radius: var(--r-md);
  background: var(--card);
  box-shadow: var(--sh-card);
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.qa__item[open] { box-shadow: var(--sh-hover); }

.qa__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 22px 28px;
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.qa__item summary::-webkit-details-marker { display: none; }
.qa__item summary:hover { color: var(--brand); }

/* знак «плюс», который на раскрытии превращается в «минус» */
.qa__sign {
  position: relative;
  flex: 0 0 30px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--brand);
  transition: background .2s ease;
}
.qa__sign::before,
.qa__sign::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 1.8px;
  background: var(--brand);
  transform: translate(-50%, -50%);
  transition: transform .22s ease, background .2s ease;
}
.qa__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa__item[open] .qa__sign { background: var(--brand); }
.qa__item[open] .qa__sign::before,
.qa__item[open] .qa__sign::after { background: #fff; }
.qa__item[open] .qa__sign::after { transform: translate(-50%, -50%) rotate(0deg); }

.qa__body { padding: 0 28px 26px; max-width: 900px; }

/* ═══ ТЕКСТОВЫЕ БЛОКИ ═══ */
.prose p { font-size: var(--fs-body); line-height: 1.62; color: var(--text); }
.prose p + p { margin-top: 12px; }
.prose__list { display: grid; gap: 9px; margin-top: 14px; }
.prose__list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text);
}
.prose__list li .ic-check { flex: 0 0 18px; margin-top: 3px; color: var(--brand); }
.prose__list + p { margin-top: 14px; }

/* ═══ ФОТО В ШАПКЕ СТРАНИЦЫ ═══
   Текст слева, снимок справа — той же рамкой и наклоном, что фото интерьера
   в герое главной, чтобы страницы читались как одна серия. */
.pagehead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  align-items: center;
  gap: var(--s-6);
}
.pagehead__text { min-width: 0; }

.pagehead__photo {
  position: relative;
  border: 7px solid #fff;
  border-radius: var(--r-md);
  box-shadow: var(--sh-photo);
  transform: rotate(2.1deg);
  overflow: hidden;
}
.pagehead__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Правая колонка шапки справки: предмет услуги, под ним два настоящих снимка
   клиники. Владелец: «в hero везде должны быть фотки нашей настоящей клиники,
   наш ресепшен, чтобы человек сразу видел, вот она какая». */
.pagehead__media {
  display: grid;
  gap: clamp(10px, 1.6vw, 20px);
  align-content: start;
}
.pagehead__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.4vw, 18px);
}
.pagehead__photo {
  width: 100%;
  height: auto;
  border: 6px solid #fff;
  border-radius: var(--r-md);
  box-shadow: var(--sh-photo);
  object-fit: cover;
  aspect-ratio: 300 / 267;
}
.pagehead__photo--1 { transform: rotate(-1.8deg); }
.pagehead__photo--2 { transform: rotate(1.6deg); }

/* Панель поиска — первая строка карточки прайса, а не отдельный блок сверху:
   в прежнем виде поле терялось на светлом фоне страницы. */
.price-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: 18px 22px;
  background: linear-gradient(180deg, #f2f8fa 0%, #eaf4f7 100%);
  border-bottom: 1px solid rgba(1, 86, 102, .12);
}
.price-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 340px;
  max-width: 520px;
}
.price-search__icon {
  position: absolute;
  left: 18px;
  width: 20px;
  height: 20px;
  color: var(--brand-deep);
  pointer-events: none;
}
.price-search__input {
  width: 100%;
  padding: 15px 18px 15px 50px;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid rgba(1, 86, 102, .18);
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(16, 42, 67, .07);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.price-search__input::placeholder { color: #7f9aa2; }
.price-search__input:hover { border-color: rgba(5, 188, 211, .45); }
.price-search__input:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(5, 188, 211, .18), 0 3px 10px rgba(16, 42, 67, .07);
}
.price-tools__count {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--brand-deep);
  white-space: nowrap;
}
.price-table__empty td {
  padding-block: 30px;
  text-align: center;
  color: var(--muted);
}
.price-table__empty a { color: var(--brand-deep); font-weight: 600; }

/* Кнопка «показать ещё» — последняя строка той же карточки */
.price-more {
  display: block;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  padding: 17px 20px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-deep);
  background: linear-gradient(180deg, #ffffff 0%, #f4fafb 100%);
  border: 0;
  border-top: 1px solid rgba(1, 86, 102, .12);
  border-radius: 0 0 var(--r-md) var(--r-md);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.price-more:hover { background: rgba(5, 188, 211, .09); }
.price-more:focus-visible { outline: 3px solid rgba(5, 188, 211, .45); outline-offset: -3px; }
.price-more[hidden] { display: none; }

/* Предмет услуги в шапке справки. Пришёл на место фотографий из фотобанка:
   рамка тут не нужна — предмет вырезан и стоит на своей тени, как на первом
   экране направлений без врача. */
.pagehead__thing {
  display: grid;
  place-items: center;
  padding: clamp(6px, 1.6vw, 20px);
}
.pagehead__thing img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(190px, 19vw, 260px);
  filter: drop-shadow(0 26px 34px rgba(20, 60, 80, .16));
}

/* ═══ ЮРИДИЧЕСКИЕ СТРАНИЦЫ ═══ */
.legal { padding-block: 0 var(--s-7); }
.legal__doc {
  max-width: 860px;
  margin-inline: auto;
  padding: 46px 52px;
  border-radius: var(--r-md);
  background: var(--card);
  box-shadow: var(--sh-card);
}
.legal__date {
  margin-bottom: var(--s-4);
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
}
.legal__doc h2 {
  margin-top: var(--s-5);
  font-family: var(--font-text);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}
.legal__doc h2:first-of-type { margin-top: 0; }
.legal__doc h2 + p { margin-top: 12px; }
.legal__doc a { color: var(--brand); text-decoration: underline; }

/* ═══ 404 ═══ */
.notfound {
  position: relative;
  overflow-x: clip;
  padding-block: var(--s-7) var(--s-8);
  text-align: center;
}
.notfound .container { position: relative; z-index: 1; }
.notfound .pagehead__glow { top: -120px; right: 50%; transform: translateX(50%); opacity: .55; }
.notfound__code {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(90px, 15vw, 190px);
  line-height: .82;
  color: var(--brand);
  opacity: .22;
}
.notfound__title {
  margin-top: 30px;
  font-size: var(--fs-h2);
}
.notfound__lead {
  max-width: 520px;
  margin: var(--s-3) auto 0;
  font-size: var(--fs-lead);
  line-height: 1.55;
}
.notfound__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-5);
}
.notfound__link { font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.notfound__link:hover { color: var(--brand); }

@media (max-width: 760px) {
  .legal__doc { padding: 28px 22px; }
  .legal__doc h2 { font-size: 18px; }
  .notfound { padding-block: var(--s-6) var(--s-7); }
}

/* ═══ ПОДВАЛ: правовой блок ═══ */
.footer__legal {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: var(--s-3);
  margin-top: var(--s-4);
}
.footer__warning {
  font-size: var(--fs-tiny);
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
}
.footer__requisites {
  margin-top: 10px;
  font-size: var(--fs-tiny);
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
}

/* ═══ ПЕРВЫЙ ЭКРАН ВНУТРЕННЕЙ СТРАНИЦЫ ═══
   Наследует композицию главной, но текста здесь больше (крошки, лид, факты),
   поэтому колонка шире, а заголовок меньше. */
.hero--inner .hero__text { padding-top: 34px; max-width: 560px; }
.hero--inner .crumbs { margin-bottom: 18px; }
.hero--inner h1 {
  /* заголовки здесь длиннее главной («Дерматовенерология в Химках»),
     поэтому кегль ниже и колонка ограничена — иначе последние буквы
     заезжают на фигуру врача */
  font-size: clamp(26px, 2.9vw, 40px);
  line-height: 1.1;
  max-width: 9.5em;
}
.hero--inner .hero__lead { margin-top: 20px; max-width: 470px; }
.hero--inner .hero__cta { margin-top: 30px; }
/* высота с запасом: под фигурой ещё идёт подпись, и она не должна
   наезжать на заголовок следующей секции */
.hero--inner .hero__inner { min-height: clamp(580px, 50vw, 730px); }

/* факты в первом экране компактнее, чем в отдельной секции */
.facts--hero { margin-top: 30px; max-width: none; }
.facts--hero .facts__item { padding: 0; }
.facts--hero .facts__val b { font-size: 21px; }

/* фигура врача чуть ниже: над ней крошки, а не сразу шапка.
   И правее центра — слева на внутренней странице больше текста, чем на главной */
.hero--inner .hero__doctor {
  left: 63%;
  width: clamp(360px, 44vw, 620px);}
/* сияние и ветка едут за врачом, иначе круг светится мимо фигуры */
.hero--inner .hero__halo { left: 56%; }
.hero--inner .hero__branch { left: 59.5%; }
.hero--inner .hero__branch { top: 16px; }

/* ═══ ДИПЛОМЫ И СЕРТИФИКАТЫ ═══
   Документы лежат «на столе»: белое поле, мягкая тень, лёгкий разворот —
   чтобы читались как бумага, а не как плоские картинки. */
.cred { padding-block: 0 var(--s-7); }
/* заголовок секции ближе к тексту: подпись — часть вступления, а не новый блок */
.cred .section-title { margin-bottom: var(--s-3); }
.cred__lead {
  max-width: 620px;
  margin: 0 auto var(--s-5);
  text-align: center;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text);
}
.cred__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
.cred__item { display: flex; flex-direction: column; align-items: center; }

.cred__frame {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: var(--r-sm);
  background: #fff;
  box-shadow: var(--sh-photo);
  transition: transform .22s ease, box-shadow .22s ease;
}
.cred__item:nth-child(odd) .cred__frame  { transform: rotate(-1.1deg); }
.cred__item:nth-child(even) .cred__frame { transform: rotate(1.1deg); }
.cred__frame:hover { transform: rotate(0) translateY(-4px); box-shadow: var(--sh-hover); }
.cred__frame img { display: block; width: 100%; height: auto; border-radius: 4px; }

.cred__caption {
  margin-top: 16px;
  text-align: center;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--text);
}


/* Вторая строка заголовка — как на прежнем сайте клиники: крупная фраза
   о сути, под ней название спокойным шрифтом. */
.hero__what {
  display: block;
  margin-top: 16px;
  font-family: var(--font-text);
  font-size: 20px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: -.012em;
  color: var(--brand-deep);
}

/* ── Значок диаметра и расстояние до станции ──────────────
   Оранжевый скошенный шильдик — как на схемах МЦД. Текст внутри
   наклоняем обратно, иначе буквы уезжают вместе с плашкой. */
.hero__metro {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 16px;
  color: var(--text);
}

.d-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 3px 9px;
  transform: skewX(-12deg);
  border-radius: 3px;
  font-family: var(--font-text);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: .02em;
  color: #fff;
}
.d-line > span { transform: skewX(12deg); }

.d-line--3 {
  background: linear-gradient(168deg, #f08b33 0%, #e4761f 55%, #d2661a 100%);
  /* мягкое свечение вокруг шильдика: ближняя тень даёт объём,
     дальняя — сам оранжевый ореол */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 1px 2px rgba(160, 70, 10, .3),
    0 4px 14px rgba(228, 118, 31, .55),
    0 0 22px rgba(228, 118, 31, .35);
}

/* ── Имя врача рядом с фигурой ────────────────────────────
   Имя набрано антиквой, как заголовки: это подпись к портрету,
   а не служебный текст. */
.doccard { display: block; }
/* На компьютере это подпись к портрету: мелкая, в три строки без отбивок.
   Крупные размеры и отступы заданы только для телефона (responsive.css),
   где имя стоит рядом с врачом и работает как отдельный блок. */
.doccard__name {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}
.doccard__role {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text);
}
.doccard__exp {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}

/* ═══ КАК ПРОХОДИТ ПРИЁМ ═══
   Лента широких кадров под первым экраном. Механика та же, что у карусели
   врачей (js/main.js, setupCardSlider), поэтому здесь только вид карточки. */
.work-slider { padding-block: var(--s-6) 0; }
.work-slider__inner { display: flex; align-items: center; gap: var(--s-3); }
.work-slider__track {
  display: grid;
  grid-auto-flow: column;
  /* три кадра в ряду: кадр 3:2 при такой ширине читается как фотография,
     а не как плитка */
  grid-auto-columns: calc((100% - 2 * var(--s-3)) / 3);
  gap: var(--s-3);
}

.work__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  /* белая рамка и двойная тень — как у фотографий интерьера в первом экране,
     чтобы кадры читались одной серией */
  border: 6px solid #fff;
  box-shadow: var(--sh-photo);
  background: var(--glow);
}
.work__frame img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.work:hover .work__frame img { transform: scale(1.04); }

.work__title {
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}
.work__note {
  margin-top: 4px;
  font-size: var(--fs-small);
  color: var(--muted);
}
/* На странице направления имя врача стоит в заголовке секции, поэтому под
   кадром остаётся только подпись — её и поднимаем на место названия. */
.work__note--solo {
  margin-top: var(--s-3);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.work-slider--page { padding-block: var(--s-5) 0; }

.prices__action { margin-top: 24px; text-align: center; }
.prices__action .btn { max-width: 100%; line-height: 1.3; justify-content: center; }
.price-search__input::placeholder { color: var(--muted); opacity: 1; }
.cta__panel::after {
  content: ''; position: absolute; right: 8px; bottom: -28px;
  width: 115px; height: 200px; opacity: .24; pointer-events: none;
  background: url(../img/hero-flower-branch-v2.webp) center / contain no-repeat;
}

/* ═══ СОСТАВЫ КАПЕЛЬНИЦ ═══
   Карточка состава: название, что внутри, цена за сеанс и за курс.
   Курс подписан второй строкой — он и есть повод прийти на курс, а не
   разово, и прятать его в общий прайс смысла нет. */
/* тот же случай: под карточками составов сразу шёл заголовок таблицы цен */
.drips { padding-block: var(--s-6); }
.drips__lead {
  max-width: 62ch;
  margin: calc(var(--s-3) * -1) auto var(--s-5);
  text-align: center;
  color: var(--ink-soft);
}
.drips__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--s-3);
}
.drip {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--s-3) var(--s-3) var(--s-4);
}
.drip__name {
  font-size: 20px;
  line-height: 1.2;
}
.drip__mix {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.drip__mix li {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--glow);
  color: var(--brand-deep);
  font-size: 13px;
  line-height: 1.3;
}
.drip__price {
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--ink);
}
.drip__unit {
  margin-left: 6px;
  font-family: var(--font-text);
  font-size: 13px;
  color: var(--ink-soft);
}
.drip__course {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fdf6e3, #f7ead0);
  color: #8a6a24;
  font-size: 13px;
  font-weight: 600;
}
/* пакет капельницы: прозрачный PNG с подписью — ставим над названием */
.drip__bag {
  display: block;
  height: 200px;
  /* у витаминной пакет с буквами шире прочих и вылезал за карточку */
  max-width: 100%;
  width: auto;
  object-fit: contain;
  margin: calc(var(--s-2) * -1) auto 4px;
  filter: drop-shadow(0 12px 18px rgba(20, 60, 80, .12));
}

/* ═══ ПРЕДМЕТ НА ПЕРВОМ ЭКРАНЕ ═══
   Стоит там, где вместо врача — сама услуга: пробирки у анализов, шприц
   у вакцинации. Место и высота те же, что у фигуры, чтобы экран не «прыгал»
   при переходе между страницами. */
.hero__object {
  position: absolute;
  /* ниже и мельче фигуры врача: предмет не должен лезть под фотографии
     справа и наезжать на строку с наградой слева */
  top: 96px;
  left: 50%;
  z-index: 1;
  width: clamp(190px, 21vw, 310px);
  transform: translateX(-50%);
  text-align: center;
}
.hero__object img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 34px rgba(20, 60, 80, .16));
}

/* предмет в карточке каталога справок: объёмная вещь вместо плоской иконки */
.cert__thing {
  display: grid;
  place-items: center;
  height: 116px;
  margin-bottom: 16px;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.cert__thing img {
  max-height: 116px;
  max-width: 100%;
  width: auto;
  filter: drop-shadow(0 10px 14px rgba(20, 60, 80, .14));
}
.cert:hover .cert__thing { transform: translateY(-3px) scale(1.03); }
.cert--wide .cert__thing { margin-bottom: 0; flex: 0 0 116px; }

/* ═══ ОТЗЫВЫ О ВРАЧЕ ═══
   Оформлено под карточку врача на ПроДокторов: их логотип, крупная оценка,
   пометка «Отзыв проверен». Читатель сразу понимает, что это не наши
   собственные слова о себе, а внешняя площадка. */
/* снизу нужен воздух: следующий заголовок («Услуги и цены») прилипал
   вплотную к кнопке «Читать все отзывы» */
.pdrevs { padding-block: var(--s-6); }
.pdrevs__head {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: 10px;
}
.pdrevs__logo { height: 30px; width: auto; }
.pdrevs__rate { display: flex; align-items: baseline; gap: 8px; }
.pdrevs__value {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  color: #1f9c5b;                       /* «отлично» у них зелёное */
}
.pdrevs__of { font-size: 15px; color: var(--ink-soft); }
.pdrevs__doctor {
  margin-bottom: var(--s-4);
  text-align: center;
  color: var(--ink-soft);
}
.pdrevs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: var(--s-3);
}
.pdrev {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--s-3);
  border: 1px solid #e6ebf0;
  border-radius: var(--r-md);
  background: #fff;
}
.pdrev__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pdrev__score { font-weight: 700; font-size: 17px; color: #087443; }
.pdrev__stars { color: #ffc107; letter-spacing: 1px; }
.pdrev__checked {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eaf7ef;
  color: #087443;
  font-size: 12px;
  white-space: nowrap;
}
.pdrev__story { font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.pdrev__liked { font-size: 15px; line-height: 1.55; color: var(--ink); }
.pdrev__liked b { color: var(--ink); }
.pdrev__date { margin-top: auto; font-size: 13px; color: var(--ink-soft); }
.pdrevs__all { margin-top: var(--s-3); text-align: center; }
.pdrevs__all a {
  display: inline-block;
  padding: 11px 22px;
  border: 1px solid #3981f1;
  border-radius: 999px;
  color: #3981f1;
  font-weight: 600;
  transition: background .18s ease, color .18s ease;
}
.pdrevs__all a:hover { background: #3981f1; color: #fff; }

/* сканы дипломов: кликабельная плитка, открывается во весь экран */
.cred__grid--scans {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.cred__frame--scan {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid #e6ebf0;
  border-radius: var(--r-md);
  background: #fff;
  overflow: hidden;
  cursor: zoom-in;
  transition: transform .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease;
}
.cred__frame--scan img { display: block; width: 100%; height: auto; }
.cred__frame--scan:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(20, 60, 80, .14);
}
.cred__frame--scan:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }