/*
  Общие стили сайта Поповкина.
  Вставляются в Tilda: Настройки сайта → Вставка кода → «Пользовательские CSS-стили» → «Редактировать CSS».
  Палитра: синий #2C5A87, тёмный #2B3B4E, текст #1E2A36, серый текст #5B6B78, светлый #EEF2F5.
  Ширины карточек повторяют сетку Zero: 1160 (от 1200), 920 (960–1199), 616 (640–959), 456 (480–639), 336 (до 479).
*/

/* 1. «Вопросы и ответы» (стандартный блок T1119) - карточкой, как остальные блоки */
#rec5161648501 { padding-top: 8px !important; padding-bottom: 8px !important; }
#rec5161648501 .t1119 { background: #EEF2F5; border-radius: 16px; margin: 0 auto; box-sizing: border-box; }
#rec5161648501 .t1119__title { font-weight: 700; color: #1E2A36; }
#rec5161648501 .t1119__descr { font-weight: 400; font-size: 18px; line-height: 1.5; color: #5B6B78; }
#rec5161648501 .t1119__descr a { color: #2C5A87; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 960px) {
  #rec5161648501 .t1119 { padding: 40px 12px; }
  #rec5161648501 .t1119 .t-container { max-width: none; width: auto; }
  #rec5161648501 .t1119 .t-col_6 { width: calc(50% - 40px); max-width: none; }
}
@media (min-width: 1200px) { #rec5161648501 .t1119 { max-width: 1160px; } }
@media (min-width: 960px) and (max-width: 1199px) { #rec5161648501 .t1119 { max-width: 920px; } }
@media (max-width: 959px) {
  #rec5161648501 { padding-top: 6px !important; padding-bottom: 6px !important; }
  #rec5161648501 .t1119 { border-radius: 12px; padding: 24px 0; max-width: 616px; }
  #rec5161648501 .t1119__descr { font-size: 16px; }
}
@media (max-width: 639px) { #rec5161648501 .t1119 { max-width: 456px; } }
@media (max-width: 479px) { #rec5161648501 .t1119 { max-width: 336px; } }

/* 2. Ссылки на согласие и политику в форме записи - цветом сайта */
.t-form a, .t-checkbox__control a { color: #2C5A87 !important; }

/* 3. Фон под попапами - графитово-синий вместо чёрного (сплошной, полупрозрачный).
      Рисуется слоем ::before, чтобы плавно проявляться и размывать страницу (раздел 5) */
.t-popup { background-color: transparent !important; }

/* 4. Зона нажатия ссылок и кнопок в Zero - на 4 px шире с каждой стороны (вид не меняется),
      чтобы мелкие кнопки было не меньше 44 px для пальца */
.t396 a.tn-atom::after, .t396 a.t396__group::after { content: ""; position: absolute; inset: -4px; }

/* 5. Ф3 - движение и «жидкое стекло».
      Движение: только opacity, translate и scale (раскладка не прыгает); появление 0,6–0,7 с с замедлением,
      уход быстрее появления. Если в системе включено «Уменьшить движение» - анимации выключены (5.7).
      Стекло: сплошная полупрозрачная заливка + размытие того, что под ним + светлая кромка 1 px. Без градиентов. */
:root {
  --pp-ease-out: cubic-bezier(.22, 1, .36, 1);
  --pp-ease-in: cubic-bezier(.4, 0, 1, 1);
  --pp-ease-prompt: cubic-bezier(.16, 1, .3, 1);   /* появление из базового промпта */
  --pp-ease-panel: cubic-bezier(.76, 0, .24, 1);   /* меню из базового промпта */
  --pp-edge-light: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 0 0 1px rgba(255, 255, 255, .35);
  --pp-edge-dark: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .12);
}

/* 5.1 Появление карточек при прокрутке (классы ставит скрипт tilda-snippets/motion.html в HEAD).
      Как useStaggeredReveal в базовом промпте: 24 px, 0,6 с, cubic-bezier(.16,1,.3,1), шаг 120 мс (задержку ставит скрипт) */
.pp-motion .pp-reveal { opacity: 0; translate: 0 24px; }
.pp-motion .pp-reveal.pp-in {
  opacity: 1; translate: 0 0;
  transition: opacity .6s var(--pp-ease-prompt), translate .6s var(--pp-ease-prompt);
}
/* первый экран: три плашки и карточка поднимаются по очереди, 0 / 120 / 240 / 360 мс.
   Страховка: если скрипт не дал команду, через 4 с всё показывается само */
.pp-intro #rec5157916901 .tn-group__51579169011793008205393000008,
.pp-intro #rec5157916901 .tn-group__51579169011793008205395000014,
.pp-intro #rec5157916901 .tn-group__51579169011793008205396000020,
.pp-intro #rec5157916901 .tn-group__51579169011793008205396000026,
.pp-intro #rec5157916901 .tn-elem[data-elem-id="1793047090606"] {
  opacity: 0; translate: 0 24px; animation: pp-show 0s 4s forwards;
}
.pp-intro.pp-intro-go #rec5157916901 .tn-group__51579169011793008205393000008,
.pp-intro.pp-intro-go #rec5157916901 .tn-group__51579169011793008205395000014,
.pp-intro.pp-intro-go #rec5157916901 .tn-group__51579169011793008205396000020,
.pp-intro.pp-intro-go #rec5157916901 .tn-group__51579169011793008205396000026,
.pp-intro.pp-intro-go #rec5157916901 .tn-elem[data-elem-id="1793047090606"] {
  opacity: 1; translate: 0 0;
  transition: opacity .6s var(--pp-ease-prompt), translate .6s var(--pp-ease-prompt);
}
/* задержки - с той же силой селектора, что и transition выше, иначе он их обнуляет (так и было до 27.10.2026:
   плитки и карточка поднимались одновременно) */
.pp-intro.pp-intro-go #rec5157916901 .tn-group__51579169011793008205395000014 { transition-delay: .12s; }
.pp-intro.pp-intro-go #rec5157916901 .tn-group__51579169011793008205396000020 { transition-delay: .24s; }
.pp-intro.pp-intro-go #rec5157916901 .tn-group__51579169011793008205396000026,
.pp-intro.pp-intro-go #rec5157916901 .tn-elem[data-elem-id="1793047090606"] { transition-delay: .36s; }
@keyframes pp-show { to { opacity: 1; translate: 0 0; } }
/* 5.1б Кнопка «Записаться» в шапке (компьютер) скрыта до начала входа первого экрана - скрипт проявляет её
        слева направо (motion.html, heroEnter). Страховка: через 4 с видна сама */
.pp-intro:not(.pp-intro-go) #rec5183970301 .tn-elem[data-elem-id="1793007985590000018"] .tn-atom {
  clip-path: inset(-6px 100% -6px -6px); animation: pp-unclip 0s 4s forwards;
}
@keyframes pp-unclip { to { clip-path: inset(-6px -6px -6px -6px); } }

/* 5.1а Масштаб на компьютере ограничен высотой окна (скрипт) - блок ставится по центру этим сдвигом */
.t396__artboard > .t396__elem, .t396__artboard > .t396__group { margin-left: var(--pp-shift, 0px); }

/* 5.2 Попапы: фон проявляется и размывает страницу, окно мягко поднимается */
.t-popup::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: rgba(30, 42, 54, .6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s var(--pp-ease-in);
}
.t-popup_show::before { opacity: 1; animation: pp-fade-in .3s var(--pp-ease-out); }
.t-popup_show .t-popup__container { animation: pp-rise-in .4s var(--pp-ease-out); }
/* окно формы записи - со скруглением, как карточки сайта */
#rec5183990101 .t-popup__container { border-radius: 16px; }
@media (max-width: 479px) { #rec5183990101 .t-popup__container { border-radius: 12px; } }
@keyframes pp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pp-rise-in { from { translate: 0 24px; scale: .98; } }

/* 5.3 Крестик попапов - стеклянная кнопка 44 px: виден и на тёмном фоне, и поверх текста при прокрутке */
.t-popup__close {
  top: 12px !important; right: 12px !important; width: 44px !important; height: 44px !important;
  border-radius: 50%; background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--pp-edge-light), 0 6px 20px rgba(30, 42, 54, .2);
  transition: background-color .2s ease, scale .15s ease;
}
.t-popup__close-wrapper { width: 100%; height: 100%; padding: 0; display: flex; align-items: center; justify-content: center; }
.t-popup__close-icon { width: 16px; height: 16px; }
.t-popup__close-icon g { fill: #1E2A36 !important; }
.t-popup__close:active { scale: .92; }
@media (hover: hover) { .t-popup__close:hover { background: rgba(255, 255, 255, .96); } }
/* у формы записи на телефоне (до 560 px) Tilda делает крестик чёрной плашкой слева с белой иконкой -
   возвращаем тот же стеклянный круг справа */
.t-popup .t-popup__close { left: auto !important; background-color: rgba(255, 255, 255, .8) !important; }
@media (hover: hover) { .t-popup .t-popup__close:hover { background-color: rgba(255, 255, 255, .96) !important; } }
#rec5183990101 .t-popup .t-popup__close-icon g { fill: #1E2A36 !important; }

/* 5.4 Шапка. У самого верха страницы - почти белая; при прокрутке (класс pp-scrolled ставит скрипт) -
      стекло: полупрозрачная, страница видна под ней размытой, снизу лёгкая тень */
#rec5183970301 .t396__artboard {
  background-color: rgba(255, 255, 255, .96) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: none; transition: background-color .3s ease, box-shadow .3s ease;
}
.pp-scrolled #rec5183970301 .t396__artboard {
  background-color: rgba(255, 255, 255, .85) !important;
  box-shadow: 0 1px 0 rgba(30, 42, 54, .08), 0 10px 30px rgba(30, 42, 54, .08);
}
/* на телефоне шапка при прокрутке почти сплошная: в Safari размытие под ней срабатывает не всегда,
   и без него сквозь шапку читался текст страницы */
