/* Faixa de Black Friday do /planos (só tema escuro), do pacote da Growth (06/11/2026).
   Do pacote ficaram de fora os @font-face: o site já carrega a Urbanist.
   Os ajustes para encaixar no site estão no fim do arquivo. */
.vzbf,
.vzbf * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.vzbf {
  --u: calc(100cqw / 1920);
  container-type: inline-size;
  font-family: 'Urbanist', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #fff;
}
.vzbf-palco {
  position: relative;
  width: 100%;
  aspect-ratio: 1920/968;
  overflow: hidden;
  isolation: isolate;
}
.vzbf [data-frase] {
  display: none;
}
.vzbf[data-ativa='1'] [data-frase='1'],
.vzbf[data-ativa='2'] [data-frase='2'] {
  display: revert;
}
.vzbf[data-ativa='1'] .vzbf-txt[data-frase='1'],
.vzbf[data-ativa='2'] .vzbf-txt[data-frase='2'] {
  display: flex;
}
.vzbf[data-ativa='1'] .vzbf-card[data-frase='1'],
.vzbf[data-ativa='2'] .vzbf-card[data-frase='2'] {
  display: block;
}

/* texto: entre x=240 e y=80..600 do quadro de 1920 x 968 */
.vzbf-txt {
  position: absolute;
  left: calc(240 * var(--u));
  top: calc(64 * var(--u));
  width: calc(900 * var(--u));
  height: calc(540 * var(--u));
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  z-index: 5;
}
.vzbf-selo {
  display: inline-block;
  font-size: calc(22 * var(--u));
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: calc(11 * var(--u)) calc(20 * var(--u));
  border-radius: 999px;
  white-space: nowrap;
  border: calc(2 * var(--u)) solid rgba(255, 255, 255, 0.5);
}
.vzbf-selo b {
  font-weight: 700;
  color: #f72985;
  --led: 1;
  text-shadow: 0 0 calc(3 * var(--u)) rgba(247, 41, 133, calc(0.9 * var(--led))), 0 0 calc(10 * var(--u)) rgba(247, 41, 133, calc(0.5 * var(--led))),
    0 0 calc(18 * var(--u)) rgba(247, 41, 133, calc(0.22 * var(--led)));
  animation: vzbf-led 4s steps(1) infinite;
}
@keyframes vzbf-led {
  0%,
  100% {
    --led: 1;
    opacity: 1;
  }
  6% {
    opacity: 0.35;
  }
  8% {
    opacity: 1;
  }
  11% {
    opacity: 0.4;
  }
  13% {
    opacity: 1;
  }
}
.vzbf-h {
  font-size: calc(56 * var(--u));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin-top: calc(34 * var(--u));
  white-space: nowrap;
}
.vzbf-ac {
  color: #00ddfd;
}
.vzbf-sub {
  font-size: max(15px, calc(26 * var(--u)));
  line-height: 1.45;
  color: #d9daf2;
  margin-top: calc(26 * var(--u));
  max-width: calc(680 * var(--u));
  text-wrap: balance;
}
/* botão e legenda lado a lado: a legenda deixa de empilhar embaixo e o bloco ganha respiro */
.vzbf-acao {
  display: flex;
  align-items: center;
  gap: calc(28 * var(--u));
  margin-top: calc(42 * var(--u));
}
.vzbf-cta {
  display: inline-block;
  flex: none;
  font-size: calc(24 * var(--u));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: #03041c;
  background: #00ddfd;
  padding: calc(20 * var(--u)) calc(34 * var(--u));
  border-radius: 999px;
  white-space: nowrap;
  transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.2s;
}
.vzbf-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(0, 221, 253, 0.6);
}
.vzbf-cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.vzbf-leg {
  font-size: max(12px, calc(16 * var(--u)));
  line-height: 1.5;
  color: #9fa1c9;
  max-width: max(250px, calc(330 * var(--u)));
  text-wrap: balance;
}

