/*
 * Landing page "The Black November"
 * Template: templates/tpl-black-november.php
 *
 * Layout, espaçamento e cores ficam em Tailwind (classes nos partials).
 * Aqui ficam: tipografia do design, sombras, sobreposições e o palco das fotos
 * que "vazam" da tela. Valores medidos no Figma (frame de 1920px).
 *
 * --u = 1px em telas >= 1920px e encolhe proporcionalmente abaixo disso,
 * para o desktop manter a proporção do design.
 */

.bn {
  --u: min(1px, calc(100vw / 1920));
  position: relative;
  overflow-x: clip;
  background: #f7f7f7;
  color: #000;
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 100;
  font-optical-sizing: auto;
}

.bn *,
.bn *::before,
.bn *::after {
  box-sizing: border-box;
}

.bn h1,
.bn h2,
.bn p {
  margin: 0;
  padding: 0;
  text-transform: none;
  font-family: inherit;
  color: inherit;
}

.bn img {
  max-width: none;
}

.bn strong {
  font-weight: 700;
}

/* ---------- Tipografia (valores do Figma) ---------- */

.bn .bn-topline {
  font-size: max(13px, calc(28.441 * var(--u)));
  line-height: 1.2;
  font-weight: 400;
}

.bn .bn-display {
  font-size: max(34px, calc(140.113 * var(--u)));
  line-height: 0.9;
  letter-spacing: 0.2em;
  font-weight: 300;
  text-align: center;
}

.bn .bn-display em {
  font-style: italic;
  font-weight: 300;
}

.bn .bn-num {
  font-size: max(72px, calc(180.362 * var(--u)));
  line-height: 1.2;
  font-weight: 100;
}

.bn .bn-aux {
  font-size: max(18px, calc(36.063 * var(--u)));
  line-height: 1.2;
  font-weight: 100;
  font-style: italic;
}

.bn .bn-lead {
  font-size: max(16px, calc(34.109 * var(--u)));
  line-height: 1.2;
  font-weight: 100;
}

.bn .bn-lead strong {
  font-weight: 500;
}

.bn .bn-more {
  font-size: max(15px, calc(25 * var(--u)));
  line-height: 1.365;
  font-weight: 100;
}

.bn .bn-h2 {
  font-size: max(28px, calc(70 * var(--u)));
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: 100;
}

.bn .bn-body {
  font-size: max(15px, calc(28.441 * var(--u)));
  line-height: 1.2;
  letter-spacing: 0.05em;
  font-weight: 100;
  text-align: justify;
}

.bn .bn-body p + p {
  margin-top: 1.2em;
}

.bn .bn-body--tight {
  letter-spacing: 0.0281em; /* 0.8px a 28.44px */
}

/* ---------- Hero ---------- */

.bn-hero__bg {
  position: absolute;
  top: 0;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(1073 * var(--u));
  transform: rotate(180deg);
  overflow: hidden;
  pointer-events: none;
}

.bn-hero__bg img {
  position: absolute;
  top: 0.02%;
  left: 0;
  width: 100%;
  height: 118.08%;
}

.bn-hero__fade {
  position: absolute;
  top: calc(257 * var(--u));
  left: 0;
  width: 100%;
  height: calc(876 * var(--u));
  pointer-events: none;
}

/* ---------- Palco das fotos da introdução (fotos que vazam da tela) ---------- */

.bn-stage {
  container-type: inline-size;
}

.bn-stage__inner {
  position: relative;
  height: 45.8333cqw; /* 880 / 1920 */
}

.bn-stage__item {
  position: absolute;
  left: calc(var(--x) / 1920 * 100cqw);
  top: calc(var(--y) / 1920 * 100cqw);
  width: 19.5833cqw; /* 376 / 1920 */
  aspect-ratio: 376 / 477;
  margin: 0;
  overflow: hidden;
  border-radius: 1.8229cqw; /* 35 / 1920 */
}

