/* Стили ПУБЛИЧНОГО САЙТА (аренда техники), не приложения.
   Держатся отдельно от styles.css намеренно: там оболочка CRM с темами
   и сотней компонентов, здесь — рекламные страницы, которые обязаны
   открываться быстро и на телефоне со слабым интернетом.

   ОФОРМЛЕНИЕ ОБЩЕЕ С ЛЕНДИНГОМ ЗАСТРОЙЩИКА и взято с сайта забега
   `yarstart.s-trest1.ru` — решение руководства: обе витрины группы
   должны выглядеть одинаково. Палитра, шрифты, шкала кегля и кнопки
   живут в `base.css`, здесь только блоки этой витрины.
   ========================================================================== */

/* Версия в адресе обязательна: статика отдаётся с кэшем на год,
   и без неё правка base.css не доходит до вернувшихся посетителей. */
@import url('/static/base.css?v=2');

:root{
  /* Старые имена оставлены: правила ниже ссылаются на них, а переписывать
     весь файл ради переименования незачем. Значения показывают
     на общую палитру. */
  --фон-мягкий:var(--поверхность);
  --фон-тёмный:#04101d;
  --текст-мягкий:var(--текст-тихо);
  --акцент-тёмный:var(--акцент-ярче);
  --радиус:var(--р-сред);
  --полоса:var(--полоса-ширина);
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* ---------- ссылка в обход шапки ----------
   Не `display:none` и не `visibility:hidden`: так её не получит и фокус.
   Убираем с экрана размерами, возвращаем при фокусе. */
.пропустить{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--акцент);color:#fff;padding:12px 20px;
  text-decoration:none;font-weight:600;border-radius:0 0 var(--радиус) 0;
}
.пропустить:focus{left:0}

/* ---------- юридические документы ----------
   Узкая колонка: это сплошной текст, который читают, а не просматривают,
   и на всю ширину полосы строка выходит нечитаемой. */
.документ{padding:40px 0 56px}
.документ .полоса{max-width:760px}
.документ h1{font-size:clamp(24px,3.4vw,32px)}
/* scroll-margin — под липкую шапку: без него переход по якорю `#reklama`
   из формы регистрации ставит заголовок раздела ровно под шапку, и человек
   видит текст, начинающийся с середины. */
.документ h2{font-size:20px;margin-top:34px;padding-top:18px;border-top:1px solid var(--линия);
  scroll-margin-top:86px}
.документ h3{font-size:16px;margin-top:22px;color:var(--текст-мягкий)}
.документ p,.документ li{font-size:15px}
.документ ul{padding-left:22px;margin:0 0 14px}
.документ li{margin-bottom:7px}
.док-мета{color:var(--текст-мягкий);font-size:14px;margin-bottom:26px}
.док-предупреждение{
  background:color-mix(in srgb,var(--внимание) 14%,transparent);border-left:3px solid var(--внимание);
  padding:12px 16px;margin-bottom:26px;color:#6b4a00;
}
.док-ссылки{margin-top:36px;padding-top:18px;border-top:1px solid var(--линия)}

/* ---------- шапка ---------- */
.шапка{
  border-bottom:1px solid var(--линия);
  position:sticky;top:0;z-index:20;
  /* ЗАЛИВКА ЛИПКОЙ ШАПКИ — ОТ ФОНА СТРАНИЦЫ, А НЕ БЕЛАЯ. Здесь стояло
     `rgba(255,255,255,.96)` от светлой темы: после перехода на тёмный
     набор шапка осталась белой полосой, а текст в ней — светлым
     по светлому, то есть невидимым. Проверкой цвета текста это
     не ловится: цвет верный, врёт фон под ним. */
  background:color-mix(in srgb,var(--фон) 92%,transparent);
  backdrop-filter:saturate(140%) blur(8px);
}
.шапка-в{display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);
  min-height:72px;flex-wrap:nowrap}
