/* СанПроВи — «тёплая» редакция дизайна (ноябрь 2026).
   Подключается последней, поверх sp-modern.css и sp-mobile.css.
   Идея: спокойная клиника — мягкий песочный фон, глубокий синий, скруглённые карточки,
   крупная антиква в заголовках и немного воздуха между блоками. */

:root {
	--f-brand: #2F6F94;
	--f-brand-dark: #1F5274;
	--f-ink: #16222C;
	--f-muted: #5A6670;
	--f-sand: #F6F1E9;
	--f-sand-deep: #EDE4D6;
	--f-mist: #EAF2F6;
	--f-line: rgba(22, 34, 44, 0.09);
	--f-gold: #C9963F;
	--f-radius: 18px;
	--f-radius-sm: 12px;
	--f-shadow: 0 1px 2px rgba(22, 34, 44, 0.04), 0 8px 24px rgba(22, 34, 44, 0.06);
	--f-shadow-hover: 0 2px 4px rgba(22, 34, 44, 0.05), 0 18px 40px rgba(31, 82, 116, 0.13);
	--m-brand: var(--f-brand);
	--m-brand-dark: var(--f-brand-dark);
	--sp-line: var(--f-line);
}

html body { background: #FCFAF6; color: var(--f-ink); }
html body ::selection { background: rgba(47, 111, 148, 0.18); }

/* ---------- Кнопки ---------- */
html body .sp-home__button,
html body .sp-pill--book {
	border-radius: 999px !important;
	padding-left: 24px;
	padding-right: 24px;
	transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s !important;
}
html body .sp-home__button:not(.sp-home__button--light):hover,
html body .sp-pill--book:hover {
	box-shadow: 0 8px 20px rgba(31, 82, 116, 0.25) !important;
	transform: translateY(-1px) !important;
}
html body .sp-home__button--light {
	border-color: rgba(22, 34, 44, 0.22) !important;
	background: rgba(255, 255, 255, 0.7) !important;
}
html body .sp-home__button--light:hover {
	background: var(--f-ink) !important;
	border-color: var(--f-ink) !important;
	color: #fff !important;
}
html body .sp-pill { border-radius: 999px !important; }

/* ---------- Шапка ---------- */
html body .sp-header {
	background: rgba(255, 255, 255, 0.92) !important;
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--f-line) !important;
}

/* ---------- Подзаголовки разделов ---------- */
html body .sp-home__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--f-brand);
	letter-spacing: 0.12em;
}
html body .sp-home__eyebrow::before {
	content: "";
	display: inline-block !important;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: var(--f-gold);
	position: static;
	transform: none;
}

