/* Сайт врача Артёма Аперяна (шаблон tochnaya.su) — образец многостраничного сайта, 2026-10-06.
   Стиль прежней страницы (чёрный, белый, золото, Montserrat) с исправлениями аудита:
   прилипающая шапка (без overflow-x:hidden на html/body), контраст текста от 4,5:1,
   на телефоне фото над текстом, нижняя полоса записи, версия для слабовидящих на всех элементах. */

@font-face{font-family:Montserrat;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/montserrat-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Montserrat;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/montserrat-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --chernyj:#111; --tekst:#3a3a3a; --vtor:#555; --melk:#666;
  --zoloto:#8a6a36;          /* золото для текста на светлом: 5,0:1 */
  --zoloto-svet:#c9ad7c;     /* золото на тёмном и фон кнопки: 8,8:1 */
  --liniya:#e6dccb; --krem:#faf8f5; --temnyj:#111; --tekst-temn:#bdbdbd;
  --shirina:1180px; --shapka:68px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--shapka) + 12px);-webkit-text-size-adjust:100%}
body{font-family:Montserrat,-apple-system,"Segoe UI",Arial,sans-serif;font-size:17px;line-height:1.7;color:var(--tekst);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--zoloto);text-underline-offset:3px}
@media (hover: hover){
a:hover{color:var(--chernyj)}}
:focus-visible{outline:3px solid var(--zoloto-svet);outline-offset:3px}
.vn{max-width:var(--shirina);margin:0 auto;padding:0 24px}
.vslux{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.k-soderzhaniyu{position:absolute;left:-9999px;top:8px;z-index:100;background:#fff;padding:10px 16px}
.k-soderzhaniyu:focus{left:16px}

/* ── шапка ── */
.shapka{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #eee}
.shapka .vn{display:flex;align-items:center;gap:24px;height:var(--shapka)}
.znak{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--chernyj);flex-shrink:0}
.znak img{width:84px;height:auto}
.znak .razd{width:1px;height:28px;background:#ddd}
.znak b{font-weight:600;font-size:16px;letter-spacing:.01em}
.menyu{display:flex;align-items:center;gap:22px;margin-left:auto}
.menyu a{color:var(--chernyj);text-decoration:none;font-size:15px;font-weight:500;padding:6px 0;border-bottom:2px solid transparent}
.menyu a[aria-current=page]{border-bottom-color:var(--zoloto-svet)}
@media (hover: hover){
.menyu a:hover{border-bottom-color:var(--zoloto-svet)}}
.knopka{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 22px;
  background:var(--zoloto-svet);color:var(--chernyj)!important;font-weight:600;font-size:15px;text-decoration:none;border:0;border-radius:4px;cursor:pointer;font-family:inherit}
@media (hover: hover){
.knopka:hover{background:#d8bf92}}
.knopka-kontur{background:transparent;border:1.5px solid currentColor;color:inherit!important}
@media (hover: hover){
.knopka-kontur:hover{background:rgba(201,173,124,.15)}}
.menyu .knopka{border:0;padding:10px 20px}
@media (hover: hover){
.menyu .knopka:hover{border:0}}
.dostup-vhod{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;background:none;border:0;cursor:pointer;
  font:500 14px Montserrat,Arial,sans-serif;color:var(--vtor)}
.dostup-vhod svg{width:20px;height:20px}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:0;background:none;cursor:pointer;flex-direction:column;justify-content:center;gap:6px;padding:0 10px}
.burger span{display:block;height:2px;background:var(--chernyj);border-radius:1px}

/* ── первый экран главной ── */
.geroj{background:var(--temnyj);color:#fff;position:relative;overflow:hidden}
.geroj .vn{display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);min-height:min(82vh,780px);align-items:center;gap:0}
.geroj-tekst{padding:72px 12px 72px 0;position:relative;z-index:2}
.kto{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--zoloto-svet);margin-bottom:22px;line-height:1.7}
.geroj h1{color:#fff;font-size:clamp(32px,3.6vw,50px);line-height:1.18;font-weight:700;letter-spacing:-.01em;margin-bottom:24px}
.geroj p{font-size:18px;color:#d4d4d4;max-width:34em;margin-bottom:34px}
.geroj-knopki{display:flex;flex-wrap:wrap;gap:14px}
.geroj-knopki .knopka-kontur{color:#fff!important}
/* как на одобренном сайте: фото на всю ширину, врач справа, текст слева на затемнении */
.geroj-foto{position:absolute;inset:0;z-index:1}
.geroj-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.geroj-foto:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(17,17,17,.94) 0%,rgba(17,17,17,.86) 42%,rgba(17,17,17,.45) 57%,rgba(17,17,17,0) 65%)}

/* ── секции ── */
.sekciya{padding:88px 0}
.sekciya.krem{background:var(--krem)}
.sekciya.temnaya{background:var(--temnyj);color:var(--tekst-temn)}
.sekciya.temnaya h2,.sekciya.temnaya h3,.sekciya.temnaya b{color:#fff}
.nadpis{font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--zoloto);margin-bottom:14px;font-weight:600}
.temnaya .nadpis{color:var(--zoloto-svet)}
h1,h2,h3{color:var(--chernyj);line-height:1.25}
h2{font-size:clamp(26px,3vw,38px);font-weight:700;letter-spacing:-.01em;margin-bottom:20px;max-width:22em}
h3{font-size:19px;font-weight:600;margin-bottom:10px}
.lid{font-size:19px;color:var(--vtor);max-width:44em;margin-bottom:8px}
.temnaya .lid{color:var(--tekst-temn)}
.setka2,.setka3{display:grid;gap:36px 48px;margin-top:44px}
.setka2{grid-template-columns:repeat(2,minmax(0,1fr))}
.setka3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kartochka{border-top:2px solid var(--liniya);padding-top:22px}
.kartochka p{color:var(--vtor);font-size:16.5px}
.temnaya .kartochka{border-color:#333}
.temnaya .kartochka p{color:var(--tekst-temn)}
.dalee{display:inline-block;margin-top:26px;font-weight:600;font-size:16px}
.dalee:after{content:" →"}
.vnutr-zagolovok{padding:56px 0 8px}
.vnutr-zagolovok h1{font-size:clamp(30px,3.4vw,44px);font-weight:700;letter-spacing:-.01em;margin-bottom:18px;max-width:20em}
.kroshki{font-size:14px;color:var(--melk);margin-bottom:22px}
.kroshki a{color:var(--zoloto)}
.kroshki span{margin:0 8px;color:#757575}

/* «с чем приходят» — плашки-ссылки */
.priznaki{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;list-style:none}
.priznaki a,.priznaki span{display:inline-block;padding:12px 18px;border:1.5px solid var(--liniya);border-radius:30px;background:#fff;color:var(--chernyj);text-decoration:none;font-weight:500;font-size:16px}
@media (hover: hover){
.priznaki a:hover{border-color:var(--zoloto-svet)}}

/* консультация: шаги */
.konsult{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;margin-top:44px;align-items:start}
/* 2026-10-14: фото не залипает при прокрутке — страница крутится целиком */
.konsult figure{position:relative}
@media (min-width:901px){
  .konsult.foto-sprava{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  /* фото рядом с текстом — той же высоты: короче текст — фото 4:3, длиннее — фото тянется на высоту текста
     и обрезается по краям; центр кадра — по голове */
  .konsult.rovno{align-items:stretch}
  .konsult.rovno figure{position:relative}
  /* не ниже 4:3 по ширине колонки; aspect-ratio на самой figure не годится: растянутая высота раздувала ширину (14.10) */
  .konsult.rovno figure::before{content:"";display:block;padding-top:75%}
  .konsult.rovno figure img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;margin:0}
  /* 2026-10-21: вертикальные снимки «с руками» (просьба врача) — не ниже 4:5, иначе руки срезаются */
  .konsult.rovno figure.vert::before{padding-top:125%}
}
@media (max-width:900px){
  .konsult figure.vert .foto-blok{aspect-ratio:4/5}
  .konsult figure.vert{max-width:480px}   /* на планшете вертикальное фото во всю ширину — выше экрана */
}
/* широкое фото над карточками (двое в кадре — в узкую колонку не помещаются) */
.foto-polosa{margin-top:44px}
.foto-polosa .foto-blok{aspect-ratio:2/1;margin-bottom:0}
@media (max-width:900px){.foto-polosa .foto-blok{aspect-ratio:4/3}}
.konsult figcaption{font-size:15px;color:var(--vtor);margin-top:12px}
.temnaya .konsult figcaption{color:var(--tekst-temn)}
.shagi{list-style:none;counter-reset:shag}
.shagi li{counter-increment:shag;display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 16px;padding:22px 0;border-top:1px solid var(--liniya)}
.temnaya .shagi li{border-color:#2c2c2c}
.shagi li:before{content:counter(shag,decimal-leading-zero);font-weight:700;color:var(--zoloto);font-size:16px;line-height:1.6}
.temnaya .shagi li:before{color:var(--zoloto-svet)}
.shagi b{display:block;font-weight:600;font-size:18px;margin-bottom:4px}
.shagi p{grid-column:2;font-size:16.5px}
.posle{margin-top:36px;font-size:18px;font-style:italic;max-width:46em}

/* цитата */
.citata{font-size:clamp(20px,2.2vw,27px);line-height:1.6;font-style:italic;color:#fff;max-width:34em;margin:0 auto;text-align:center}
.citata span{color:var(--zoloto-svet)}

/* фото в тексте */
.foto-blok{border-radius:6px;margin-bottom:22px;aspect-ratio:4/3;object-fit:cover;width:100%}
.galereya{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:40px}
.galereya figure img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:6px}
.galereya figcaption{font-size:15px;color:var(--vtor);margin-top:10px}

/* образование */
.obr-glavnoe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 48px;margin-top:40px}
.obr-glavnoe article{border-top:2px solid var(--zoloto-svet);padding-top:20px}
.god{font-size:15px;font-weight:700;color:var(--zoloto);margin-bottom:6px}
.dokumenty{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:40px 0}
.dokumenty img{border:1px solid var(--liniya);border-radius:4px}
.dokumenty figcaption{font-size:15px;color:var(--vtor);margin-top:8px}
.obr-spisok{list-style:none;max-width:780px}
.obr-spisok li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--liniya);font-size:16.5px}
.obr-spisok b{color:var(--chernyj)}
.primechanie{font-size:15px;color:var(--melk);margin-top:16px}

/* вопросы */
.faq-gruppa{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--zoloto);font-weight:600;margin:48px 0 8px}
.faq details{border-bottom:1px solid var(--liniya)}
.faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;font-size:18px;font-weight:500;color:var(--chernyj);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:6px;top:16px;font-size:26px;font-weight:400;color:var(--zoloto)}
.faq details[open] summary:after{content:"−"}
.faq details p{padding:0 0 22px;color:var(--vtor);font-size:16.5px;max-width:52em}

/* статьи */
.stati-spisok{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px;margin-top:40px}
.statya-kartochka{display:block;border:1px solid var(--liniya);border-radius:6px;padding:28px;text-decoration:none;color:var(--tekst);background:#fff}
@media (hover: hover){
.statya-kartochka:hover{border-color:var(--zoloto-svet)}}
.statya-kartochka .data{font-size:14px;color:var(--melk)}
.statya-kartochka h3{margin:8px 0 10px;font-size:20px}
.statya-kartochka p{font-size:16px;color:var(--vtor)}
.statya{max-width:740px;margin:0 auto;padding:0 24px 72px}
.statya .avtor-stroka{font-size:15px;color:var(--melk);margin-bottom:34px}
.statya p,.statya li{font-size:18px;line-height:1.78}
.statya p{margin:0 0 18px}
.statya h2{font-size:clamp(23px,2.4vw,28px);margin:40px 0 14px}
.statya ul{margin:0 0 18px 22px}
.statya li{margin-bottom:8px}
.vrez{border-left:3px solid var(--zoloto-svet);background:var(--krem);padding:18px 22px;margin:26px 0;font-size:18px;line-height:1.75}
.otkaz{font-size:15px;color:var(--vtor);background:#f5f2ec;border-radius:6px;padding:16px 20px;margin-top:36px}
.avtor-blok{display:flex;gap:18px;align-items:center;border-top:1px solid var(--liniya);margin-top:40px;padding-top:28px}
.avtor-blok img{width:76px;height:76px;border-radius:50%;object-fit:cover;object-position:50% 20%;flex-shrink:0}
/* 2026-10-08 (нашёл Виталий): на телефоне <picture> сжимался в ряду, img с max-width:100% — следом, и круг 76×76 становился
   эллипсом 47×76. Обёртка не сжимается, картинка всегда квадрат; на телефоне круг меньше — тексту рядом хватает места */
.avtor-blok picture{flex:0 0 auto;display:block;line-height:0}
.avtor-blok img{max-width:none;aspect-ratio:1/1}
@media (max-width:600px){.avtor-blok img{width:60px;height:60px}}
.avtor-blok b{display:block;color:var(--chernyj);font-size:17px}
.avtor-blok span{font-size:15px;color:var(--vtor)}

/* запись */
.kanaly{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:36px;max-width:760px}
.kanal{display:flex;align-items:center;gap:16px;padding:18px 20px;border:1.5px solid var(--liniya);border-radius:8px;background:#fff;text-decoration:none;color:var(--chernyj);min-height:76px}
@media (hover: hover){
.kanal:hover{border-color:var(--zoloto-svet)}}
.kanal-znak{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--chernyj);color:#fff}
.kanal-znak.tg{background:#229ED9}
.kanal-znak svg{width:24px;height:24px}
.kanal b{display:block;font-size:17px}
.kanal i{font-style:normal;font-size:15px;color:var(--vtor)}
.forma{display:grid;gap:14px;max-width:520px;margin-top:20px}
.forma label{font-size:15px;font-weight:500;color:var(--chernyj)}
.forma input[type=text],.forma input[type=tel]{width:100%;min-height:50px;padding:12px 14px;font:inherit;font-size:17px;border:1.5px solid #cfc6b6;border-radius:6px;background:#fff;color:var(--chernyj)}
.forma input:focus{border-color:var(--zoloto)}
.soglasie{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;font-size:15px;color:var(--vtor)}
.soglasie input{width:24px;height:24px;margin-top:2px;accent-color:var(--zoloto)}
.otvet{min-height:24px;font-weight:500;font-size:16px}
.otvet.ok{color:#2f6b52}.otvet.err{color:#a5402c}
.podskazka{font-size:15px;color:var(--vtor);margin-top:14px}
.adres{margin-top:36px;font-size:17px}

/* документы */
.dokument{max-width:820px;margin:0 auto;padding:0 24px 72px}
.dokument h1{font-size:clamp(26px,5vw,36px);margin-bottom:10px}
.dokument h2{font-size:clamp(18px,4vw,22px);margin:32px 0 10px}
.dokument p,.dokument li{font-size:16.5px;margin-bottom:10px}
.dokument ul{margin-left:22px}

/* предупреждение о противопоказаниях — на каждой странице, читаемо */
.preduprezhdenie{background:var(--krem);border-top:1px solid var(--liniya);padding:18px 0;text-align:center;font-size:16px;font-weight:600;color:var(--chernyj);letter-spacing:.01em}

/* подвал */
.podval{background:var(--temnyj);color:#9a9a9a;padding:56px 0 40px;font-size:15px}
.podval .setka-podval{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.podval h4{color:#fff;font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;font-weight:600}
.podval a{color:#d6d6d6;text-decoration:none}
@media (hover: hover){
.podval a:hover{color:var(--zoloto-svet)}}
.podval ul{list-style:none}
.podval li{margin-bottom:8px}
.podval .yur{border-top:1px solid #2a2a2a;margin-top:36px;padding-top:22px;font-size:14px;line-height:1.7}
.podval .sozdatel{margin-top:10px;font-size:13px}

/* нижняя полоса записи на телефоне */
.niz-polosa{display:none}

/* ── кнопки MAX и Telegram (стили — knopki.css из библиотеки, здесь только размеры и места) ── */
.msg-ryad{display:flex;align-items:center;gap:12px;flex:none}
.msg-ryad .msg-btn::before{display:none}            /* подсказка в строке не нужна: есть aria-label */
.v-shapke{gap:10px}
.v-shapke .msg-btn{width:44px;height:44px}
.v-shapke .msg-btn--max img{width:24px;height:24px;border-radius:6px}
.v-shapke .msg-plane,.v-shapke .msg-plane svg{width:22px;height:22px}
.kontakty{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:32px}
.bolshie{gap:16px}
.telefon{display:flex;flex-direction:column;text-decoration:none;color:var(--chernyj);padding-left:28px;border-left:1px solid var(--liniya);min-height:44px;justify-content:center}
.telefon b{font-size:22px;font-weight:600;letter-spacing:.01em}
@media (max-width:600px){.telefon{border-left:0;padding-left:0;flex-basis:100%}}   /* телефон под значками — без висящей черты */
.telefon span{font-size:15px;color:var(--vtor)}

/* ── подписи на самой фотографии, на полупрозрачной плашке ── */
.foto-s-podpisyu{position:relative;overflow:hidden;border-radius:6px}
.foto-s-podpisyu img{border-radius:0;margin:0}
.foto-s-podpisyu figcaption{position:absolute;left:0;right:0;bottom:0;margin:0!important;padding:12px 16px;
  background:rgba(17,17,17,.72);color:#fff!important;font-size:15px;font-weight:500;line-height:1.45}
.foto-s-podpisyu.podpis-verh figcaption{top:0;bottom:auto;left:auto;max-width:72%;border-bottom-left-radius:6px}
.konsult .foto-s-podpisyu .foto-blok{margin-bottom:0}

/* ── подвал: короткие строки, ничего не переносится по одному слову ── */
.podval-stroki{margin-bottom:12px}
.podval-stroki > span{display:block}   /* только строки подвала, не вложенные защитные .nobr */
.nobr{white-space:nowrap}

/* ── переносы: браузер сам избегает короткой последней строки (Chrome/Яндекс/Safari; в Firefox — обычный перенос),
   заголовки — ровными строками. Неразрывные пробелы из build.py страхуют короткие хвосты во всех браузерах. ── */
p,li,figcaption,summary,dd,.kto,.lid,.otkaz,.vrez,.kroshki,.podval-stroki span,.statya-kartochka p{text-wrap:pretty}
h2{max-width:26em}
.geroj h1{font-size:clamp(30px,3.2vw,41px)}   /* «зубочелюстная система» — одной строкой в колонке первого экрана */
[data-slabovid] body{overflow-wrap:anywhere;hyphens:auto}   /* самый крупный кегль на телефоне: длинное слово переносится внутри, а не вылезает */
[data-slabovid] .nobr{white-space:normal}
.po-teme{margin-top:32px}
.po-teme h2{font-size:18px;margin:0 0 10px}
.statya .po-teme ul{list-style:none;margin:0}
.statya .po-teme li{font-size:17px;margin-bottom:8px;padding-left:18px;position:relative}
.statya .po-teme li:before{content:"→";position:absolute;left:0;color:var(--zoloto)}
@media (max-width:480px){
  .obr-spisok li{grid-template-columns:minmax(0,1fr);gap:2px}   /* год над текстом — шире колонка, без висячих слов */
  .geroj h1{font-size:min(28px,6.6vw)}
  .shagi b{font-size:17px}
}
h1,h2,h3,b,.citata,.faq summary{text-wrap:balance}

/* ── заголовок первого экрана: на компьютере — как одобрено (две строки белым),
   на телефоне — два яруса: «Смотрю не на / отдельный зуб,» белым, «а на то, как работает / вся зубочелюстная система» золотом.
   Разрывы строк расставлены по смыслу, кегль считается от ширины экрана, чтобы строки не ломались. ── */
br.mob{display:none}
@media (max-width:900px){
  .geroj .kto{font-size:13px;letter-spacing:.08em;line-height:1.6;margin-bottom:16px}
  .geroj .kto-imya{display:block;color:#fff;font-size:15px;font-weight:600;letter-spacing:.12em;margin-bottom:2px}
  .geroj .kto-tochka{display:none}
  .geroj .kto-spec{display:block}
  .geroj h1{line-height:1.16;letter-spacing:-.015em;margin-bottom:20px}
  .geroj .h1-a,.geroj .h1-b{display:block}
  br.pk{display:none}
  .geroj .h1-a{font-size:40px}
  .geroj .h1-b{margin-top:12px;font-size:29px;line-height:1.28;font-weight:600;color:var(--zoloto-svet);letter-spacing:-.01em}
}
@media (max-width:600px){
  br.mob{display:inline}
  .geroj .h1-a{font-size:min(34px,calc((100vw - 40px) / 12.4))}   /* «не на отдельный зуб,» — одной строкой */
  .geroj .h1-b{font-size:min(24px,calc((100vw - 40px) / 15.2))}
}

/* образец: метка, что это не боевой сайт */
.obrazec{background:#2a2a2a;color:#e8e8e8;font-size:13px;text-align:center;padding:6px 12px}

/* ── планшет и телефон ── */
@media (max-width:1100px){
  .menyu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 24px;border-bottom:1px solid #eee;box-shadow:0 12px 24px rgba(0,0,0,.08)}
  .menyu-otkryto .menyu{display:flex}
  .menyu a{padding:14px 0;border-bottom:1px solid #f0f0f0;font-size:17px}
  .menyu .knopka{margin-top:16px}
  .burger{display:flex}
  .shapka .dostup-vhod-shapka{display:none}
}
@media (max-width:900px){
  body{font-size:16px;padding-bottom:64px}
  .vn{padding:0 20px}
  .sekciya{padding:60px 0}
  .geroj .vn{display:block;min-height:0;padding:0}
  /* телефон: квадратный портрет над текстом — лицо не закрывается ничем */
  .geroj-foto{position:relative;inset:auto;height:auto}
  .geroj-foto img{aspect-ratio:4/3;height:auto;object-position:56% 22%}
  .geroj-foto:before{background:linear-gradient(180deg,rgba(17,17,17,0) 72%,#111 100%)}
  .geroj-tekst{padding:28px 20px 44px}
  .geroj h1{font-size:30px}
  .geroj p{font-size:17px}
  .setka2,.setka3,.obr-glavnoe,.dokumenty,.galereya,.kanaly{grid-template-columns:minmax(0,1fr)}
  .konsult{grid-template-columns:minmax(0,1fr);gap:28px}
  .konsult figure{position:static;top:auto}
  /* 2026-10-07: фото с подписью остаётся опорой для подписи — иначе static отвязывает её, и на телефоне подпись прижимается к низу экрана.
     2026-10-08: top:auto обязателен — у relative работает top:92px от sticky-правила компьютера, фото съезжало вниз на шаги */
  .konsult figure.foto-s-podpisyu{position:relative;top:auto}
  .lid{font-size:17px}
  .podval .setka-podval{grid-template-columns:minmax(0,1fr);gap:28px}
  .niz-polosa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid #ddd;padding-bottom:env(safe-area-inset-bottom)}
  .niz-polosa a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;color:var(--chernyj);text-decoration:none;font-size:13px;font-weight:600}
  .niz-polosa a svg{width:22px;height:22px}
  .niz-polosa a.glavnaya-knopka{background:var(--zoloto-svet)}
  .statya p,.statya li,.vrez{font-size:17px}
}
/* ноутбуки: меню, «Записаться» и два значка мессенджеров в одну строку — у «Для слабовидящих» остаётся только значок */
@media (max-width:1500px) and (min-width:1101px){
  .dostup-vhod .dostup-tekst{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .menyu{gap:18px}
}
@media (max-width:1100px){
  .shapka .vn{gap:12px}
  .v-shapke{margin-left:auto}          /* меню спрятано в бургер — значки прижимаются вправо */
}
@media (max-width:480px){
  .znak img,.znak .razd{display:none}  /* узкий телефон: имя врача важнее логотипа клиники, иначе не влезают значки */
  .vnutr-zagolovok h1{font-size:26px}
  .znak img{width:68px}
  .znak b{font-size:15px}
  .geroj-knopki .knopka{width:100%}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ── версия для слабовидящих (ГОСТ Р 52872-2019): одна схема цветов на ВСЕ элементы,
   чтобы ни одна часть шапки не пропадала (в прежней версии «белым по чёрному» ломал шапку) ── */
.dostup-panel{background:#222;color:#fff;padding:12px 0}
.dostup-panel .vn{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center}
.dostup-gruppa{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dostup-gruppa>span{font-size:15px}
.dostup-panel button{min-height:44px;min-width:44px;padding:0 12px;border:2px solid #fff;background:#000;color:#fff;font:600 16px Arial,sans-serif;cursor:pointer}
.dostup-panel button[aria-pressed=true]{background:#fff;color:#000}
[data-slabovid]{--f:#000;--b:#fff}
[data-slabovid][data-shema=wb]{--f:#fff;--b:#000}
[data-slabovid][data-shema=bb]{--f:#063462;--b:#9dd1ff}
[data-slabovid] body{font-family:Arial,Verdana,sans-serif;line-height:1.7}
[data-slabovid] body *:not(.dostup-panel,.dostup-panel *,.msg-btn,.msg-btn *){background:var(--b)!important;color:var(--f)!important;border-color:var(--f)!important;
  box-shadow:none!important;text-shadow:none!important;font-style:normal!important;text-transform:none!important;letter-spacing:normal!important}
[data-slabovid] body .shapka .burger span:not(#_){background:var(--f)!important}  /* :not(#_) даёт вес идентификатора — сильнее общего правила перекраски */
[data-slabovid] .geroj-foto:before{display:none}
[data-slabovid] a{text-decoration:underline!important}
[data-slabovid][data-shrift="1"] body{font-size:19px}
[data-slabovid][data-shrift="2"] body{font-size:23px}
[data-slabovid][data-shrift="3"] body{font-size:28px}
[data-slabovid] h1{font-size:1.9em!important}
[data-slabovid] h2{font-size:1.5em!important}
[data-slabovid] h3,[data-slabovid] summary{font-size:1.15em!important}
[data-slabovid] p,[data-slabovid] li,[data-slabovid] .lid,[data-slabovid] .kto,[data-slabovid] .nadpis,[data-slabovid] .podval,[data-slabovid] figcaption,
[data-slabovid] .otkaz,[data-slabovid] .vrez,[data-slabovid] .menyu a,[data-slabovid] .kroshki{font-size:1em!important}
[data-slabovid][data-interval="1"] body{letter-spacing:.06em;word-spacing:.12em}
[data-slabovid][data-interval="2"] body{letter-spacing:.12em;word-spacing:.22em;line-height:2}
/* 2026-10-08 (внешний разбор): общий сброс режима ставит всем letter-spacing:normal!important — без этих правил
   кнопки «Средний» и «Большой» меняли только пробелы между словами. Исключения — те же, что у сброса. */
[data-slabovid][data-interval="1"] body *:not(.dostup-panel,.dostup-panel *,.msg-btn,.msg-btn *){letter-spacing:.06em!important}
[data-slabovid][data-interval="2"] body *:not(.dostup-panel,.dostup-panel *,.msg-btn,.msg-btn *){letter-spacing:.12em!important}
/* 2026-10-08: на широком экране меню не помещалось в шапку высотой 68 px, сжималось и рвало слова переносами
   («Консульта-ция», «О врач / е») при любом кегле — с первой выкладки. Шапка растёт по содержимому, пункты переносятся целиком. */
@media (min-width:1101px){
  [data-slabovid] .shapka .vn{height:auto;min-height:var(--shapka);flex-wrap:wrap;row-gap:6px;padding-top:8px;padding-bottom:8px}
  [data-slabovid] .menyu{flex:1 1 0;min-width:min(100%,480px);flex-wrap:wrap;justify-content:flex-end;row-gap:4px}
  [data-slabovid] .menyu > a,[data-slabovid] .menyu > button{flex-shrink:0;white-space:nowrap;hyphens:manual;overflow-wrap:normal}
}
[data-slabovid] .setka2,[data-slabovid] .setka3,[data-slabovid] .obr-glavnoe,[data-slabovid] .dokumenty,[data-slabovid] .galereya,
[data-slabovid] .konsult,[data-slabovid] .kanaly,[data-slabovid] .geroj .vn{display:block!important}
[data-slabovid] .geroj-foto{position:relative!important;inset:auto!important}
[data-slabovid][data-bez-kartinok] img,[data-slabovid][data-bez-kartinok] .geroj-foto{display:none!important}
/* 2026-10-08: подсказка у кнопок-заглушек мессенджеров в образце */
.tost{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);background:#111;color:#fff;
  padding:12px 16px;border-radius:6px;font-size:15px;line-height:1.45;z-index:80;box-shadow:0 6px 24px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .2s}
.tost.vidno{opacity:1}

/* ── кадрирование по головам (сгенерировано build.py из src/img/golovy.json) ── */
.foto-avatar{object-position:46.3% 50.0%}
.foto-fotoprotokol{object-position:76.5% 42.5%}
.foto-hero-aperyan{object-position:80.1% 1.9%}
.foto-mikroskop{object-position:82.1% 47.5%}
.foto-modeli{object-position:43.5% 10.0%}
.foto-na-prieme{object-position:39.1% 0.0%}
.foto-portret{object-position:49.5% 0.0%}
.foto-s-artikulyatorom{object-position:54.6% 1.7%}
.foto-s-assistentom{object-position:95.8% 43.6%}
.foto-skaner{object-position:22.4% 2.4%}
.foto-u-kresla{object-position:53.4% 33.9%}
.foto-v-kabinete{object-position:69.1% 6.0%}
.foto-v-klinike{object-position:0.0% 50.0%}
.geroj-foto img{object-position:80.1% 1.9%}
.foto-hero-aperyan-mobile{object-position:46.1% 1.9%}
@media (max-width:900px){.geroj-foto img{object-position:46.1% 1.9%}}