.bn-stage__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  /* Mobile: as fotos viram uma faixa com rolagem horizontal */
  .bn-stage__inner {
    display: flex;
    gap: 12px;
    height: auto;
    padding: 0 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .bn-stage__item {
    position: relative;
    left: auto;
    top: auto;
    flex: 0 0 62vw;
    width: 62vw;
    border-radius: 20px;
    scroll-snap-align: center;
  }
}

/* ---------- Fotos com recorte (valores exatos do Figma) ---------- */

.bn-photo {
  position: relative;
  overflow: hidden;
  border-radius: 35px;
  margin: 0;
}

.bn-photo > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bn-photo--crop > img {
  inset: auto;
  left: 0;
  object-fit: fill;
}

.bn-photo--crop-arkowood > img {
  top: -64.37%;
  height: 191.85%;
}

.bn-photo--crop-asa > img {
  top: 0.03%;
  height: 111.67%;
}

.bn-photo--crop-thermo > img {
  top: -0.09%;
  height: 207.52%;
}

.bn-photo--shadow {
  box-shadow: 0 7px 21.4px 0 rgba(0, 0, 0, 0.35);
}

@media (max-width: 767px) {
  .bn-photo {
    border-radius: 20px;
  }
}

/* ---------- Bloco ASA ---------- */

.bn-asa {
  background: #909090;
  border-radius: 35px;
  box-shadow: 3px 4px 43.5px -2px rgba(0, 0, 0, 0.35);
  color: #fff;
}

@media (max-width: 767px) {
  .bn-asa {
    border-radius: 20px;
  }
}

/* ---------- CTA final ---------- */

.bn-cta__bg {
  background: #252525;
  border-radius: 35px 35px 0 0;
  color: #fff;
}

.bn-cta__ribbon {
  position: absolute;
  z-index: 1;
  top: calc(-539 * var(--u));
  left: -2.9688%; /* -57 / 1920 */
  width: 106.25%; /* 2040 / 1920 */
  height: auto;
  pointer-events: none;
}

/* versão em loop: o "trilho" tem 1 tile + a largura visível e anda 1 tile por volta */
.bn-cta__ribbon--loop {
  aspect-ratio: 2040 / 980;
  overflow: hidden;
}

.bn-cta__ribbon-track {
  width: 185.2941%; /* 100% + tile (1740 / 2040 = 85.2941%) */
  height: 100%;
  background-repeat: repeat-x;
  background-size: auto 100%;
  will-change: transform;
}

.bn .bn-cta__display {
  font-size: max(30px, calc(89.517 * var(--u)));
  line-height: 0.9;
  letter-spacing: 0.2em;
  font-weight: 300;
  text-align: center;
}

.bn .bn-cta__display em {
  font-style: italic;
  font-weight: 300;
}

.bn .bn-cta__aux {
  font-size: max(22px, calc(51.137 * var(--u)));
  line-height: 0.9387;
  font-weight: 100;
  font-style: italic;
}

.bn .bn-cta__aux strong {
  font-weight: 600;
}

.bn .bn-cta__num {
  font-size: max(96px, calc(255.751 * var(--u)));
  line-height: 1.2;
  font-weight: 100;
  font-style: italic;
  text-align: center;
}

.bn .bn-cta__off {
  font-size: max(56px, calc(147.621 * var(--u)));
  line-height: 1.2;
  font-weight: 100;
  font-style: italic;
  text-align: right;
}

.bn .bn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, calc(512 * var(--u)));
  min-width: 260px;
  height: max(60px, calc(88 * var(--u)));
  border: 1px solid #fff;
  border-radius: 100px;
  color: #fff;
  font-size: max(14px, calc(28.441 * var(--u)));
  font-weight: 100;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.bn .bn-btn:hover,
.bn .bn-btn:focus-visible {
  background: #fff;
  color: #252525;
  text-decoration: none;
}

/* ---------- Container do site (.container), na largura do design: 1450px de conteúdo ---------- */

.bn .container.bn-container {
  width: 100%;
  max-width: 1514px; /* 1450 + 2 × 32 */
  margin-right: auto;
  margin-left: auto;
  padding-right: 20px;
  padding-left: 20px;
}

@media (min-width: 768px) {
  .bn .container.bn-container {
    padding-right: 32px;
    padding-left: 32px;
  }
}