/* Start:/about/cards/cards.css?17929155199946*/
/* Страница «Дисконтные карты» (/about/cards/). Подключается только на этой странице.
   Оформление — как у страницы «Подарочные сертификаты» (/about/certificates/), стили скопированы,
   чтобы страницы не зависели друг от друга.
   Шрифты, размеры и цвета — токены из bibi-typography.css (--bh-*). Брейкпоинты как в шаблоне: 1240 / 767. */

/* --- Отступы между блоками ------------------------------------------------ */

section.section.cards_head:not(:last-child) {
  margin-bottom: 25px;
}

section.section.cards_block:not(:last-child) {
  margin-bottom: 70px;
}

.cards_block h2 {
  margin: 0 0 30px;
  text-align: center;
}

.cards_block .cards_lead {
  max-width: 640px;
  margin: -14px auto 30px;
  text-align: center;
  font-size: var(--bh-fs-body);
  line-height: var(--bh-lh-text);
  color: var(--bh-ink-3);
}

/* --- Как пользоваться картой (как «Преимущества» на /opt/) --------------- */

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

.cards_step {
  padding: 30px;
  border: 1px solid #E4E4E4;
  border-radius: 24px;
}

.cards_step .cards_step_icon {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #E4EDF8;
}

.cards_step .cards_step_num {
  margin-top: 24px;
  font-size: var(--bh-fs-meta);
  line-height: var(--bh-lh-snug);
  letter-spacing: var(--bh-ls-caps);
  text-transform: uppercase;
  color: #0047AB;
}

.cards_step .cards_step_title {
  margin-top: 6px;
  font-size: var(--bh-fs-subtitle);
  line-height: var(--bh-lh-subtitle);
  letter-spacing: var(--bh-ls-subtitle);
  font-weight: var(--bh-fw-ui);
  color: var(--bh-ink);
}

.cards_step .cards_step_text {
  margin-top: 10px;
  font-size: var(--bh-fs-body);
  line-height: var(--bh-lh-text);
  color: var(--bh-ink-2);
}

/* --- Правила --------------------------------------------------------------- */

.cards_rules {
  max-width: 980px;
  margin: 0 auto;
  padding: 40px 50px;
  border: 1px solid #E4E4E4;
  border-radius: 42px;
  font-size: var(--bh-fs-body);
  line-height: var(--bh-lh-text);
  color: var(--bh-ink-2);
}

.cards_rules ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cards-rule;
}

.cards_rules li {
  position: relative;
  margin: 0;
  padding-left: 40px;
  counter-increment: cards-rule;
}

.cards_rules li + li {
  margin-top: 14px;
}

.cards_rules li::before {
  content: counter(cards-rule);
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  font-weight: var(--bh-fw-ui);
  color: #0047AB;
}

.cards_rules p {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--bh-line, #E9EBEF);
  color: var(--bh-ink-3);
}

/* --- Планшет --------------------------------------------------------------- */

@media screen and (max-width: 1240px) {
  section.section.cards_block:not(:last-child) {
    margin-bottom: 60px;
  }
  .cards_steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Мобильные ------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  section.section.cards_head:not(:last-child) {
    margin-bottom: 20px;
  }
  section.section.cards_block:not(:last-child) {
    margin-bottom: 50px;
  }
  .cards_block h2 {
    margin-bottom: 20px;
  }
  .cards_block .cards_lead {
    margin: -8px auto 20px;
  }
  .cards_steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .cards_step {
    padding: 24px 20px;
  }
  .cards_step .cards_step_icon {
    width: 60px;
    height: 60px;
  }
  .cards_rules {
    padding: 26px 20px;
    border-radius: 30px;
  }
  .cards_rules li {
    padding-left: 30px;
  }
}

/* --- Баннер: текст слева, карта справа ------------------------------------ */

.cards_banner_title {
  font-size: calc(var(--bh-fs-display) * 1.3);
  line-height: var(--bh-lh-display);
  letter-spacing: var(--bh-ls-display);
  font-weight: var(--bh-fw-display);
  color: var(--bh-ink);
}

.cards_banner_desc {
  max-width: 440px;
  margin-top: 16px;
  font-size: var(--bh-fs-body);
  line-height: var(--bh-lh-text);
  color: var(--bh-ink-2);
}

.cards_btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.cards_banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 30px;
  padding: 60px;
  overflow: hidden;
  border-radius: 42px;
  background: #E4EDF8;
}

.cards_banner .cards_banner_eyebrow {
  margin-bottom: 14px;
  font-size: var(--bh-fs-caps);
  letter-spacing: var(--bh-ls-caps);
  text-transform: uppercase;
  color: #0047AB;
}

/* --- Как работает карта: синяя полоса ------------------------------------ */

