/* Banner de Black Friday da home (Figma "banners bf"), tema escuro ("Desktop Azul - frase 1" 1920 x 1005 e
   "Mobile Azul - Frase 1 — com espaço inferior" 390 x 1045) e tema rosa ("Desktop rosa - Frase 2" 1920 x 1005 e
   "Mobile rosa - Frase 2 — com espaço inferior" 390 x 1077; só o visual, o texto é o da frase 1 nas posições do escuro).
   Os 100 px de baixo dos quadros mobile ficam sob a faixa de números. Sem cantos arredondados: o fim do banner encosta
   reto na seção seguinte. O tema rosa é um bloco à parte, depois do mobile do escuro.
   Medidas em unidades do quadro do Figma: --u = 1 px do desktop escalado pela largura; --m = 1 px do mobile (escala até 1,25).
   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;
  line-height: 1.2;
  color: #fff;
}
.vzbf-palco {
  /* o menu (absoluto, ~100px) fica sobre o topo do quadro, como no Figma; em telas menores o quadro desce o que falta
     para o selo não ficar sob o menu, e ganha fundo extra embaixo para a .call-banner (pendurada 100px) não cobrir o conteúdo */
  --desl: max(0px, calc(125px - 193 * var(--u)));
  --extra: max(0px, calc(110px - 129 * var(--u)));
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--desl) 0 var(--extra);
  background: radial-gradient(
      calc(576 * var(--u)) calc(439.62 * var(--u)) at calc(1766.4 * var(--u)) calc(var(--desl) + 917.07 * var(--u)),
      rgba(133, 10, 214, 0.28),
      rgba(133, 10, 214, 0) 70%
    ),
    radial-gradient(
      calc(921.6 * var(--u)) calc(769.33 * var(--u)) at calc(1420.8 * var(--u)) calc(var(--desl) + 367.55 * var(--u)),
      rgba(2, 4, 79, 0.95),
      rgba(2, 4, 79, 0) 70%
    ),
    #01020f;
}
.vzbf-quadro {
  position: relative;
  height: calc(1005 * var(--u));
}
.vzbf-quadro > * {
  position: absolute;
}
.vzbf-quadro img {
  display: block;
  max-width: none;
  height: auto;
}

/* fundo: contorno do símbolo (opacidade 36%), inteiro à direita e um recorte no canto inferior esquerdo */
.vzbf-linhas {
  left: calc(960 * var(--u));
  top: calc(-327 * var(--u));
  width: calc(1153 * var(--u));
  opacity: 0.36;
  z-index: 1;
}
.vzbf-linhas-canto {
  left: calc(-5 * var(--u));
  top: calc(775 * var(--u));
  width: calc(746 * var(--u));
  height: calc(234 * var(--u));
  border-radius: calc(11 * var(--u));
  overflow: hidden;
  opacity: 0.36;
  z-index: 1;
}
.vzbf-quadro .vzbf-linhas-canto img {
  position: absolute;
  left: -56.33%;
  top: 0;
  width: 156.35%;
}
.vzbf-celular {
  left: calc(795 * var(--u));
  top: calc(313 * var(--u));
  width: calc(272 * var(--u));
  z-index: 2;
}
.vzbf-cartao {
  left: calc(718 * var(--u));
  top: calc(696 * var(--u));
  width: calc(234 * var(--u));
  z-index: 3;
}
.vzbf-foto {
  left: calc(987 * var(--u));
  top: calc(193 * var(--u));
  width: calc(812 * var(--u));
  z-index: 4;
}

