/*
  Общие стили сайта Поповкина.
  Вставляются в 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);
}
.pp-intro-go #rec5157916901 .tn-group__51579169011793008205395000014 { transition-delay: .12s; }
.pp-intro-go #rec5157916901 .tn-group__51579169011793008205396000020 { transition-delay: .24s; }
.pp-intro-go #rec5157916901 .tn-group__51579169011793008205396000026,
.pp-intro-go #rec5157916901 .tn-elem[data-elem-id="1793047090606"] { transition-delay: .36s; }
@keyframes pp-show { to { opacity: 1; translate: 0 0; } }

/* 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, .6) !important;
  box-shadow: 0 1px 0 rgba(30, 42, 54, .08), 0 10px 30px rgba(30, 42, 54, .08);
}
#rec5183970301 .t396__artboard .tn-molecule { background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: 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; }
/* карточки-ссылки (плашки направлений, карточки на лампе): при наведении слегка светлеют */
.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 { translate: none; scale: none; }
}
/* «Уменьшить прозрачность» в системе: стекло становится почти сплошным */
@media (prefers-reduced-transparency: reduce) {
  #rec5183970301 .t396__artboard { background-color: #fff !important; }
  .t-popup .t-popup__close { background-color: #fff !important; }
}