/* ==========================================================================
   CSP (Children's Services Page) — стили превью страницы детских услуг
   Файл подключается из /home/bitrix/www/_preview/detskie-uslugi/index.php
   ==========================================================================

   Глобальные токены (из Figma «Бамбино», страница «Info» 11:96):
     цвета:   #202E2C (основной текст), #00A3FF (CTA/active), #EEEEEE (border-light),
              #96BC26 / #F3FEBC (зелёная пара), #ECB4D3 / #FCE9F4 (розовая пара).
     шрифт:   используем брендовые сайта — TitleText (заголовки) / GeneralText (текст).
              Figma указывает Nunito Sans как fallback (Bold 700 / Medium 500).
              letter-spacing -2%, line-height 100%.
     H2:      40 / 700,  H3: 34 / 700,  H4: 20 / 700,  body: 16 / 500.
     отступы: между секциями 90px, внутри секции 45px, в карточке 20–25px.
     радиусы: 35px (карточка/баннер), 25px (вторичная), 10px (active-pill), 5px (чип).
     ширина контентной колонки: 1000px (текстовые блоки/сетки/FAQ).
   ========================================================================== */

:root {
    --csp-font-title: 'Nunito Sans', 'TitleText', sans-serif;
    --csp-font-text:  'Nunito Sans', 'GeneralText', sans-serif;
}

