/*
 * Посадочные страницы маршрутов для типов специалистов (/arquitectos/ и
 * следующие за ней) и собирающая их страница-хаб /soluciones/. Подключается
 * только на этих страницах (см. header.php и ffj_is_route_page()), поэтому
 * селекторы здесь могут быть общими — main, html.
 */

/*
 * У main в global.css стоит overflow: hidden — он режет горизонтальные вылеты,
 * но заодно делает main скролл-контейнером, и position: sticky внутри перестаёт
 * работать. clip режет так же, но скролл-контейнера не создаёт, и липкая строка
 * маршрута остаётся липкой.
 */
main {
    overflow: clip;
}

/*
 * Прокрутка к якорям — браузерная: клик по пункту меню плавно доводит до
 * секции, а scroll-margin-top ниже отводит её из-под шапки и липкой строки.
 */
html {
    scroll-behavior: smooth;
}

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

.route-page {
    color: #24262b;
}

/* Липкая навигация маршрута
   ------------------------------------------------------------------------ */

/*
 * Шапка сайта тоже липкая, поэтому строка маршрута прилипает не к нулю, а под
 * неё: --ffj-header-h — нижний край шапки в прилипшем состоянии, его держит
 * актуальным js/routes.js. Минус пиксель — перекрытие: при дробной высоте шапки
 * (а она дробная почти всегда) без него между полосами остаётся волосяной
 * просвет, сквозь который видно контент.
 */
/*
 * Разделительная линия снизу — внутренней тенью, а не border-bottom: бордюр
 * входил бы в высоту строки и сдвигал всё её содержимое на пиксель вверх.
 */
.route-nav {
    position: sticky;
    top: calc(var(--ffj-header-h, 0px) - 1px);
    z-index: 1030;
    background: #fff;
    box-shadow: inset 0 -1px 0 #eef1f4, 0 2px 6px rgba(13, 20, 49, .04);
}

/*
 * Высота строки задана явно, а пункты тянутся на всю её высоту (align-items:
 * stretch): подпись, ссылки и кнопка выравниваются по одной линии независимо от
 * метрик шрифта и от того, зарезервировал ли браузер место под горизонтальный
 * скроллбар списка. Красное подчёркивание при этом ложится ровно на нижний край.
 */
.route-nav__inner {
    align-items: stretch;
    display: flex;
    gap: 24px;
    height: 64px;
}

.route-nav__label {
    align-items: center;
    color: #24262b;
    display: flex;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* На узком экране пункты не переносятся, а прокручиваются: строка остаётся
   в одну линию, и красная кнопка всегда на своём месте справа.

   height: 100% обязателен: из-за overflow-x список — скролл-контейнер, а такой
   флекс-элемент браузер по align-items: stretch не растягивает и оставляет по
   высоте контента. Пункты тогда прижаты к верху строки, и текст в них стоит
   заметно выше подписи слева и кнопки справа. */
.route-nav__list {
    align-items: stretch;
    display: flex;
    flex: 1 1 auto;
    gap: 22px;
    height: 100%;
    list-style: none;
    margin: 0;
    overflow-x: auto;
    padding: 0;
    scrollbar-width: none;
}

.route-nav__item {
    display: flex;
}

.route-nav__list::-webkit-scrollbar {
    display: none;
}

/* Растворяющийся край — единственный признак того, что строку можно
   прокрутить. Классы ставит js/routes.js: is-scrollable — когда прокручивать
   есть что, is-at-start / is-at-end — когда строка упёрлась в свой край. Гаснет
   только тот край, за которым ещё есть пункты: маска, которая висит всегда,
   прятала под собой последний пункт даже в конце прокрутки.

   Ширина каждого края — своя переменная, одна маска на все четыре состояния;
   при 0px градиент вырождается в сплошную заливку и край не трогает. */
.route-nav__list.is-scrollable {
    --route-nav-fade-left: 28px;
    --route-nav-fade-right: 28px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--route-nav-fade-left), #000 calc(100% - var(--route-nav-fade-right)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--route-nav-fade-left), #000 calc(100% - var(--route-nav-fade-right)), transparent);
}

.route-nav__list.is-scrollable.is-at-start {
    --route-nav-fade-left: 0px;
}

.route-nav__list.is-scrollable.is-at-end {
    --route-nav-fade-right: 0px;
}

/*
 * Подчёркивание активного пункта — абсолютным псевдоэлементом, а не бордюром:
 * бордюр входит в высоту ссылки, текст центрируется в остатке и встаёт выше
 * середины строки. Псевдоэлемент из потока выключен, поэтому текст центрируется
 * по всей высоте — ровно так же, как подпись слева и кнопка справа.
 */
.route-nav__link {
    align-items: center;
    color: #4a5073;
    display: flex;
    font-size: 14px;
    position: relative;
    white-space: nowrap;
}

.route-nav__link::after {
    bottom: 0;
    content: '';
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
}

.route-nav__link:hover,
.route-nav__link.is-active {
    color: var(--ffj-red-01);
}

.route-nav__link:hover::after,
.route-nav__link.is-active::after {
    background: var(--ffj-red-01);
}

