/* ============================================================
   Kingo — /es/trabaja/ : страница под рекламу для водителей.

   Отдельный файл, а не кусок kingo.css: страница живёт своей
   жизнью (её переделывают под кампании чаще, чем сайт), а общие
   токены и шрифты приходят из kingo.css — он подключается первым.

   Все классы с префиксом t- : на главной уже заняты .big, .cta,
   .note, .steps, .row — без префикса они бьют друг по другу.
   ============================================================ */

/* Страница короткая и помещается в экран целиком. Без этого на ноутбуке
   подвал висел сразу под карточкой, а под ним оставалось 200+ px пустоты. */
html,body{min-height:100%}
body{display:flex;flex-direction:column;min-height:100svh}
.t-page{flex:1}
.t-foot{margin-top:auto}

:root{
  /* обязательство (первый взнос) — янтарный. Красный на сайте
     означает бренд и действие, на условии он читается как ошибка. */
  --amber:#C07A12;
}

/* ---------- шапка ---------- */
.t-bar{
  position:sticky;top:0;z-index:30;flex:none;
  display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;
  padding:11px clamp(16px,4vw,40px);
  background:rgba(246,242,236,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair);
}
.t-logo{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:clamp(17px,1.35vw,20px);letter-spacing:-.02em;color:var(--bone);text-decoration:none}
.t-call{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  font-size:clamp(12.5px,1vw,14.5px);color:var(--muted);text-decoration:none;white-space:nowrap;
}
.t-call svg{width:11px;height:11px;flex:none}
.t-call b{color:var(--bone);font-weight:600}
.t-topwa{font-size:clamp(12.5px,1vw,14.5px);color:var(--green-deep);font-weight:600;text-decoration:none;white-space:nowrap}

/* ---------- сетка страницы ---------- */
.t-page{
  display:grid;gap:clamp(20px,3vw,30px);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  max-width:1320px;margin:0 auto;
  padding:clamp(16px,2.5vw,32px) clamp(16px,4vw,48px) clamp(22px,2.2vw,38px);
}
.t-page>*{min-width:0}
.t-right{display:flex;justify-content:center}
.t-card{
  width:100%;max-width:min(100%,clamp(420px,34vw,500px));
  background:var(--ink-2);border:1px solid var(--hair);border-radius:20px;
  padding:clamp(15px,1.8vw,24px);box-shadow:0 10px 30px rgba(26,23,18,.06);
}

/* ---------- левая колонка ---------- */
.t-kicker{font-size:clamp(11px,.85vw,12.5px);letter-spacing:.14em;text-transform:uppercase;color:var(--subtle);margin-bottom:7px}
.t-h1{font-family:var(--display);font-size:clamp(25px,3.3vw,42px);line-height:1.1;letter-spacing:-.025em;margin:0 0 clamp(14px,1.4vw,20px)}
.t-photo{
  position:relative;height:clamp(150px,18vw,268px);border-radius:16px;overflow:hidden;margin-bottom:clamp(14px,1.4vw,20px);
  background:#15120E center 52% / cover no-repeat;
}
.t-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,18,14,0) 45%,rgba(21,18,14,.8) 100%)}
.t-photo span{position:absolute;left:16px;bottom:13px;z-index:1;color:#fff;font-size:clamp(12.5px,1vw,14.5px);letter-spacing:.02em}
.t-photo i{
  position:absolute;right:12px;top:11px;z-index:1;font-style:normal;
  background:rgba(21,18,14,.55);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);
  border-radius:var(--r-pill);padding:5px 12px;font-size:clamp(12px,.95vw,13.5px);color:#fff;
}
.t-ask{font-family:var(--display);font-size:clamp(17px,1.4vw,21px);font-weight:600;margin:0 0 clamp(10px,1vw,14px)}

/* переключатели: один механизм, две роли */
.t-aud,.t-pick{
  position:relative;display:flex;isolation:isolate;max-width:min(100%,clamp(420px,34vw,500px));
  background:var(--sand);border:1px solid var(--hair);border-radius:var(--r-pill);padding:4px;
}
.t-aud{margin-bottom:14px}
.t-pick{margin-bottom:16px}
.t-thumb{
  position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);
  border-radius:var(--r-pill);transition:transform .32s var(--ease);z-index:-1;
}
.t-aud .t-thumb{background:var(--bone)}
.t-pick .t-thumb{background:var(--ink-2);box-shadow:0 3px 12px rgba(26,23,18,.16)}
.t-aud.is-own .t-thumb,.t-pick.is-no .t-thumb{transform:translateX(100%)}
.t-aud button,.t-pick button{
  flex:1;text-align:center;color:var(--subtle);transition:color .22s var(--ease);
  background:none;border:0;cursor:pointer;font-family:inherit;
}
.t-aud button{padding:clamp(9px,.85vw,12px) 10px;font-size:clamp(13.5px,1.08vw,16px)}
.t-pick button{padding:clamp(12px,1.1vw,16px) 10px;font-size:clamp(15px,1.22vw,18px);display:flex;align-items:center;justify-content:center;gap:7px}
.t-aud button[aria-pressed="true"]{color:var(--ink);font-weight:600}
.t-pick button[aria-pressed="true"]{color:var(--bone);font-weight:600}
.t-pick button svg{width:15px;height:15px;opacity:0;transform:scale(.6);transition:.26s var(--ease)}
.t-pick button[aria-pressed="true"] svg{opacity:1;transform:scale(1)}
.t-less{
  font-size:clamp(13px,1.05vw,15px);color:var(--green-deep);cursor:pointer;margin-bottom:4px;display:inline-block;
  background:none;border:0;padding:0;font-family:inherit;
}
.t-less:hover{text-decoration:underline}

