/*
 * Единая дизайн-система kto.
 * Собрано из inline-CSS статей:
 *   body-itp_v_mnogokvartirnom_dome.html
 *   body-konstruktsiya_plastinchatykh_teploobmennikov.html
 *   body-promyvka_teploobmennika_kotla.html
 * Дата сборки: 22.09.2026.
 * При расхождениях выбран наиболее полный/устойчивый вариант; см. KTO_MERGE.md.
 */

.kto {
  --red: #CF0028;
  --red-d: #a80020;
  --red-l: #ff4d6a;
  --blue: #0088D2;
  --green: #3AB452;
  --dark: #0c1829;
  --ink: #1a1a2e;
  --glass: rgba(255,255,255,.07);
  --gb: rgba(255,255,255,.1);
  --brd: #e2e5ea;
  --r: 14px;
  --ease: cubic-bezier(.22,1,.36,1);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  line-height: 1.7;
}

.kto * { text-wrap: pretty; }

.kto-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
}

.kto-bar__f {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--red), var(--blue), var(--green));
}

.kto-hero {
  background: var(--dark);
  border-radius: var(--r);
  padding: 3.5rem 3rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.kto-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 20%, rgba(207,0,40,.12), transparent 55%), radial-gradient(ellipse at 20% 80%, rgba(0,136,210,.08), transparent 50%);
  pointer-events: none;
  animation: ktoPulse 6s ease-in-out infinite alternate;
}

.kto-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--red), var(--red-l), var(--red));
}

.kto-hero h1 {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 1rem;
  line-height: 1.2;
  position: relative;
  z-index: 1;
  text-wrap: balance;
}

.kto-hero h1 em { font-style: normal; color: var(--red-l); }

.kto-hero__ld {
  font-size: 1rem;
  color: #b0c4d8;
  max-width: 640px;
  margin: 0 0 2rem;
  position: relative;
  z-index: 1;
}

.kto-sts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  position: relative;
  z-index: 1;
}

.kto-st {
  background: var(--glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--gb);
  border-radius: var(--r);
  padding: 1.2rem .6rem;
  text-align: center;
  transition: border-color .3s, transform .3s var(--ease);
}

.kto-st:hover { border-color: var(--red); transform: translateY(-3px); }

.kto-st__n {
  font-size: clamp(1.1rem, 1.7vw, 1.9rem);
  font-weight: 800;
  color: #fff;
  display: block;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.kto-st__l {
  font-size: .68rem;
  color: rgba(255,255,255,.55);
  display: block;
  margin-top: .4rem;
  text-transform: uppercase;
  font-weight: 600;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.kto-hero__cta {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.kto-hero__nav {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  position: relative;
  z-index: 1;
}

.kto-nav-pill {
  padding: 6px 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  color: #fff;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 600;
  transition: all .25s var(--ease);
}

.kto-nav-pill:hover {
  background: rgba(255,255,255,.18);
  color: #fff;
  transform: translateY(-1px);
}

.kto-h2 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
  margin: 2.5rem 0 .5rem;
  position: relative;
  padding-left: 16px;
  text-wrap: balance;
}

.kto-h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--red), var(--red-l));
}

.kto-sub {
  color: #6b7280;
  font-size: .9rem;
  margin: 0 0 1.5rem;
  padding-left: 16px;
}

.kto-card {
  background: #fff;
  border: 1px solid var(--brd);
  border-radius: var(--r);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s;
}

.kto-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red), var(--red-l));
  transform: scaleX(0);
  transition: transform .35s var(--ease);
  transform-origin: left;
}

.kto-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(207,0,40,.08);
}