/* cartão flutuante ao lado do celular ou da foto */
.vzbf-card {
  position: absolute;
  z-index: 6;
  width: calc(330 * var(--u));
  background: #fff;
  color: #03041c;
  border-radius: calc(22 * var(--u));
  padding: calc(22 * var(--u)) calc(24 * var(--u));
  box-shadow: 0 calc(24 * var(--u)) calc(60 * var(--u)) calc(-16 * var(--u)) rgba(1, 2, 15, 0.6);
}
.vzbf-card small {
  display: block;
  font-size: calc(16 * var(--u));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #850ad6;
}
.vzbf-card-l {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: calc(8 * var(--u));
  margin-top: calc(12 * var(--u));
  font-size: calc(19 * var(--u));
}
.vzbf-card-l span {
  color: #4a4c6a;
}
.vzbf-card-l b {
  text-align: right;
  font-weight: 700;
}
.vzbf-card-t {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: calc(14 * var(--u));
  padding-top: calc(12 * var(--u));
  border-top: calc(2 * var(--u)) dashed #d9daf2;
}
.vzbf-card-t span {
  font-size: calc(19 * var(--u));
  font-weight: 600;
}
.vzbf-card-t b {
  font-size: calc(26 * var(--u));
  font-weight: 700;
  color: #0a9f5b;
}
.vzbf-card[data-frase='2'] .vzbf-card-t b {
  color: #850ad6;
}

/* ---------- tema escuro: preto azulado, brilho marinho, linhas do Z e dois celulares ---------- */
.vzbf--escuro .vzbf-palco {
  background: #01020f;
}
.vzbf--escuro .vzbf-palco::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(48% 70% at 74% 42%, rgba(2, 4, 79, 0.95) 0%, rgba(1, 2, 15, 0) 70%), radial-gradient(30% 40% at 92% 92%, rgba(133, 10, 214, 0.28) 0%, rgba(1, 2, 15, 0) 70%);
}
.vzbf-linhas {
  position: absolute;
  z-index: 1;
  right: calc(-80 * var(--u));
  top: calc(-120 * var(--u));
  width: calc(980 * var(--u));
  opacity: 0.09;
}
.vzbf-f1,
.vzbf-f2 {
  position: absolute;
  z-index: 3;
}
.vzbf-f1 {
  left: calc(1210 * var(--u));
  top: calc(70 * var(--u));
  width: calc(330 * var(--u));
}
.vzbf-f2 {
  left: calc(1430 * var(--u));
  top: calc(150 * var(--u));
  width: calc(300 * var(--u));
  transform: rotate(7deg);
  z-index: 2;
  filter: brightness(0.82);
}
.vzbf-f1 .vz-notif {
  opacity: 1;
  transform: none;
}
.vzbf--escuro .vzbf-card {
  left: calc(1010 * var(--u));
  top: calc(240 * var(--u));
}

@media (prefers-reduced-motion: reduce) {
  .vzbf-selo b {
    animation: none;
  }
  .vzbf-cta {
    transition: none;
  }
}

/* ---------- faixa da página de planos (06/11/2026) ----------
   Fica dentro do contêiner do conteúdo, entre o menu e os cartões de plano. Quadro de 1360 x 240:
   texto | cartão | botão. Abaixo de 720 px de largura, empilha e o cartão sai. */