/* ---------- Карточки ---------- */
html body .sp-home-card, html body .sp-symptom-card, html body .sp-price-card, html body .sp-doctor-card,
html body .sp-home-why__item, html body .sp-price-note-card, html body .sp-home-faq__item,
html body .sp-home-doctor-card, html body .sp-price-group, html body .sp-feature-doctor,
html body .sp-home-step, html body .sp-article-card, html body .sp-doctor-service {
	border-radius: var(--f-radius) !important;
	border: 1px solid var(--f-line) !important;
	background: #fff !important;
	box-shadow: var(--f-shadow) !important;
	transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
html body .sp-home-card:hover, html body .sp-symptom-card:hover, html body .sp-price-card:hover,
html body .sp-doctor-card:hover, html body .sp-home-doctor-card:hover, html body .sp-article-card:hover,
html body .sp-doctor-service:hover {
	box-shadow: var(--f-shadow-hover) !important;
	transform: translateY(-3px);
	border-color: rgba(47, 111, 148, 0.25) !important;
}
@media (prefers-reduced-motion: reduce) {
	html body *:hover { transform: none !important; }
}

/* ---------- Первый экран главной ---------- */
.sp-hero2 {
	position: relative;
	overflow: hidden;
	padding: 64px 0 72px;
	background:
		radial-gradient(900px 480px at 88% 8%, rgba(90, 156, 192, 0.20), transparent 60%),
		radial-gradient(700px 420px at -10% 110%, rgba(201, 150, 63, 0.14), transparent 60%),
		linear-gradient(180deg, #FBF8F2 0%, var(--f-sand) 100%);
	border-bottom: 1px solid var(--f-line);
}
.sp-hero2::after {
	content: "";
	position: absolute;
	right: -120px;
	top: -140px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	border: 1px solid rgba(47, 111, 148, 0.12);
	box-shadow: 0 0 0 60px rgba(47, 111, 148, 0.03), 0 0 0 120px rgba(47, 111, 148, 0.025);
	pointer-events: none;
}
.sp-hero2__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	gap: 56px;
	align-items: center;
}
.sp-hero2__kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
	padding: 7px 14px 7px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.75);
	border: 1px solid var(--f-line);
	color: var(--f-muted);
	font-size: 14px;
	font-weight: 500;
}
.sp-hero2__kicker span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #3FA06B;
	box-shadow: 0 0 0 4px rgba(63, 160, 107, 0.16);
}
html body .sp-hero2 h1 {
	margin: 0 0 20px;
	font-size: clamp(34px, 3.7vw, 50px);
	line-height: 1.08;
	color: var(--f-ink);
}
html body .sp-hero2 h1 em {
	font-style: normal;
	color: var(--f-brand);
}
.sp-hero2__lead {
	margin: 0 0 12px;
	font-size: 19px;
	line-height: 1.55;
	color: var(--f-ink);
	max-width: 600px;
}
.sp-hero2__text {
	margin: 0 0 30px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--f-muted);
	max-width: 560px;
}
.sp-hero2__actions { display: flex; flex-wrap: wrap; gap: 12px; }
html body .sp-hero2__actions .sp-home__button { min-height: 52px; font-size: 16px; padding: 0 28px; }
.sp-hero2__phone {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 22px;
	color: var(--f-muted);
	text-decoration: none;
	font-size: 15px;
}
.sp-hero2__phone strong { color: var(--f-ink); font-size: 18px; font-weight: 700; }
.sp-hero2__phone:hover strong { color: var(--f-brand); }

.sp-hero2__visual { position: relative; padding: 0 0 34px 34px; }
.sp-hero2__photo {
	margin: 0;
	border-radius: 28px;
	overflow: hidden;
	aspect-ratio: 4 / 4.4;
	box-shadow: 0 30px 60px rgba(22, 34, 44, 0.18);
	transform: rotate(1.2deg);
	background: var(--f-sand-deep);
}
.sp-hero2__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; display: block; }
.sp-hero2__doctor, .sp-hero2__rating {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px 12px 12px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.95);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 14px 34px rgba(22, 34, 44, 0.16);
	color: var(--f-ink);
	text-decoration: none;
	transition: transform 0.25s;
}
.sp-hero2__doctor:hover, .sp-hero2__rating:hover { transform: translateY(-3px); }
.sp-hero2__doctor { left: 0; bottom: 0; max-width: 330px; }
.sp-hero2__doctor img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: center 15%; flex: 0 0 56px; }
.sp-hero2__doctor strong { display: block; font-size: 16px; }
.sp-hero2__doctor small { display: block; color: var(--f-muted); font-size: 13px; line-height: 1.35; }
.sp-hero2__rating { right: -14px; top: 30px; padding: 12px 18px; }
.sp-hero2__rating strong { font-family: var(--m-serif); font-size: 34px; line-height: 1; color: var(--f-ink); }
.sp-hero2__rating span { display: flex; flex-direction: column; font-size: 13px; color: var(--f-muted); line-height: 1.3; }
.sp-hero2__rating i { font-style: normal; color: var(--f-gold); letter-spacing: 2px; font-size: 14px; }