.route-nav__cta {
    align-self: center;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Кнопка ведёт к последней секции, поэтому подсвечивается наравне с пунктами —
   но подчёркиванием её не отметить, отмечаем цветом. */
.route-nav__cta.is-active {
    background: var(--ffj-red-02);
}

/* Секции
   ------------------------------------------------------------------------ */

/* Секция после прокрутки к якорю должна встать под обеими липкими полосами, а
   не скрыться за ними. Оба слагаемых считает js/routes.js. */
.route-hero,
.route-section {
    scroll-margin-top: calc(var(--ffj-header-h, 0px) + var(--ffj-route-nav-h, 64px) + 12px);
}

.route-hero {
    background: #fff;
    padding: 40px 0 56px;
}

.route-hero__title {
    color: #24262b;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 20px;
}

.route-hero__text {
    font-size: 1.0625rem;
    line-height: 1.6;
    margin-bottom: 28px;
    max-width: 520px;
}

/* Кто ведёт проект — приписка под подзаголовком. Мельче и тише его: это не
   второе обещание первого экрана, а уточнение к первому. */
.route-hero__note {
    color: #4a5073;
    font-size: .9375rem;
    line-height: 1.6;
    margin-bottom: 28px;
    margin-top: -12px;
    max-width: 520px;
}

.route-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Третье действие первого экрана: не кнопка, а ссылка — рядом с двумя кнопками
   третья читалась бы как равная им по весу. */
.route-hero__link {
    color: var(--ffj-red-01);
    display: inline-block;
    font-size: .9375rem;
    font-weight: 700;
    margin-top: 18px;
}

.route-hero__link:hover {
    color: var(--ffj-red-02);
}

.route-hero__link i {
    font-size: .75rem;
    margin-left: 6px;
    transition: transform .2s ease;
}

.route-hero__link:hover i {
    transform: translateX(4px);
}

.route-hero__media {
    position: relative;
}

.route-hero__media img {
    border-radius: 14px;
    display: block;
    height: 420px;
    object-fit: cover;
    width: 100%;
}

.route-section {
    padding: 56px 0;
}

.route-section--grey {
    background: var(--ffj-grey-02);
}

.route-section__title {
    color: #24262b;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 14px;
}

.route-section__lead {
    color: #4a5073;
    font-size: 1.0625rem;
    line-height: 1.6;
    margin-bottom: 28px;
    max-width: 720px;
}

.route-section__more {
    margin-top: 28px;
}

/* Абзац под блоком: оговорка ко всему его содержимому сразу (к обеим половинам
   ряда, ко всему списку этапов), поэтому стоит под ним, а не внутри одной
   карточки или шага. Префикс .route-page — ради веса: .article p в global.css
   перебивает кегль абзаца. */
.route-page .route-section__note {
    color: #4a5073;
    font-size: .9375rem;
    line-height: 1.6;
    margin-top: 24px;
    max-width: 860px;
}

/* Карточки: дизайны, серии, проекты
   ------------------------------------------------------------------------ */

.route-cards {
    display: grid;
    gap: 24px;
}

.route-cards--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.route-cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.route-cards--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/*
 * Пять колонок — под блок имитаций на маршруте архитектора: пять фактур должны
 * читаться как один ряд, иначе пятая карточка уезжает на вторую строку и набор
 * перестаёт выглядеть законченным.
 */
.route-cards--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.route-card {
    background: #fff;
    border: 1px solid #eef1f4;
    border-radius: 14px;
    color: inherit;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}

.route-card:hover {
    box-shadow: 0 12px 28px rgba(13, 20, 49, .1);
    color: inherit;
    transform: translateY(-2px);
}

.route-card__media {
    background: var(--ffj-grey-02);
    display: block;
}

.route-card__media img {
    display: block;
    height: 200px;
    object-fit: cover;
    width: 100%;
}

.route-cards--2 .route-card__media img {
    height: 240px;
}

.route-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px 20px;
}

.route-card__title {
    color: #24262b;
    font-size: 1.0625rem;
    font-weight: 700;
}

.route-card__title--upper {
    letter-spacing: .03em;
    text-transform: uppercase;
}

.route-card__meta {
    color: var(--ffj-red-01);
    font-size: .875rem;
    font-weight: 600;
}

.route-card__text {
    color: #4a5073;
    font-size: .875rem;
    line-height: 1.5;
}

/*
 * Текст и стрелка — два флекс-элемента, а не строка с иконкой: в узкой
 * карточке строка переносилась по пробелу перед <i>, и стрелка уезжала одна
 * на следующую строку. Теперь переносится только сам текст, а стрелка стоит
 * справа от него. Ссылка везде — элемент флекс-колонки карточки, так что
 * inline-flex здесь ничего не меняет в её собственном месте в карточке.
 */
.route-card__link {
    align-items: center;
    color: var(--ffj-red-01);
    display: inline-flex;
    font-size: .875rem;
    font-weight: 700;
    gap: 6px;
    margin-top: auto;
    padding-top: 10px;
}

.route-card__link i {
    flex: 0 0 auto;
    font-size: .75rem;
    transition: transform .2s ease;
}

.route-card:hover .route-card__link i,
.route-doc:hover .route-card__link i,
.route-tile:hover .route-card__link i,
.route-compare__item:hover .route-card__link i {
    transform: translateX(4px);
}

/* Плитки с иконкой: роли на «Soluciones», быстрые входы на маршрутах
   ------------------------------------------------------------------------ */

/*
 * Два входа в решения рядом: по роли и по типу проекта. Списки разной длины
 * (четыре роли и пять типологий), поэтому столбцы не выравниваются по низу —
 * каждый заканчивается там, где заканчивается его набор.
 */
