/* ==================================================================
   Лендинг «CATARINA NOVA ОПТОМ» — /optom/
   Подключается ТОЛЬКО на страницах с шаблоном templates/lending.php
   (см. functions.php, блок «Лендинг под платный трафик»).
   Разметку собирает ~/Documentos/catarinanova/optom/gen_optom.py из .docx.

   Цвета — те же токены, что на /about-us/: контраст к белому посчитан там.
   Заголовки — Athelas из --cn-serif, текст — Inter.
   ================================================================== */

.cn-lending{
	--cn-ink:#16161a;        /* заголовки, 17,9:1 к белому */
	--cn-text:#2e2e33;       /* основной текст, 12,4:1 */
	--cn-muted:#6a6a72;      /* подписи, 5,6:1 */
	--cn-gold:#b7964b;       /* только линии и рамки */
	--cn-gold-tekst:#8d7233; /* золото, которым можно писать: 4,6:1 */
	--cn-surface:#f7f4ef;
	--cn-line:#e4ded3;
	--cn-oshibka:#a5231b;    /* ошибки формы, 6,7:1 к белому */
	/* Вертикальный ритм кратен 8. */
	--cn-blok:96px;
	--cn-ob:1200px;
	background:#fff;
	color:var(--cn-text);
	font-family:Inter,"Helvetica Neue",Arial,sans-serif;
}
@media (max-width:900px){ .cn-lending{--cn-blok:64px} }

/* Тема konte растягивает body под свой макет — лендингу это мешает. */
.cn-lending #page,
.cn-lending .site-content{all:unset}

.cn-l-ob{max-width:var(--cn-ob);margin:0 auto;padding:0 24px}
@media (max-width:600px){ .cn-l-ob{padding:0 20px} }

/* Колонка чтения: длинные строки на десктопе не читаются. */
.cn-l-kolonka{max-width:680px}
.cn-l-kolonka p,.cn-l-krupnym p{font-size:17px;line-height:1.75;margin:0 0 20px}
.cn-l-kolonka p:last-child,.cn-l-krupnym p:last-child{margin-bottom:0}

/* --- Ссылка «к содержимому» для клавиатуры --- */
.cn-l-skip{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:var(--cn-ink);padding:12px 20px}
.cn-l-skip:focus{left:16px;top:16px;outline:2px solid var(--cn-gold);outline-offset:2px}