.лого{display:flex;align-items:center;gap:11px;flex-shrink:0;text-decoration:none;color:var(--текст);font-weight:700;font-size:17px;white-space:nowrap}
.лого img{height:34px;width:auto}
.лого span small{display:block;font-weight:400;font-size:11.5px;color:var(--текст-мягкий);letter-spacing:.04em;text-transform:uppercase}
/* ШАПКА ДЕРЖИТСЯ В ОДНУ СТРОКУ. Вместе с логотипом, телефоном и двумя
   кнопками разделы не помещались в полосу: блок с кнопками срывался
   на вторую строку, а шапка вырастала со 72 до 109 пикселей.

   ПЕРВАЯ ПОПЫТКА ЧИНИЛА ЭТО `min-width:0` — И СДЕЛАЛА ХУЖЕ. Перенос
   запрещён, ссылки внутри тоже неразрывные, а нулевой минимум разрешил
   меню сжаться уже своего содержимого: вместо второй строки текст
   пополз ПОВЕРХ телефона. Две строки читаются, наложение — нет.

   Настоящая причина была не в стилях, а в подписях: «Бортовые
   с манипулятором» и «Экскаваторы-погрузчики» — имена разделов,
   а не пункты навигации. В шапке стоят короткие (ключ «меню»
   в `site.КАТЕГОРИИ`), и полоса сходится без ужимания. */
.меню{display:flex;gap:clamp(12px,1.4vw,20px);margin-left:auto;flex-wrap:nowrap}
.меню a{color:var(--текст);text-decoration:none;padding:6px 0;
  font-size:clamp(13.5px,1.1vw,15px);white-space:nowrap;
  border-bottom:2px solid transparent}
.меню a:hover,.меню a[aria-current="page"]{border-bottom-color:var(--акцент);color:var(--акцент)}
.шапка-тел{display:flex;align-items:center;gap:12px;white-space:nowrap;flex-shrink:0}
/* Кнопка в шапке компактнее общей: 18/30 из base.css растит шапку
   до восьмидесяти пикселей и ломает высоту строки меню. */
.шапка-тел .кнопка{padding:11px 20px;font-size:15px}
.шапка-тел a.тел{font-weight:700;font-size:17px;text-decoration:none;color:var(--текст)}
/* СРЕДНИЕ ЭКРАНЫ: МЕНЮ — СВОЕЙ СТРОКОЙ. С сайтами группы рядом
   с логотипом (28.10.2026) лого, ссылки, меню и две кнопки в одну
   полосу не помещаются до 1240 px, и страница уезжала вбок (замер
   на 1000 и 1180 px). Как у витрины квартир: две строки, шапка липкая. */
@media (max-width:1240px){
  .шапка-в{flex-wrap:wrap;row-gap:0}
  .меню{order:3;width:100%;margin-left:0;padding-bottom:10px;flex-wrap:wrap}
  .шапка-тел{margin-left:auto}
}
@media (max-width:860px){
  /* ПОЛОСЕ ШАПКИ ПЕРЕНОС ЗДЕСЬ ВОЗВРАЩАЕТСЯ. Без этой строки
     `order:3; width:100%` у меню не значит ничего: `nowrap` держит
     все три блока в одной строке, меню сжимается до 96 px, а ссылки
     с `white-space:nowrap` вылезают за край экрана и тянут страницу
     вбок. На 375 px правый край меню уходил на 485-й пиксель. */
  /* НА ТЕЛЕФОНЕ ШАПКА НЕ ЛИПКАЯ. Развёрнутая в три строки, она
     занимает четверть экрана и едет за человеком по всей странице.
     Ровно так же сделано на витрине застройщика. */
  .шапка{position:static}
  .шапка-в{flex-wrap:wrap}
  /* На своей строке меню переносится: четыре пункта в один ряд
     на телефоне не помещаются. */
  .меню{order:3;width:100%;margin-left:0;gap:14px;padding-bottom:10px;flex-wrap:wrap}
  .шапка-тел{margin-left:auto}
  /* Сайты группы на телефоне — своей строкой под логотипом: рядом
     с ним места нет, а линия слева от перенесённой строки висит в пустоте. */
  .группа{width:100%;border-left:0;padding-left:0;order:1}
  .шапка-тел{order:2}
}

/* Кнопки — общие, из base.css. Здесь только фокус: у витрины он ярче,
   потому что по ней ходят с телефона на солнце. */
.кнопка:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--акцент-ярче);outline-offset:2px
}

/* ---------- первый экран ---------- */
/* Отдельной заливки у первого экрана больше нет: страница и так тёмная,
   и плашка внутри тёмной страницы читалась бы вторым фоном без причины. */
.первый{padding:var(--ш8) 0 var(--ш6)}
.первый h1{margin-bottom:var(--ш3)}
/* ДЛИННОЕ СЛОВО В ЗАГОЛОВКЕ ПЕРЕНОСИТСЯ ПО СЛОГАМ. Unbounded — широкая
   гарнитура: «манипулятора» на 375 px шире экрана на 39 px, и страница
   раздела уезжала вбок. Переносы — по `lang="ru"` в разметке. */