.cards_facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 50px 0;
  border-radius: 42px;
  background: #0047AB;
}

.cards_facts .cards_fact {
  padding: 0 34px;
}

.cards_facts .cards_fact + .cards_fact {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.cards_facts .cards_fact_value {
  font-size: var(--bh-fs-title);
  line-height: var(--bh-lh-title);
  letter-spacing: var(--bh-ls-title);
  font-weight: var(--bh-fw-display);
  color: #FFFFFF;
}

.cards_facts .cards_fact_text {
  margin-top: 12px;
  font-size: var(--bh-fs-body);
  line-height: var(--bh-lh-text);
  color: rgba(255, 255, 255, 0.85);
}

/* --- Карта в баннере со значком «до 25%» ---------------------------------- */

.cards_visual {
  position: relative;
  height: 380px;
}

.cards_visual img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78%;
  height: auto;
  transform: translate(-50%, -50%) rotate(-6deg);
  filter: drop-shadow(0 22px 34px rgba(0, 47, 120, 0.28));
}

.cards_visual .cards_badge {
  position: absolute;
  top: 6%;
  right: 4%;
  width: 128px;
  height: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 12px 30px rgba(0, 47, 120, 0.18);
  font-size: var(--bh-fs-title);
  line-height: 1;
  letter-spacing: var(--bh-ls-title);
  font-weight: var(--bh-fw-display);
  color: #0047AB;
}

.cards_visual .cards_badge span {
  margin-bottom: 4px;
  font-size: var(--bh-fs-small);
  letter-spacing: 0;
  font-weight: var(--bh-fw-text);
  color: var(--bh-ink-3);
}

/* --- Уровни скидки ---------------------------------------------------------- */

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

.cards_level {
  padding: 30px;
  border: 1px solid #E4E4E4;
  border-radius: 24px;
}

.cards_level .cards_level_bar {
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: #E4EDF8;
}

.cards_level .cards_level_bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: #0047AB;
}

.cards_level .cards_level_value {
  margin-top: 26px;
  font-size: calc(var(--bh-fs-display) * 1.6);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: var(--bh-fw-display);
  color: #0047AB;
}

.cards_level .cards_level_sum {
  margin-top: 14px;
  font-size: var(--bh-fs-subtitle);
  line-height: var(--bh-lh-subtitle);
  letter-spacing: var(--bh-ls-subtitle);
  font-weight: var(--bh-fw-ui);
  color: var(--bh-ink);
}

.cards_level .cards_level_note {
  margin-top: 6px;
  font-size: var(--bh-fs-small);
  line-height: var(--bh-lh-snug);
  color: var(--bh-ink-3);
}

/* максимальный уровень — фирменный синий */
.cards_level.cards_level_top {
  border-color: #0047AB;
  background: #0047AB;
}

.cards_level.cards_level_top .cards_level_bar { background: rgba(255, 255, 255, 0.2); }
.cards_level.cards_level_top .cards_level_bar span { background: #FFFFFF; }
.cards_level.cards_level_top .cards_level_value,
.cards_level.cards_level_top .cards_level_sum { color: #FFFFFF; }
.cards_level.cards_level_top .cards_level_note { color: rgba(255, 255, 255, 0.75); }

/* --- Баннер, полоса и уровни: планшет ---------------------------------------------------- */

@media screen and (max-width: 1240px) {
  .cards_banner { padding: 40px; }
  .cards_visual { height: 300px; }
  .cards_facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .cards_facts .cards_fact:nth-child(3) { border-left: 0; }
  .cards_levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards_visual .cards_badge { width: 108px; height: 108px; }
}

/* --- Баннер, полоса и уровни: мобильные -------------------------------------------------- */

@media screen and (max-width: 767px) {
  .cards_banner_title { font-size: var(--bh-fs-display); }
  .cards_btns { margin-top: 24px; }
  .cards_btns .btn { flex: 1 1 auto; }

  .cards_banner { grid-template-columns: minmax(0, 1fr); padding: 30px 20px; border-radius: 30px; }
  .cards_visual { height: 230px; order: -1; }

  .cards_facts { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding: 10px 20px; border-radius: 30px; }
  .cards_facts .cards_fact { padding: 22px 0; }
  .cards_facts .cards_fact + .cards_fact { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); }

  .cards_levels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cards_level { padding: 22px 18px; border-radius: 20px; }
  .cards_level .cards_level_value { margin-top: 18px; font-size: calc(var(--bh-fs-display) * 1.4); }
  .cards_level .cards_level_sum { font-size: var(--bh-fs-ui); }
  .cards_visual .cards_badge { width: 86px; height: 86px; top: 0; right: 0; font-size: var(--bh-fs-subtitle); }
}

/* End */
/* /about/cards/cards.css?17929155199946 */