.route-groups {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
 * Каждый набор — на своей подложке. Плитки в обоих столбцах одинаковые, и без
 * подложки десять строк читаются как один длинный список, а не как два входа
 * на выбор; линии в зазоре для этого мало, а панель видно с любого расстояния.
 *
 * Подложка светлее плиток не бывает, поэтому секция под блоком должна быть
 * белой: на сером фоне панель пропадёт (см. front-page.php — там у секции
 * поэтому нет bg-grey).
 */
.route-group {
    background: var(--ffj-grey-02);
    border-radius: 16px;
    padding: 22px;
}

/*
 * Граница плитки внутри панели: на сером #eef1f4 почти не видно, и карточки
 * теряют края. Тот же цвет, что у прочих границ темы, на полтона темнее.
 */
.route-group .route-tile {
    border-color: #e7ecf2;
}

/* Подпись столбца — метка, а не заголовок раздела: над блоком уже есть свой. */
.route-group__title {
    color: var(--ffj-red-01);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    margin: 0 0 16px;
    text-transform: uppercase;
}

.route-tiles {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/*
 * Столбиком, в половину ширины. Плитка разворачивается в строку: иконка слева
 * от текста, а не над ним — вертикальной она заняла бы вдвое больше высоты, и
 * пять типологий уехали бы далеко ниже четырёх ролей.
 */
.route-tiles--stack {
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
}

.route-tiles--stack .route-tile {
    align-items: flex-start;
    flex-direction: row;
    gap: 16px;
    padding: 16px 18px;
}

.route-tiles--stack .route-tile__icon {
    font-size: 1.125rem;
    height: 44px;
    margin-bottom: 0;
    width: 44px;
}

/*
 * Обёртка текста нужна только строке: без неё название, обещание и ссылка стали
 * бы соседями иконки в том же ряду. В вертикальной плитке она ничего не меняет
 * — это та же колонка, что и сама плитка.
 */
.route-tile__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

/*
 * Плитка — не обложка, а иконка и две строки, поэтому в отличие от .route-card
 * медиа-блока у неё нет и всё содержимое лежит в общем padding. Модификаторы:
 * --accent — красная круглая иконка вместо серой квадратной,
 * --soon    — плитка без ссылки (маршрут ещё не опубликован).
 */
.route-tile {
    background: #fff;
    border: 1px solid #eef1f4;
    border-radius: 14px;
    color: inherit;
    display: flex;
    flex-direction: column;
    padding: 22px;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

/*
 * :not(.route-tile--soon) — маршрут без опубликованной страницы выводится тем же
 * <a>, но без href: это уже не ссылка, и отзываться на наведение ей нечем.
 */
.route-tile:not(.route-tile--soon):hover {
    border-color: var(--ffj-red-01);
    box-shadow: 0 12px 28px rgba(13, 20, 49, .1);
    color: inherit;
    transform: translateY(-2px);
}

.route-tile__icon {
    align-items: center;
    background: var(--ffj-grey-02);
    border-radius: 12px;
    color: #4a5073;
    display: flex;
    flex: 0 0 auto;
    font-size: 1.375rem;
    height: 64px;
    justify-content: center;
    margin-bottom: 16px;
    transition: background-color .25s ease, color .25s ease;
    width: 64px;
}

.route-tile:not(.route-tile--soon):hover .route-tile__icon {
    background: var(--ffj-red-01);
    color: #fff;
}

/*
 * Быстрые входы маршрута: та же плитка, но иконка сразу красная и круглая.
 * Цвет здесь несёт смысл: серая квадратная плитка ведёт в раздел, красная
 * круглая — конкретное действие монтажника.
 *
 * :not(.route-tile--soon) — не ради «скоро», а ради веса: без него правило выше
 * оказывается специфичнее и на наведении гасит красный обратно.
 */
.route-tile--accent .route-tile__icon {
    background: var(--ffj-red-01);
    border-radius: 50%;
    color: #fff;
}

.route-tile--accent:not(.route-tile--soon):hover .route-tile__icon {
    background: var(--ffj-red-02);
    color: #fff;
}

/*
 * Тег на месте иконки (узлы на маршруте монтажника). Плитка — флекс-колонка,
 * поэтому без align-self тег растягивается на всю её ширину и перестаёт быть
 * тегом. Отступ снизу — тот же, что у иконки, чтобы заголовок стоял на месте.
 */
.route-tile > .route-tag {
    align-self: flex-start;
    margin-bottom: 14px;
}

.route-tile__title {
    color: #24262b;
    font-size: 1.0625rem;
    font-weight: 700;
}

/*
 * Обещание маршрута — между «кому» и «что внутри». Тон темнее, чем у списка
 * ниже: это фраза, которую читают, а summary — перечисление, которое сканируют.
 */
.route-tile__lead {
    color: #4a5073;
    font-size: .9375rem;
    line-height: 1.45;
    margin-top: 8px;
}

/* Серый подобран под контраст AA на белой плитке: 4.8:1 при 13px, у прежнего
   #8a90a8 было 3.2:1. */
.route-tile__meta {
    color: #6b7287;
    font-size: .8125rem;
    line-height: 1.5;
    margin-top: 6px;
}

/*
 * Пометка на месте ссылки: margin-top: auto прижимает её к низу так же, как
 * .route-card__link в готовых карточках, — ряд остаётся ровным независимо от
 * того, сколько маршрутов уже открыто.
 *
 * Серый тот же, что у .route-tile__meta: «скоро» отличает от ссылки цвет, а
 * совсем бледная пометка (#b6bacb, 1.9:1) просто не читалась.
 */
.route-tile__note {
    color: #6b7287;
    font-size: .875rem;
    font-weight: 700;
    margin-top: auto;
    padding-top: 10px;
}

/* Ряд кнопок вне первого экрана — те же правила, что у .route-hero__actions. */
.route-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Документация
   ------------------------------------------------------------------------ */

.route-tag {
    background: var(--ffj-red-01);
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1;
    padding: 6px 8px;
    text-transform: uppercase;
    white-space: nowrap;
}

/*
 * Колонка узкая: в диапазоне 992–1199px она сжимается до ~290px, поэтому кегль
 * списка и тега заметно мельче основного текста страницы — иначе длинные
 * подписи вроде «Solicitar la información disponible» ломаются надвое.
 */
.route-aside {
    background: #fff;
    border: 1px solid #eef1f4;
    border-radius: 14px;
    height: 100%;
    padding: 16px;
}

.route-aside__title {
    color: #24262b;
    font-size: 1.125rem;
    font-weight: 700;
}

.route-aside__note {
    color: #8a90a8;
    font-size: .6875rem;
    margin-bottom: 16px;
}

/* Префикс .route-page здесь не для порядка, а ради веса: в global.css есть
   `.article ul li` и `.article p` с font-size: 1rem, и без префикса они
   перебивают правила ниже — список карточки съезжал обратно на 16px. */
.route-page .route-aside__list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.route-page .route-aside__list li {
    align-items: center;
    border-top: 1px solid #eef1f4;
    display: flex;
    font-size: 0.8rem;
    gap: 6px;
    padding: 9px 0;
}

.route-page .route-aside__list li:first-child {
    border-top: none;
}

/* min-width, а не фиксированная ширина: колонка тегов ровная на текущих
   подписях, но более длинный перевод растянет тег, а не вылезет за него. */
.route-page .route-aside__list .route-tag {
    flex: 0 0 auto;
    font-size: 10px;
    letter-spacing: .02em;
    min-width: 70px;
    padding: 5px 4px;
    text-align: center;
}

.route-docs {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.route-doc {
    align-items: flex-start;
    background: #fff;
    border: 1px solid #eef1f4;
    border-radius: 14px;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px;
    transition: box-shadow .25s ease, transform .25s ease;
}

.route-doc:hover {
    box-shadow: 0 12px 28px rgba(13, 20, 49, .1);
    color: inherit;
    transform: translateY(-2px);
}

.route-doc__title {
    color: #24262b;
    font-size: 1.0625rem;
    font-weight: 700;
}

.route-doc__text {
    color: #4a5073;
    font-size: .875rem;
}

/* Система монтажа: схема узла и шаги 01-06
   ------------------------------------------------------------------------ */

/* Схема слева, шаги справа: колонки равные, потому что схема без подписей
   рядом не читается, а шаги без схемы — просто список. */
.route-system {
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Пара равных карточек: преимущество и оговорка к нему. */
.route-duo {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
 * Ряд «карточка и кадр» вместо двух равных карточек. Колонка кадра ограничена
 * натуральной шириной фотографии узла (348px): на половине ряда её пришлось бы
 * растягивать почти вдвое, и от снимка осталась бы каша. По высоте кадр идёт
 * вровень с карточкой рядом, подрезаясь по cover.
 */
.route-duo--media {
    grid-template-columns: minmax(0, 1fr) minmax(0, 348px);
}

.route-duo__media {
    border-radius: 14px;
    display: block;
    height: 100%;
    max-width: 348px;
    object-fit: cover;
    width: 100%;
}

.route-scheme {
    background: #fff;
    border: 1px solid #eef1f4;
    border-radius: 14px;
    padding: 24px;
}

/* Схема тянется по ширине колонки. В файле она заметно шире, чем выводится,
   поэтому на ретине остаётся резкой. */
.route-scheme img {
    display: block;
    height: auto;
    width: 100%;
}

/* Три разреза подконструкции под схемой. Рисунки разных пропорций и на белом
   фоне, поэтому вписываются в одинаковую карточку целиком: подрезать разрез
   нельзя, он и есть содержание. */
.route-shots {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 40px;
}

.route-shots__item {
    background: #fff;
    border: 1px solid #eef1f4;
    border-radius: 14px;
    margin: 0;
    padding: 20px;
}

/* Два кадра вместо трёх: одно и то же место реза, сделанное разным инструментом.
   Колонок здесь всегда две, поэтому кадр шире и выше, чем в ряду из трёх. */
.route-shots--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
 * Здесь кадр заполняет карточку целиком (cover), а не вписывается в неё: это
 * не разрез, а фактура панели, и она одинаковая по всей высоте — обрезать её
 * нечем, а вписанная она давала бы узкую полосу в белом поле.
 */
.route-shots--2 .route-shots__item img {
    height: 420px;
    object-fit: cover;
}

/* Подпись под кадром: без неё две тёмные фактуры читаются как один и тот же
   кадр, и разница в кромке — то, ради чего пара и стоит на странице, — теряется. */
.route-shots__note {
    color: #4a5073;
    font-size: .9375rem;
    line-height: 1.5;
    margin-top: 16px;
}

.route-shots__item img {
    display: block;
    height: 300px;
    object-fit: contain;
    width: 100%;
}

/* Кадр, который открывается в лайтбоксе. Курсор — единственное, чем карточка
   про это говорит, и это обычный курсор ссылки: кадр по клику не приближается,
   а открывается отдельным окном, как и всё остальное на маршруте. Ссылка
   блочная, иначе под кадром осталась бы полоса от строчной высоты. */
.route-shots__link {
    cursor: pointer;
    display: block;
}

/*
 * Один чертёж во всю ширину ряда. Общая высота ряда ему не подходит: лист
 * читают по размерам и подписям у линий, и в полосе высотой с фотографию они
 * превращаются в точки. Поэтому лист идёт своей высотой, а разглядывают его в
 * лайтбоксе — там он открывается целиком.
 */
.route-shots--1 {
    grid-template-columns: minmax(0, 1fr);
}

.route-shots--1 .route-shots__item img {
    height: auto;
}

/*
 * Заголовок над рядом кадров. Отступ сверху он забирает себе — тот самый, с
 * которым ряд отходит от текста блока, — а сам ряд подтягивается к заголовку
 * вплотную: иначе подпись висела бы ровно посередине между текстом блока и
 * кадром и не относилась бы ни к тому, ни к другому.
 */
.route-shots__title {
    color: #24262b;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 40px 0 0;
}

.route-shots__title + .route-shots {
    margin-top: 16px;
}

/* Ролик десятиминутный и весит десятки мегабайт, поэтому грузится только по
   кнопке: до нажатия страница тянет один постер. */
.route-video {
    margin-top: 40px;
}

.route-video video {
    background: #24262b;
    border-radius: 14px;
    display: block;
    height: auto;
    width: 100%;
}

/*
 * Два ролика в ряд: съёмка реза и разбор дефекта от пыли — их смотрят вместе,
 * один за другим.
 *
 * Кадры у роликов разной пропорции, поэтому оба живут в прямоугольнике второго
 * (768:540) — иначе низ у плееров не сходится. Растянут при этом только кадр
 * первого ролика: он вписывается в высоту (contain, обрезать нечего), а поля
 * сверху и снизу закрывает та же тёмная подложка, что стоит под плеером.
 * Пропорция второго — потому что у него внизу идут субтитры, и ужимать его в
 * чужую рамку значило бы мельчить их ещё сильнее.
 */
.route-videos {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 40px;
}

.route-videos .route-video {
    margin-top: 0;
}

.route-videos video {
    aspect-ratio: 768 / 540;
    object-fit: contain;
}

/*
 * Шаги идут строго друг за другом, и говорит об этом только вертикальная линия
 * между номерами. Она рисуется псевдоэлементом от каждого шага вниз, у
 * последнего гасится — иначе линия висела бы хвостом под шестым номером.
 */
.route-step {
    display: grid;
    gap: 2px 18px;
    grid-template-columns: 44px minmax(0, 1fr);
    padding-bottom: 22px;
    position: relative;
}

.route-step:last-child {
    padding-bottom: 0;
}

.route-step::before {
    background: #eef1f4;
    bottom: 0;
    content: '';
    left: 21px;
    position: absolute;
    top: 44px;
    width: 2px;
}

.route-step:last-child::before {
    display: none;
}

/* Номер занимает обе строки текста, а подпись и пояснение прижаты к его
   середине — так номер читается как метка пары, а не первой строки. */
.route-step__num {
    align-items: center;
    background: var(--ffj-red-01);
    border-radius: 50%;
    color: #fff;
    display: flex;
    font-size: .8125rem;
    font-weight: 700;
    grid-row: span 2;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.route-step__title {
    align-self: end;
    color: #24262b;
    font-weight: 700;
}

.route-step__text {
    align-self: start;
    color: #4a5073;
    font-size: .875rem;
}

/* Порядок монтажа: восемь этапов 01-08
   ------------------------------------------------------------------------ */

/*
 * Те же шаги, что у системы монтажа, но с абзацем пояснения вместо подписи в
 * одну строку, поэтому текст крупнее и ширина строки ограничена. Линия между
 * номерами здесь заканчивается стрелкой: этапы идут строго один за другим, и
 * следующий нельзя начать раньше предыдущего.
 */
.route-steps--flow {
    max-width: 860px;
}

.route-steps--flow .route-step {
    padding-bottom: 30px;
}

.route-steps--flow .route-step::before {
    background: #c4c9d6;
    bottom: 6px;
}

/* Наконечник — уголок из двух рамок, повёрнутый остриём вниз. Центр совпадает
   с осью линии (left 21px + половина её ширины). */
.route-steps--flow .route-step::after {
    border-bottom: 2px solid #c4c9d6;
    border-right: 2px solid #c4c9d6;
    bottom: 7px;
    content: '';
    height: 10px;
    left: 17px;
    position: absolute;
    transform: rotate(45deg);
    width: 10px;
}

/* Повтор правила базового шага: .route-steps--flow .route-step выше весит
   столько же и стоит позже, поэтому без него хвост остался бы и у последнего. */
.route-steps--flow .route-step:last-child {
    padding-bottom: 0;
}

.route-steps--flow .route-step:last-child::after {
    display: none;
}

/* Название встаёт по центру номера, а пояснение — под ним, а не вровень с
   кругом: в две строки номер для абзаца слишком мал. */
.route-steps--flow .route-step__title {
    align-self: start;
    line-height: 1.5;
    padding-top: 10px;
}

.route-steps--flow .route-step__text {
    font-size: .9375rem;
    line-height: 1.6;
    margin-top: 4px;
}

.route-step__note {
    color: #4a5073;
    font-weight: 400;
}

/* Отметки: что даёт сухой монтаж
   ------------------------------------------------------------------------ */

/* Префикс .route-page — ради веса: .article ul li в global.css перебивает
   кегль и отступы списка (та же причина, что у .route-aside__list выше). */
.route-page .route-checks {
    list-style: none;
    margin: 0;
    padding: 0;
}

.route-page .route-checks li {
    border-top: 1px solid #eef1f4;
    font-size: .9375rem;
    padding: 11px 0 11px 30px;
    position: relative;
}

.route-page .route-checks li:first-child {
    border-top: none;
}

/* Галочка — символом в псевдоэлементе, а не иконкой Font Awesome: шрифт иконок
   догружается уже после отрисовки, и до тех пор на месте галочки пусто. */
.route-page .route-checks li::before {
    color: var(--ffj-green-01);
    content: '\2713';
    font-weight: 700;
    left: 4px;
    line-height: inherit;
    position: absolute;
    top: 11px;
}

/* Белая плашка без ссылки: колонки блока «в обра» и всё, что нужно просто
   показать карточкой на сером фоне. */
.route-panel {
    background: #fff;
    border: 1px solid #eef1f4;
    border-radius: 14px;
    height: 100%;
    padding: 26px;
}

.route-page .route-panel p {
    color: #4a5073;
    font-size: .9375rem;
    margin-bottom: 0;
}

/* Сравнение серий
   ------------------------------------------------------------------------ */

/*
 * Таблица под карточками серий: одни и те же характеристики у обеих серий
 * рядом. Плашка белая, потому что блок серий стоит на сером фоне; overflow
 * скрыт, чтобы серая шапка таблицы не вылезала из скругления.
 */
.route-specs {
    background: #fff;
    border: 1px solid #eef1f4;
    border-radius: 14px;
    margin-top: 24px;
    overflow: hidden;
}

/*
 * table-layout: fixed — иначе ширину колонок задаёт самая длинная строка
 * («Característica diferencial»), и колонки серий получаются разными.
 */
.route-specs__table {
    border-collapse: collapse;
    margin: 0;
    table-layout: fixed;
    width: 100%;
}

.route-specs__table th,
.route-specs__table td {
    font-size: .875rem;
    line-height: 1.5;
    padding: 14px 20px;
    text-align: left;
    vertical-align: top;
}

/* Шапка — названия серий. Первая ячейка пустая: это угол таблицы. */
.route-specs__table thead th {
    background: var(--ffj-grey-02);
    color: #24262b;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

/* Ширина задаётся только шапке: при fixed остальные колонки делят остаток. */
.route-specs__table thead th:first-child {
    width: 26%;
}

.route-specs__table tbody th {
    color: #24262b;
    font-weight: 700;
}

.route-specs__table tbody td {
    color: #4a5073;
}

.route-specs__table tbody tr + tr > * {
    border-top: 1px solid #eef1f4;
}

/*
 * Строка «с чего начать» — единственная развёрнутая: подводка, условия
 * списком и ссылка в каталог своей серии.
 */
.route-specs__lead {
    color: #24262b;
    display: block;
    font-weight: 700;
}

/* Префикс .route-page — ради веса: .article ul li в global.css перебивает
   кегль и отступы списка (та же причина, что у .route-aside__list). */
.route-page .route-specs__list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.route-page .route-specs__list li {
    font-size: .875rem;
    line-height: 1.5;
    padding: 3px 0 3px 16px;
    position: relative;
}

.route-page .route-specs__list li::before {
    background: var(--ffj-red-01);
    border-radius: 50%;
    content: '';
    height: 5px;
    left: 0;
    position: absolute;
    top: 12px;
    width: 5px;
}

.route-specs__link {
    color: var(--ffj-red-01);
    display: inline-block;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .03em;
    margin-top: 12px;
    text-transform: uppercase;
}

.route-specs__link:hover {
    color: var(--ffj-red-02);
}

.route-specs__link i {
    font-size: .6875rem;
    margin-left: 6px;
    transition: transform .2s ease;
}

.route-specs__link:hover i {
    transform: translateX(4px);
}

/* Сравнения
   ------------------------------------------------------------------------ */

.route-compare {
    display: grid;
    gap: 16px;
    max-width: 860px;
}

.route-compare__item {
    align-items: center;
    background: #fff;
    border: 1px solid #eef1f4;
    border-left: 4px solid var(--ffj-red-01);
    border-radius: 10px;
    color: inherit;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: 20px 24px;
    transition: box-shadow .25s ease;
}

.route-compare__item:hover {
    box-shadow: 0 12px 28px rgba(13, 20, 49, .1);
    color: inherit;
}

.route-compare__title {
    color: #24262b;
    display: block;
    font-weight: 700;
}

.route-compare__text {
    color: #4a5073;
    display: block;
    font-size: .875rem;
    margin-top: 4px;
}

.route-compare .route-card__link {
    flex: 0 0 auto;
    margin-top: 0;
    padding-top: 0;
}

/*
 * Таблица KMEW над карточками сравнений. Восемь колонок ложатся в контейнер
 * только на широком экране; уже таблица прокручивается вбок внутри своей
 * плашки, а не тянет за собой страницу. Колонка подписей при этом липкая —
 * иначе на втором экране прокрутки уже не видно, какая строка о чём.
 *
 * border-collapse: separate — у липкой ячейки при collapse рамки остаются на
 * месте, а сама ячейка уезжает, поэтому разделители нарисованы у каждой ячейки.
 *
 * Полоса прокрутки скрыта, и обрезанная таблица на телефоне выглядела
 * законченной: видно две колонки из восьми, и ничто не говорит, что дальше есть
 * ещё. Признак — тень у правого края плашки. Она нарисована фоном самой плашки
 * (scroll — стоит у края окна прокрутки), а белая заплатка поверх неё (local —
 * едет вместе с таблицей) в конце прокрутки доезжает до края и тень гасит:
 * дальше листать некуда. Где таблица помещается целиком, заплатка стоит у края
 * с самого начала, и тени нет вовсе. Скрипт для этого не нужен.
 *
 * Фон плашки виден только сквозь ячейки, поэтому свой фон остался лишь у
 * липкой колонки, которой нужно закрывать уезжающие под неё строки, и у
 * подсвеченной колонки KMEW. Остальные прозрачны — на белой плашке это тот же
 * белый.
 */
.route-materials {
    background:
        linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right / 48px 100% no-repeat local,
        linear-gradient(to left, rgba(13, 20, 49, .18), rgba(13, 20, 49, 0)) right / 18px 100% no-repeat scroll,
        #fff;
    border: 1px solid #eef1f4;
    border-radius: 14px;
    overflow-x: auto;
}

/* Обводка фокуса — тенью: global.css гасит outline у любого :focus через !important. */
.route-materials:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ffj-blue-01);
}

.route-materials__table {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    min-width: 900px;
    table-layout: fixed;
    width: 100%;
}

.route-materials__table th,
.route-materials__table td {
    color: #4a5073;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.45;
    padding: 12px 10px;
    text-align: center;
    vertical-align: middle;
}

.route-materials__table thead th {
    vertical-align: top;
}

.route-materials__table tbody > tr > * {
    border-top: 1px solid #eef1f4;
}

/* Ширина задаётся только колонке подписей: при fixed остальные делят остаток. */
.route-materials__table th:first-child {
    background: #fff;
    box-shadow: inset -1px 0 0 #eef1f4;
    color: #24262b;
    font-weight: 700;
    left: 0;
    padding-left: 16px;
    position: sticky;
    text-align: left;
    width: 200px;
    z-index: 1;
}

.route-materials__table thead th:first-child {
    vertical-align: bottom;
}

/* Снимки у KMEW разной пропорции (у HPL — 500×367), поэтому рамка общая. */
.route-materials__photo {
    aspect-ratio: 260 / 172;
    border-radius: 8px;
    display: block;
    height: auto;
    margin-bottom: 10px;
    object-fit: cover;
    width: 100%;
}

.route-materials__name {
    color: #24262b;
    display: block;
    font-weight: 700;
}

.route-materials__material {
    display: block;
    font-size: .75rem;
    margin-top: 2px;
}

/* Колонка KMEW подсвечена, как и в таблице производителя. */
.route-materials__table .is-kmew {
    background: #fff5f4;
    color: #24262b;
    font-weight: 700;
}

.route-materials__table .is-kmew .route-materials__name {
    color: var(--ffj-red-01);
}

.route-materials__table .is-kmew .route-materials__material {
    font-weight: 400;
}

.route-stars {
    font-size: 1rem;
    letter-spacing: 0;
    white-space: nowrap;
}

.route-stars__on {
    color: var(--ffj-red-01);
}

.route-stars__off {
    color: #dfe3ea;
}

/* Префикс .route-page — ради веса: .article p в global.css перебивает кегль и
   нижний отступ абзаца. */
.route-page .route-materials__source {
    color: #7a7f99;
    font-size: .8125rem;
    margin: 10px 0 32px;
}

/* Поддержка проекта
   ------------------------------------------------------------------------ */

/*
 * Пункты помощи — списком, а не плиткой: в плитку они встают рваным рядом, как
 * только их число перестаёт делиться на колонки, а списком читаются как
 * перечисление того, чем здесь помогают, — что и есть смысл блока.
 */
.route-support {
    display: grid;
    max-width: 860px;
}

.route-support__item {
    align-items: baseline;
    border-top: 1px solid #eef1f4;
    display: grid;
    gap: 4px 24px;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    padding: 14px 0 14px 22px;
    position: relative;
}

.route-support__item:first-child {
    border-top: none;
}

.route-support__item::before {
    background: var(--ffj-red-01);
    border-radius: 50%;
    content: '';
    height: 10px;
    left: 0;
    position: absolute;
    top: 21px;
    width: 10px;
}

.route-support__title {
    color: #24262b;
    font-weight: 700;
}

.route-support__text {
    color: #4a5073;
    font-size: .875rem;
}

/* Списки и форма
   ------------------------------------------------------------------------ */

.route-page .route-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.route-page .route-list li {
    font-size: .9375rem;
    padding: 6px 0 6px 20px;
    position: relative;
}

.route-page .route-list li::before {
    background: var(--ffj-red-01);
    border-radius: 50%;
    content: '';
    height: 6px;
    left: 0;
    position: absolute;
    top: 15px;
    width: 6px;
}

.route-form__promise {
    color: var(--ffj-red-01);
    font-weight: 700;
    margin-bottom: 8px;
}

.route-privacy {
    background: #fff;
    border: 1px solid #eef1f4;
    border-radius: 14px;
    color: #8a90a8;
    font-size: .8125rem;
    padding: 20px 22px;
}

.route-privacy__title {
    color: var(--ffj-red-01);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.route-page .route-privacy p {
    margin-bottom: 8px;
}

.route-form {
    background: #fff;
    border: 1px solid #eef1f4;
    border-radius: 14px;
    padding: 28px;
}

/*
 * Форма переиспользует оформление полей общей формы сайта (.wrap-bottom-form /
 * .plans-form), но не её подложку: там голубой градиент и фотография, которые
 * в белой карточке лезут поверх полей. Гасим ровно то же, что уже гасит для
 * себя модалка в ux.css, — фон обёртки, её внутренние отступы и фото в :before.
 */
.route-form.wrap-bottom-form {
    background: #fff;
}

.route-form.wrap-bottom-form form {
    padding: 0;
}

.route-form.wrap-bottom-form form:before {
    display: none;
}

/*
 * Поля в две колонки. Пар полей восемь, и в один столбец форма уезжает намного
 * ниже левой колонки блока. Сетка вешается на .fields — обёртку полей из самой
 * формы; согласие, кнопка и ответ формы лежат снаружи неё и остаются во всю
 * ширину сами по себе. Contact Form 7 оборачивает каждое поле в <p>, поэтому
 * колонками управляют сами абзацы и разметку формы под них править не нужно.
 */
.route-form.wrap-bottom-form form .fields {
    display: grid;
    gap: 0 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
 * Во всю ширину — то, что не пара соседнему полю: выбор «что нужно», вложение
 * и комментарий. Опознаём по содержимому абзаца, чтобы не заводить в форме
 * служебных классов.
 */
.route-form.wrap-bottom-form form .fields > p:has(.wpcf7-checkbox),
.route-form.wrap-bottom-form form .fields > p:has(input[type="file"]),
.route-form.wrap-bottom-form form .fields > p:has(textarea) {
    grid-column: 1 / -1;
}

/* В колонке ограничение общей формы в 400px только мешает: поле уже колонки. */
.route-form.wrap-bottom-form form input.wpcf7-form-control:not(.wpcf7-submit),
.route-form.wrap-bottom-form form select.wpcf7-form-control,
.route-form.wrap-bottom-form form textarea.wpcf7-form-control,
.route-form.wrap-bottom-form form .form-control {
    max-width: 100%;
}

/*
 * Подпись группы полей. У группы галочек своего <label> быть не может: внутри
 * уже по <label> на каждую плашку, а вкладывать label в label нельзя.
 */
.route-form.wrap-bottom-form form .form-label {
    color: var(--ffj-blue-02);
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    margin-bottom: 6px;
}

/*
 * «¿Qué necesita?» — ряд плашек, а не столбик галочек: отмечают обычно
 * несколько, и в столбик они занимают пол-формы.
 */
.route-form.wrap-bottom-form form .wpcf7-checkbox {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/*
 * Ширина плашки — по её подписи, лишние переносятся на следующую строку.
 * Делить ряд поровну (flex: 1 1 0) нельзя: варианты заводят в самой форме
 * Contact Form 7, их число и длина меняются без правки темы, и на восьми
 * вариантах каждой доставалось меньше, чем её самое длинное слово, — подписи
 * вылезали за рамку и налезали на соседей.
 */
.route-form.wrap-bottom-form form .wpcf7-checkbox .wpcf7-list-item {
    flex: 0 1 auto;
    margin: 0;
    max-width: 100%;
    min-width: 0;
}

.route-form.wrap-bottom-form form .wpcf7-checkbox .wpcf7-list-item label {
    align-items: center;
    background: #fff;
    border: 1px solid #d9e2ea;
    border-radius: 8px;
    color: #24262b;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    justify-content: center;
    margin: 0;
    padding: 11px 12px;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease;
}

.route-form.wrap-bottom-form form .wpcf7-checkbox .wpcf7-list-item label:hover {
    border-color: var(--ffj-red-01);
}

/*
 * Сам квадратик галочки в плашке лишний — выбор виден по рамке. Убираем его с
 * глаз, но не из потока фокуса: :focus-visible ниже рисует обводку на плашке,
 * иначе с клавиатуры выбор был бы вслепую.
 */
.route-form.wrap-bottom-form form .wpcf7-checkbox input[type="checkbox"] {
    height: 1px;
    margin: 0;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.route-form.wrap-bottom-form form .wpcf7-checkbox .wpcf7-list-item label:has(input:checked) {
    background: #fff5f4;
    border-color: var(--ffj-red-01);
    box-shadow: inset 0 0 0 1px var(--ffj-red-01);
    color: var(--ffj-red-01);
}

.route-form.wrap-bottom-form form .wpcf7-checkbox .wpcf7-list-item label:has(input:focus-visible) {
    outline: 2px solid var(--ffj-red-01);
    outline-offset: 2px;
}

/* Отправка — во всю ширину формы: это единственное действие блока. */
.route-form.wrap-bottom-form form .wpcf7-submit {
    width: 100%;
}

.route-form__title {
    color: #24262b;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Адаптив
   ------------------------------------------------------------------------ */

@media (max-width: 1199.98px) {
    /*
     * :not(--stack) — столбик остаётся столбиком на любой ширине: он и так уже
     * в половину контейнера, вторая колонка внутри него не поместилась бы.
     */
    .route-cards--4,
    .route-tiles:not(.route-tiles--stack) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Пять карточек в ряд перестают помещаться раньше остальных сеток. */
    .route-cards--5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 991.98px) {
    .route-nav__label {
        display: none;
    }

    .route-hero__title {
        font-size: 2rem;
    }

    .route-hero__media img {
        height: 320px;
        margin-top: 28px;
    }

    .route-cards--2,
    .route-cards--3,
    .route-cards--5,
    .route-docs,
    .route-shots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Колонка стала вдвое шире, разрезу такая высота уже не нужна. */
    .route-shots__item img {
        height: 260px;
    }

    .route-shots--2 .route-shots__item img {
        height: 360px;
    }

    /* Два набора рядом перестают помещаться: сначала роли, потом типологии. */
    .route-groups {
        grid-template-columns: minmax(0, 1fr);
    }

    .route-system,
    .route-duo {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Две равные карточки здесь уже не помещаются, а «карточка и кадр» ещё
       помещается: колонка кадра узкая. Правило повторяет базовое, потому что
       строкой выше .route-duo сворачивает и его. */
    .route-duo--media {
        grid-template-columns: minmax(0, 1fr) minmax(0, 348px);
    }

    .route-aside {
        margin-top: 24px;
    }
}

@media (max-width: 767.98px) {
    .route-duo--media {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Половина телефонного экрана — это кадр шириной с ладонь: субтитры в нём
       уже не прочитать, поэтому ролики расходятся друг под друга. Ровнять их
       по высоте больше незачем: они стоят не рядом, а один под другим, и общая
       рамка только добавила бы первому полосы сверху и снизу. */
    .route-videos {
        grid-template-columns: minmax(0, 1fr);
    }

    .route-videos video {
        aspect-ratio: auto;
    }

    /* Кадр встаёт в колонку один и тянется на её ширину: со своими 348px он
       оставался уже карточки над ним и текста под ним, и край ряда ломался.
       Растяжение небольшое: и на самом широком экране этого блока снимок
       увеличен лишь в полтора с небольшим раза. */
    .route-duo__media {
        height: auto;
        max-width: none;
    }

    .route-form.wrap-bottom-form form .fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .route-form.wrap-bottom-form form .wpcf7-checkbox .wpcf7-list-item {
        flex: 1 1 45%;
    }

    .route-form.wrap-bottom-form form .wpcf7-checkbox .wpcf7-list-item label {
        min-width: 0;
    }

    /*
     * Три колонки с абзацами текста на телефоне не читаются, поэтому строка
     * разворачивается в блок: сверху характеристика, под ней значения, каждое
     * подписано названием серии — саму шапку таблицы здесь показывать негде.
     */
    .route-specs__table,
    .route-specs__table tbody,
    .route-specs__table tbody tr,
    .route-specs__table tbody th,
    .route-specs__table tbody td {
        display: block;
        width: auto;
    }

    .route-specs__table thead {
        display: none;
    }

    .route-specs__table tbody tr {
        padding: 8px 0;
    }

    .route-specs__table tbody tr + tr {
        border-top: 1px solid #eef1f4;
    }

    .route-specs__table tbody tr + tr > * {
        border-top: none;
    }

    .route-specs__table tbody th {
        padding-bottom: 2px;
    }

    .route-specs__table tbody td {
        padding-bottom: 6px;
        padding-top: 6px;
    }

    .route-specs__table tbody td::before {
        color: var(--ffj-red-01);
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .06em;
        margin-bottom: 2px;
        text-transform: uppercase;
    }

    .route-nav__inner {
        gap: 14px;
        height: 56px;
    }

    .route-nav__link {
        font-size: 13px;
    }

    .route-nav__cta {
        font-size: 13px;
        padding: 8px 14px;
    }

    .route-hero {
        padding: 28px 0 40px;
    }

    .route-hero__title {
        font-size: 1.75rem;
    }

    .route-section {
        padding: 40px 0;
    }

    .route-section__title {
        font-size: 1.5rem;
    }

    .route-hero__actions .btn,
    .route-actions .btn {
        flex: 1 1 100%;
    }
}

@media (max-width: 575.98px) {
    /*
     * На самом узком экране половина ряда уже уже самой длинной подписи
     * («Documentación»), поэтому плашки снова расходятся по содержимому и
     * растягиваются по своей строке: длинной достаётся строка целиком.
     */
    .route-form.wrap-bottom-form form .wpcf7-checkbox .wpcf7-list-item {
        flex: 1 1 auto;
    }

    /*
     * :not(--stack) — ради веса, а не ради столбика: правило «две колонки» в
     * блоке до 1199.98px написано с тем же :not() и без него перебивало это,
     * так что на телефоне плитки монтажника стояли по две в ряд шириной
     * ~125px текста — подписи ссылок в них не помещались.
     */
    .route-cards--2,
    .route-cards--3,
    .route-cards--4,
    .route-cards--5,
    .route-tiles:not(.route-tiles--stack),
    .route-docs,
    .route-shots {
        grid-template-columns: minmax(0, 1fr);
    }

    .route-shots__item img {
        height: 320px;
    }

    .route-shots--2 .route-shots__item img {
        height: 320px;
    }

    /*
     * Отступы контейнера, панели и плитки складываются, и на узком экране текст
     * остаётся в колодце. Панель отдаёт свою половину плиткам.
     */
    .route-group {
        padding: 16px;
    }

    .route-compare__item {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    /* Липкая колонка подписей не должна съедать половину телефонного экрана.
       Ширину таблицы при этом не трогаем: в колонке уже 900px пять звёзд и
       «fotocatalítico» перестают помещаться. */
    .route-materials__table th:first-child {
        font-size: .8125rem;
        hyphens: auto;
        padding-left: 12px;
        width: 140px;
    }

    .route-support__item {
        grid-template-columns: minmax(0, 1fr);
    }

    .route-form {
        padding: 20px;
    }
}