.vzbf--faixa {
  --u: calc(100cqw / 1360);
}
.vzbf--faixa .vzbf-palco {
  aspect-ratio: 1360/240;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(236 * var(--u)) calc(330 * var(--u));
  align-items: center;
  gap: calc(44 * var(--u));
  padding: 0 calc(52 * var(--u));
  border-radius: calc(20 * var(--u));
}
.vzbf--faixa .vzbf-linhas {
  right: calc(-40 * var(--u));
  top: calc(-210 * var(--u));
  width: calc(640 * var(--u));
}
.vzbf--faixa .vzbf-txt {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
}
.vzbf--faixa .vzbf-selo {
  font-size: calc(15 * var(--u));
  padding: calc(7 * var(--u)) calc(14 * var(--u));
}
.vzbf--faixa .vzbf-h {
  font-size: calc(32 * var(--u));
  margin-top: calc(14 * var(--u));
  white-space: normal;
}
.vzbf--faixa.vzbf--escuro .vzbf-card {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  z-index: 5;
  padding: calc(16 * var(--u)) calc(18 * var(--u));
  border-radius: calc(16 * var(--u));
}
.vzbf--faixa .vzbf-card small {
  font-size: calc(12 * var(--u));
}
.vzbf--faixa .vzbf-card-l {
  font-size: calc(14 * var(--u));
  row-gap: calc(5 * var(--u));
  margin-top: calc(8 * var(--u));
}
.vzbf--faixa .vzbf-card-t {
  margin-top: calc(10 * var(--u));
  padding-top: calc(8 * var(--u));
}
.vzbf--faixa .vzbf-card-t span {
  font-size: calc(14 * var(--u));
}
.vzbf--faixa .vzbf-card-t b {
  font-size: calc(19 * var(--u));
}
.vzbf-lado {
  position: relative;
  z-index: 5;
  flex-direction: column;
  align-items: stretch;
  gap: calc(12 * var(--u));
}
.vzbf[data-ativa='1'] .vzbf-lado[data-frase='1'],
.vzbf[data-ativa='2'] .vzbf-lado[data-frase='2'] {
  display: flex;
}
.vzbf--faixa .vzbf-cta {
  font-size: calc(17 * var(--u));
  padding: calc(17 * var(--u)) calc(22 * var(--u));
  text-align: center;
}
.vzbf--faixa .vzbf-leg {
  font-size: max(11px, calc(13 * var(--u)));
  max-width: none;
}
@container (max-width:720px) {
  .vzbf--faixa .vzbf-palco {
    aspect-ratio: auto;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 26px 22px;
    border-radius: 16px;
  }
  .vzbf--faixa.vzbf--escuro[data-ativa] .vzbf-card {
    display: none;
  }
  .vzbf--faixa .vzbf-selo {
    font-size: 11px;
    padding: 6px 12px;
    border-width: 1px;
  }
  .vzbf--faixa .vzbf-h {
    font-size: 23px;
    margin-top: 12px;
  }
  .vzbf--faixa .vzbf-h br {
    display: none;
  }
  .vzbf--faixa .vzbf-cta {
    font-size: 15px;
    padding: 15px 18px;
    white-space: normal;
  }
  .vzbf--faixa .vzbf-leg {
    font-size: 12px;
  }
  .vzbf--faixa .vzbf-linhas {
    width: 360px;
    top: -120px;
  }
}

/* ---------- ajustes para o site ---------- */
/* o body do site usa line-height 1.4; o pacote foi desenhado com o padrão do navegador */
.vzbf {
  line-height: normal;
}
/* o a:hover do Bootstrap troca a cor e sublinha o botão */
.vzbf-cta:hover {
  color: #03041c;
  text-decoration: none;
}
/* o menu (#masthead) é absoluto: a faixa assume o respiro de topo que era do #planos */
.vzbf-faixa-wrap {
  padding-top: 150px;
}
@media (max-width: 768px) {
  .vzbf-faixa-wrap {
    padding-top: 125px;
  }
}
/* só com container queries: sem elas a faixa some e o #planos fica com o respiro original do planos.css */
@supports (container-type: inline-size) {
  .vzbf-faixa-wrap + #planos {
    padding-top: 40px;
  }
  /* o CTA da frase 2 rola até #planos com o menu fixo (~100 px) por cima: sem isso ele cobre o h1 */
  .vzbf-faixa-wrap + #planos {
    scroll-margin-top: 100px;
  }
}
/* sem container queries (Safari < 16) o layout da faixa quebra */
@supports not (container-type: inline-size) {
  .vzbf-faixa-wrap {
    display: none;
  }
}