h1,h2{hyphens:auto;overflow-wrap:break-word}
.первый p{font-size:var(--к-крупно);color:var(--текст-тихо);max-width:58ch}
.первый .кнопки{margin-top:var(--ш6)}
/* ЧИСЛА КРУПНО — та самая «акцентность», которой просили: между
   подписью 14 px и числом 44 px разрыв, а не плавный переход. */
.цифры{display:flex;gap:var(--ш8);flex-wrap:wrap;margin-top:var(--ш8);
  padding-top:var(--ш6);border-top:1px solid var(--линия)}
.цифры div b{display:block;font-family:var(--загл);font-weight:800;
  font-size:clamp(32px,4.4vw,44px);line-height:1;letter-spacing:-.03em}
.цифры div span{font-size:var(--к-мелко);color:var(--текст-тихо)}

/* ---------- сетка техники ---------- */

.сетка{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;margin-top:26px}
.карточка{
  background:var(--поверхность);border:1px solid var(--линия);border-radius:var(--р-бол);
  overflow:hidden;display:flex;flex-direction:column;
}
.карточка img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--фон-мягкий)}
.карточка-в{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.карточка h3{margin:0}
.карточка .кратко{color:var(--текст-мягкий);font-size:14.5px;margin:0}
.карточка .цена{margin-top:auto;padding-top:12px;font-size:15px}
.карточка .цена b{font-size:22px}
.карточка .цена small{display:block;color:var(--текст-мягкий);font-size:13px;margin-top:3px}
.карточка .кнопка{margin-top:12px}

/* Фото машины в разделе. Пропорции у файлов разные, поэтому место
   резервируется здесь, а не атрибутами width/height в разметке:
   одна пара чисел на все машины даёт скачок вёрстки при загрузке. */
.фото-машины{
  width:100%;aspect-ratio:3/2;object-fit:cover;
  background:var(--фон-мягкий);
  border:1px solid var(--линия);border-radius:var(--радиус);
}

/* ---------- три пути заказчика ---------- */
.пути{align-items:stretch}
.путь{
  background:var(--фон);border:1px solid var(--линия);border-radius:var(--радиус);
  padding:22px;display:flex;flex-direction:column;gap:10px;
}
.путь p{margin:0}
.путь .кнопка{margin-top:auto}
.путь-н{
  font-family:inherit;font-weight:700;font-size:18px;line-height:1.25;
}
/* В нерабочее время подсвечиваем именно форму: звонить некому,
   и человек должен видеть, какой путь сейчас рабочий. */
.путь.выделен{border-color:var(--внимание);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--внимание) 22%,transparent)}

.скрыть-узко{display:inline-block}
@media (max-width:1040px){.скрыть-узко{display:none}}

/* ---------- характеристики ---------- */
.хар{margin:28px 0}
.хар h3{padding-bottom:8px;border-bottom:2px solid var(--линия);margin-bottom:12px}
.хар ul{margin:0;padding-left:20px}
.хар li{margin-bottom:6px}