/* ---------- карточка расчёта ---------- */
.t-big{background:var(--green-wash);border:1px solid rgba(30,158,90,.3);border-radius:16px;padding:clamp(15px,1.5vw,21px);text-align:center;margin-bottom:clamp(11px,1.1vw,15px)}
.t-big .u{font-size:clamp(11px,.88vw,13px);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.t-big .n{font-family:var(--display);font-size:clamp(34px,4.4vw,56px);font-weight:800;letter-spacing:-.03em;color:var(--green-deep);font-variant-numeric:tabular-nums;line-height:1.05}
.t-big .c{font-size:clamp(12.5px,1.02vw,15px);color:var(--muted)}
.t-big .b{margin-top:9px;padding-top:9px;border-top:1px dashed rgba(30,158,90,.35);font-size:clamp(13px,1.05vw,15.5px);color:var(--green-deep);font-weight:600}

.t-rows{font-size:clamp(13.5px,1.1vw,16px);margin-bottom:clamp(11px,1.1vw,15px)}
.t-row{display:flex;justify-content:space-between;gap:10px;padding:clamp(5.5px,.6vw,8px) 0;border-bottom:1px dashed var(--hair)}
.t-row:last-child{border:0;font-weight:600}
.t-row .v{font-variant-numeric:tabular-nums;white-space:nowrap}

.t-terms{display:flex;flex-direction:column;gap:6px;background:var(--ink-3);border:1px solid var(--hair);border-radius:13px;padding:clamp(11px,1.1vw,15px) clamp(12px,1.2vw,16px);margin-bottom:clamp(11px,1.1vw,15px)}
.t-trow{font-size:clamp(12.6px,1.02vw,15px);color:var(--bone);line-height:1.34;padding-left:19px;position:relative}
.t-trow::before{content:"";position:absolute;left:0;top:8px;width:9px;height:5px;border-left:1.8px solid var(--green-deep);border-bottom:1.8px solid var(--green-deep);transform:rotate(-45deg)}
.t-trow.pay{color:var(--muted)}
.t-trow.pay::before{border:0;background:var(--amber);width:6px;height:6px;border-radius:50%;top:8px;left:1px;transform:none}
.t-trow.pay b{color:var(--amber);font-weight:600}
.t-trow b{font-weight:600}

.t-cta{
  display:block;width:100%;text-align:center;text-decoration:none;
  background:#25D366;color:#08311A;border-radius:var(--r-pill);
  padding:clamp(14px,1.3vw,19px);font-family:var(--display);font-weight:700;font-size:clamp(15.5px,1.25vw,18.5px);
  box-shadow:0 8px 20px rgba(37,211,102,.28);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.t-cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(37,211,102,.34)}
.t-note{font-size:clamp(12px,.95vw,13.5px);color:var(--subtle);line-height:1.5;margin:9px 0 0}

/* ---------- ветка «нет A2»: автошколы ---------- */
.t-schools{display:flex;gap:9px;margin-bottom:11px}
.t-sch{flex:1;border:1px solid var(--hair);border-radius:12px;padding:10px 11px;background:var(--ink-2)}
.t-sch.best{border-color:rgba(30,158,90,.45);background:var(--green-wash)}
.t-sch .nm{font-family:var(--display);font-size:clamp(13px,1.05vw,15px);font-weight:700;margin-bottom:2px}
.t-sch .pr{font-family:var(--display);font-size:clamp(22px,1.9vw,27px);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.t-sch.best .pr{color:var(--green-deep)}
.t-sch .zn{font-size:clamp(11px,.9vw,12.5px);color:var(--subtle);margin-top:2px}

.t-steps{counter-reset:s;margin:8px 0 11px;padding:0}
.t-steps li{list-style:none;counter-increment:s;position:relative;padding-left:29px;margin-bottom:clamp(7px,.75vw,10px);font-size:clamp(13.3px,1.08vw,15.5px);line-height:1.35}
.t-steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--bone);color:var(--ink);font-family:var(--display);font-size:11px;font-weight:700;display:grid;place-items:center}

.t-sub{color:var(--muted);font-size:clamp(13.5px,1.1vw,16px);margin:0 0 clamp(11px,1.1vw,15px)}
.t-h3{font-family:var(--display);font-size:clamp(21px,1.8vw,26px);line-height:1.16;letter-spacing:-.02em;margin:0 0 4px}

/* ---------- подвал ---------- */
.t-foot{
  border-top:1px solid var(--hair);padding:clamp(18px,1.6vw,24px) clamp(16px,4vw,48px) clamp(22px,2vw,30px);
  display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;
  font-size:12.5px;color:var(--subtle);
}
.t-foot a{color:var(--muted);text-decoration:none}
.t-foot a:hover{text-decoration:underline}
.t-foot .t-lr{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.t-foot .t-lr svg{width:15px;height:15px}

/* На телефоне в шапке остаётся трубка с номером: слово «Llama al» и
   второй номер не помещаются и ложатся друг на друга. */
@media (max-width:560px){
  .t-call .t-lbl{display:none}
  .t-topwa{display:none}
}

@media (prefers-reduced-motion:reduce){
  .t-thumb,.t-pick button svg,.t-cta{transition:none}
}