/* ---------- Цифры ---------- */
html body .sp-home-trust {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin-top: -36px !important;
	position: relative;
	z-index: 2;
}
html body .sp-home-trust .sp-home-trust__grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 0 !important;
	background: #fff !important;
	border-radius: 22px !important;
	box-shadow: var(--f-shadow-hover) !important;
	border: 1px solid var(--f-line) !important;
	overflow: hidden !important;
}
html body .sp-trust-card {
	border: 0 !important;
	border-right: 1px solid var(--f-line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 26px 22px !important;
	text-align: left !important;
}
html body .sp-trust-card:last-child { border-right: 0 !important; }
html body .sp-trust-card strong {
	display: block;
	font-family: var(--m-serif);
	font-size: 38px !important;
	line-height: 1 !important;
	color: var(--f-brand) !important;
	margin-bottom: 8px;
}
html body .sp-trust-card span { font-size: 14px !important; color: var(--f-muted) !important; }

/* ---------- Окситерра на главной ---------- */
html body .sp-home-oxy__card { border-radius: 26px !important; overflow: hidden; box-shadow: var(--f-shadow) !important; border: 1px solid var(--f-line) !important; }

/* ---------- Запросы пациентов ---------- */
html body .sp-symptom-card {
	position: relative;
	padding: 20px 20px 18px !important;
	min-height: 120px;
	display: flex !important;
	flex-direction: column;
	justify-content: space-between;
	text-decoration: none;
}
html body .sp-symptom-card h3 { font-size: 16px !important; line-height: 1.3 !important; margin: 0 0 14px !important; }
html body .sp-symptom-card span { color: var(--f-brand) !important; font-weight: 600; font-size: 13px; }
html body .sp-symptom-card:hover { background: var(--f-brand) !important; border-color: var(--f-brand) !important; }
html body .sp-symptom-card:hover h3, html body .sp-symptom-card:hover span { color: #fff !important; }

/* ---------- Направления ---------- */
html body .sp-home-direction { position: relative; overflow: hidden; padding-top: 26px !important; }
html body .sp-home-direction::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--f-brand), #5A9CC0);
	opacity: 0;
	transition: opacity 0.25s;
}
html body .sp-home-direction:hover::before { opacity: 1; }
html body .sp-home-direction a { font-weight: 600; }
html body .sp-home-direction a::after { content: " →"; }

/* ---------- Маршрут ---------- */
html body .sp-route { background: var(--f-sand) !important; }
html body .sp-home-process--wide { display: block !important; }
html body .sp-home-process--wide .sp-home-steps {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 28px;
	counter-reset: step;
}
html body .sp-home-step { padding: 26px !important; display: block !important; }
html body .sp-home-step > span {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	background: var(--f-mist) !important;
	color: var(--f-brand) !important;
	font-family: var(--m-serif);
	font-size: 18px !important;
	margin-bottom: 16px;
	border: 0 !important;
}

/* ---------- Главный врач ---------- */
html body .sp-home-expert__photo img { border-radius: 26px !important; box-shadow: 0 24px 50px rgba(22, 34, 44, 0.15); }
html body .sp-home-expert__list li::marker { color: var(--f-gold); }

/* ---------- Команда ---------- */
html body .sp-home-doctor-card { overflow: hidden; padding: 0 !important; }
html body .sp-home-doctor-card > a { display: block; overflow: hidden; }
html body .sp-home-doctor-card img { transition: transform 0.5s; }
html body .sp-home-doctor-card:hover img { transform: scale(1.04); }
html body .sp-home-doctor-card > div { padding: 16px 18px 20px !important; }