.cn-l-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ================= Шапка ================= */
.cn-l-shapka{position:sticky;top:0;z-index:90;background:#fff;border-bottom:1px solid var(--cn-line)}
.cn-l-shapka__vnutri{max-width:var(--cn-ob);margin:0 auto;padding:4px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.cn-l-shapka__pravaya{display:flex;align-items:center;gap:16px}

.cn-l-logo{position:relative;display:block;line-height:0;flex:0 0 auto}
.cn-l-logo__still{display:block;height:88px;width:auto}
/* Доли — положение рисунка внутри коробки логотипа, как в шапке сайта.
   Менять только вместе с перекодировкой видео. */
.cn-l-logo__video{position:absolute;left:12.071%;top:18.105%;width:78.462%;height:63.368%;opacity:0;transition:opacity .35s ease;pointer-events:none}
.cn-l-logo--anim.is-live .cn-l-logo__video{opacity:1}
.cn-l-logo--anim.is-live .cn-l-logo__still{visibility:hidden}
@media (prefers-reduced-motion:reduce){ .cn-l-logo__video{display:none} }

.cn-l-tel{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"i p" "i n";align-items:center;gap:0 10px;min-height:44px;padding:4px 6px;color:var(--cn-ink);text-decoration:none}
.cn-l-tel .cn-l-ikonka{grid-area:i;width:20px;height:20px;color:var(--cn-gold-tekst)}
.cn-l-tel__podpis{grid-area:p;font-size:10px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--cn-muted)}
.cn-l-tel__nomer{grid-area:n;font-size:16px;line-height:1.3;font-weight:500;white-space:nowrap}
.cn-l-tel:hover .cn-l-tel__nomer{color:var(--cn-gold-tekst)}
/* Тема снимает обводку со ссылок — возвращаем её для обхода с клавиатуры. */
.cn-lending .cn-l-tel:focus-visible{outline:2px solid var(--cn-gold);outline-offset:2px}

@media (max-width:900px){
	.cn-l-logo__still{height:56px}
	.cn-l-shapka__vnutri{padding:8px 20px;gap:12px}
}
@media (max-width:600px){
	.cn-l-tel{grid-template-areas:"i n";gap:0 8px}
	.cn-l-tel__podpis{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
	.cn-l-tel__nomer{font-size:15px}
}
@media (max-width:420px){
	.cn-l-tel__nomer{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
	.cn-l-tel{min-width:44px;justify-content:center}
}
/* На узких экранах кнопка в шапке ломалась на четыре строки и раздувала шапку до 65px.
   Ужимаем логотип и саму кнопку так, чтобы всё встало в одну строку вплоть до 320px. */
@media (max-width:480px){
	.cn-l-logo__still{height:48px}
	.cn-l-shapka__vnutri{padding:8px 16px;gap:10px}
	.cn-l-shapka__pravaya{gap:10px}
	.cn-lending .cn-l-shapka .cn-l-knopka--malaya{padding:11px 14px;font-size:11px;letter-spacing:.08em;white-space:nowrap}
}
/* Ниже 380px кнопка в шапку уже не влезает, не опускаясь до нечитаемого кегля:
   оставляем логотип и телефон, а призыв всё равно виден в первом экране. */
@media (max-width:380px){
	.cn-l-logo__still{height:44px}
	.cn-l-shapka__vnutri{padding:8px 14px;gap:8px}
	.cn-lending .cn-l-shapka .cn-l-knopka--malaya{display:none}
	.cn-l-tel{grid-template-areas:"i n";gap:0 8px}
	.cn-l-tel__nomer{position:static;width:auto;height:auto;clip:auto;font-size:15px}
}

/* ================= Кнопки ================= */
.cn-lending .cn-l-knopka{
	display:inline-flex;align-items:center;justify-content:center;text-align:center;
	min-height:56px;padding:16px 34px;border:1px solid var(--cn-ink);border-radius:0;
	background:var(--cn-ink);color:#fff;text-decoration:none;cursor:pointer;
	font-family:inherit;font-size:13px;font-weight:500;line-height:1.3;
	letter-spacing:.14em;text-transform:uppercase;
	transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.cn-lending .cn-l-knopka:hover{background:#3a3a42;border-color:#3a3a42;color:#fff}
.cn-lending .cn-l-knopka:focus-visible{outline:2px solid var(--cn-gold);outline-offset:3px}
.cn-lending .cn-l-knopka[disabled],.cn-lending .cn-l-knopka:disabled{opacity:.45;cursor:not-allowed}
.cn-lending .cn-l-knopka--malaya{min-height:44px;padding:11px 20px;font-size:12px;letter-spacing:.1em;white-space:nowrap}
.cn-lending .cn-l-knopka--svetlaya{background:#fff;color:var(--cn-ink);border-color:#fff}
.cn-lending .cn-l-knopka--svetlaya:hover{background:var(--cn-surface);border-color:var(--cn-surface);color:var(--cn-ink)}
@media (max-width:600px){ .cn-lending .cn-l-knopka{width:100%;padding:16px 20px} .cn-lending .cn-l-knopka--malaya{width:auto;padding:11px 20px} }

/* ================= Общее для блоков ================= */
.cn-l-blok{padding:var(--cn-blok) 0}
.cn-l-blok--fon{background:var(--cn-surface)}
.cn-l-blok--temnyj{background:var(--cn-ink);color:#fff}

.cn-l-nadzagolovok{font-size:12px;line-height:1.6;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--cn-muted);margin:0 0 20px}
.cn-lending .cn-l-zagolovok{
	font-family:var(--cn-serif);font-weight:var(--cn-serif-ves);letter-spacing:var(--cn-serif-treking);
	font-size:clamp(26px,3.6vw,42px);line-height:1.18;color:var(--cn-ink);
	margin:0 0 40px;padding-top:24px;position:relative;max-width:900px;
}
.cn-lending .cn-l-zagolovok::before{content:"";position:absolute;top:0;left:0;width:32px;height:1px;background:var(--cn-gold)}
.cn-l-blok--temnyj .cn-l-zagolovok{color:#fff}
.cn-lending .cn-l-podzagolovok{
	font-family:var(--cn-serif);font-weight:var(--cn-serif-ves);letter-spacing:var(--cn-serif-treking);
	font-size:clamp(20px,2.2vw,26px);line-height:1.35;color:var(--cn-ink);margin:0 0 20px;
}
.cn-l-blok--temnyj .cn-l-podzagolovok{color:#fff}

/* ================= Хиро ================= */
.cn-l-hero{padding:48px 0 0}
.cn-l-hero__setka{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.cn-lending .cn-l-hero__zagolovok{
	font-family:var(--cn-serif);font-weight:var(--cn-serif-ves);letter-spacing:var(--cn-serif-treking);
	font-size:clamp(32px,5.2vw,58px);line-height:1.1;color:var(--cn-ink);margin:0 0 20px;
}
.cn-lending p.cn-l-hero__lid{font-family:var(--cn-serif);font-size:clamp(20px,2.4vw,26px);line-height:1.4;color:var(--cn-ink);margin:0 0 20px}
.cn-lending p.cn-l-hero__opisanie{font-size:17px;line-height:1.7;margin:0 0 28px;max-width:560px}

.cn-l-markery{list-style:none;margin:0 0 32px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
.cn-l-markery li{position:relative;padding-left:18px;font-size:15px;line-height:1.6;color:var(--cn-text)}
.cn-l-markery li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;background:var(--cn-gold)}
@media (max-width:480px){ .cn-l-markery{grid-template-columns:1fr} }

.cn-l-minimum{border-left:2px solid var(--cn-gold);padding:4px 0 4px 20px;margin:0 0 32px}
.cn-lending p.cn-l-minimum__summa{font-family:var(--cn-serif);font-size:clamp(19px,2.2vw,24px);line-height:1.35;color:var(--cn-ink);margin:0 0 6px}
.cn-lending p.cn-l-minimum__pripiska{font-size:15px;line-height:1.6;color:var(--cn-muted);margin:0}

.cn-l-hero__foto{margin:0}
.cn-l-hero__img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}

@media (max-width:900px){
	.cn-l-hero__setka{grid-template-columns:1fr;gap:40px}
	.cn-l-hero__img{aspect-ratio:4/3}
}

/* ================= Карточки «почему удобно» ================= */
.cn-l-karty{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.cn-l-karta{border-top:1px solid var(--cn-line);padding-top:24px}
.cn-l-karta__ikonka{width:32px;height:32px;color:var(--cn-gold-tekst);margin-bottom:16px;display:block}
.cn-lending .cn-l-karta__zagolovok{font-family:var(--cn-serif);font-weight:var(--cn-serif-ves);font-size:20px;line-height:1.3;color:var(--cn-ink);margin:0 0 12px}
.cn-lending p.cn-l-karta__tekst{font-size:15px;line-height:1.7;margin:0}
@media (max-width:1000px){ .cn-l-karty{grid-template-columns:repeat(2,1fr);gap:32px 24px} }
@media (max-width:560px){ .cn-l-karty{grid-template-columns:1fr;gap:24px} }

/* ================= Экономика ================= */
.cn-lending p.cn-l-akcent{
	font-family:var(--cn-serif);font-weight:var(--cn-serif-ves);letter-spacing:var(--cn-serif-treking);
	font-size:clamp(22px,2.8vw,30px);line-height:1.4;color:var(--cn-ink);
	max-width:760px;margin:0 0 28px;
}
.cn-l-ekonomika__tekst{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;max-width:1000px}
.cn-l-ekonomika__tekst p{font-size:17px;line-height:1.75;margin:0}
@media (max-width:800px){ .cn-l-ekonomika__tekst{grid-template-columns:1fr;gap:20px} }

/* ================= Ассортимент ================= */
.cn-lending p.cn-l-perechen{font-size:17px;line-height:1.9;margin:0 0 20px}
.cn-l-perechen__vvod{display:block;margin-bottom:10px}
.cn-l-tegi{display:flex;flex-wrap:wrap;gap:8px}
.cn-l-teg{display:inline-block;border:1px solid var(--cn-line);padding:6px 14px;font-size:14px;line-height:1.4;color:var(--cn-ink)}
.cn-l-plitka{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cn-l-plitka__img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center top;background:var(--cn-surface)}
@media (max-width:1000px){ .cn-l-plitka{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .cn-l-plitka{grid-template-columns:repeat(2,1fr);gap:12px} }

/* ================= Мы помогаем продавать ================= */
.cn-l-kontent{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:start}
.cn-l-kontent__tekst p{font-size:17px;line-height:1.75;margin:0 0 20px}
.cn-l-shagi{list-style:none;counter-reset:none;margin:32px 0 0;padding:0;display:grid;gap:12px}
.cn-l-shag{display:flex;align-items:baseline;gap:14px;font-size:16px;line-height:1.6;color:var(--cn-ink)}
.cn-l-shag__nomer{flex:0 0 auto;width:26px;height:26px;border:1px solid var(--cn-gold);color:var(--cn-gold-tekst);font-size:12px;display:inline-flex;align-items:center;justify-content:center;align-self:center}
.cn-l-lukbuk{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cn-l-lukbuk__img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border:1px solid var(--cn-line);box-sizing:border-box}
@media (max-width:900px){ .cn-l-kontent{grid-template-columns:1fr;gap:40px} }

/* ================= Бренд ================= */
.cn-l-brend{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.cn-l-brend__tekst{grid-column:span 6}
.cn-l-brend__foto{margin:0;grid-column:span 3}
.cn-l-brend__foto--cpm{grid-column:span 6}
.cn-l-brend__foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.cn-l-brend__foto--cpm img{aspect-ratio:16/9}
.cn-l-brend__foto figcaption{font-size:13px;line-height:1.5;color:var(--cn-muted);margin-top:10px}
@media (max-width:1000px){
	.cn-l-brend__tekst{grid-column:span 12}
	.cn-l-brend__foto--cpm{grid-column:span 12}
	.cn-l-brend__foto{grid-column:span 6}
}
@media (max-width:600px){ .cn-l-brend__foto{grid-column:span 12} }

/* ================= Крупным партнёрам ================= */
.cn-l-krupnym{max-width:760px}   /* внутри .cn-l-ob, поэтому выравнивание по левому краю сохраняется */
.cn-l-blok--temnyj .cn-l-krupnym p{color:#ded9d1}
.cn-l-krupnym .cn-l-knopka{margin-top:32px}

/* ================= Условия одним списком ================= */
.cn-l-usloviya{margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px}
.cn-l-uslovie{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--cn-line)}
.cn-l-uslovie__termin{margin:0;font-family:var(--cn-serif);font-size:17px;line-height:1.5;color:var(--cn-ink)}
.cn-l-uslovie__znachenie{margin:0;font-size:16px;line-height:1.6;color:var(--cn-text)}
@media (max-width:900px){ .cn-l-usloviya{grid-template-columns:1fr} }
@media (max-width:520px){ .cn-l-uslovie{grid-template-columns:1fr;gap:4px} }

/* ================= Заявка ================= */
.cn-l-zayavka{max-width:900px}
.cn-lending p.cn-l-zayavka__vvod{font-size:17px;line-height:1.7;margin:0 0 40px;max-width:680px}
.cn-lending p.cn-l-zayavka__telefon{margin:32px 0 0;font-size:16px;line-height:1.6;color:var(--cn-text)}
.cn-lending p.cn-l-zayavka__telefon a{display:inline-block;min-height:44px;padding:10px 0;
	font-size:19px;line-height:1.3;color:var(--cn-ink);font-weight:500;text-decoration:none;border-bottom:1px solid var(--cn-gold)}
.cn-lending p.cn-l-zayavka__telefon a:focus-visible{outline:2px solid var(--cn-gold);outline-offset:3px}

.cn-l-forma__setka{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.cn-l-pole--shirokoe{grid-column:1/-1}
.cn-lending .cn-l-pole__podpis{display:block;font-size:13px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:var(--cn-muted);margin:0 0 8px}
.cn-l-pole__zvezda{border:0;text-decoration:none;color:var(--cn-gold-tekst);margin-left:2px}

.cn-lending .cn-l-pole input[type="text"],
.cn-lending .cn-l-pole input[type="tel"],
.cn-lending .cn-l-pole input[type="email"],
.cn-lending .cn-l-pole textarea{
	display:block;width:100%;box-sizing:border-box;min-height:52px;
	padding:14px 16px;border:1px solid var(--cn-line);border-radius:0;background:#fff;
	font-family:inherit;font-size:16px;line-height:1.5;color:var(--cn-ink);
	transition:border-color .18s ease;
}
.cn-lending .cn-l-pole textarea{min-height:112px;resize:vertical}
.cn-lending .cn-l-pole input:hover,.cn-lending .cn-l-pole textarea:hover{border-color:#c9c1b3}
.cn-lending .cn-l-pole input:focus,.cn-lending .cn-l-pole textarea:focus{border-color:var(--cn-ink);outline:2px solid var(--cn-gold);outline-offset:1px}

/* Ошибки Contact Form 7 — рядом с полем, не только сводкой сверху. */
.cn-lending .wpcf7-not-valid-tip{display:block;margin-top:8px;font-size:14px;line-height:1.5;color:var(--cn-oshibka)}
.cn-lending .cn-l-pole input.wpcf7-not-valid,
.cn-lending .cn-l-pole textarea.wpcf7-not-valid{border-color:var(--cn-oshibka)}
.cn-lending .wpcf7-response-output{margin:24px 0 0;padding:16px 20px;border:1px solid var(--cn-line);font-size:15px;line-height:1.6;background:#fff}
.cn-lending .wpcf7 form.invalid .wpcf7-response-output,
.cn-lending .wpcf7 form.unaccepted .wpcf7-response-output,
.cn-lending .wpcf7 form.spam .wpcf7-response-output{border-color:var(--cn-oshibka);color:var(--cn-oshibka)}
.cn-lending .wpcf7 form.sent .wpcf7-response-output{border-color:var(--cn-gold);color:var(--cn-ink)}

.cn-l-forma__niz{margin-top:28px}
.cn-l-soglasie{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.6;color:var(--cn-text)}
.cn-l-soglasie .wpcf7-list-item{margin:0}
.cn-l-soglasie label{display:flex;align-items:flex-start;gap:12px;cursor:pointer;min-height:44px}
.cn-l-soglasie input[type="checkbox"]{flex:0 0 auto;width:20px;height:20px;margin:2px 0 0;accent-color:var(--cn-ink)}
.cn-l-soglasie .wpcf7-list-item-label{font-size:15px;line-height:1.6}
.cn-l-soglasie a{display:inline-block;padding:4px 0;color:var(--cn-ink);border-bottom:1px solid var(--cn-gold);text-decoration:none}
.cn-l-soglasie a:focus-visible{outline:2px solid var(--cn-gold);outline-offset:2px}
.cn-l-forma__knopka{margin-top:24px}
/* Тема растягивает input[type=submit] на всю ширину формы — здесь кнопка по содержимому. */
.cn-lending .cn-l-forma__knopka input.cn-l-knopka{width:auto;min-width:320px}
@media (max-width:600px){ .cn-lending .cn-l-forma__knopka input.cn-l-knopka{width:100%;min-width:0} }
.cn-lending .wpcf7-spinner{margin:0 0 0 12px;vertical-align:middle}

@media (max-width:700px){ .cn-l-forma__setka{grid-template-columns:1fr;gap:20px} }

/* ================= Подвал ================= */
.cn-l-podval{background:var(--cn-ink);color:#c9c4bb;padding:56px 0}
.cn-l-podval__vnutri{max-width:var(--cn-ob);margin:0 auto;padding:0 24px}
.cn-l-podval__marka{font-family:var(--cn-serif);font-size:15px;letter-spacing:.3em;text-transform:uppercase;color:#fff;margin:0 0 20px}
.cn-lending p.cn-l-podval__stroka{font-size:15px;line-height:1.7;margin:0 0 6px}
.cn-lending .cn-l-podval__stroka a{display:inline-block;padding:5px 0;color:#fff;text-decoration:none;border-bottom:1px solid rgba(183,150,75,.6)}
.cn-lending .cn-l-podval__stroka a:focus-visible{outline:2px solid var(--cn-gold);outline-offset:2px}
.cn-lending .cn-l-podval__stroka a:hover{border-bottom-color:var(--cn-gold)}
.cn-lending p.cn-l-podval__kopirajt{font-size:13px;color:#8d887f;margin:24px 0 0}

/* Плавная прокрутка к форме — но не для тех, кто просил не двигать картинку. */
/* Файл подключается только на этом шаблоне, поэтому html здесь трогать безопасно. */
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
.cn-lending :target{scroll-margin-top:120px}