/* texto */
.vzbf-selo {
  display: block; /* o style.css põe picture { display: contents }, que anularia o posicionamento */
  left: calc(180 * var(--u));
  top: calc(223 * var(--u));
  z-index: 5;
}
.vzbf-quadro .vzbf-selo img {
  width: calc(332.67 * var(--u));
}
.vzbf-h {
  left: calc(177 * var(--u));
  top: calc(330 * var(--u));
  font-size: calc(56 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: #fff;
  z-index: 5;
}
.vzbf-ac {
  display: block;
  color: #00ddfd;
}
.vzbf-sub {
  left: calc(180 * var(--u));
  top: calc(563 * var(--u));
  font-size: max(13px, calc(24 * var(--u)));
  font-weight: 500;
  white-space: nowrap;
  z-index: 5;
}
.vzbf-cta {
  left: calc(180 * var(--u));
  top: calc(664 * var(--u));
  width: calc(327 * var(--u));
  height: calc(52 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(10 * var(--u));
  background: #00ddfd;
  color: #02044f;
  font-size: calc(24 * var(--u));
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  z-index: 5;
}
.vzbf-cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.vzbf-leg {
  left: calc(180 * var(--u));
  top: calc(754 * var(--u));
  font-size: max(11px, calc(14 * var(--u)));
  font-weight: 500;
  white-space: nowrap;
  z-index: 5;
}
.vzbf-so-m {
  display: none;
}

/* ---------- mobile: quadro de 390 x 1045, centralizado e escalado até 1,25x ---------- */
@container (max-width: 899px) {
  .vzbf-palco {
    --m: min(calc(100cqw / 390), 1.25px);
    padding: 0;
    /* o fundo do Figma começa 61px acima do quadro (1106 px de altura); posições em relação ao centro, porque o quadro fica centralizado */
    background: radial-gradient(
        calc(292.5 * var(--m)) calc(338.57 * var(--m)) at calc(50% + 195 * var(--m)) calc(999.9 * var(--m)),
        rgba(133, 10, 214, 0.3),
        rgba(133, 10, 214, 0)
      ),
      radial-gradient(
        calc(331.5 * var(--m)) calc(338.57 * var(--m)) at calc(50% - 175.5 * var(--m)) calc(752.7 * var(--m)),
        rgba(2, 4, 79, 0.55),
        rgba(2, 4, 79, 0)
      ),
      radial-gradient(
        calc(195 * var(--m)) calc(248.29 * var(--m)) at calc(50% + 62.4 * var(--m)) calc(267.41 * var(--m)),
        rgba(20, 30, 140, 0.35),
        rgba(20, 30, 140, 0)
      ),
      radial-gradient(
        calc(370.5 * var(--m)) calc(485.29 * var(--m)) at calc(50% + 46.8 * var(--m)) calc(335.13 * var(--m)),
        rgba(2, 4, 79, 0.95),
        rgba(2, 4, 79, 0.55) 45%,
        rgba(2, 4, 79, 0)
      ),
      #01020f;
  }
  .vzbf-quadro {
    width: calc(390 * var(--m));
    height: calc(1045 * var(--m));
    margin: 0 auto;
  }
  /* .vzbf-quadro na frente: precisa vencer o .vzbf-quadro img { display: block } */
  .vzbf-quadro .vzbf-linhas,
  .vzbf-quadro .vzbf-celular,
  .vzbf-quadro .vzbf-cartao,
  .vzbf-so-d {
    display: none;
  }
  .vzbf-so-m {
    display: inline;
  }
  .vzbf-linhas-canto {
    left: 0;
    top: calc(525 * var(--m));
    width: calc(418 * var(--m));
    height: calc(533 * var(--m));
    border-radius: 0;
    opacity: 0.38;
  }
  .vzbf-quadro .vzbf-linhas-canto img {
    left: -40.43%;
    width: 140.43%;
  }
  .vzbf-foto {
    left: calc(19 * var(--m));
    top: calc(412 * var(--m));
    width: calc(351 * var(--m));
  }
  .vzbf-selo {
    left: calc(74.85 * var(--m));
    top: calc(116.2 * var(--m));
  }
  .vzbf-quadro .vzbf-selo img {
    width: calc(237.3 * var(--m));
  }
  .vzbf-h,
  .vzbf-sub,
  .vzbf-leg {
    left: 0;
    right: 0;
    text-align: center;
  }
  .vzbf-h {
    top: calc(186 * var(--m));
    font-size: calc(34 * var(--m));
  }
  .vzbf-ac {
    margin-top: calc(6 * var(--m));
    font-size: calc(28 * var(--m));
  }
  .vzbf-sub {
    top: calc(328 * var(--m));
    width: calc(272 * var(--m));
    margin: 0 auto;
    font-size: calc(18 * var(--m));
    white-space: normal;
  }
  .vzbf-cta {
    left: calc(54 * var(--m));
    top: calc(742 * var(--m));
    width: calc(282 * var(--m));
    height: calc(52 * var(--m));
    border-radius: calc(10 * var(--m));
    font-size: calc(20 * var(--m));
  }
  .vzbf-leg {
    top: calc(827 * var(--m));
    font-size: calc(13 * var(--m));
  }
}

/* ---------- tema rosa (desktop): fundo rosa com um brilho desfocado à direita; celular, foto e cartão próprios ---------- */
.vzbf--rosa .vzbf-palco {
  background: #f72985;
}
.vzbf--rosa .vzbf-quadro::before {
  content: '';
  position: absolute;
  left: calc(710 * var(--u));
  top: calc(170 * var(--u));
  width: calc(1132 * var(--u));
  height: calc(1106 * var(--u));
  border-radius: 50%;
  background: #f982b7;
  opacity: 0.55;
  filter: blur(calc(127.3 * var(--u)));
}
.vzbf--rosa .vzbf-linhas {
  left: calc(488 * var(--u));
  top: calc(-297 * var(--u));
  width: calc(1575 * var(--u));
}
.vzbf--rosa .vzbf-linhas-canto {
  display: none;
}
.vzbf--rosa .vzbf-celular {
  left: calc(1375.29 * var(--u));
  top: calc(189.28 * var(--u));
  width: calc(365 * var(--u));
  z-index: 2;
}
/* no rosa o cartão fica na frente da foto */
.vzbf--rosa .vzbf-foto {
  left: calc(700 * var(--u));
  top: calc(104 * var(--u));
  width: calc(901 * var(--u));
  z-index: 3;
}
.vzbf--rosa .vzbf-cartao {
  left: calc(1181 * var(--u));
  top: calc(607 * var(--u));
  width: calc(450 * var(--u));
  z-index: 4;
}
.vzbf--rosa .vzbf-ac {
  color: #03041c;
}
.vzbf--rosa .vzbf-cta,
.vzbf--rosa .vzbf-cta:hover,
.vzbf--rosa .vzbf-cta:focus {
  background: #02044f;
  color: #fff;
}

/* ---------- tema rosa (mobile): quadro de 390 x 1077 ---------- */
@container (max-width: 899px) {
  .vzbf--rosa .vzbf-palco {
    background: #f72985;
  }
  .vzbf--rosa .vzbf-quadro {
    height: calc(1077 * var(--m));
  }
  .vzbf--rosa .vzbf-quadro::before {
    left: calc(-33 * var(--m));
    top: calc(548 * var(--m));
    width: calc(336 * var(--m));
    height: calc(328 * var(--m));
    opacity: 0.85;
    filter: blur(calc(127.3 * var(--m)));
  }
  .vzbf--rosa .vzbf-linhas-canto {
    display: block;
    top: calc(520 * var(--m));
    width: calc(390 * var(--m));
    height: calc(557 * var(--m));
  }
  .vzbf--rosa .vzbf-quadro .vzbf-linhas-canto img {
    left: -45.3%;
    width: 157.35%;
  }
  .vzbf--rosa .vzbf-selo {
    left: calc(77.1 * var(--m));
    top: calc(123.94 * var(--m));
  }
  .vzbf--rosa .vzbf-quadro .vzbf-selo img {
    width: calc(237.79 * var(--m));
  }
  .vzbf--rosa .vzbf-foto {
    left: 0;
    top: calc(423 * var(--m));
    width: calc(365 * var(--m));
  }
  .vzbf--rosa .vzbf-quadro .vzbf-cartao {
    display: block;
    left: calc(156 * var(--m));
    top: calc(589 * var(--m));
    width: calc(209 * var(--m));
  }
  .vzbf--rosa .vzbf-cta {
    top: calc(763 * var(--m));
    height: calc(49.05 * var(--m));
  }
  .vzbf--rosa .vzbf-leg {
    top: calc(843 * var(--m));
    font-size: calc(14 * var(--m));
  }
}

/* ---------- ajustes para o site ---------- */
/* o a:hover do Bootstrap troca a cor e sublinha o botão */
.vzbf-cta:hover,
.vzbf-cta:focus {
  color: #02044f;
  text-decoration: none;
}
/* a coluna do #banner (.vzbf-home) é container; a .row do Bootstrap (margem -15px) a alarga 30px além da tela:
   o recuo de 15px deixa o banner na largura da tela */
.vzbf-home {
  container-type: inline-size;
}
.vzbf-home .vzbf {
  padding: 0 15px;
}
/* com o banner empilhado, a faixa de números (.call-banner, absoluta no style.css) é mais alta e, presa pelo bottom, cobriria
   o botão. Presa pelo top, ela começa nos 100 px de baixo do quadro mobile (1045 - 100, o espaço reservado no Figma, escalado
   como o --m; 100cqw da .vzbf-home tem os 30 px da .row a mais) e continua absoluta, para a coluna terminar junto com o banner
   e a seção seguinte (que tem 150 px de topo contando com a faixa pendurada) encostar nele, sem vão. */
@container (max-width: 899px) {
  .vzbf-home .call-banner {
    position: absolute; /* o style.css a põe em relative em telas pequenas */
    top: calc(945 * min((100cqw - 30px) / 390, 1.25px));
    bottom: auto;
  }
  /* quadro mobile do rosa: 1077 - 100 (o banner-v2.js marca o tema sorteado na coluna) */
  .vzbf-home[data-vzbf-tema='rosa'] .call-banner {
    top: calc(977 * min((100cqw - 30px) / 390, 1.25px));
  }
}
/* com campanha a .call-banner fica fora do #carouselHeader e perde as regras "#carouselHeader ..." do style.css que a
   alcançam: espelhadas aqui, com as mesmas media queries, para ficar igual à home sem campanha (no mobile o botão
   centralizado). Os p já são sobrescritos pelo !important de ".call-banner .col-lg-3 > p", como no original. */
.vzbf-home .call-banner p {
  margin-top: 0;
  margin-bottom: 25px;
  font-size: 1.4em;
  font-weight: 600;
}
@media only screen and (max-width: 1600px) {
  .vzbf-home .call-banner p {
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 1024px) {
  .vzbf-home .call-banner p {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 768px) {
  .vzbf-home .call-banner .text-right {
    text-align: center !important;
  }
  .vzbf-home .call-banner p {
    margin-bottom: 0;
  }
}
/* o #carouselHeader é flex centralizado aqui; para a .call-banner só importa o text-align, que ela herdava */
@media only screen and (max-width: 720px) {
  .vzbf-home .call-banner {
    text-align: center;
  }
}