/* ===== Общая обёртка превью ============================================= */
.csp-page { padding: 0 0 80px; background: #fff; }
.csp-page__wrap { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

.csp-page__notice {
    background: #fff7d6;
    border: 1px dashed #c9a227;
    color: #6b4f00;
    padding: 10px 16px;
    border-radius: 10px;
    margin-bottom: 24px;
    font: 500 14px/1.5 var(--csp-font-text);
}

/* Контентная колонка (1000px) ============================================ */
/* Контент: 2-колоночная раскладка «main + sticky aside» — как у vzroslye-uslugi.
   Main 1fr (макс. 1000px по дизайну), aside 339px, gap 22px. */
.csp-content {
    max-width: 1361px; /* 1000 + 22 + 339 */
    margin: 40px auto 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 339px;
    gap: 22px;
    align-items: start;
}
.csp-content__main {
    min-width: 0;
    display: block;
}
.csp-content__aside {
    position: sticky;
    top: calc(var(--csp-header-h, 0px) + 80px);
    align-self: start;
}

/* Вертикальная разрядка между секциями ================================== */
.csp-section + .csp-section {
    margin-top: 90px;
}
/* Высота глобальной шапки сайта проставляется JS-ом в --csp-header-h.
   Якорь должен оставлять место под шапкой + sticky-nav + небольшой запас. */
.csp-anchor { scroll-margin-top: calc(var(--csp-header-h, 0px) + 80px); }

/* ===== Anchor nav (Figma 11:84) — sticky =============================== */
.csp-nav-wrap {
    position: sticky;
    /* Позиционируемся ПОД глобальной шапкой сайта (.header).
       Высота шапки считается динамически в JS → --csp-header-h. */
    top: var(--csp-header-h, 0px);
    /* z-index ниже глобальной шапки (у неё 50), чтобы шапка перекрывала наш nav. */
    z-index: 40;
    margin: 24px auto 0;
    max-width: 1360px;
    padding: 8px 0 6px;
    background: transparent;
    transition: box-shadow .2s ease;
}
.csp-nav-wrap.is-stuck {
    /* фон/тень убраны по задаче — при стики-прокрутке не должно быть следа фона */
    box-shadow: none;
    background: transparent;
}
/* Стилизация таб-нав — паттерн с vzroslye-uslugi: items распределены
   равными долями (flex 1 1 0), активный — full-height без внутренних радиусов. */
.csp-nav {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 58px;
    padding: 0;
    background: #fff;
    border: 1px solid #EEEEEE;
    border-radius: 35px;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    font-family: var(--csp-font-text);
}
.csp-nav::-webkit-scrollbar { display: none; }

.csp-nav__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    padding: 0 18px;
    border: 0;
    border-radius: 0;
    color: #969696;
    background: transparent;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
    cursor: pointer;
}
.csp-nav__item:first-child { border-top-left-radius: 35px; border-bottom-left-radius: 35px; }
.csp-nav__item:last-child  { border-top-right-radius: 35px; border-bottom-right-radius: 35px; }
.csp-nav__item:hover { color: #202E2C; background: #F4F6F7; }
.csp-nav__item.is-active,
.csp-nav__item.is-active:hover {
    color: #fff;
    background: #00A3FF;
    cursor: default;
}

@media (max-width: 768px) {
    .csp-nav-wrap { margin-top: 16px; padding: 6px 0; }
    .csp-nav { height: 52px; border-radius: 26px; }
    .csp-nav__item { flex: 0 0 auto; padding: 0 16px; font-size: 13px; }
    .csp-nav__item:first-child { border-top-left-radius: 26px; border-bottom-left-radius: 26px; }
    .csp-nav__item:last-child  { border-top-right-radius: 26px; border-bottom-right-radius: 26px; }
}

/* ===== Hero (Figma 16:7415) ============================================ */
.csp-hero {
    position: relative;
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    aspect-ratio: 1360 / 546;
    background: linear-gradient(160deg, #00A3FF 38%, #79CAF6 100%);
    border-radius: 35px;
    overflow: hidden;
    font-family: var(--csp-font-text);
}
.csp-hero__text {
    position: absolute;
    left: calc(55 / 1360 * 100%);
    top: calc(77 / 546 * 100%);
    width: calc(642 / 1360 * 100%);
    color: #fff;
    z-index: 2;
}
.csp-hero__title {
    font-family: var(--csp-font-title);
    font-weight: 700;
    font-size: clamp(28px, 3.45vw, 46.9px);
    line-height: 1.25;
    margin: 0 0 18px;
    color: #fff;
}
.csp-hero__desc {
    font-weight: 600;
    font-size: clamp(14px, 1.32vw, 17.9px);
    line-height: 1.5;
    margin: 0;
    color: #fff;
    text-shadow: 0 0 16px rgba(0, 0, 0, 0.15);
    max-width: 583px;
}
.csp-hero__btn {
    position: absolute;
    left: calc(55 / 1360 * 100%);
    top: calc(401 / 546 * 100%);
    width: calc(226 / 1360 * 100%);
    min-width: 180px;
    height: calc(68 / 546 * 100%);
    min-height: 52px;
    background: #fff;
    color: #202E2C;
    border: 0;
    border-radius: 10px;
    font-family: var(--csp-font-text);
    font-weight: 700;
    font-size: clamp(14px, 1.18vw, 16px);
    line-height: 1.1;
    cursor: pointer;
    z-index: 2;
    transition: transform .15s ease, box-shadow .15s ease;
}
.csp-hero__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.csp-hero__photo {
    position: absolute;
    top: calc(44 / 546 * 100%);
    left: calc(744 / 1360 * 100%);
    width: calc(572 / 1360 * 100%);
    height: calc(457.6 / 546 * 100%);
    border-radius: 25px;
    overflow: hidden;
}
.csp-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.csp-hero__price {
    position: absolute;
    top: calc(295 / 546 * 100%);
    left: calc(537 / 1360 * 100%);
    width: calc(239 / 1360 * 100%);
    height: calc(233 / 546 * 100%);
    z-index: 3;
}
.csp-hero__price-frame {
    position: absolute;
    top: calc(33 / 233 * 100%);
    left: calc(9 / 239 * 100%);
    width: calc(230 / 239 * 100%);
    height: calc(200 / 233 * 100%);
    z-index: 1;
}
.csp-hero__price-decor {
    position: absolute;
    top: -10px;
    left: 0;
    width: calc(106 / 239 * 100%);
    height: auto;
    z-index: 0; /* зайка должен уйти за белый круг (.csp-hero__price-frame, z-index:1) */
}
.csp-hero__price-content {
    position: absolute;
    top: calc(80 / 233 * 100%);
    left: 0;
    right: calc(9 / 239 * 100%);
    text-align: center;
    z-index: 3;
}
.csp-hero__price-old {
    display: block;
    font-weight: 600;
    font-size: clamp(13px, 1.56vw, 21.25px);
    color: #202E2C;
    opacity: 0.5;
    text-decoration: line-through;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}
.csp-hero__price-new {
    display: block;
    font-weight: 700;
    font-size: clamp(22px, 2.94vw, 40px);
    color: #202E2C;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

@media (max-width: 900px) {
    .csp-hero {
        aspect-ratio: auto;
        padding: 32px 24px 32px;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .csp-hero__text,
    .csp-hero__btn,
    .csp-hero__photo,
    .csp-hero__price {
        position: static;
        width: 100%;
        height: auto;
    }
    .csp-hero__btn { max-width: 280px; padding: 16px 24px; }
    .csp-hero__photo { aspect-ratio: 572 / 457.6; }
    .csp-hero__price {
        position: relative;
        margin: -50px 0;
        max-width: 239px;
        aspect-ratio: 239 / 233;
    }
    .csp-hero__price-decor {
        position: absolute;
        top: -10px;
    }
}

/* ===== Текстовый блок (Figma 11:97 — «Зачем нужна…») ==================
   Будущая структура для инфоблока:
     PROP_TITLE       (string)  — H2 заголовок
     PROP_PARAGRAPHS  (text[])  — массив параграфов
   Один и тот же компонент пригоден для блоков 1, 2, 4, 6.
   ======================================================================== */
.csp-textblock {
    display: flex;
    flex-direction: column;
    gap: 45px;
    color: #202E2C;
    font-family: var(--csp-font-text);
}
.csp-textblock__title {
    margin: 0;
    font-family: var(--csp-font-title);
    font-weight: 700;
    font-size: 40px;
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: #202E2C;
}
.csp-textblock__body {
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.csp-textblock__body p {
    margin: 0;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: #202E2C;
}
.csp-textblock__body ul,
.csp-textblock__body ol {
    margin: 0;
    padding-left: 15px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: #202E2C;
}
.csp-textblock__body li {
    margin: 0 0 4px;
}
.csp-textblock__body li:last-child { margin-bottom: 0; }

/* Опциональное фото внутри text-блока (Figma 11:109) */
.csp-textblock__image {
    width: 100%;
    aspect-ratio: 1000 / 448;
    border-radius: 35px;
    overflow: hidden;
}
.csp-textblock__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .csp-textblock { gap: 24px; }
    .csp-textblock__title { font-size: 28px; }
    .csp-textblock__body { gap: 16px; }
    .csp-textblock__body p { font-size: 15px; line-height: 1.55; }
    .csp-textblock__image { border-radius: 20px; }
}

/* ===== Показания / Противопоказания (Figma 11:110) =====================
   Будущая структура для инфоблока:
     INDICATIONS_BLOCKS[] = [
       { variant: 'ok' | 'no', title: string, items: text[] }
     ]
   Используется на странице как единая 2-колоночная пара.
   ======================================================================== */
.csp-indications {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    font-family: var(--csp-font-text);
}

.csp-indications__col {
    display: flex;
    flex-direction: column;
    gap: 21px;
}

.csp-indications__head {
    display: flex;
    align-items: center;
    gap: 21px;
}

.csp-indications__icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.csp-indications__icon svg {
    width: 27px;
    height: 27px;
    display: block;
}
.csp-indications--ok .csp-indications__icon { background: #F3FEBC; color: #96BC26; }
.csp-indications--no .csp-indications__icon { background: #FCE9F4; color: #ECB4D3; }

.csp-indications__title {
    margin: 0;
    font-family: var(--csp-font-title);
    font-weight: 700;
    font-size: 34px;
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: #202E2C;
}

.csp-indications__card {
    border: 2px dashed #96BC26;
    border-radius: 35px;
    padding: 26px 29px;
    flex: 1 1 auto;
}
.csp-indications--no .csp-indications__card {
    border-color: #ECB4D3;
}

.csp-indications__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.csp-indications__item {
    padding: 11px 0;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.375;
    letter-spacing: -0.02em;
    color: #202E2C;
}
.csp-indications__item + .csp-indications__item {
    border-top: 1px solid #EEEEEE;
}

@media (max-width: 768px) {
    .csp-indications { grid-template-columns: 1fr; gap: 24px; }
    .csp-indications__col { gap: 16px; }
    .csp-indications__title { font-size: 24px; }
    .csp-indications__card { border-radius: 24px; padding: 18px 20px; }
    .csp-indications__icon { width: 36px; height: 36px; }
    .csp-indications__icon svg { width: 22px; height: 22px; }
    .csp-indications__head { gap: 14px; }
    .csp-indications__item { font-size: 15px; }
}

/* ===== CTA «Цитата врача + форма» (Figma 11:159) =======================
   Будущая структура для инфоблока:
     CTA_DOCTORS[] = [{
       title: string,           // «Заголовок цитаты»
       quote: text,             // основной текст
       phone_placeholder: string,
       button_label: string,
       doctor: { name, role, photo, link }
     }]
   ======================================================================== */
.csp-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #f9f9f9 0%, #f8f8f8 100%);
    border-radius: 35px;
    padding: 39px 43px 0;
    color: #202E2C;
    font-family: var(--csp-font-text);
    display: grid;
    grid-template-columns: minmax(280px, 460px) 1fr;
    gap: 32px;
    min-height: 567px;
}

/* Декоративный розовый круг с dashed-рамкой и многослойной тенью (за фото) */
.csp-cta__deco {
    position: absolute;
    width: 368px;
    height: 368px;
    right: -65px;
    top: 230px;
    border: 1px dashed #ECB4D3;
    border-radius: 50%;
    background: rgba(255, 180, 234, 0.7);
    box-shadow:
        0 0 0 36px rgba(255, 180, 234, 0.2),
        0 0 0 73px rgba(255, 180, 234, 0.15),
        0 0 0 110px rgba(255, 180, 234, 0.1);
    z-index: 0;
    pointer-events: none;
}

/* ----- Левая колонка ----- */
.csp-cta__left {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
}
/* поднимаем левую колонку только в FULL-варианте (где сверху quote-icon + title);
   в COMPACT/MINIMAL сдвиг съедал верхний паддинг */
.csp-cta__left:has(.csp-cta__quote-icon) {
    top: -40px;
}
.csp-cta__quote-icon {
    width: 60px;
    height: 52px;
    margin-bottom: 0;
    flex: 0 0 auto;
}
.csp-cta__title {
    margin: 16px 0 20px;
    font-family: var(--csp-font-title);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.csp-cta__quote-body {
    margin: 0;
    max-width: 622px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.02em;
}
.csp-cta__form {
    margin-top: 30px;
    padding-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 19px;
    max-width: 292px;
}
.csp-cta__fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.csp-cta__phone {
    height: 65px;
    padding: 0 20px;
    background: #fff;
    border: 0;
    border-radius: 5px;
    font: 700 16px/1.1 var(--csp-font-text);
    letter-spacing: -0.02em;
    color: #202E2C;
}
.csp-cta__phone::placeholder { color: #959595; }
.csp-cta__btn {
    height: 58px;
    background: #00A3FF;
    border: 2px solid #00A3FF;
    border-radius: 10px;
    color: #fff;
    font: 700 16px/1.1 var(--csp-font-text);
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}
.csp-cta__btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.csp-cta__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: #b3b3b3;
    max-width: 464px;
    cursor: pointer;
}
.csp-cta__consent input[type="checkbox"] {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin: 3px 0 0;
    border: 1px solid #efbdd1;
    border-radius: 0;
    accent-color: #ECB4D3;
    cursor: pointer;
}
.csp-cta__consent a { color: inherit; text-decoration: underline; }

/* ----- Правая колонка (фото + бэйдж + фиксик) ----- */
.csp-cta__media {
    position: relative;
    z-index: 1;
    min-height: 556px;
}
.csp-cta__photo {
    position: absolute;
    right: -50px;
    top: -28px;
    bottom: 0;
    width: 150%;
    max-width: 614px;
    overflow: hidden;
}
.csp-cta__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom right;
}
.csp-cta__fiksik {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-12%);
    width: 120px;
    height: 134px;
    z-index: 3;
    pointer-events: none;
}
.csp-cta__doctor-card {
    position: absolute;
    right: 30px;
    bottom: 12px;
    width: 100%;
    max-width: 375px;
    background: #fff;
    border-radius: 24px;
    padding: 16px 23px;
    z-index: 3;
}
.csp-cta__doctor-label {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #959595;
    margin-bottom: 3px;
}
.csp-cta__doctor-name {
    font-family: var(--csp-font-title);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #202E2C;
    margin-bottom: 4px;
}
.csp-cta__doctor-role {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #202E2C;
}

/* --- Модификаторы CTA (зависят от заполненности полей в админке) ----- */

/* Без фото и/или формы — текст расширяется на всю ширину блока */
.csp-cta--no-photo {
    grid-template-columns: 1fr;
}
.csp-cta--no-photo .csp-cta__media { display: none; }
.csp-cta--no-photo .csp-cta__deco { display: none; }
.csp-cta--no-photo .csp-cta__quote-body { max-width: 100%; }

/* Если форма не заполнена — внизу левой колонки её просто нет */
.csp-cta--no-form .csp-cta__form { display: none; }
.csp-cta--no-form .csp-cta__left { justify-content: center; }

/* Минимальный вариант: только цитата + декоративный фиксик-щётка справа.
   Розовая dashed-рамка вокруг блока, компактная высота. (Figma 41:408) */
.csp-cta--minimal {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 37px 41px;
    border: 2px dashed #ECB4D3;
}
.csp-cta--minimal .csp-cta__deco { display: none; }
.csp-cta--minimal .csp-cta__media { display: none; }
.csp-cta--minimal .csp-cta__form { display: none; }
.csp-cta--minimal .csp-cta__title { display: none; }
.csp-cta--minimal .csp-cta__quote-icon { display: none; }
.csp-cta--minimal .csp-cta__quote-body { max-width: 100%; padding-right: 140px; }
/* Декоративная зубная щётка справа.
   SVG viewBox 43.453 × 178.369 → aspect 1:4.1 (узкая высокая).
   Прижата к верху блока, ручка свисает вниз и обрезается родительским overflow: hidden,
   поэтому видна только верхняя часть со щетиной — как в Figma 41:408. */
.csp-cta--minimal .csp-cta__deco-svg {
    position: absolute;
    right: 30px;
    /* щётка свисает сильно вниз — внутри блока видна только верхушка
       (щетина + начало ручки), основная часть обрезается overflow:hidden */
    bottom: -98px;
    width: 50px;
    height: 220px;
    transform: rotate(-18deg);
    transform-origin: center center;
    pointer-events: none;
}

/* ===== «6 преимуществ» — карусель (Figma 11:188) =======================
   Будущая структура для инфоблока:
     BENEFITS_TITLE   string
     BENEFITS_CARDS[] [{
        color: 'blue'|'green'|'pink'|'mint'|'lemon',
        icon: file (svg),
        title: string,
        text: text,
        photo: file (опц.)
     }]
   ======================================================================== */
.csp-benefits {
    font-family: var(--csp-font-text);
    color: #202E2C;
}
.csp-benefits__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 45px;
}
.csp-benefits__title {
    margin: 0;
    font-family: var(--csp-font-title);
    font-weight: 700;
    font-size: 40px;
    line-height: 1.0;
    letter-spacing: -0.02em;
}
.csp-benefits__nav {
    display: flex;
    gap: 5px;
    flex: 0 0 auto;
}
.csp-benefits__nav-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #EEEEEE;
    background: #fff;
    color: #00A3FF;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, transform .15s ease;
}
.csp-benefits__nav-btn:hover { background: #F4F6F7; }
.csp-benefits__nav-btn:disabled { opacity: 0.35; cursor: default; }
.csp-benefits__nav-btn svg { width: 20px; height: 20px; }

.csp-benefits__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 -16px;  /* выпускаем фото за scroll-viewport */
    padding: 0 16px 8px;
}
.csp-benefits__viewport::-webkit-scrollbar { display: none; }
.csp-benefits__track {
    display: flex;
    gap: 10px;
}

/* --- Карточка преимущества ----------------------------------------- */
.csp-benefits__card {
    --card-bg: #A6DFFF;
    --card-accent: #00A3FF;
    --card-glow-1: rgba(0, 163, 255, 0.15);
    --card-glow-2: rgba(0, 163, 255, 0.10);
    --card-glow-3: rgba(0, 163, 255, 0.08);
    --card-circle-bg: var(--card-accent);

    position: relative;
    flex: 0 0 495px;
    width: 495px;
    height: 314px;
    background: var(--card-bg);
    border-radius: 35px;
    overflow: hidden;
    scroll-snap-align: start;
}
.csp-benefits__card--blue  { /* defaults */ }
.csp-benefits__card--green {
    --card-bg: #F3FEBC;
    --card-accent: #96BC26;
    --card-circle-bg: rgba(172, 207, 60, 0.49);
    --card-glow-1: rgba(201, 235, 91, 0.36);
    --card-glow-2: rgba(201, 235, 91, 0.28);
    --card-glow-3: rgba(172, 207, 60, 0.12);
}
.csp-benefits__card--pink {
    --card-bg: #FCE9F4;
    --card-accent: #ECB4D3;
    --card-circle-bg: rgba(255, 180, 234, 0.7);
    --card-glow-1: rgba(255, 180, 234, 0.20);
    --card-glow-2: rgba(255, 180, 234, 0.15);
    --card-glow-3: rgba(255, 180, 234, 0.10);
}

/* Декоративный круг с многослойными тенями (за фото) */
.csp-benefits__card::before {
    content: "";
    position: absolute;
    right: -135px;
    top: -90px;
    width: 459px;
    height: 459px;
    border-radius: 50%;
    background: var(--card-circle-bg);
    border: 1.5px dashed var(--card-accent);
    box-shadow:
        0 0 0 45px var(--card-glow-1),
        0 0 0 91px var(--card-glow-2),
        0 0 0 137px var(--card-glow-3);
    z-index: 0;
    pointer-events: none;
}

.csp-benefits__content {
    position: absolute;
    left: 32px;
    top: 26px;
    width: 427px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.csp-benefits__card-title {
    margin: 0;
    font-family: var(--csp-font-title);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #1F1F29;
}
.csp-benefits__card-text {
    margin: 0;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: #202E2C;
}

.csp-benefits__badge {
    position: absolute;
    left: 32px;
    bottom: 32px;
    width: 47px;
    height: 47px;
    border-radius: 50%;
    background: var(--card-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}
.csp-benefits__badge svg,
.csp-benefits__badge img {
    width: 22px;
    height: 22px;
    color: #fff;
    fill: currentColor;
    filter: brightness(0) invert(1); /* иконки SVG → белые независимо от исходного цвета */
}

/* Фото размещается через CSS-переменные, чтобы каждая карточка могла
   задать свою ширину/высоту/положение (фото из Figma имеют разные пропорции
   и точки выравнивания: горизонтальное фото основателей vs портретное девочки).
   Опционально под фото показывается белая «облако»-подложка (Figma Vector). */
.csp-benefits__photo {
    position: absolute;
    right: var(--photo-right, 0);
    bottom: var(--photo-bottom, 0);
    width: var(--photo-w, 260px);
    height: var(--photo-h, 280px);
    z-index: 1;
    pointer-events: none;
}
.csp-benefits__photo-bg {
    position: absolute;
    right: var(--photo-bg-right, -22px);
    bottom: var(--photo-bg-bottom, -6px);
    width: var(--photo-bg-w, calc(var(--photo-w, 260px) + 30px));
    height: var(--photo-bg-h, calc(var(--photo-h, 280px) + 12px));
    z-index: 0;
    pointer-events: none;
}
.csp-benefits__photo-bg img,
.csp-benefits__photo-bg svg {
    width: 100%;
    height: 100%;
    display: block;
}
.csp-benefits__photo img {
    width: 100%;
    height: 100%;
    object-fit: var(--photo-fit, contain);
    object-position: var(--photo-pos, right bottom);
    display: block;
}

@media (max-width: 900px) {
    .csp-benefits__head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .csp-benefits__title { font-size: 28px; }
    .csp-benefits__card { flex: 0 0 88%; width: 88%; min-height: 380px; }
    .csp-benefits__content { width: auto; left: 24px; right: 24px; top: 24px; }
    .csp-benefits__nav-btn { width: 42px; height: 42px; }
}

/* ===== Видео-блок (Figma 11:175) =======================================
   Будущая структура для инфоблока:
     { title: string, youtube_id: string (required), poster: file (optional) }
   Если poster не задан — fallback на https://img.youtube.com/vi/{id}/maxresdefault.jpg
   ======================================================================== */
.csp-video {
    display: flex;
    flex-direction: column;
    gap: 45px;
    font-family: var(--csp-font-text);
}
.csp-video__title {
    margin: 0;
    font-family: var(--csp-font-title);
    font-weight: 700;
    font-size: 40px;
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: #202E2C;
}
.csp-video__player {
    position: relative;
    width: 100%;
    aspect-ratio: 1000 / 448;
    border-radius: 35px;
    overflow: hidden;
    cursor: pointer;
    background: #000;
    border: 0;
    padding: 0;
    display: block;
}
.csp-video__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.csp-video__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 15px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 163, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: transform .2s ease, background-color .2s ease;
    pointer-events: none;
}
.csp-video__player:hover .csp-video__play {
    transform: translate(-50%, -50%) scale(1.06);
    background: #00A3FF;
}
.csp-video__play svg {
    width: 32px;
    height: 32px;
    fill: #fff;
    margin-left: 4px; /* визуально центрируем треугольник */
}
.csp-video__player.is-playing .csp-video__poster,
.csp-video__player.is-playing .csp-video__play { display: none; }
.csp-video__iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #000;
}

@media (max-width: 768px) {
    .csp-video { gap: 24px; }
    .csp-video__title { font-size: 28px; }
    .csp-video__player { border-radius: 20px; }
    .csp-video__play { width: 72px; height: 72px; border-width: 10px; }
    .csp-video__play svg { width: 24px; height: 24px; }
}

@media (max-width: 900px) {
    .csp-cta {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 28px 24px 0; /* без нижнего паддинга — фото врача прижимается к низу блока */
        min-height: 0;
    }
    .csp-cta__deco { display: none; }
    .csp-cta__media { min-height: 360px; }
    .csp-cta__photo { position: relative; right: 0; top: 0; bottom: 0; max-width: 130%; height: 360px; border-radius: 24px; }
    .csp-cta__photo img { object-position: center bottom; }
    .csp-cta__doctor-card { right: 12px; bottom: 12px; max-width: 280px; padding: 12px 16px; }
    .csp-cta__doctor-name { font-size: 16px; }
    .csp-cta__fiksik { width: 80px; height: 90px; right: 0; top: -40px; transform: none; }
    .csp-cta__form { max-width: 100%; }
    .csp-cta--minimal { padding: 22px 20px; }
    .csp-cta--minimal .csp-cta__quote-body { padding-right: 0; }
    .csp-cta--minimal .csp-cta__deco-svg { display: none; }
}

/* ===== Видео-Q&A (Figma 41:361) =======================================
   Двухколоночный блок: вертикальная «сториз»-карточка слева + текст справа.
   ======================================================================== */
.csp-video-qa {
    display: flex;
    flex-direction: column;
    gap: 45px;
    font-family: var(--csp-font-text);
}
.csp-video-qa__title {
    margin: 0;
    font-family: var(--csp-font-title);
    font-weight: 700;
    font-size: 40px;
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: #202E2C;
}
.csp-video-qa__row {
    display: flex;
    gap: 45px;
    align-items: flex-start;
    width: 100%;
}
.csp-video-qa__card {
    --card-bg: #ECB4D3;
    --play-bg: #00A3FF;
    position: relative;
    flex: 0 0 301px;
    width: 301px;
    height: 535px;
    background: var(--card-bg);
    border-radius: 33px;
    overflow: hidden;
    cursor: pointer;
    border: 0;
    padding: 0;
    display: block;
}
button.csp-video-qa__card { cursor: pointer; }
.csp-video-qa__card--pink   { --card-bg: #ECB4D3; }
.csp-video-qa__card--green  { --card-bg: #96BC26; }
.csp-video-qa__card--blue   { --card-bg: #00A3FF; }
.csp-video-qa__card--yellow { --card-bg: #F3FEBC; }

.csp-video-qa__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.csp-video-qa__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 94px;
    height: 94px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    pointer-events: none;
    transition: transform .2s ease;
}
.csp-video-qa__card:hover .csp-video-qa__play {
    transform: translate(-50%, -50%) scale(1.06);
}
.csp-video-qa__play-inner {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--play-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.csp-video-qa__play-inner svg {
    width: 26px;
    height: 26px;
    margin-left: 3px; /* визуально центрируем треугольник */
}

.csp-video-qa__text {
    flex: 1 1 0;
    min-width: 0;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: #202E2C;
}
.csp-video-qa__text p {
    margin: 0 0 16px 0;
}
.csp-video-qa__text p:last-child { margin-bottom: 0; }

.csp-video-qa__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
    display: block;
}
.csp-video-qa__card.is-playing .csp-video-qa__poster,
.csp-video-qa__card.is-playing .csp-video-qa__play { display: none; }

@media (max-width: 900px) {
    .csp-video-qa { gap: 24px; }
    .csp-video-qa__title { font-size: 28px; }
    .csp-video-qa__row { flex-direction: column; gap: 24px; }
    .csp-video-qa__card { flex: 0 0 auto; width: 100%; max-width: 360px; height: auto; aspect-ratio: 301 / 535; margin: 0 auto; }
    .csp-video-qa__play { width: 80px; height: 80px; }
    .csp-video-qa__play-inner { width: 56px; height: 56px; }
    .csp-video-qa__play-inner svg { width: 22px; height: 22px; }
}

/* ===== Этапы-сетка (Figma 11:222) =====================================
   Сетка карточек 2×2 (или N×M) с пунктирной рамкой и круглым бейджем.
   ======================================================================== */
.csp-steps {
    display: flex;
    flex-direction: column;
    gap: 45px;
    font-family: var(--csp-font-text);
}
.csp-steps__title {
    margin: 0;
    font-family: var(--csp-font-title);
    font-weight: 700;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #202E2C;
}
.csp-steps__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 10px;
}
.csp-steps__card {
    --step-accent: #ECB4D3;
    position: relative;
    min-height: 188px;
    padding: 17px 26px;
    border: 2px dashed var(--step-accent);
    border-radius: 35px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: transparent;
}
.csp-steps__card--pink   { --step-accent: #ECB4D3; }
.csp-steps__card--green  { --step-accent: #96BC26; }
.csp-steps__card--blue   { --step-accent: #00A3FF; }
.csp-steps__card--yellow { --step-accent: #ACCF3C; }

.csp-steps__badge {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--step-accent);
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.csp-steps__card-title {
    margin: 0;
    font-family: var(--csp-font-title);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #202E2C;
}
.csp-steps__card-text {
    margin: 0;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: #222;
}
/* В Figma title и text прижаты друг к другу (gap 10px),
   а от бейджа до title — gap 20px (общий gap карточки). */
.csp-steps__card-title + .csp-steps__card-text {
    margin-top: -10px;
}

@media (max-width: 900px) {
    .csp-steps { gap: 24px; }
    .csp-steps__title { font-size: 28px; }
    .csp-steps__grid { grid-template-columns: 1fr; gap: 16px; }
    .csp-steps__card { min-height: 0; padding: 16px 20px; border-radius: 24px; }
}

/* ===== FAQ-аккордеон (Figma 11:254) ===================================
   Жёлто-зелёный градиент, белый круг с шевроном, нативный <details>.
   ======================================================================== */
.csp-faq {
    display: flex;
    flex-direction: column;
    gap: 25px;
    font-family: var(--csp-font-text);
}
.csp-faq__title {
    margin: 0;
    font-family: var(--csp-font-title);
    font-weight: 700;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #202E2C;
}
.csp-faq__list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.csp-faq__item {
    background: linear-gradient(90deg, #FAFEE5 0%, #F3FEBC 100%);
    border-radius: 25px;
    overflow: hidden;
}
/* убираем нативный маркер details */
.csp-faq__item summary::-webkit-details-marker { display: none; }
.csp-faq__item summary { list-style: none; }

.csp-faq__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 92px;
    padding: 21px 25px 21px 35px;
    cursor: pointer;
    user-select: none;
}
.csp-faq__question {
    flex: 1 1 auto;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: #202E2C;
}
.csp-faq__chevron {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    color: #00A3FF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease;
}
.csp-faq__chevron svg { width: 22px; height: 22px; }
.csp-faq__item[open] .csp-faq__chevron { transform: rotate(180deg); }

.csp-faq__answer {
    padding: 0 35px 28px 35px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: #202E2C;
}
.csp-faq__answer p { margin: 0 0 12px 0; }
.csp-faq__answer p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
    .csp-faq { gap: 18px; }
    .csp-faq__title { font-size: 28px; }
    .csp-faq__summary { min-height: 0; padding: 16px 18px 16px 22px; gap: 16px; }
    .csp-faq__chevron { flex: 0 0 40px; width: 40px; height: 40px; }
    .csp-faq__chevron svg { width: 18px; height: 18px; }
    .csp-faq__answer { padding: 0 22px 20px 22px; }
}

/* ===== Информация от экспертов (Figma 13:5071) ========================
   YMYL-блок «Проверено врачом» — голубая dashed-карточка, круглая
   аватарка слева с вылетом за верхний край.
   ======================================================================== */
.csp-expert {
    position: relative;
    min-height: 169px;
    padding: 32px 32px 32px 196px;
    background: #E0F3FD;
    border: 2px dashed #00A3FF;
    border-radius: 35px;
    font-family: var(--csp-font-text);
}
.csp-expert__avatar {
    position: absolute;
    left: 27px;
    top: 50%;
    transform: translateY(-50%);
    width: 135px;
    height: 135px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 2px #fff inset;
}
.csp-expert__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.csp-expert__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.csp-expert__label {
    font-family: var(--csp-font-title);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: #202E2C;
    opacity: 0.5;
    margin-bottom: 12px; /* визуальный отступ перед ФИО (в Figma 36px от label до name) */
}
.csp-expert__name {
    font-family: var(--csp-font-title);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: #202E2C;
}
.csp-expert__name a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s ease;
}
.csp-expert__name a:hover { border-bottom-color: #00A3FF; }
.csp-expert__position {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: rgba(105, 105, 105, 0.6);
}
.csp-expert__date {
    font-weight: 500;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #202E2C;
    margin-top: 6px;
}

@media (max-width: 900px) {
    .csp-expert {
        padding: 130px 24px 24px;
        border-radius: 24px;
        text-align: center;
    }
    .csp-expert__avatar {
        left: 50%;
        top: 15px;
        transform: translateX(-50%);
        width: 100px;
        height: 100px;
    }
    .csp-expert__body { align-items: center; }
    .csp-expert__label { margin-bottom: 4px; font-size: 16px; }
    .csp-expert__name { font-size: 18px; }
}

/* ===== CTA-Sidebar (Figma 11:430) ======================================
   Sticky-карточка справа: детский вариант (зелёная), белые поля,
   синяя CTA-кнопка, декор-зайка в правом верхнем углу.
   ======================================================================== */
.csp-cta-side {
    --cta-bg: #ACCF3C;
    --cta-accent: #00A3FF;
    --cta-text: #fff;
    position: relative;
    background: var(--cta-bg);
    border-radius: 25px;
    padding: 27px 25px 25px;
    font-family: var(--csp-font-text);
    color: var(--cta-text);
    box-sizing: border-box;
    overflow: hidden;
    width: 339px;
    max-width: 100%;
}
.csp-cta-side--green { --cta-bg: #ACCF3C; }
.csp-cta-side--pink  { --cta-bg: #ECB4D3; --cta-text: #202E2C; }
.csp-cta-side--blue  { --cta-bg: #00A3FF; --cta-text: #fff; }

.csp-cta-side__decor {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}
.csp-cta-side__decor img { display: block; width: 100%; height: 100%; }
.csp-cta-side__decor--bunny {
    top: 45px;
    right: 24px;
    width: 76px;
    height: 84px;
}
.csp-cta-side__decor--brush {
    bottom: 6px;
    right: -15px;
    width: 30px;
    height: 124px;
    transform: rotate(-17.78deg);
    transform-origin: bottom right;
}

.csp-cta-side__title {
    position: relative;
    z-index: 2;
    margin: 0 65px 22px 0; /* справа отступ под зайку */
    font-family: var(--csp-font-title);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--cta-text);
}
.csp-cta-side__form {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
}
.csp-cta-side__input {
    width: 100%;
    height: 55px;
    box-sizing: border-box;
    padding: 12px 20px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    font-family: var(--csp-font-text);
    font-weight: 600;
    font-size: 16px;
    color: #202E2C;
    outline: none;
    letter-spacing: -0.02em;
}
.csp-cta-side__input::placeholder { color: #B9B9B9; opacity: 1; }
.csp-cta-side__input:focus { box-shadow: 0 0 0 2px rgba(0, 163, 255, 0.4); }

.csp-cta-side__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 55px;
    border: 0;
    border-radius: 14px;
    background: var(--cta-accent);
    color: #fff;
    font-family: var(--csp-font-text);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.csp-cta-side__submit:hover { background: #0094EB; transform: translateY(-1px); }

.csp-cta-side__call-label {
    position: relative;
    z-index: 2;
    margin: 0 0 4px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    color: var(--cta-text);
}
.csp-cta-side__call-phone {
    position: relative;
    z-index: 2;
    display: inline-block;
    margin: 0 0 18px;
    font-family: var(--csp-font-title);
    font-weight: 700;
    font-size: 34px;
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: var(--cta-text);
    text-decoration: none;
}
.csp-cta-side__call-phone:hover { opacity: 0.85; }

.csp-cta-side__consent {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-right: 40px;
}
.csp-cta-side__consent-box {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--cta-text);
    background: transparent;
    cursor: pointer;
    border-radius: 0;
    position: relative;
}
.csp-cta-side__consent-box:checked::after {
    content: '';
    position: absolute;
    inset: 1px;
    background: var(--cta-text);
}
.csp-cta-side__consent-text {
    margin: 0;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--cta-text);
    opacity: 0.95;
}
.csp-cta-side__consent-text a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* На узких экранах sticky-aside становится обычным блоком под main. */
@media (max-width: 900px) {
    .csp-content {
        grid-template-columns: 1fr;
        gap: 32px;
        max-width: 1000px;
        margin-top: 24px;
    }
    .csp-content__aside {
        position: static;
        justify-self: stretch;
    }
    .csp-cta-side {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
    }
    /* На мобиле зайчик заезжал под строку с телефоном — поднимаем выше */
    .csp-cta-side__decor--bunny { top: 15px; }
}
@media (max-width: 600px) {
    .csp-cta-side { padding: 24px 20px; }
    .csp-cta-side__title { font-size: 18px; }
    .csp-cta-side__call-phone { font-size: 28px; }
}

/* ===== Full-width секции (вне 2-колоночной сетки) ====================
   Используются для прайса, врачей, отзывов, финального CTA. */
.csp-section--wide {
    max-width: 1360px;
    margin: 90px auto 0;
}

/* ===== Цены на услуги (Figma 11:418) ==================================
   Заголовок + кнопка справа, ниже — список плоских цветных строк.
   ======================================================================== */
.csp-prices {
    display: flex;
    flex-direction: column;
    gap: 45px;
    font-family: var(--csp-font-text);
}
.csp-prices__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.csp-prices__title {
    margin: 0;
    font-family: var(--csp-font-title);
    font-weight: 700;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #202E2C;
}
.csp-prices__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 59px;
    padding: 0 23px;
    border-radius: 14px;
    background: #00A3FF;
    color: #fff;
    font-family: var(--csp-font-text);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.02em;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}
.csp-prices__btn:hover { background: #0094EB; transform: translateY(-1px); }

.csp-prices__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.csp-prices__row {
    --row-bg: #FCE9F4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "code  prices"
        "name  prices";
    align-items: center;
    column-gap: 32px;
    padding: 18px 35px;
    background: var(--row-bg);
    border-radius: 25px;
    min-height: 92px;
    box-sizing: border-box;
}
.csp-prices--pink   .csp-prices__row { --row-bg: #FCE9F4; }
.csp-prices--green  .csp-prices__row { --row-bg: #F3FEBC; }
.csp-prices--blue   .csp-prices__row { --row-bg: #E0F3FD; }
.csp-prices--yellow .csp-prices__row { --row-bg: #FFF7D6; }

.csp-prices__code {
    grid-area: code;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.2;
    color: rgba(32, 46, 44, 0.55);
}
.csp-prices__name {
    grid-area: name;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #202E2C;
}
.csp-prices__prices {
    grid-area: prices;
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    white-space: nowrap;
}
.csp-prices__new {
    font-family: var(--csp-font-title);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.1;
    color: #202E2C;
}
.csp-prices__old {
    font-weight: 500;
    font-size: 14px;
    color: rgba(32, 46, 44, 0.45);
    text-decoration: line-through;
}

/* ===== Заглушка блока врачей =========================================== */
.csp-doctors-placeholder {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.csp-doctors-placeholder__note {
    padding: 24px 32px;
    background: #FFFAEC;
    border: 1px dashed #C9A227;
    border-radius: 20px;
    color: #6B4F00;
    font-family: var(--csp-font-text);
    font-size: 15px;
    line-height: 1.4;
}
.csp-doctors-placeholder__note code {
    background: rgba(0,0,0,0.05);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
}

/* ===== Отзывы о клинике (Figma 11:358) ================================= */
.csp-reviews {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-family: var(--csp-font-text);
}
.csp-reviews__title {
    margin: 0;
    font-family: var(--csp-font-title);
    font-weight: 700;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #202E2C;
}
.csp-reviews__ratings,
.csp-reviews__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.csp-reviews__rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 38px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.04);
    min-height: 95px;
    box-sizing: border-box;
}
.csp-reviews__rating-score {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--csp-font-title);
    font-weight: 700;
    font-size: 36px;
    line-height: 1;
    color: #202E2C;
}
.csp-reviews__rating-star { width: 24px; height: 24px; color: #ECB4D3; }
.csp-reviews__rating-logo { height: 36px; width: auto; display: block; }
.csp-reviews__rating-source {
    font-weight: 700;
    font-size: 18px;
    color: rgba(32,46,44,0.7);
}

.csp-reviews__card {
    background: #fff;
    border-radius: 20px;
    padding: 24px 20px 20px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 240px;
    box-sizing: border-box;
}
.csp-reviews__head { display: flex; flex-direction: column; gap: 4px; }
.csp-reviews__author {
    font-family: var(--csp-font-title);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: #202E2C;
}
.csp-reviews__date {
    font-weight: 500;
    font-size: 14px;
    color: rgba(32,46,44,0.55);
}
.csp-reviews__text {
    margin: 0;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: #202E2C;
    flex: 1 1 auto;
}
.csp-reviews__link {
    color: #00A3FF;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}
.csp-reviews__link:hover { text-decoration: underline; }

.csp-reviews__card--video {
    padding: 0;
    position: relative;
    overflow: hidden;
    background: #1F1F29;
}
.csp-reviews__video {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 240px;
    text-decoration: none;
}
.csp-reviews__video-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
}
.csp-reviews__video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    color: #FF0000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.csp-reviews__video-play svg { width: 24px; height: 24px; margin-left: 3px; }
.csp-reviews__video-yt {
    position: absolute;
    right: 12px;
    bottom: 10px;
    font-weight: 600;
    font-size: 12px;
    color: #fff;
    padding: 4px 8px;
    background: rgba(0,0,0,0.45);
    border-radius: 6px;
}

@media (max-width: 900px) {
    .csp-reviews__ratings,
    .csp-reviews__list { grid-template-columns: 1fr; }
    .csp-prices__title,
    .csp-reviews__title { font-size: 28px; }
    .csp-prices__row { padding: 14px 20px; min-height: 0; }
}

/* ===== Финальный CTA (Figma 11:380) =================================== */
.csp-cta-final {
    position: relative;
    overflow: hidden;
    background: #ACCF3C;
    border-radius: 35px;
    padding: 52px;
    min-height: 499px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 558px);
    gap: 32px;
    color: #fff;
    font-family: var(--csp-font-text);
    box-sizing: border-box;
}
/* Бывший фейк-градиент удалён — теперь облако подгружается из настоящего
   SVG-ассета cta-cloud.svg (см. .csp-cta-final__decor--cloud). */
.csp-cta-final__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 560px;
}
.csp-cta-final__title {
    margin: 0;
    font-family: var(--csp-font-title);
    font-weight: 700;
    font-size: 52px;
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: #fff;
}
.csp-cta-final__subtitle {
    margin: 0;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: #fff;
    max-width: 540px;
}
.csp-cta-final__form {
    display: flex;
    gap: 19px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.csp-cta-final__input,
.csp-cta-final__submit {
    height: 65px;
    box-sizing: border-box;
    border-radius: 14px;
    font-family: var(--csp-font-text);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.02em;
    border: 0;
    outline: none;
}
.csp-cta-final__input {
    flex: 1 1 220px;
    min-width: 200px;
    padding: 12px 33px;
    background: #fff;
    color: #202E2C;
}
.csp-cta-final__input::placeholder { color: #B9B9B9; }
.csp-cta-final__submit {
    flex: 1 1 231px;
    min-width: 200px;
    background: #00A3FF;
    color: #fff;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.csp-cta-final__submit:hover { background: #0094EB; transform: translateY(-1px); }

.csp-cta-final__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 4px;
}
.csp-cta-final__consent-box {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #fff;
    background: transparent;
    cursor: pointer;
    border-radius: 0;
    position: relative;
}
.csp-cta-final__consent-box:checked::after {
    content: '';
    position: absolute;
    inset: 1px;
    background: #fff;
}
.csp-cta-final__consent-text {
    font-weight: 500;
    font-size: 12px;
    line-height: 1.4;
    color: #fff;
    opacity: 0.95;
}
.csp-cta-final__consent-text a { color: inherit; text-decoration: underline; }

.csp-cta-final__phone-row {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.csp-cta-final__phone {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff;
}
.csp-cta-final__phone-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #00A3FF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.csp-cta-final__phone-icon svg { width: 22px; height: 22px; color: #fff; }
.csp-cta-final__phone-text { display: flex; flex-direction: column; line-height: 1.1; }
.csp-cta-final__phone-label {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    color: #fff;
}
.csp-cta-final__phone-number {
    font-family: var(--csp-font-title);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.1;
    color: #fff;
    margin-top: 2px;
}

.csp-cta-final__socials { display: inline-flex; gap: 10px; }
.csp-cta-final__social {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #00A3FF;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, transform .15s ease;
}
.csp-cta-final__social svg { width: 22px; height: 22px; color: #fff; }
.csp-cta-final__social:hover { background: #0094EB; transform: translateY(-1px); }

/* Правая колонка: фото врача + testimonial overlay + декор.
   В Figma фото 558×532 — выходит за нижнюю границу карточки. */
.csp-cta-final__media {
    position: relative;
    align-self: stretch;
    min-height: 395px;
    overflow: visible;
}
.csp-cta-final__photo-link {
    position: absolute;
    right: 0;
    bottom: -52px;            /* нижний край фото уходит за padding карточки */
    width: 100%;
    max-width: 558px;
    height: calc(100% + 52px);
    display: block;
    z-index: 2;
    line-height: 0;
    transform: translateX(-90px); /* сдвиг влево по просьбе пользователя */
}
.csp-cta-final__photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
}
.csp-cta-final__testimonial {
    position: absolute;
    right: 0;
    bottom: 32px;
    z-index: 4;
    background: #fff;
    color: #202E2C;
    border-radius: 18px;
    padding: 18px 22px;
    width: 428px;
    max-width: calc(100% + 30px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}
.csp-cta-final__quote {
    margin: 0 0 14px;
    font-family: var(--csp-font-text);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
    color: #1F1F29;
}
.csp-cta-final__testimonial-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.csp-cta-final__rating { display: inline-flex; align-items: center; gap: 8px; }
.csp-cta-final__rating-logo { height: 24px; width: auto; }
.csp-cta-final__stars { display: inline-flex; gap: 2px; color: #ECB4D3; }
.csp-cta-final__stars svg { width: 18px; height: 18px; }
.csp-cta-final__tg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #00A3FF;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.15;
}
.csp-cta-final__tg svg { width: 22px; height: 22px; color: #00A3FF; flex-shrink: 0; }

/* Декорации внутри .csp-cta-final__media (relative-parent).
   Позиции пересчитаны из Figma 11:380 (CTA 1360×499, padding 52):
   - cloud:     x=632,  y=-29, 693×642 → большое облако-вектор СЗАДИ всего
   - bunny:     x=1120, y=121, 158×171 → внутри media справа сверху
   - toothbrush:x=691,  y=201, 101×193 → выходит слева из media, у руки врача
   Testimonial оверлеит низ-правый угол фото и обрезает зайке низ. */
.csp-cta-final__decor {
    position: absolute;
    pointer-events: none;
}
.csp-cta-final__decor img { width: 100%; height: 100%; display: block; }
.csp-cta-final__decor--cloud {
    /* Фоновое облако из Figma (vector 16:7413). z-index 0 — за фотом и зайкой,
       но над фоном секции. Section имеет overflow:hidden, поэтому края обрежутся. */
    left: -118px;
    top: -81px;
    width: 693px;
    height: 642px;
    z-index: 0;
}
.csp-cta-final__decor--bunny {
    /* z-index 3 — НИЖЕ testimonial (4), чтобы карточка перекрывала тело зайки;
       уши торчат сверху над карточкой. */
    right: 30px;
    top: 100px;
    width: 158px;
    height: 171px;
    z-index: 3;
}
.csp-cta-final__decor--brush {
    /* Щётка ЗА девушкой: z-index 1 ниже фото (2). Позиционируем чуть
       левее, чтобы левый край щётки высовывался из-за её плеча/корпуса,
       а правая часть скрывалась за телом. Сдвигаем синхронно с фото
       (translateX -60 на photo-link → brush left уменьшаем на 30 от 150).
       Наклон влево rotate(-15deg) — щётка как будто опирается на плечо. */
    left: 90px;
    top: 130px;
    width: 56px;
    height: 145px;
    z-index: 1;
    transform: rotate(-15deg);
    transform-origin: 50% 50%;
}

@media (max-width: 1100px) {
    .csp-cta-final { grid-template-columns: 1fr; padding: 32px; }
    .csp-cta-final__title { font-size: 36px; }
    .csp-cta-final__media,
    .csp-cta-final__decor { display: none; }
}
@media (max-width: 600px) {
    .csp-cta-final { padding: 24px; border-radius: 24px; }
    .csp-cta-final__title { font-size: 28px; }
    .csp-cta-final__phone-number { font-size: 20px; }
}

/* ===== CTA form wrappers (поверх .form__input из main.css) =====
   Делаем чтобы стандартная разметка .form__input не ломала наш визуал.
   ============================================================== */
.csp-cta-side__input-wrap.form__input,
.csp-cta-final__input-wrap.form__input {
    display: block;
    gap: 0;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
}
.csp-cta-side__input-wrap .form__input-error,
.csp-cta-final__input-wrap .form__input-error {
    display: none;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.3;
    color: #FFE0E0;
}
.csp-cta-side__input-wrap.is_error .form__input-error,
.csp-cta-side__input-wrap.error .form__input-error,
.csp-cta-final__input-wrap.is_error .form__input-error,
.csp-cta-final__input-wrap.error .form__input-error { display: block; }
.csp-cta-side__input-wrap.is_error .csp-cta-side__input,
.csp-cta-side__input-wrap.error .csp-cta-side__input,
.csp-cta-side__input-wrap .csp-cta-side__input[invalid] {
    box-shadow: 0 0 0 2px #FF6B6B;
}
.csp-cta-final__input-wrap.is_error .csp-cta-final__input,
.csp-cta-final__input-wrap.error .csp-cta-final__input,
.csp-cta-final__input-wrap .csp-cta-final__input[invalid] {
    box-shadow: 0 0 0 2px #FF6B6B;
}

/* Восстанавливаем стилизацию инпутов поверх .form__input input из main.css */
.csp-cta-side__input-wrap .csp-cta-side__input,
.csp-cta-side .csp-cta-side__input {
    border: 0;
    background: #fff;
    padding: 12px 20px;
    border-radius: 14px;
}
.csp-cta-final__input-wrap .csp-cta-final__input,
.csp-cta-final .csp-cta-final__input {
    border: 0;
    background: #fff;
    padding: 14px 20px;
    border-radius: 16px;
}

/* main.css задаёт color: var(--c-dark) на :not(:placeholder-shown), но --c-dark не
   объявлена → значение наследуется от .csp-cta-side (--cta-text:#fff). Принудительно
   возвращаем тёмный цвет введённого текста, иначе он сливается с белым фоном поля. */
.csp-cta-side .csp-cta-side__input,
.csp-cta-side .csp-cta-side__input:not(:placeholder-shown),
.csp-cta-final .csp-cta-final__input,
.csp-cta-final .csp-cta-final__input:not(:placeholder-shown) {
    color: #202E2C;
}

/* Состояние is_processing — приглушаем кнопку */
.csp-cta-side.is_processing,
.csp-cta-final.is_processing { pointer-events: none; opacity: 0.7; }

/* Replacement for old checkbox-consent paragraph */
.csp-cta-side__consent-text {
    position: relative;
    z-index: 2;
    margin: 0;
    padding-right: 40px;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--cta-text);
    opacity: 0.95;
}
.csp-cta-side__consent-text a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.csp-cta-final__consent-text {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--cta-text, #fff);
    opacity: 0.9;
}
.csp-cta-final__consent-text a {
    color: inherit;
    text-decoration: underline;
}
/* ===== Уменьшаем отступ между хлебными крошками и первой секцией
   только на CSP-страницах (нацеливаемся через :has() — breadcrumbs
   перед main, внутри которого есть .csp-page). ====================== */
.breadcrumbs:has(+ main .csp-page) {
    padding-top: 30px;
    padding-bottom: 15px;
    padding-left: 20px;
    font-family: 'Nunito Sans', sans-serif;
}
@media (max-width: 900px) {
    .breadcrumbs:has(+ main .csp-page) { padding-left: 20px; }
}
.breadcrumbs:has(+ main .csp-page) .breadcrumbs__item {
    font-family: 'Nunito Sans', sans-serif;
}



/* ===== FIX: doctors slider — единый стиль навигации с .csp-benefits =====
   Why: Bitrix-овский .block_list-slider добавляет .slider_controls с .swiper-button-prev/next,
        стилизованные ::after-стрелками и спозиционированные вне секции (см. main.css 5680+).
        Александра попросила привести управление к стилю csp-benefits (50×50 круглые белые
        с голубым шевроном, в шапке справа от заголовка).
   How:  CSS-only — .slider_controls absolute в правый верхний угол .block_list-slider,
         .swiper-button-prev/next переоформляем; гасим штатный swiper-овский ::after.
         На мобильном (≤768) — кнопки 42×42 под слайдером, чтобы не лезли в узкий заголовок. */

/* Wrap для управления — поднимаем в правый верхний угол секции */
.csp-doctors .block_list.block_list-slider .slider_controls {
    position: absolute;
    top: 4px;
    right: 0;
    left: auto;
    bottom: auto;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    z-index: 5;
}
@media (max-width: 1540px) {
    .csp-doctors .block_list.block_list-slider .slider_controls {
        left: auto;
        right: 0;
        width: auto;
    }
}

/* Сами кнопки — копия .csp-benefits__nav-btn */
.csp-doctors .block_list-slider .swiper-button-prev,
.csp-doctors .block_list-slider .swiper-button-next {
    position: static;
    margin: 0;
    padding: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #EEEEEE;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    color: #00A3FF;
    cursor: pointer;
    transform: none;
    transition: background-color .15s ease, opacity .15s ease;
}
.csp-doctors .block_list-slider .swiper-button-prev {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A3FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
}
.csp-doctors .block_list-slider .swiper-button-next {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A3FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}
/* Гасим штатные swiper-овские ::after стрелки-символы */
.csp-doctors .block_list-slider .swiper-button-prev::after,
.csp-doctors .block_list-slider .swiper-button-next::after {
    content: none;
    display: none;
}
.csp-doctors .block_list-slider .swiper-button-prev:hover,
.csp-doctors .block_list-slider .swiper-button-next:hover {
    background-color: #F4F6F7;
}
.csp-doctors .block_list-slider .swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

@media (max-width: 768px) {
    .csp-doctors .block_list.block_list-slider .slider_controls {
        position: static;
        margin-top: 12px;
        justify-content: flex-start;
    }
    .csp-doctors .block_list-slider .swiper-button-prev,
    .csp-doctors .block_list-slider .swiper-button-next {
        width: 42px;
        height: 42px;
        background-size: 16px 16px;
    }
}