/* ---------- Почему мы ---------- */
html body .sp-home-why__item { padding: 26px !important; background: linear-gradient(180deg, #fff, #FBF8F2) !important; }
html body .sp-home-why__item h3::before {
	content: "";
	display: block;
	width: 36px;
	height: 36px;
	margin-bottom: 16px;
	border-radius: 12px;
	background: var(--f-mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6F94' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* ---------- Вопросы ---------- */
html body .sp-home-faq__item { box-shadow: none !important; }
html body .sp-home-faq__item[open] { border-color: rgba(47, 111, 148, 0.3) !important; box-shadow: var(--f-shadow) !important; }
html body .sp-home-faq__item summary { font-weight: 600; }

/* ---------- Призыв записаться ---------- */
html body .sp-home-appointment {
	background:
		radial-gradient(600px 300px at 90% 0%, rgba(255, 255, 255, 0.12), transparent 60%),
		linear-gradient(135deg, var(--f-brand) 0%, var(--f-brand-dark) 100%) !important;
	color: #fff;
	border: 0 !important;
}
html body .sp-home-appointment h2, html body .sp-home-appointment p { color: #fff !important; }
html body .sp-home-appointment p { opacity: 0.86; }
html body .sp-home-appointment .sp-home__button--light {
	background: #fff !important;
	border-color: #fff !important;
	color: var(--f-brand-dark) !important;
}
html body .sp-home-appointment .sp-home__button--light:hover { background: var(--f-sand) !important; border-color: var(--f-sand) !important; color: var(--f-ink) !important; }

/* ---------- Контакты на главной и футер ---------- */
html body .sp-home-contacts { background: var(--f-sand) !important; }
html body .sp-home-contacts__panel { border-radius: 22px !important; box-shadow: var(--f-shadow) !important; border: 1px solid var(--f-line) !important; background: #fff !important; }
html body .footer-custom { background: var(--f-sand) !important; border-top: 1px solid var(--f-line) !important; }

/* ---------- Внутренние страницы ---------- */
html body .sp-subhero {
	background:
		radial-gradient(800px 380px at 92% 0%, rgba(90, 156, 192, 0.16), transparent 60%),
		linear-gradient(180deg, #FBF8F2 0%, var(--f-sand) 100%) !important;
	border-bottom: 1px solid var(--f-line) !important;
}

/* ---------- Блог ---------- */
html body .sp-article-card { overflow: hidden; }
html body .sp-article-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 220px;
	background:
		radial-gradient(circle at 78% 28%, rgba(255, 255, 255, 0.55) 0 46px, transparent 47px),
		radial-gradient(circle at 78% 28%, rgba(255, 255, 255, 0.22) 0 96px, transparent 97px),
		radial-gradient(circle at 78% 28%, rgba(255, 255, 255, 0.12) 0 150px, transparent 151px),
		linear-gradient(135deg, #5A9CC0 0%, var(--f-brand) 55%, var(--f-brand-dark) 100%);
}
html body .sp-article-card:nth-child(3n+2) .sp-article-card__placeholder {
	background:
		radial-gradient(circle at 22% 72%, rgba(255, 255, 255, 0.5) 0 40px, transparent 41px),
		radial-gradient(circle at 22% 72%, rgba(255, 255, 255, 0.2) 0 90px, transparent 91px),
		linear-gradient(135deg, #E9D9BE 0%, #C9963F 100%);
}
html body .sp-article-card:nth-child(3n) .sp-article-card__placeholder {
	background:
		radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.45) 0 36px, transparent 37px),
		radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.18) 0 84px, transparent 85px),
		radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0 132px, transparent 133px),
		linear-gradient(135deg, #8DB9A6 0%, #4E8A74 100%);
}
html body .sp-article-card__cat { color: var(--f-brand) !important; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }
html body .sp-article-card__title,
html body .sp-article-card__title a {
	font-family: var(--m-serif) !important;
	font-size: 24px !important;
	line-height: 1.22 !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
	color: var(--f-ink) !important;
}
html body .sp-article-card__title a:hover { color: var(--f-brand) !important; }

/* Статья: комфортная длина строки */
@media (min-width: 900px) {
	html body .sp-article-content { max-width: 780px; font-size: 17px; line-height: 1.75; }
	html body .sp-article-hero h1, html body .sp-article-head h1 { max-width: 820px; }
}

/* ---------- Значок акции (вне страниц Окситерры) ---------- */
html body .sp-oxy-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 3px 9px;
	border-radius: 999px;
	background: #B5532F;
	color: #fff !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}

/* ---------- Запись к врачу без онлайн-расписания ---------- */
.sp-doctor-request {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
}
.sp-doctor-request .sp-info-note { flex: 1; margin: 0; }
html body .sp-doctor-request .sp-home__button { flex: 0 0 auto; min-height: 50px; }
@media (max-width: 767px) {
	.sp-doctor-request { flex-direction: column; align-items: stretch; }
	html body .sp-doctor-request .sp-home__button { width: 100%; justify-content: center; }
	html body .sp-article-card__title, html body .sp-article-card__title a { font-size: 21px !important; }
}

/* ---------- Окно записи ---------- */
html body .sp-modal__dialog { border-radius: 24px !important; }
html body .sp-booking-simple input,
html body .sp-booking-simple select {
	border-radius: 12px !important;
	min-height: 50px;
	border: 1px solid rgba(22, 34, 44, 0.16) !important;
	background: #fff;
}
html body .sp-booking-simple input:focus,
html body .sp-booking-simple select:focus {
	outline: none;
	border-color: var(--f-brand) !important;
	box-shadow: 0 0 0 4px rgba(47, 111, 148, 0.14) !important;
}
html body .sp-booking-simple .sp-home__button { min-height: 52px; font-size: 16px; }

/* ---------- Планшет ---------- */
@media (max-width: 1024px) {
	.sp-hero2__grid { gap: 36px; }
	.sp-hero2__rating { right: 0; }
	html body .sp-home-process--wide .sp-home-steps { grid-template-columns: 1fr; }
}

/* ---------- Телефон ---------- */
@media (max-width: 767px) {
	.sp-hero2 { padding: 28px 0 56px; }
	.sp-hero2::after { width: 320px; height: 320px; right: -160px; top: -120px; }
	.sp-hero2__grid { grid-template-columns: 1fr; gap: 28px; }
	.sp-hero2__kicker { font-size: 13px; margin-bottom: 16px; }
	html body .sp-hero2 h1 { font-size: 31px !important; line-height: 1.12 !important; margin-bottom: 14px !important; }
	.sp-hero2__lead { font-size: 16px; }
	.sp-hero2__text { display: none; }
	.sp-hero2__lead { margin-bottom: 22px; }
	.sp-hero2__actions { flex-direction: column; }
	html body .sp-hero2__actions .sp-home__button { width: 100%; justify-content: center; }
	.sp-hero2__phone { margin-top: 16px; justify-content: center; width: 100%; }
	.sp-hero2__visual { padding: 0 0 26px; }
	.sp-hero2__photo { aspect-ratio: 4 / 3; border-radius: 22px; transform: none; }
	.sp-hero2__doctor { left: 12px; right: 12px; bottom: 0; max-width: none; padding: 10px 14px 10px 10px; }
	.sp-hero2__doctor img { width: 46px; height: 46px; flex-basis: 46px; }
	.sp-hero2__rating { right: 12px; top: 12px; padding: 8px 12px; gap: 8px; }
	.sp-hero2__rating strong { font-size: 24px; }
	.sp-hero2__rating span { font-size: 11px; }
	.sp-hero2__rating i { font-size: 11px; }

	html body .sp-home-trust { margin-top: -28px !important; }
	html body .sp-home-trust .sp-home-trust__grid { grid-template-columns: 1fr 1fr !important; border-radius: 18px; width: calc(100% - 32px) !important; margin: 0 auto !important; }
	html body .sp-trust-card { padding: 18px 16px !important; border-top: 0 !important; border-bottom: 1px solid var(--f-line) !important; }
	html body .sp-trust-card:nth-child(2n) { border-right: 0 !important; }
	html body .sp-trust-card:nth-last-child(-n+2) { border-bottom: 0 !important; }
	html body .sp-trust-card strong { font-size: 28px !important; }
	html body .sp-trust-card span { font-size: 13px !important; }

	html body .sp-symptom-card { min-height: 0; }
	html body .sp-home-card:hover, html body .sp-symptom-card:hover, html body .sp-home-doctor-card:hover,
	html body .sp-article-card:hover, html body .sp-doctor-card:hover, html body .sp-price-card:hover { transform: none; }
}