.kto-card:hover::before { transform: scaleX(1); }
.kto-card h3 { font-size: .95rem; margin: 0 0 .4rem; font-weight: 700; }
.kto-card p { font-size: .84rem; color: #6b7280; margin: 0; line-height: 1.6; }
.kto-card--b::before { background: linear-gradient(90deg, var(--blue), #33a3e0); }
.kto-card--g::before { background: linear-gradient(90deg, var(--green), #5ee87a); }

.kto-grid { display: grid; gap: 1.25rem; }
.kto-g3 { grid-template-columns: repeat(3, 1fr); }
.kto-g2 { grid-template-columns: repeat(2, 1fr); }

.kto-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .68rem;
  font-weight: 700;
  margin-top: .6rem;
  text-transform: uppercase;
}

.kto-tag--r { background: #fef2f2; color: var(--red); }
.kto-tag--b { background: #e8f4fd; color: var(--blue); }
.kto-tag--g { background: #eefbf0; color: var(--green); }

.kto-toc {
  background: linear-gradient(135deg, #fef2f4, #fff5f7);
  border: 1px solid rgba(207,0,40,.08);
  border-radius: var(--r);
  padding: 1.25rem 1.75rem;
  margin: 1.5rem 0;
}

.kto-toc h3 { margin: 0 0 .5rem; font-size: .78rem; text-transform: uppercase; font-weight: 700; color: var(--red); }
.kto-toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
.kto-toc li { font-size: .87rem; margin: .3rem 0; break-inside: avoid; }
.kto-toc a { color: var(--red); text-decoration: none; font-weight: 600; }
.kto-toc a:hover { text-decoration: underline; }

.kto-tw {
  overflow-x: auto;
  margin: 1rem 0;
  border-radius: var(--r);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.kto-tbl { width: 100%; border-collapse: collapse; font-size: .84rem; font-variant-numeric: tabular-nums; }
.kto-tbl th { background: var(--dark); color: #fff; padding: 11px 14px; text-align: left; font-weight: 700; font-size: .74rem; text-transform: uppercase; }
.kto-tbl td { padding: 11px 14px; border-bottom: 1px solid var(--brd); }
.kto-tbl tr:nth-child(even) td { background: #fafbfc; }
.kto-tbl tr:hover td { background: #fef2f4; }
.kto-tbl a { color: var(--red); font-weight: 600; text-decoration: none; }
.kto-tbl a:hover { text-decoration: underline; }

.kto-note { border-radius: var(--r); padding: 1rem 1.25rem; margin: 1.25rem 0; font-size: .88rem; }
.kto-note--r { background: linear-gradient(135deg, #fef2f4, #fff5f7); border: 1px solid rgba(207,0,40,.1); color: #7f1d2a; }
.kto-note--b { background: linear-gradient(135deg, #e8f4fd, #f0f7ff); border: 1px solid rgba(0,136,210,.1); color: #1a5276; }
.kto-note--g { background: linear-gradient(135deg, #eefbf0, #f0fdf4); border: 1px solid rgba(58,180,82,.1); color: #166534; }
.kto-note--w { background: linear-gradient(135deg, #fef3c7, #fffbeb); border: 1px solid rgba(217,119,6,.1); color: #92400e; }

.kto-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--r); overflow: hidden; margin: 1.5rem 0; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.kto-vs__c { padding: 1.5rem; }
.kto-vs__c:first-child { background: linear-gradient(180deg, #fef2f4, #fff); border-right: 2px solid var(--red); }
.kto-vs__c:last-child { background: linear-gradient(180deg, #e8f4fd, #fff); }
.kto-vs__c h3 { font-size: .92rem; margin: 0 0 .6rem; font-weight: 700; }
.kto-vs__c ul { margin: 0; padding-left: 1rem; font-size: .84rem; color: #374151; }
.kto-vs__c li { margin: .25rem 0; }

.kto-spec { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--brd); border-radius: var(--r); overflow: hidden; margin: 1rem 0; }
.kto-spec__c { background: #fff; padding: 1rem; text-align: center; }
.kto-spec__c:nth-child(odd) { background: #fafbfc; }
.kto-spec__v { font-size: 1.3rem; font-weight: 800; color: var(--red); display: block; font-variant-numeric: tabular-nums; }
.kto-spec__l { font-size: .7rem; color: #6b7280; text-transform: uppercase; font-weight: 600; margin-top: .2rem; display: block; }

.kto-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: var(--r);
  text-decoration: none;
  font-weight: 700;
  font-size: .9rem;
  border: none;
  cursor: pointer;
  transition: all .3s var(--ease);
  line-height: 1.2;
  font-family: inherit;
  position: relative;
  overflow: hidden;
}

.kto-btn--red { background: linear-gradient(135deg, var(--red), #e8334a); color: #fff; box-shadow: 0 4px 20px rgba(207,0,40,.3), inset 0 1px 0 rgba(255,255,255,.2); text-shadow: 0 1px 2px rgba(0,0,0,.15); }
.kto-btn--red::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); transition: left .6s; }
.kto-btn--red:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 32px rgba(207,0,40,.4), inset 0 1px 0 rgba(255,255,255,.3); color: #fff; }
.kto-btn--red:hover::before { left: 100%; }
.kto-btn--ghost { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff; backdrop-filter: blur(8px); }
.kto-btn--ghost:hover { background: rgba(255,255,255,.15); transform: translateY(-2px); color: #fff; }
.kto-btn--outline { background: #fff; border: 2px solid var(--red); color: var(--red); }
.kto-btn--outline:hover { background: var(--red); color: #fff; transform: translateY(-2px); }
.kto-btn--chat { background: linear-gradient(135deg, var(--green), #2d9944); color: #fff; box-shadow: 0 4px 20px rgba(58,180,82,.3); }
.kto-btn--chat:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(58,180,82,.4); color: #fff; }
.kto-btn__pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: ktoBeat 1.4s ease-in-out infinite; flex-shrink: 0; }

.kto-cta { background: var(--dark); border-radius: var(--r); padding: 3rem; margin: 2rem 0; position: relative; text-align: center; overflow: hidden; }
.kto-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(207,0,40,.12), transparent 60%); pointer-events: none; }
.kto-cta::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--red), var(--red-l), var(--red)); }
.kto-cta h3 { font-size: 1.35rem; font-weight: 800; color: #fff; margin: 0 0 .6rem; position: relative; z-index: 1; }
.kto-cta p { color: #94a3b8; margin: 0 auto 1.5rem; font-size: .9rem; max-width: 460px; position: relative; z-index: 1; }
.kto-cta__b { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; position: relative; z-index: 1; }

.kto-faq details { border-bottom: 1px solid var(--brd); }
.kto-faq details:first-of-type { border-top: 1px solid var(--brd); }
.kto-faq summary { padding: 1rem 0; font-weight: 700; cursor: pointer; font-size: .92rem; color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; transition: color .2s; }
.kto-faq summary:hover { color: var(--red); }
.kto-faq summary::-webkit-details-marker { display: none; }
.kto-faq summary::after { content: '+'; font-size: 1.2rem; color: var(--red); font-weight: 700; flex-shrink: 0; }
.kto-faq details[open] summary { color: var(--red); }
.kto-faq details[open] summary::after { content: '\2212'; }
.kto-faq details div { padding: 0 0 1rem; animation: ktoFI .3s var(--ease); }
.kto-faq details div p { margin: .2rem 0; font-size: .87rem; color: #6b7280; line-height: 1.7; }

.kto-links { background: linear-gradient(135deg, #fef2f4, #fff5f7, #e8f4fd); border: 1px solid var(--brd); border-radius: var(--r); padding: 1.5rem 2rem; margin: 2rem 0; }
.kto-links h3 { font-size: .82rem; text-transform: uppercase; font-weight: 700; color: var(--red); margin: 0 0 .75rem; }
.kto-rel { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 2rem; }
.kto-rel a { padding: 7px 14px; background: #fff; border: 1px solid rgba(207,0,40,.1); border-radius: 20px; color: var(--red); text-decoration: none; font-size: .8rem; font-weight: 600; transition: all .25s var(--ease); }
.kto-rel a:hover { background: var(--red); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(207,0,40,.2); }

.kto-calc { background: #fff; border: 1px solid var(--brd); border-radius: var(--r); padding: 2rem; margin: 1rem 0; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.kto-calc label { display: block; font-size: .82rem; font-weight: 700; color: var(--ink); margin-bottom: .35rem; }
.kto-calc input, .kto-calc select { width: 100%; padding: 10px 14px; border: 1.5px solid var(--brd); border-radius: 8px; font-size: .88rem; font-family: inherit; transition: border-color .2s; box-sizing: border-box; }
.kto-calc input:focus, .kto-calc select:focus { outline: none; border-color: var(--red); }
.kto-calc__g { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.kto-calc__res { background: linear-gradient(135deg, #fef2f4, #fff5f7); border: 1px solid rgba(207,0,40,.1); border-radius: var(--r); padding: 1.25rem; margin-top: 1.25rem; text-align: center; display: none; }
.kto-calc__res .val { font-size: 2rem; font-weight: 800; color: var(--red); display: block; }
.kto-calc__res .lbl { font-size: .8rem; color: #6b7280; }

.kto-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.kto-reveal.visible { opacity: 1; transform: translateY(0); }

@keyframes ktoSR { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes ktoSL { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
@keyframes ktoFI { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ktoPulse { 0% { opacity: .7; } 100% { opacity: 1; } }
@keyframes ktoBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

@media (max-width: 768px) {
  .kto-hero { padding: 2rem 1.5rem; }
  .kto-hero h1 { font-size: 1.5rem; }
  .kto-sts, .kto-vs, .kto-spec { grid-template-columns: 1fr 1fr; }
  .kto-g3, .kto-g2 { grid-template-columns: 1fr; }
  .kto-toc ol { columns: 1; }
  .kto-cta { padding: 1.5rem; }
  .kto-btn { width: 100%; justify-content: center; }
  .kto-calc__g { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .kto-hero { padding: 1.5rem 1rem; }
  .kto-hero h1 { font-size: 1.3rem; }
  .kto-st__n { font-size: 1.5rem; }
  .kto-spec { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .kto-reveal { opacity: 1; transform: none; transition: none; }
  .kto-hero::before { animation: none; }
  .kto-btn--red::before { transition: none; animation: none; }
  .kto-bar { display: none; animation: none; }
}

/* Вводный блок над листингом каталога (23.09.2026).
   Отдельно от .kto-hero: тот тёмный и годится для статьи, а над листингом
   давал тёмный текст по тёмному фону и топил баннер виджета. */
.kto .kto-lead{font-size:1.05rem;line-height:1.6;color:var(--ink);margin:0 0 1rem}
.kto .kto-lead strong{color:var(--red);font-weight:700}
.kto .kto-chat{margin:0 0 1.25rem}
.kto .kto-chat .kto-sub{margin:0 0 .5rem;color:#5b6b7d;font-size:.9rem}

/* Контейнер инлайн-чата виджета. Высота нужна, чтобы блок не схлопывался
   до монтирования фасада; в тело страниц инлайн-стили не пускаем.
   🔴 24.09: без верхней границы чат растягивался на ~900 px и внутри оставалась
   пустота — на посадочной это выглядит дырой, диалог ведь только начинается. */
.kto .kto-chat__mount{height:560px;margin:14px 0;border-radius:12px}
/* 🔴 24.09: НИКАКОЙ height и overflow:hidden. Виджет рисует чат в ЗАКРЫТОМ shadow DOM
   (attachShadow mode:'closed' — снаружи ни селектором, ни скриптом не достать) и сам
   растит поток под свою высоту. Любое ограничение снаружи режет низ потока, а внизу
   там — строка ввода: переписка видна, писать некуда. Ровно так и было на боевых
   страницах 24.09. Эталон, где чат работает, — sn22.ru/services/raschet-plastinchatogo-
   teploobmennika/: там контейнер это просто min-height:560px и больше ничего. */
@media (max-width:640px){.kto .kto-chat__mount{height:520px}}

/* 🔴 24.09: при накопленной истории диалога виджет вырастал за границы блока
   и налезал на следующий заголовок. overflow:hidden на контейнере + прокрутка
   внутри держат блок в своих размерах независимо от длины переписки. */
.kto .kto-chat{overflow:hidden}

/* ── Правки под светлый фон каталога (24.09.2026) ─────────────────────────────
   Дизайн-система собрана из статей, где блоки жили на ТЁМНОМ hero и с картинками
   в контейнерах фиксированной ширины. В разделе каталога фон светлый, а картинки
   идут из библиотеки в натуральную величину — обе вещи ломали вёрстку:
   картинка 2000×1400 распирала сетку (ширина .kto-grid = 0), а полупрозрачный
   белый фон карточек статистики на белом фоне превращал их в голый текст. */

.kto img{max-width:100%;height:auto;display:block;border-radius:10px}
.kto .kto-card img{width:100%;object-fit:cover}
.kto .kto-grid{display:grid;gap:1rem;margin:1rem 0}
.kto .kto-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kto .kto-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.kto .kto-g2,.kto .kto-g3{grid-template-columns:1fr}}

/* Статистика на светлом: рамка вместо полупрозрачной заливки */
.kto .kto-sts{gap:.75rem;margin:1.25rem 0}
.kto .kto-st{background:#fff;border:1px solid var(--brd,#e5e7eb);
             border-left:3px solid var(--red,#CF0028);border-radius:10px;
             padding:.9rem 1rem;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.kto .kto-st__n{color:var(--ink,#1a1a2e);font-weight:800;display:block}
.kto .kto-st__l{color:#6b7280;text-transform:uppercase;letter-spacing:.02em}

/* Карточки контента на светлом — тоже с рамкой, а не с заливкой по прозрачности */
.kto .kto-card{background:#fff;border:1px solid var(--brd,#e5e7eb);border-radius:12px;
               padding:1rem;overflow:hidden}

/* 🔴 24.09: .kto-grid в разделе каталога вычислялся шириной 0 (grid-template-columns
   резолвился в «0px 0px»), хотя родитель 916 px и явного width ни в одном правиле нет.
   Лечится явной шириной: в контексте Aspro автоширина грида не разрешается. */
.kto .kto-grid{width:100%;box-sizing:border-box}
.kto .kto-sts{width:100%;box-sizing:border-box;
              grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kto>*{max-width:100%}