/* ---------- таблица цен ---------- */
.обёртка-таблицы{overflow-x:auto;margin:22px 0;border:1px solid var(--линия);border-radius:var(--радиус)}
table{border-collapse:collapse;width:100%;min-width:460px;font-size:15px}
th{background:var(--фон-мягкий);text-align:left;padding:12px 16px;border-bottom:1px solid var(--линия);font-size:13.5px}
td{padding:12px 16px;border-bottom:1px solid var(--линия)}
tbody tr:last-child td{border-bottom:none}
.числа{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ЦВЕТА СТАТУСОВ — СМЕСЬЮ С ФОНОМ, А НЕ ЛИТЕРАЛОМ.
   Здесь стояли светлые плашки от прежней светлой темы (#e8f0f6,
   #fdf6e7, #e3f0ea): после перехода на тёмный набор фон остался
   светлым, а текст на нём — светлым от темы, то есть невидимым.
   Ровно та же беда, что была у липкой шапки, и ловится она так же
   плохо: цвет текста верный, врёт фон под ним. Смесь с
   `var(--поверхность)` меняется вместе с темой сама. */

/* ---------- выноска ---------- */
.выноска{
  background:color-mix(in srgb,var(--внимание) 12%,var(--поверхность));
  border:1px solid color-mix(in srgb,var(--внимание) 34%,var(--линия));
  border-left:4px solid var(--внимание);
  border-radius:var(--радиус);padding:16px 18px;margin:22px 0;
}
.выноска b{display:block;margin-bottom:5px}
.выноска p:last-child{margin-bottom:0}

/* ---------- форма ---------- */
.форма-блок{background:var(--фон-мягкий);border-top:1px solid var(--линия)}
.форма-сетка{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
@media (max-width:800px){.форма-сетка{grid-template-columns:1fr;gap:24px}}
form.заявка{display:flex;flex-direction:column;gap:14px}
.поле{display:flex;flex-direction:column;gap:6px}
.поле label{font-size:14px;font-weight:600}
.поле .подсказка{font-size:13px;color:var(--текст-мягкий);font-weight:400}
input,textarea,select{
  font:inherit;padding:12px 14px;border:1px solid var(--линия);border-radius:var(--радиус);
  background:var(--поверхность);color:var(--текст);width:100%;
}
textarea{min-height:96px;resize:vertical}
input:invalid:not(:placeholder-shown){border-color:#b3261e}
.времена{display:flex;flex-wrap:wrap;gap:8px}
.времена label{
  display:inline-flex;align-items:center;gap:7px;padding:9px 13px;
  border:1px solid var(--линия);border-radius:var(--радиус);background:var(--поверхность);
  font-size:14px;cursor:pointer;font-weight:400;
}
.времена input{width:auto;padding:0;margin:0}
.времена label:has(input:checked){border-color:var(--акцент);font-weight:600;
  background:color-mix(in srgb,var(--акцент) 22%,var(--поверхность))}
.мелко{font-size:13px;color:var(--текст-мягкий)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ответ{padding:14px 16px;border-radius:var(--радиус);font-size:15px;display:none}
.ответ.виден{display:block}
.ответ.ок{background:color-mix(in srgb,var(--успех) 14%,var(--поверхность));
  border:1px solid color-mix(in srgb,var(--успех) 42%,var(--линия));color:var(--успех)}
.ответ.ошибка{background:color-mix(in srgb,var(--беда) 14%,var(--поверхность));
  border:1px solid color-mix(in srgb,var(--беда) 42%,var(--линия));color:var(--беда)}

/* ---------- контакты ---------- */
.контакты-список{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}
.контакты-список li{display:flex;flex-direction:column;gap:3px}
.контакты-список .подпись{font-size:13px;color:var(--текст-мягкий);text-transform:uppercase;letter-spacing:.05em}
.контакты-список a{font-size:20px;font-weight:700;text-decoration:none}

/* ---------- частые вопросы ---------- */
.вопросы{max-width:78ch}
.вопросы details{border-bottom:1px solid var(--линия)}
.вопросы summary{
  cursor:pointer;list-style:none;padding:15px 34px 15px 0;position:relative;
  font-weight:600;font-size:17px;
}
.вопросы summary::-webkit-details-marker{display:none}
/* Знак раскрытия рисуем сами: встроенный треугольник в разных браузерах
   выглядит по-разному и в половине из них теряется рядом с крупным текстом. */
.вопросы summary::after{
  content:"+";position:absolute;right:6px;top:12px;
  font-size:22px;font-weight:400;color:var(--акцент);line-height:1;
}
.вопросы details[open] summary::after{content:"–"}
.вопросы summary:hover{color:var(--акцент)}
.вопросы details p{margin:0 0 16px;color:var(--текст-мягкий);max-width:70ch}

/* ---------- ссылки на соседние разделы ---------- */
.соседи{list-style:none;padding:0;margin:0;max-width:70ch}
.соседи li{padding:11px 0;border-bottom:1px solid var(--линия);font-size:16px}
.соседи li:last-child{border-bottom:none}
.соседи a{font-weight:600}

/* ---------- крошки ---------- */
.крошки{font-size:13.5px;color:var(--текст-мягкий);padding:16px 0 0}
.крошки a{color:var(--текст-мягкий)}
.крошки span{margin:0 6px}

/* ---------- подвал ---------- */
.подвал{background:#04101d;color:var(--текст-тихо);padding:var(--ш8) 0;margin-top:var(--ш8);font-size:var(--к-мелко)}
.подвал a{color:var(--текст)}
.подвал-сетка{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px}
/* Заголовки колонок подвала — h2, а не h4: последний заголовок над
   подвалом это h2, и h4 после него давал пропуск уровня. Размер задаётся
   здесь, потому что уровень заголовка про СТРУКТУРУ, а не про кегль. */
.подвал h2{color:var(--текст);font-family:var(--тело);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 var(--ш3)}
.подвал ul{list-style:none;padding:0;margin:0}
.подвал li{margin-bottom:7px}
.подвал-низ{margin-top:28px;padding-top:18px;border-top:1px solid var(--линия);font-size:13px}

/* ---------- отзывы ---------- */
.отзыв{background:var(--поверхность);border:1px solid var(--линия);border-radius:var(--р-бол);padding:var(--ш4)}
.звёзды{color:var(--внимание);font-size:17px;letter-spacing:2px}
.отзыв .кто{font-size:13.5px;color:var(--текст-мягкий);margin-top:10px}
.отзыв{display:flex;flex-direction:column;gap:8px}
.отзыв p{margin:0}
.отзыв-шапка{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.отзыв-источник{font-size:12.5px;color:var(--текст-мягкий);border:1px solid var(--линия);
  border-radius:999px;padding:2px 9px;text-decoration:none}
a.отзыв-источник:hover{color:var(--акцент);border-color:var(--акцент)}
.отзыв-заказ{font-size:13px;color:var(--текст-мягкий)}
.отзыв-текст{line-height:1.5}
.отзыв-фото{display:flex;gap:8px;flex-wrap:wrap}
.отзыв-фото img{width:96px;height:72px;object-fit:cover;border-radius:var(--радиус);
  border:1px solid var(--линия);background:var(--фон-мягкий);display:block}
.отзыв .кто{margin-top:auto}
.отзыв-ответ{font-size:14px;border-top:1px solid var(--линия);padding-top:8px}
.отзыв-ответ summary{cursor:pointer;color:var(--текст-мягкий);font-size:13.5px}
.отзыв-ответ p{margin-top:6px;color:var(--текст-мягкий)}
.звёзды.крупно{font-size:20px}

/* Сводная оценка: под заголовком раздела и над лентой отзывов. Ссылка,
   а не надпись: нажатие ведёт к самим отзывам — средняя без них
   ничего не доказывает. */
.оценка-сводка{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:4px 0 14px;color:var(--текст);text-decoration:none;font-size:15px}
.оценка-сводка:hover b{color:var(--акцент)}
.оценка-строка{display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap;margin:4px 0 14px}
.оценка-строка .оценка-сводка{margin:0}
.оценка-авито{font-size:14px;color:var(--текст-мягкий)}
.оценка-авито:hover{color:var(--акцент)}
.оценка-кратко{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;
  color:var(--текст-мягкий);text-decoration:none}
.оценка-кратко .звёзды{font-size:14px;letter-spacing:1px}
.отзывы-машины{margin-top:30px;padding-top:22px;border-top:1px solid var(--линия)}
.отзывы-машины h3{margin-bottom:4px}
.отзывы-машины .сетка{margin-top:12px}

/* ---------- галерея работ ---------- */
.работы{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:22px}
.работа{margin:0;background:var(--поверхность);border:1px solid var(--линия);
  border-radius:var(--р-бол);overflow:hidden;display:flex;flex-direction:column}
.работа-фото{display:block;background:var(--фон-мягкий)}
.работа-фото img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.работа figcaption{padding:12px 14px 14px;display:flex;flex-direction:column;gap:5px}
.работа-текст{font-size:14.5px;color:var(--текст-мягкий)}
.показать-все-место{margin-top:18px;text-align:center}

/* ---------- просмотр фото ---------- */
.просмотр{border:none;padding:0;background:transparent;max-width:100vw;max-height:100vh;
  width:100vw;height:100vh;color:var(--текст)}
.просмотр::backdrop{background:rgba(2,8,16,.88)}
.просмотр[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.просмотр img{max-width:min(1400px,94vw);max-height:82vh;object-fit:contain;border-radius:var(--радиус)}
.просмотр-подпись{margin:0;font-size:14.5px;color:var(--текст-тихо);max-width:94vw;text-align:center}
.просмотр-закрыть,.просмотр-листать{position:fixed;background:var(--фон-тёмный);color:var(--текст);
  border:1px solid var(--линия);border-radius:999px;width:46px;height:46px;font-size:26px;
  line-height:1;cursor:pointer}
.просмотр-закрыть{top:14px;right:14px}
.просмотр-листать{top:50%;transform:translateY(-50%)}
.просмотр-листать.назад{left:12px}
.просмотр-листать.вперёд{right:12px}
@media (max-width:600px){.просмотр-листать{top:auto;bottom:16px;transform:none}}