/* Чёрная пятница 13–21.11.2026 — баннер по макету клиента (жёлтый на чёрном, семья в аэропорту).
   Один и тот же .bfb — слайд на главной (js/bf-banner.js) и первый экран /black-friday/. Слайдер главной — .hs ниже. */
@font-face {
  font-family: "Caveat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/caveat-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

.bfb { --y: #ffc21a; --y2: #ffd84d; --k: #0a0a0b;
  position: relative; isolation: isolate; display: flex; align-items: center; overflow: hidden;
  min-height: max(640px, 80vh); padding: 36px 0 128px; background: var(--k); color: #fff; text-decoration: none;
  font-family: "Montserrat", system-ui, sans-serif; }
.viasan a.bfb { color: #fff; }   /* style.css: .viasan a { color: inherit } — иначе текст баннера тёмный */
.bfb__photo { position: absolute; top: 0; right: 0; z-index: -2; width: 66%; height: 100%; object-fit: cover; object-position: 62% 30%; }
.bfb__shade { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--k) 33%, rgba(10, 10, 11, .82) 42%, rgba(10, 10, 11, .25) 58%, rgba(10, 10, 11, 0) 70%),
              linear-gradient(0deg, rgba(10, 10, 11, .92) 0, rgba(10, 10, 11, 0) 34%); }
.bfb__in { position: relative; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 64px); }
.bfb__copy { max-width: 620px; }

/* логотип — как на макете: солнце + VIASUN | «Больше чем путешествия» */
.bfb__brand { display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(18px, 3.4vh, 38px); }
.bfb__brand img { width: 52px; height: 52px; }
.bfb__brand b { font: 800 34px/1 "Montserrat", sans-serif; letter-spacing: .05em; }
.bfb__brand i { width: 1px; height: 46px; margin: 0 6px; background: rgba(255, 255, 255, .45); }
.bfb__brand span { font: 600 13px/1.3 "Montserrat", sans-serif; letter-spacing: .03em; text-transform: uppercase; }