@media (max-width: 959px) { .pp-scrolled #rec5183970301 .t396__artboard { background-color: rgba(255, 255, 255, .92) !important; } }
/* у группы с содержимым шапки Tilda ставит своё размытие (blur 12 px): справа от логотипа фон размывался дважды
   и шапка при прокрутке становилась двухцветной - размытие остаётся только у самой шапки */
#rec5183970301 .t396__artboard .tn-molecule { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* линия прогресса прокрутки по нижнему краю шапки (элемент создаёт скрипт) */
.pp-progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: #2C5A87;
  transform: scaleX(0); transform-origin: 0 50%; z-index: 30; pointer-events: none; }

/* 5.4а Воздух под шапкой: первый блок каждой страницы ниже на 16 px макета
      (в долях ширины окна - так же, как масштабируются Zero-блоки) */
#rec5157916901, #rec5184069701, #rec5184084301 { padding-top: 1.3333vw; }
@media (max-width: 1199px) { #rec5157916901, #rec5184069701, #rec5184084301 { padding-top: 1.6667vw; } }
@media (max-width: 959px)  { #rec5157916901, #rec5184069701, #rec5184084301 { padding-top: 2.5vw; } }
@media (max-width: 639px)  { #rec5157916901, #rec5184069701, #rec5184084301 { padding-top: 3.3333vw; } }
@media (max-width: 479px)  { #rec5157916901, #rec5184069701, #rec5184084301 { padding-top: 4.4444vw; } }

/* 5.5 Стеклянные элементы: к заливке и размытию добавлена светлая кромка */
/* бейджи первого экрана */
#rec5157916901 .tn-elem[data-elem-id="1793008205397000033"] .tn-atom,
#rec5157916901 .tn-elem[data-elem-id="1793008205397000035"] .tn-atom,
#rec5157916901 .tn-elem[data-elem-id="1793047090606"] .tn-atom { box-shadow: var(--pp-edge-light); }
/* подложка под текстом на фото в «Что удаляем» - тёмное стекло */
#rec5160276601 .tn-elem[data-elem-id="1793003877647000012"] .tn-atom {
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--pp-edge-dark);
}
/* карточки «Как проходит приём» и «Уход после удаления» на фото лампы */
#rec5160293401 .tn-group__51602934011793002971884000025 > .tn-molecule,
#rec5160293401 .tn-group__51602934011793002971885000029 > .tn-molecule { box-shadow: var(--pp-edge-dark); }

/* 5.6 Отклик на наведение и нажатие */
/* кнопки Zero и кнопка формы: цвета меняются за 0,2 с; при наведении кнопка чуть увеличивается
   (hover:scale-105 из базового промпта), при нажатии - «вдавливается» */
.t396 .tn-elem[data-elem-type="button"] .tn-atom, .t-submit {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, scale .2s var(--pp-ease-out) !important;
}
@media (hover: hover) { .t396 .tn-elem[data-elem-type="button"] .tn-atom:hover, .t-submit:hover { scale: 1.05; } }
.t396 .tn-elem[data-elem-type="button"] .tn-atom:active, .t-submit:active { scale: .97; }
/* кружки-кнопки шапки (Telegram, WhatsApp, телефон, бургер - группы со ссылкой): такое же увеличение, как у кнопок */
#rec5183970301 .t396__group:has(> .tn-molecule > a:not([href="/"])) { transition: scale .2s var(--pp-ease-out); }
@media (hover: hover) { #rec5183970301 .t396__group:has(> .tn-molecule > a:not([href="/"]):hover) { scale: 1.05; } }
#rec5183970301 .t396__group:has(> .tn-molecule > a:not([href="/"]):active) { scale: .97; }
/* карточки-ссылки (плашки направлений, карточки на лампе): при наведении слегка светлеют */
.t396 .tn-molecule > a[href^="#popup:"] { border-radius: inherit; transition: background-color .2s ease; }
@media (hover: hover) { .t396 .tn-molecule > a[href^="#popup:"]:hover { background-color: rgba(255, 255, 255, .12); } }
.t396 .tn-molecule > a[href^="#popup:"]:active { background-color: rgba(255, 255, 255, .18); }
/* меню (как мобильное меню в базовом промпте): пункты выезжают справа по очереди - 100 мс + 60 мс на пункт,
   кнопки внизу - через 450 мс; на телефоне вся панель выезжает справа */
.t-popup_show #rec5183983701 .tn-elem[data-elem-id="1793007295883000004"],
.t-popup_show #rec5183983701 .tn-elem[data-elem-id="1793007295883000005"],
.t-popup_show #rec5183983701 .tn-elem[data-elem-id="1793007295884000006"],
.t-popup_show #rec5183983701 .tn-elem[data-elem-id="1793007295884000007"],
.t-popup_show #rec5183983701 .tn-elem[data-elem-id="1793007295884000008"],
.t-popup_show #rec5183983701 .tn-elem[data-elem-id="1793007295884000009"],
.t-popup_show #rec5183983701 .tn-group__51839837011793007295884000010 { animation: pp-slide-in .5s var(--pp-ease-panel) .1s both; }
.t-popup_show #rec5183983701 .tn-elem[data-elem-id="1793007295883000005"] { animation-delay: .16s; }
.t-popup_show #rec5183983701 .tn-elem[data-elem-id="1793007295884000006"] { animation-delay: .22s; }
.t-popup_show #rec5183983701 .tn-elem[data-elem-id="1793007295884000007"] { animation-delay: .28s; }
.t-popup_show #rec5183983701 .tn-elem[data-elem-id="1793007295884000008"] { animation-delay: .34s; }
.t-popup_show #rec5183983701 .tn-elem[data-elem-id="1793007295884000009"] { animation-delay: .40s; }
.t-popup_show #rec5183983701 .tn-group__51839837011793007295884000010 { animation-delay: .45s; }
@keyframes pp-slide-in { from { opacity: 0; translate: 32px 0; } }
@media (max-width: 959px) {
  #rec5183977901 .t-popup_show .t-popup__container { animation: pp-panel-in .5s var(--pp-ease-panel); }
}
@keyframes pp-panel-in { from { translate: 100% 0; } }
/* пункты меню при наведении: становятся синими и сдвигаются вправо (в промпте - hover со сменой цвета) */
#rec5183983701 .tn-elem[data-elem-id="1793007295883000004"] .tn-atom,
#rec5183983701 .tn-elem[data-elem-id="1793007295883000005"] .tn-atom,
#rec5183983701 .tn-elem[data-elem-id="1793007295884000006"] .tn-atom,
#rec5183983701 .tn-elem[data-elem-id="1793007295884000007"] .tn-atom,
#rec5183983701 .tn-elem[data-elem-id="1793007295884000008"] .tn-atom,
#rec5183983701 .tn-elem[data-elem-id="1793007295884000009"] .tn-atom {
  transition: color .25s var(--pp-ease-out), translate .3s var(--pp-ease-out) !important;
}
@media (hover: hover) {
  #rec5183983701 .tn-elem[data-elem-id="1793007295883000004"] .tn-atom:hover,
  #rec5183983701 .tn-elem[data-elem-id="1793007295883000005"] .tn-atom:hover,
  #rec5183983701 .tn-elem[data-elem-id="1793007295884000006"] .tn-atom:hover,
  #rec5183983701 .tn-elem[data-elem-id="1793007295884000007"] .tn-atom:hover,
  #rec5183983701 .tn-elem[data-elem-id="1793007295884000008"] .tn-atom:hover,
  #rec5183983701 .tn-elem[data-elem-id="1793007295884000009"] .tn-atom:hover { color: #2C5A87 !important; translate: 10px 0; }
}
/* видимая рамка фокуса с клавиатуры */
.t396 a:focus-visible, .t-popup__close-wrapper:focus-visible, .t-submit:focus-visible { outline: 2px solid #2C5A87; outline-offset: 3px; }

/* 6. Воздух между смысловыми блоками (просьба пользователя 27.10.2026: «сейчас одно полотно»).
      Отступ сверху у каждого блока после первого экрана; перед «Вопросами» - отступ снизу у отзывов
      (у блока вопросов свой масштаб, и отступ внутри него увеличился бы вместе с ним) */
#rec5160276601, #rec5160292801, #rec5160293401, #rec5160294601, #rec5160299501,
#rec5160313201, #rec5160324501, #rec5184021701 { margin-top: clamp(40px, 6vw, 96px); }
#rec5160313201 { margin-bottom: clamp(40px, 6vw, 96px); }

/* 7. Только цвета палитры (аудит цветов 27.10.2026, скилл ui-ux-pro-max).
      Текст: основной #1E2A36, подписи #5B6B78. Разделители #D5DDE3. Рамки полей формы - #8794A0
      (тот же серо-синий, контраст с белым 3,1:1 - граница поля должна быть заметной). */
/* ответы в «Вопросах» были #3A4A5C - как весь основной текст сайта */
#rec5161648501 .t1119__text { color: #1E2A36 !important; }
/* мелкий текст подвала был #46566A, подпись под формой - чистый чёрный */
#rec5184021701 .tn-elem[data-elem-id$="000010"] .tn-atom,
#rec5184021701 .tn-elem[data-elem-id$="000014"] .tn-atom,
.t702__form-bottom-text { color: #5B6B78 !important; }
/* разделители: были нейтрально-серыми (10 % чёрного, #E5E5E5) - теперь серо-голубые, как вся палитра */
#rec5160294601 .tn-molecule, #rec5163302301 .tn-molecule, #rec5163306001 .tn-molecule,
#rec5163311601 .tn-molecule, #rec5163314301 .tn-molecule, #rec5163352301 .tn-molecule,
#rec5184021701 .tn-molecule, #rec5183983701 .tn-molecule { border-color: #D5DDE3 !important; }
/* форма записи: рамки полей и стрелка выбора страны в поле телефона (были серыми по умолчанию Tilda) */
#rec5183990101 .t-input { border-color: #8794A0 !important; }
#rec5183990101 .t-input:focus { border-color: #2C5A87 !important; }
#rec5183990101 .t-input-phonemask__select-triangle { border-top-color: #5B6B78 !important; }
#rec5183990101 .t-input-phonemask__select-flag { background-color: #D5DDE3; }
/* фото с лампой в «О хирурге»: низ кадра был тёплым бежевым и выбивался из холодной гаммы - приглушён */
#rec5160293401 .tn-elem[data-elem-id="1793002971883000022"] { filter: saturate(.4); }
/* карты Яндекса в контактах - спокойнее по цвету, чтобы не спорили с палитрой */
#rec5160324501 iframe { filter: saturate(.5); }

/* 5.7 «Уменьшить движение» в системе: без появлений, подъёмов и масштабов */
@media (prefers-reduced-motion: reduce) {
  .pp-motion .pp-reveal { opacity: 1; translate: none; }
  .t-popup_show::before, .t-popup_show .t-popup__container, .t-popup_show .t396 .tn-elem, .t-popup_show .t396__group { animation: none !important; }
  .t396 .tn-elem[data-elem-type="button"] .tn-atom:hover, .t396 .tn-elem[data-elem-type="button"] .tn-atom:active,
  .t-submit:hover, .t-submit:active, .t-popup__close:active, #rec5183983701 .tn-atom:hover,
  #rec5183970301 .t396__group:has(> .tn-molecule > a:not([href="/"])) { translate: none; scale: none !important; }
}
/* «Уменьшить прозрачность» в системе: стекло становится почти сплошным */
@media (prefers-reduced-transparency: reduce) {
  #rec5183970301 .t396__artboard { background-color: #fff !important; }
  .t-popup .t-popup__close { background-color: #fff !important; }
}

/* 8. Меню (просьба пользователя 27.10.2026: классическая раскладка; разметку строит скрипт motion.html).
      Компьютер (от 960 px): панель с тремя колонками выезжает под шапкой - разделы, направления, связь.
      Телефон и планшет: экран меню поверх шапки - логотип и крестик сверху, разделы строками, направления
      карточками, внизу телефон, мессенджеры и запись. Размеры в --u, как автомасштаб Zero-блоков. */
.pp-menu { --u: calc(100vw / 1200); --w: 1160; position: fixed; inset: 0; z-index: 989; color: #1E2A36;
  font-family: var(--t-text-font, 'Inter'), Arial, sans-serif; -webkit-font-smoothing: antialiased; }
@media (max-width: 1199px) { .pp-menu { --u: calc(100vw / 960); --w: 920; } }
@media (max-width: 959px)  { .pp-menu { --u: calc(100vw / 640); } }
@media (max-width: 639px)  { .pp-menu { --u: calc(100vw / 480); } }
@media (max-width: 479px)  { .pp-menu { --u: calc(100vw / 360); } }
.pp-menu[hidden] { display: none; }
.pp-menu * { box-sizing: border-box; }
.pp-menu a { color: inherit; text-decoration: none; }
.pp-menu ul { margin: 0; padding: 0; list-style: none; }
.pp-menu svg { display: block; flex: none; }
.pp-menu__shade { position: absolute; inset: var(--pp-hh, 0) 0 0; background: rgba(30, 42, 54, .32);
  opacity: 0; transition: opacity .28s ease; }
.pp-menu__panel { position: absolute; top: var(--pp-hh, 0); left: 0; right: 0; background: #fff;
  border-top: 1px solid #D5DDE3; box-shadow: 0 24px 48px rgba(30, 42, 54, .14);
  opacity: 0; translate: 0 calc(-8 * var(--u)); transition: opacity .28s ease, translate .28s cubic-bezier(.22, 1, .36, 1); }
.pp-menu.is-open .pp-menu__shade, .pp-menu.is-open .pp-menu__panel { opacity: 1; translate: none; }
.pp-menu__top { display: none; }
.pp-menu__body { width: calc(var(--w) * var(--u)); margin: 0 auto; padding: calc(36 * var(--u)) 0 calc(44 * var(--u));
  display: grid; grid-template-columns: 1fr 1.2fr 1fr; }
.pp-menu__col + .pp-menu__col { border-left: 1px solid #D5DDE3; padding-left: calc(40 * var(--u)); }
.pp-menu__col { padding-right: calc(40 * var(--u)); }
.pp-menu__col:last-child { padding-right: 0; }
.pp-menu__cap { margin: 0 0 calc(16 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.3; font-weight: 600; color: #5B6B78; }

/* разделы */
.pp-menu__link { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u));
  padding: calc(7 * var(--u)) 0; font-size: calc(20 * var(--u)); line-height: 1.25; font-weight: 600;
  transition: color .2s ease, translate .2s ease; }
.pp-menu__link svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: #2C5A87; opacity: 0; transition: opacity .2s ease; }

/* направления */
.pp-menu__dirs { display: grid; gap: calc(8 * var(--u)); }
.pp-menu__dir { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u));
  min-height: calc(60 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)) calc(20 * var(--u));
  border-radius: calc(12 * var(--u)); background: #EEF2F5; font-size: calc(18 * var(--u)); line-height: 1.25; font-weight: 600;
  transition: background-color .2s ease, color .2s ease; }
.pp-menu__ring { display: flex; align-items: center; justify-content: center; width: calc(36 * var(--u)); height: calc(36 * var(--u));
  border-radius: 50%; box-shadow: inset 0 0 0 1px #2B3B4E; flex: none; transition: box-shadow .2s ease; }
.pp-menu__ring svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }

/* связь */
.pp-menu__phone { display: inline-block; font-size: calc(26 * var(--u)); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em;
  transition: color .2s ease; }
.pp-menu__msg { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)); margin-top: calc(16 * var(--u)); }
.pp-menu__btn { display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); height: calc(48 * var(--u));
  padding: 0 calc(12 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 600; line-height: 1;
  transition: background-color .2s ease, color .2s ease, scale .2s ease; }
.pp-menu__btn svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.pp-menu__btn--line { background: #fff; box-shadow: inset 0 0 0 1px #2B3B4E; }
.pp-menu__btn--main { margin-top: calc(8 * var(--u)); height: calc(56 * var(--u)); background: #2C5A87; color: #fff !important; font-size: calc(16 * var(--u)); }
.pp-menu__btn:active { scale: .97; }

@media (hover: hover) {
  .pp-menu__link:hover { color: #2C5A87; translate: calc(6 * var(--u)) 0; }
  .pp-menu__link:hover svg { opacity: 1; }
  .pp-menu__dir:hover { background: #2C5A87; color: #fff; }
  .pp-menu__dir:hover .pp-menu__ring { box-shadow: inset 0 0 0 1px #fff; }
  .pp-menu__phone:hover { color: #2C5A87; }
  .pp-menu__btn--line:hover { background: #EEF2F5; }
  .pp-menu__btn--main:hover { background: #234A70; }
}
.pp-menu a:focus-visible, .pp-menu button:focus-visible { outline: 2px solid #2C5A87; outline-offset: 2px; }
.pp-menu__panel:focus { outline: none; }

/* шапка, пока открыта панель на компьютере, - сплошная белая, без тени */
.pp-menu-open #rec5183970301 .t396__artboard { background-color: #fff !important; box-shadow: none !important; }

/* телефон и планшет: экран меню */
@media (max-width: 959px) {
  .pp-menu { z-index: 2147482000; }
  .pp-menu__shade { display: none; }
  .pp-menu__panel { top: 0; bottom: 0; border-top: 0; box-shadow: none; display: flex; flex-direction: column;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    translate: 0 calc(-12 * var(--u)); transition-duration: .24s; }
  .pp-menu__top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
    flex: none; height: var(--pp-hh, calc(54 * var(--u))); padding: 0 calc(12 * var(--u)); background: #fff;
    border-bottom: 1px solid #D5DDE3; }
  .pp-menu__logo { display: flex; align-items: center; gap: calc(8 * var(--u)); }
  .pp-menu__logo svg { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
  .pp-menu__logo b { display: block; font-size: calc(17 * var(--u)); line-height: 1.05; font-weight: 700; }
  .pp-menu__logo small { display: block; margin-top: calc(2 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.2; font-weight: 500; }
  .pp-menu__close { display: flex; align-items: center; justify-content: center; width: calc(40 * var(--u)); height: calc(40 * var(--u));
    margin: 0; padding: 0; border: 0; border-radius: calc(10 * var(--u)); background: #fff; box-shadow: inset 0 0 0 1px #2B3B4E;
    color: #1E2A36; cursor: pointer; }
  .pp-menu__close svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
  .pp-menu__body { flex: 1 0 auto; width: auto; margin: 0; padding: calc(4 * var(--u)) calc(16 * var(--u)) calc(24 * var(--u));
    display: flex; flex-direction: column; }
  .pp-menu__col, .pp-menu__col + .pp-menu__col { padding: 0; border: 0; }
  .pp-menu__col--nav .pp-menu__cap { display: none; }
  .pp-menu__col--dirs { margin-top: calc(24 * var(--u)); }
  .pp-menu__col.pp-menu__col--contact { margin-top: auto; padding-top: calc(32 * var(--u)); }
  .pp-menu__link { min-height: calc(54 * var(--u)); padding: calc(8 * var(--u)) 0; border-bottom: 1px solid #D5DDE3; font-size: calc(20 * var(--u)); }
  .pp-menu__link svg { opacity: 1; }
  .pp-menu__dir { min-height: calc(52 * var(--u)); padding-left: calc(16 * var(--u)); font-size: calc(17 * var(--u)); }
  .pp-menu__ring { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
  .pp-menu__phone { font-size: calc(24 * var(--u)); }
  .pp-menu-lock, .pp-menu-lock body { overflow: hidden !important; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-menu__shade, .pp-menu__panel, .pp-menu__link, .pp-menu__dir, .pp-menu__btn { transition: none; }
  .pp-menu__panel { translate: none; }
  .pp-menu__link:hover { translate: none; }
}

/* 9. Знак логотипа в HTML-элементах шапки и подвала. Tilda делает элемент display: table, а обёртку
      .tn-atom__html - table-cell; Safari (iPhone) не считает внутри них высоту в процентах, и знак
      схлопывался в ноль. Теперь ссылка и SVG растянуты абсолютно по пиксельному размеру самого элемента,
      без процентов по высоте; под знаком в шапке - он же фоновой картинкой (запасной вариант). */
#rec5183970301 .tn-elem[data-elem-id="1793095590576"],
#rec5184021701 .tn-elem[data-elem-id="1793095845522"] { display: block !important; }
#rec5183970301 .tn-elem[data-elem-id="1793095590576"] {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%232C5A87'/%3E%3Ccircle cx='32' cy='32' r='17' fill='none' stroke='%23fff' stroke-width='6'/%3E%3Ccircle cx='35.5' cy='35.5' r='5' fill='%23fff'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
#rec5183970301 .tn-elem[data-elem-id="1793095590576"] .tn-atom,
#rec5184021701 .tn-elem[data-elem-id="1793095845522"] .tn-atom,
#rec5183970301 .tn-elem[data-elem-id="1793095590576"] .tn-atom a,
#rec5183970301 .tn-elem[data-elem-id="1793095590576"] svg,
#rec5184021701 .tn-elem[data-elem-id="1793095845522"] svg {
  display: block !important; position: absolute !important; top: 0; right: 0; bottom: 0; left: 0;
  width: auto !important; height: auto !important; margin: 0;
}
#rec5183970301 .tn-elem[data-elem-id="1793095590576"] svg,
#rec5184021701 .tn-elem[data-elem-id="1793095845522"] svg { width: 100% !important; height: 100% !important; }

/* 10. Пустоты справа в кнопках (просьба пользователя 27.10.2026: «пустоты подобные убери везде»).
       Плашки (рейтинг, площадки отзывов) сужены по тексту в самих Zero-блоках (первый экран, отзывы, контакты).
       Кнопки одной ширины парами (стопкой или рядом) остаются равными, а текст в них - по центру,
       чтобы у короткой надписи не было пустоты справа. */
#rec5160313201 .tn-elem[data-elem-id="1793003301942000011"] .tn-atom,
#rec5160313201 .tn-elem[data-elem-id="1793046394383000007"] .tn-atom,
#rec5163352301 .tn-elem[data-elem-id="1793006965735000035"] .tn-atom,
#rec5163352301 .tn-elem[data-elem-id="1793006965735000036"] .tn-atom,
#rec5160324501 .tn-elem[data-elem-id="1793003432902000026"] .tn-atom,
#rec5160324501 .tn-elem[data-elem-id="1793003432902000034"] .tn-atom { justify-content: center !important; text-align: center !important; }
#rec5160313201 .tn-elem[data-elem-id="1793003301942000011"] .tn-atom > *,
#rec5160313201 .tn-elem[data-elem-id="1793046394383000007"] .tn-atom > *,
#rec5163352301 .tn-elem[data-elem-id="1793006965735000035"] .tn-atom > *,
#rec5163352301 .tn-elem[data-elem-id="1793006965735000036"] .tn-atom > *,
#rec5160324501 .tn-elem[data-elem-id="1793003432902000026"] .tn-atom > *,
#rec5160324501 .tn-elem[data-elem-id="1793003432902000034"] .tn-atom > * { justify-content: center !important; text-align: center !important; }
#rec5160313201 .tn-elem[data-elem-id="1793003301942000011"] .tn-atom > * > *,
#rec5160313201 .tn-elem[data-elem-id="1793046394383000007"] .tn-atom > * > *,
#rec5163352301 .tn-elem[data-elem-id="1793006965735000035"] .tn-atom > * > *,
#rec5163352301 .tn-elem[data-elem-id="1793006965735000036"] .tn-atom > * > *,
#rec5160324501 .tn-elem[data-elem-id="1793003432902000026"] .tn-atom > * > *,
#rec5160324501 .tn-elem[data-elem-id="1793003432902000034"] .tn-atom > * > * { text-align: center !important; }

/* 11. Instagram в подвале (Ф6, 27.10.2026): иконка в стиле кнопок шапки - белый квадрат со скруглением,
       тонкая рамка #2B3B4E, при наведении чуть увеличивается. Звёздочка - к сноске про Meta рядом.
       Код - tilda-snippets/footer-instagram.html (HTML-элемент 1793125286189000001). Ссылка растянута
       абсолютно по размеру элемента (без высоты в процентах - иначе в Safari схлопывается, см. раздел 9). */
#rec5184021701 .tn-elem[data-elem-id="1793125286189000001"] { display: block !important; overflow: visible; }
#rec5184021701 .tn-elem[data-elem-id="1793125286189000001"] .tn-atom { display: block !important; position: absolute !important; top: 0; right: 0; bottom: 0; left: 0; }
.pp-ig { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #2B3B4E; color: #2B3B4E; text-decoration: none;
  transition: background-color .2s ease, scale .2s var(--pp-ease-out, ease); }
.pp-ig svg { display: block; width: 50%; height: 50%; }
.pp-ig__star { position: absolute; top: -3px; right: -9px; font-size: 13px; line-height: 1; color: #5B6B78; }
@media (hover: hover) { .pp-ig:hover { scale: 1.05; background: #EEF2F5; } }
.pp-ig:active { scale: .97; }
.pp-ig:focus-visible { outline: 2px solid #2C5A87; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pp-ig { transition: none; } .pp-ig:hover, .pp-ig:active { scale: none; } }

/* 12. Номер телефона в шапке на компьютере убран (просьба пользователя 27.10.2026); на телефоне - кнопка с трубкой */
@media (min-width: 960px) { #rec5183970301 .tn-elem[data-elem-id="1793007985585000011"] { display: none !important; } }

/* 13. Плашки (рейтинг на первом экране, площадки отзывов, мессенджеры в контактах): текст никогда не переносится
       и стоит по центру. На iPhone Safari рисует текст чуть шире, чем на компьютере, - плашка, подогнанная впритык,
       переносилась на две строки («271 отзыв на / Яндексе»). Теперь разница съедает поля поровну с двух сторон. */
#rec5157916901 .tn-elem[data-elem-id="1793008205397000035"] .tn-atom,
#rec5157916901 .tn-elem[data-elem-id="1793047090606"] .tn-atom,
#rec5160313201 .tn-elem[data-elem-id="1793003301942000014"] .tn-atom,
#rec5160313201 .tn-elem[data-elem-id="1793003301942000015"] .tn-atom,
#rec5160313201 .tn-elem[data-elem-id="1793003301942000016"] .tn-atom,
#rec5160324501 .tn-elem[data-elem-id="1793003432904000043"] .tn-atom,
#rec5160324501 .tn-elem[data-elem-id="1793047278167"] .tn-atom,
#rec5160324501 .tn-elem[data-elem-id="1793003432904000044"] .tn-atom,
#rec5160324501 .tn-elem[data-elem-id="1793003432904000045"] .tn-atom,
#rec5160324501 .tn-elem[data-elem-id="1793003432904000046"] .tn-atom,
#rec5160324501 .tn-elem[data-elem-id="1793003432903000040"] .tn-atom,
#rec5160324501 .tn-elem[data-elem-id="1793003432903000041"] .tn-atom { justify-content: center !important; text-align: center !important; white-space: nowrap !important; }
#rec5157916901 .tn-elem[data-elem-id="1793008205397000035"] .tn-atom *,
#rec5157916901 .tn-elem[data-elem-id="1793047090606"] .tn-atom *,
#rec5160313201 .tn-elem[data-elem-id="1793003301942000014"] .tn-atom *,
#rec5160313201 .tn-elem[data-elem-id="1793003301942000015"] .tn-atom *,
#rec5160313201 .tn-elem[data-elem-id="1793003301942000016"] .tn-atom *,
#rec5160324501 .tn-elem[data-elem-id="1793003432904000043"] .tn-atom *,
#rec5160324501 .tn-elem[data-elem-id="1793047278167"] .tn-atom *,
#rec5160324501 .tn-elem[data-elem-id="1793003432904000044"] .tn-atom *,
#rec5160324501 .tn-elem[data-elem-id="1793003432904000045"] .tn-atom *,
#rec5160324501 .tn-elem[data-elem-id="1793003432904000046"] .tn-atom *,
#rec5160324501 .tn-elem[data-elem-id="1793003432903000040"] .tn-atom *,
#rec5160324501 .tn-elem[data-elem-id="1793003432903000041"] .tn-atom * { justify-content: center !important; text-align: center !important; white-space: nowrap !important; }
/* «14 лет практики» - текст с подложкой: тоже по центру и в одну строку */
#rec5157916901 .tn-elem[data-elem-id="1793008205397000033"] .tn-atom { text-align: center !important; white-space: nowrap !important; }

/* 14. «Вопросы и ответы»: ссылки на Telegram и телефон в подзаголовке - без подчёркивания (просьба пользователя),
       синий цвет оставлен, чтобы их было видно как ссылки; при наведении чуть темнее */
#rec5161648501 .t1119__descr a { text-decoration: none !important; transition: color .2s ease; }
@media (hover: hover) { #rec5161648501 .t1119__descr a:hover { color: #234A70 !important; } }

/* 15. Ссылки в тексте - без подчёркивания по всему сайту, кроме подвала и страниц политики и согласия
       (просьба пользователя 27.10.2026). Где ссылка была цвета текста (подписи отзывов «ПроДокторов», «Яндекс»;
       «телефону», «Telegram» в шаге «Запись» и в попапе «Как проходит приём»), она стала синей #2C5A87 -
       иначе её не отличить от текста. */
.t-rec:not(#rec5184021701):not(#rec5184069701):not(#rec5184084301) .tn-atom a,
.t-rec:not(#rec5184021701):not(#rec5184069701):not(#rec5184084301) .tn-atom a u { text-decoration: none !important; border-bottom: 0 !important; }
#rec5160313201 .tn-atom a, #rec5160299501 .tn-atom a, #rec5163314301 .tn-atom a { color: #2C5A87 !important; transition: color .2s ease; }
@media (hover: hover) {
  #rec5160313201 .tn-atom a:hover, #rec5160299501 .tn-atom a:hover, #rec5163314301 .tn-atom a:hover { color: #234A70 !important; }
}
/* страница 404: телефон и ссылки «Часто ищут» */
.pp404__phone a, .pp404__links a { text-decoration: none !important; }

/* 16. Попапы направлений, «Как проходит приём» и «Уход после удаления» - скругление как у карточек сайта
       (просьба пользователя 27.10.2026): 16 px на компьютере и планшете, 12 px на телефоне.
       Под скруглённой карточкой лежала внешняя группа с белой заливкой и прямыми углами: она закрывала углы,
       а на ширине 960 сдвигалась и торчала белой полосой справа от карточки. Её заливка убрана. */
.t396__group[data-group-id="1793006458270000002"] > .tn-molecule,
.t396__group[data-group-id="1793006650938000002"] > .tn-molecule,
.t396__group[data-group-id="1793006756829000002"] > .tn-molecule,
.t396__group[data-group-id="1793006860390000002"] > .tn-molecule,
.t396__group[data-group-id="1793006965730000002"] > .tn-molecule { background: transparent !important; }
@media (max-width: 639px) {
  .t396__group[data-group-id="1793006458270000004"] > .tn-molecule,
  .t396__group[data-group-id="1793006650938000004"] > .tn-molecule,
  .t396__group[data-group-id="1793006756829000004"] > .tn-molecule,
  .t396__group[data-group-id="1793006860391000004"] > .tn-molecule,
  .t396__group[data-group-id="1793006965730000004"] > .tn-molecule { border-radius: 12px !important; }
}

/* 17. Подпись в подвале «ПОПОВКИН ПАВЕЛ СЕРГЕЕВИЧ» (28.10.2026, по мотивам промта SOSCALE; разметка -
       tilda-snippets/footer-signature.html, HTML-элемент подвала). Тёмная полоса цвета карточек #2B3B4E, сквозь буквы
       видно фото врача у лазера. Отступы полосы - как у карточек: 8 px от карточки подвала, скругление 16/12.
       Tilda делает HTML-элемент display: table (см. раздел 9), поэтому полоса растянута абсолютно по размеру элемента. */
#rec5184021701 .tn-elem.pp-sign-elem { display: block !important; }
#rec5184021701 .pp-sign-elem .tn-atom { display: block !important; position: absolute !important; inset: 0; width: auto !important; height: auto !important; }
.pp-sign {
  position: absolute; inset: 0; box-sizing: border-box; display: flex; align-items: center;
  padding: 32px; background: #2B3B4E; border-radius: 16px; overflow: hidden;
}
.pp-sign svg { display: block; flex: none; width: 100%; height: auto; overflow: visible; }
.pp-sign text { font-family: 'Inter', Arial, sans-serif; font-weight: 700; fill: #fff; stroke: #fff; stroke-linejoin: round; }
.pp-sign__base { fill: #C9D3DC; }   /* если фото не загрузилось, буквы всё равно светлые */
.pp-sign .pp-sign__tall { display: none; }
@media (max-width: 1199px) { .pp-sign { padding: 28px; } }
@media (max-width: 959px) { .pp-sign { padding: 22px; border-radius: 12px; } }
@media (max-width: 639px) { .pp-sign { padding: 18px; } .pp-sign .pp-sign__wide { display: none; } .pp-sign .pp-sign__tall { display: block; } }
@media (max-width: 479px) { .pp-sign { padding: 16px; } }
/* перелив: фото внутри букв медленно плывёт, только пока подпись на экране (класс is-live ставит motion.html).
   При «Уменьшить движение» фото стоит */
@media (prefers-reduced-motion: no-preference) {
  .pp-sign__img { animation: pp-sign-drift 24s ease-in-out infinite alternate; animation-play-state: paused; }
  .pp-sign.is-live .pp-sign__img { animation-play-state: running; }
}
@keyframes pp-sign-drift { from { transform: translate(0, 0); } to { transform: translate(-300px, -40px); } }

/* 18. Углы у фото, которые лежали поверх скруглённой подложки прямыми углами (просьба пользователя 28.10.2026
       «закругли углы у всех блоков»; поиск - scripts/corners-audit.py). Скругление как у карточек: 16 px, ниже 960 - 12 px.
       Фото врача на первом экране берёт скругление своей подложки (inherit). «До и после»: у всех шести фото слайдера
       скруглены верхние углы, у полупрозрачной полосы с подписью - нижние (шторка слайдера - clip-path на элементе,
       скругление на картинке внутри с ним складывается). */
#rec5157916901 .tn-elem[data-elem-id="1793008205392000005"],
#rec5157916901 .tn-elem[data-elem-id="1793008205392000005"] .tn-atom,
#rec5157916901 .tn-elem[data-elem-id="1793008205392000005"] img { border-radius: inherit !important; }
#rec5157916901 .tn-elem[data-elem-id="1793008205392000005"] .tn-atom { overflow: hidden; }
#rec5160292801 :is(.tn-elem[data-elem-id="1793002834149000019"], .tn-elem[data-elem-id="1793002834149000020"],
  .tn-elem[data-elem-id="1793008649961000001"], .tn-elem[data-elem-id="1793008711315000002"],
  .tn-elem[data-elem-id="1793008712359000003"], .tn-elem[data-elem-id="1793008713367000004"]) :is(.tn-atom, img) {
  border-radius: 16px 16px 0 0 !important; overflow: hidden;
}
#rec5160292801 .t396__group[data-group-id="1793002834150000026"] > .tn-molecule { border-radius: 0 0 16px 16px !important; }
@media (max-width: 959px) {
  #rec5160292801 :is(.tn-elem[data-elem-id="1793002834149000019"], .tn-elem[data-elem-id="1793002834149000020"],
    .tn-elem[data-elem-id="1793008649961000001"], .tn-elem[data-elem-id="1793008711315000002"],
    .tn-elem[data-elem-id="1793008712359000003"], .tn-elem[data-elem-id="1793008713367000004"]) :is(.tn-atom, img) { border-radius: 12px 12px 0 0 !important; }
  #rec5160292801 .t396__group[data-group-id="1793002834150000026"] > .tn-molecule { border-radius: 0 0 12px 12px !important; }
}

/* 19. Правки супруги доктора (28.10.2026, переданы пользователем со скриншотами iPhone).
   19.1 Первый экран: у плиток направлений и карточки с именем фон был картинкой-текстурой (hero-0..3.jpg, 864 px по ширине) -
        на iPhone растянута в 2-3 раза, видны пиксели. Теперь ровный тёмно-синий #2B3B4E, как у карточки «Слово врачу».
        Картинка остаётся на месте прозрачной, чтобы Tilda не пересчитала высоту элемента. */
#rec5157916901 :is(.tn-elem[data-elem-id="1793008205393000009"], .tn-elem[data-elem-id="1793008205395000015"],
  .tn-elem[data-elem-id="1793008205396000021"], .tn-elem[data-elem-id="1793008205396000027"]) .tn-atom {
  background: #2B3B4E !important;
}
#rec5157916901 :is(.tn-elem[data-elem-id="1793008205393000009"], .tn-elem[data-elem-id="1793008205395000015"],
  .tn-elem[data-elem-id="1793008205396000021"], .tn-elem[data-elem-id="1793008205396000027"]) img { opacity: 0 !important; }
/* 19.2 «Что удаляем», фото с женщиной: убрана тёмная подложка под текстом «Консультация и дерматоскопия».
        Текст лежит прямо на светлом фото, поэтому он тёмный (как в соседней карточке «Что удаляем»), а кнопка «Записаться» -
        синяя, как остальные кнопки записи (белая на светлом фото терялась). */
#rec5160276601 .tn-elem[data-elem-id="1793003877647000012"] { display: none !important; }
#rec5160276601 :is(.tn-elem[data-elem-id="1793003877647000015"], .tn-elem[data-elem-id="1793003877647000016"]) .tn-atom { color: #1E2A36 !important; }
#rec5160276601 .tn-elem[data-elem-id="1793003877648000017"] .tn-atom { background-color: #2C5A87 !important; color: #fff !important; transition: background-color .2s ease; }
#rec5160276601 .tn-elem[data-elem-id="1793003877648000017"] .tn-atom * { color: #fff !important; }
@media (hover: hover) { #rec5160276601 .tn-elem[data-elem-id="1793003877648000017"] .tn-atom:hover { background-color: #234A70 !important; } }
/* 19.3 Остальные фоны-текстуры (просьба пользователя: «остальные фоны по всему сайту тоже однотонными, без пикселей»):
        «Что удаляем» (services-0.jpg) и «Лазер и скальпель» (services-2.jpg) - голубые текстуры шириной 764 px, на iPhone
        растянуты почти вдвое. Теперь ровный #BCCAD8 - средний тон прежних текстур (#BFCDDB и #B7C7D7). Остальные картинки
        сайта - настоящие фото, их не трогали. */
#rec5160276601 :is(.tn-elem[data-elem-id="1793003877645000006"], .tn-elem[data-elem-id="1793003877649000019"]) .tn-atom {
  background: #BCCAD8 !important;
}
#rec5160276601 :is(.tn-elem[data-elem-id="1793003877645000006"], .tn-elem[data-elem-id="1793003877649000019"]) img { opacity: 0 !important; }

/* 20. «До и после»: шесть новых пар от Павла (28.10.2026) - те же скругления, что у фото в разделе 18 */
#rec5160292801 :is(.tn-elem[data-elem-id="1793193566652000001"], .tn-elem[data-elem-id="1793193640532000002"],
  .tn-elem[data-elem-id="1793193661091000003"], .tn-elem[data-elem-id="1793193702972000004"],
  .tn-elem[data-elem-id="1793193771207000005"], .tn-elem[data-elem-id="1793193790145000006"],
  .tn-elem[data-elem-id="1793193806903000007"], .tn-elem[data-elem-id="1793193824527000008"],
  .tn-elem[data-elem-id="1793193842983000009"], .tn-elem[data-elem-id="1793193866695000010"],
  .tn-elem[data-elem-id="1793193889609000011"], .tn-elem[data-elem-id="1793193907890000012"]) :is(.tn-atom, img) {
  border-radius: 16px 16px 0 0 !important; overflow: hidden;
}
@media (max-width: 959px) {
  #rec5160292801 :is(.tn-elem[data-elem-id="1793193566652000001"], .tn-elem[data-elem-id="1793193640532000002"],
  .tn-elem[data-elem-id="1793193661091000003"], .tn-elem[data-elem-id="1793193702972000004"],
  .tn-elem[data-elem-id="1793193771207000005"], .tn-elem[data-elem-id="1793193790145000006"],
  .tn-elem[data-elem-id="1793193806903000007"], .tn-elem[data-elem-id="1793193824527000008"],
  .tn-elem[data-elem-id="1793193842983000009"], .tn-elem[data-elem-id="1793193866695000010"],
  .tn-elem[data-elem-id="1793193889609000011"], .tn-elem[data-elem-id="1793193907890000012"]) :is(.tn-atom, img) { border-radius: 12px 12px 0 0 !important; }
}

/* 21. Онлайн-запись YCLIENTS (30.10.2026, виджет от доктора; разметку добавляет tilda-snippets/yclients.html).
   В окне записи сверху кнопка «Выбрать дату и время онлайн» - вторичная (контур), чтобы не спорить с «Записаться»,
   под ней разделитель «или» перед формой. Окно виджета на компьютере - поверх окна записи и шапки
   (у виджета свой z-index около 10 000, у попапов Tilda и шапки - выше) */
.pp-yc { margin: 24px 0 4px; }
.pp-yc__btn {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 50px;
  padding: 12px 20px; border: 1.5px solid #2C5A87; border-radius: 5px; background: transparent;
  color: #2C5A87 !important; font: 600 16px/1.25 'Inter', Arial, sans-serif; text-align: center; text-decoration: none !important;
  transition: background-color .2s ease, color .2s ease, scale .2s var(--pp-ease-out);
}
@media (hover: hover) { .pp-yc__btn:hover { background: rgba(44, 90, 135, .08); scale: 1.05; } }
.pp-yc__btn:active { scale: .97; }
.pp-yc__btn:focus-visible { outline: 2px solid #2C5A87; outline-offset: 3px; }
.pp-yc__or { display: flex; align-items: center; gap: 12px; margin: 20px 0 0; color: #5B6B78; font: 400 14px/1.2 'Inter', Arial, sans-serif; }
.pp-yc__or::before, .pp-yc__or::after { content: ""; flex: 1; height: 1px; background: #C3CDD5; }
.yWidgetCover { z-index: 2147483000 !important; }
.yWidgetBlock-yclients { z-index: 2147483001 !important; }
.yCloseIcon { z-index: 2147483002 !important; }

/* 21.1 Плавающая кнопка онлайн-записи справа внизу (просьба пользователя 30.10.2026: «в той форме, что у нас кнопки
   на сайте, по сути квадрат со скруглениями; немного моргает»; разметка - yclients.html). Квадрат со скруглением 8 px,
   как иконки шапки (55/44 px) и «Записаться», цвет #2C5A87, иконка календаря; 60 px на компьютере, 52 на телефоне.
   - Подпись «Онлайн-запись» (.pp-fab__text) - всплывает слева: 4 с при появлении (.is-hint) и при наведении/фокусе;
     в остальное время скрыта визуально, но остаётся названием ссылки для экранного диктора.
   - При появлении - два кольца-«пульса» (::before); дальше «моргает» - мягкое двойное свечение (::after) раз в 4 с.
     После первого нажатия моргание выключается до конца визита (.is-used). Свечение не вспыхивает чаще 3 раз в секунду.
   - Ниже меню (989), шапки (990) и попапов; при «Уменьшить движение» - без выезда, пульса и моргания */
.pp-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 985;
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 60px; height: 60px;
  border-radius: 8px; background: #2C5A87; color: #FFFFFF !important; text-decoration: none !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 10px 25px rgba(30, 42, 54, .25), 0 2px 6px rgba(30, 42, 54, .12);
  -webkit-tap-highlight-color: transparent;
  transition: opacity .45s var(--pp-ease-out), transform .45s var(--pp-ease-out), visibility 0s,
    background-color .2s ease, scale .2s var(--pp-ease-out);
}
.pp-fab.is-hidden { opacity: 0; visibility: hidden; transform: translateY(20px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
@media (hover: hover) { .pp-fab:hover { background: #234A70; scale: 1.06; } }
.pp-fab:active { scale: .95; }
.pp-fab:focus-visible { outline: 2px solid #2C5A87; outline-offset: 4px; }
.pp-fab__icon { display: inline-flex; width: 28px; height: 28px; }
.pp-fab__icon svg { width: 100%; height: 100%; }
.pp-fab__text {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(8px, -50%);
  padding: 9px 14px; border-radius: 8px; background: #1E2A36; color: #FFFFFF;
  font: 600 15px/1.2 'Inter', Arial, sans-serif; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(30, 42, 54, .2); opacity: 0; pointer-events: none;
  transition: opacity .3s var(--pp-ease-out), transform .3s var(--pp-ease-out);
}
.pp-fab.is-hint .pp-fab__text { opacity: 1; transform: translate(0, -50%); }
@media (hover: hover) { .pp-fab:hover .pp-fab__text { opacity: 1; transform: translate(0, -50%); } }
.pp-fab:focus-visible .pp-fab__text { opacity: 1; transform: translate(0, -50%); }
.pp-fab::before, .pp-fab::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; }
.pp-fab::before { border: 2px solid #4A7DB0; }
.pp-fab.is-pulse::before { animation: pp-fab-ring 1.8s var(--pp-ease-out) 2; }
.pp-fab::after { box-shadow: 0 0 0 7px rgba(74, 125, 176, .45), 0 0 18px 6px rgba(74, 125, 176, .35); }
.pp-fab.is-in:not(.is-used)::after { animation: pp-fab-blink 4s ease-in-out 2.5s infinite; }
.pp-fab.is-hidden::after { animation-play-state: paused; }
@keyframes pp-fab-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes pp-fab-blink { 0%, 58%, 100% { opacity: 0; } 66% { opacity: 1; } 74% { opacity: .1; } 82% { opacity: .8; } 92% { opacity: 0; } }
@media (max-width: 640px) {
  .pp-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; }
  .pp-fab__icon { width: 25px; height: 25px; }
  .pp-fab__text { font-size: 14px; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-fab, .pp-fab.is-hidden { transform: none; transition: opacity .2s linear, visibility 0s linear .2s, background-color .2s ease; }
  .pp-fab.is-pulse::before, .pp-fab.is-in:not(.is-used)::after { animation: none; }
  .pp-fab__text { transition: opacity .2s linear; }
}