/* «ЧЁРНАЯ ПЯТНИЦА» на жёлтом мазке кисти, «НА ТУРЫ!», «СКИДКИ ДО 50%» */
.bfb__h { margin: 0; font-weight: 800; }
.bfb__t1 { display: inline-block; margin-left: -.32em; padding: .2em .55em .24em .4em; transform: rotate(-3deg);
  font: italic 800 clamp(32px, 3.9vw, 62px)/1 "Montserrat", sans-serif; text-transform: uppercase; color: #111;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 130' preserveAspectRatio='none'%3E%3Cpath fill='%23ffc21a' d='M18 20C130 12 320 8 592 3l-9 27 15 14-12 18 10 19-18 23C380 112 190 118 6 127l11-23-15-16 12-18L0 52l13-17z'/%3E%3Cpath fill='%23ffd84d' opacity='.55' d='M40 16l300-8v5L40 22zM60 112l330-10v4L60 117z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.bfb__t2 { display: block; margin-top: .02em; font: italic 800 clamp(58px, 7.2vw, 116px)/.98 "Montserrat", sans-serif;
  letter-spacing: -.01em; text-transform: uppercase; color: #fff; text-shadow: 0 6px 30px rgba(0, 0, 0, .55); }
.bfb__sale { position: relative; display: inline-flex; align-items: center; gap: .28em; margin: .04em 0 0; }
.bfb__sale > span:first-child { font: italic 800 clamp(26px, 2.9vw, 46px)/1 "Montserrat", sans-serif; text-transform: uppercase; }
.bfb__sale b { display: flex; align-items: flex-start; font: italic 800 clamp(108px, 12.4vw, 196px)/.82 "Montserrat", sans-serif;
  letter-spacing: -.04em; color: var(--y); text-shadow: 0 0 46px rgba(255, 194, 26, .38); }
.bfb__sale sup { font-size: .22em; line-height: 1; margin: .1em 0 0 .06em; color: var(--y); position: static; }

/* рукописное «Улететь по выгодной цене — реально!» справа от 50% */
.bfb__hand { position: absolute; left: calc(100% + 12px); top: -.1em; width: 6em; margin: 0; transform: rotate(-9deg);
  font: 700 clamp(26px, 2.5vw, 40px)/.98 "Caveat", "Segoe Print", cursive; color: var(--y); }
.bfb__hand svg { display: inline-block; vertical-align: -.1em; width: 1em; height: 1em; margin-left: .15em; stroke: var(--y); stroke-width: 2.4; stroke-linecap: round; fill: none; }

.bfb__lead { margin: clamp(14px, 2.4vh, 26px) 0 0; max-width: 33em; font: 500 clamp(15px, 1.15vw, 19px)/1.5 "Inter", system-ui, sans-serif; color: #ebe8e2; }
.bfb__lead b { display: block; margin-bottom: 4px; font: 700 clamp(17px, 1.35vw, 22px)/1.3 "Montserrat", sans-serif; color: #fff; }
.bfb__lead em { font-style: normal; font-weight: 700; color: var(--y); }

.bfb__row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: clamp(20px, 3.2vh, 36px); }
.bfb__btn { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 70px; padding: 0 44px; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #ffd640, #ffb700); color: #111; font: 800 clamp(17px, 1.45vw, 23px)/1 "Montserrat", sans-serif;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 214, 64, .55), 0 12px 44px rgba(255, 183, 0, .5); transition: transform .2s, box-shadow .2s; }
.bfb__btn svg { width: 1.2em; height: 1.2em; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
a.bfb:hover .bfb__btn, .bfb__btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 214, 64, .7), 0 16px 54px rgba(255, 183, 0, .62); }
.bfb__site { display: flex; align-items: center; gap: 12px; font: 600 13.5px/1.35 "Inter", system-ui, sans-serif; color: #fff; }
.bfb__site svg { flex: none; width: 34px; height: 34px; stroke: var(--y); stroke-width: 1.6; fill: none; }
.bfb__site b { color: var(--y); font-weight: 700; }

/* плашки внизу справа, рамка «Путешествия начинаются здесь», самолёт со следом */
.bfb__feats { position: absolute; right: clamp(20px, 4vw, 64px); bottom: 40px; z-index: 1; display: flex; list-style: none; margin: 0; padding: 0; }
.bfb__feats li { display: flex; align-items: center; gap: 14px; padding: 0 26px; border-left: 1px solid rgba(255, 255, 255, .4);
  font: 600 14.5px/1.25 "Inter", system-ui, sans-serif; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.bfb__feats li:first-child { border-left: 0; }
.bfb__feats li:last-child { padding-right: 0; }
.bfb__feats svg { flex: none; width: 42px; height: 42px; stroke: var(--y); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bfb__badge { position: absolute; top: 30px; right: clamp(20px, 3vw, 44px); z-index: 1; display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border: 2px solid var(--y); border-radius: 8px; background: rgba(10, 10, 11, .78); font: 800 13px/1.22 "Montserrat", sans-serif; text-transform: uppercase; }
.bfb__badge svg { width: 30px; height: 30px; fill: var(--y); }
.bfb__badge svg + span + svg { width: 18px; height: 18px; fill: none; stroke: var(--y); stroke-width: 3; }
.bfb__plane { position: absolute; top: 4%; left: 47%; z-index: 1; width: 30%; max-width: 440px; pointer-events: none; }
.bfb__note { position: absolute; left: clamp(20px, 4vw, 64px); bottom: 12px; margin: 0; font: 400 11px/1.3 "Inter", system-ui, sans-serif; color: rgba(255, 255, 255, .5); }

.bfb__timer { display: flex; flex-direction: column; gap: 7px; }
.bfb__timer[hidden] { display: none; }
.bfb__timer > span:first-child { font: 700 11.5px/1 "Inter", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #cfcac2; }
.bfb__timer > span:last-child { display: flex; gap: 6px; }
.bfb__timer > span:last-child > span { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 58px; padding: 8px 6px 7px; border-radius: 10px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font: 500 11px/1 "Inter", sans-serif; color: #cfcac2; }
.bfb__timer b { font: 800 25px/1 "Montserrat", sans-serif; color: #fff; font-variant-numeric: tabular-nums; }

@media (max-width: 1180px) {
  .bfb__badge { display: none; }
  .bfb__photo { width: 74%; }
  .bfb__copy { max-width: 540px; }
  .bfb__feats li { padding: 0 16px; font-size: 13px; }
  .bfb__feats svg { width: 34px; height: 34px; }
}
@media (max-width: 980px) {
  .bfb__hand { left: auto; right: -5.4em; top: -1.6em; font-size: 24px; }
}
@media (max-width: 760px) {
  .bfb { display: block; min-height: 0; padding: 0 0 34px; }
  .bfb__photo { position: relative; z-index: auto; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-position: 66% 30%; }
  .bfb__shade { background: linear-gradient(180deg, rgba(10, 10, 11, 0) 0, rgba(10, 10, 11, 0) 42vw, var(--k) 75vw); }
  .bfb__in { margin-top: -20vw; padding: 0 16px; }
  .bfb__brand, .bfb__badge, .bfb__plane, .bfb__hand { display: none; }
  .bfb__t1 { margin-left: -.2em; font-size: clamp(22px, 7vw, 40px); white-space: nowrap; }
  .bfb__t2 { font-size: clamp(48px, 15vw, 72px); }
  .bfb__sale > span:first-child { font-size: clamp(20px, 5.9vw, 30px); }
  .bfb__sale b { font-size: clamp(80px, 25vw, 140px); }
  .bfb__lead { font-size: 15.5px; }
  .bfb__lead b { font-size: 17px; }
  .bfb__row { flex-direction: column; align-items: stretch; gap: 16px; }
  .bfb__btn { min-height: 62px; padding: 0 20px; font-size: 17px; }
  .bfb__site { justify-content: center; }
  .bfb__timer { align-items: center; }
  .bfb__feats { position: static; display: grid; grid-template-columns: repeat(3, 1fr); margin: 24px 16px 0; }
  .bfb__feats li { flex-direction: column; gap: 8px; padding: 0 6px; text-align: center; font-size: 12px; }
  .bfb__feats li:last-child { padding-right: 6px; }
  .bfb__feats svg { width: 32px; height: 32px; }
  .bfb__note { position: static; margin: 18px 16px 0; text-align: center; }
}

/* ── слайдер главной: «Чёрная пятница» → обычный герой ── */
.hs { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }   /* огромное «50%» не распирает слайд на телефоне */
.hs__s { grid-area: 1 / 1; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.hs__s.is-on { z-index: 1; opacity: 1; visibility: visible; transition: opacity .6s ease; }
.hs__s > * { flex: 1; }
.hs__dots { position: absolute; left: 50%; bottom: 14px; z-index: 3; display: flex; gap: 8px; transform: translateX(-50%); }
.hs__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .5); cursor: pointer; transition: width .3s, background .3s; }
.hs__dots button.is-on { width: 30px; background: #ffc21a; }
@media (max-width: 760px) { .hs__dots { bottom: 8px; } }
@media (prefers-reduced-motion: reduce) { .hs__s, .hs__s.is-on { transition: none; } }