@import "../../../lp/css/fonts.css";

@font-face {
  font-family: avalors;
  src: url("../../../fonts/Avalors.otf") format("opentype");
}

@font-face {
  font-family: akira;
  src: url("../../../fonts/AkiraExpandedDemo.otf") format("opentype");
}

:root {
  --neutrals-light-0: #ffffff;
  --neutrals-light-red-300: #dd303e;
  --neutrals-light-red-500: #e24e5a;
  --neutrals-light-yellow-300: #fbd71e;
  --bg-color: #131111;
}

#banner-projeto {
  background-color: transparent;
  margin-top: 50px;
}

/* #banner-projeto .wrapper-prorrogado {
  border-radius: 8px;
  background: url("/assets/banners/projeto/img/faixa-prorrogado.png?202311300115"),
    url("/assets/banners/projeto/img/bg-mini-banner-mobile.webp?202311300115");
  background-position: bottom right, center;
  background-repeat: no-repeat;
  background-size: contain, cover;
} */

#banner-projeto .wrapper {
  border-radius: 8px;
  background-repeat: no-repeat;
  background-image: url("/assets/banners/projeto/img/bg.webp?202410281110");
  background-position: center;
  background-size: cover;
}

#banner-projeto.projeto-page .wrapper {
  background-repeat: no-repeat;
  background-image: url("/assets/banners/projeto/img/bg-box.webp?202410281110");
  background-position: center;
  background-size: cover;
}

/* #banner-projeto.projeto-page .wrapper-prorrogado {
  background-repeat: no-repeat;
  background: url("/assets/banners/blackfriday/img/faixa-prorrogado-mobile.png?202311300115"),
    url("/assets/banners/projeto/img/bg-mini-banner-mobile.webp?202311300115");
  background-position: bottom, center;
  background-repeat: no-repeat;
  background-size: contain, cover;
} */

#banner-projeto .main-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 24px;
  height: max-content;
}

#banner-projeto.projeto-page .main-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  height: max-content;
}

#banner-projeto .main-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 24px;
  height: max-content;
  margin: 0 0 2rem 0;
}

#banner-projeto .wrapper-title {
  width: fit-content;
}

#banner-projeto.projeto-page .wrapper-title {
  width: 100%;
}

#banner-projeto.projeto-page .banner-pretitle {
  font-size: 16px;
  text-align: center;
  margin-bottom: 16px;
}

#banner-projeto .banner-pretitle .data-hora {
  color: #ffffff;
  font-family: "Source Sans Pro";
  font-size: 14px;
  font-weight: 600;
  line-height: 125%;
  letter-spacing: 2px;
  margin: 0 auto 8px;
  padding: 4px 8px;
  border: 1.5px solid #ffffff;
  width: fit-content;
}

#banner-projeto .banner-pretitle .pretitle {
  display: none;
}

#banner-projeto.projeto-page .banner-pretitle .pretitle {
  color: #ffffff;
  display: inline;
  font-family: "Margem-bold";
  font-size: 15px;
  line-height: 24px;
  text-transform: uppercase;
}

#banner-projeto.projeto-page .banner-title {
  margin-bottom: 24px;
}

#banner-projeto .banner-title {
  color: #fff;
  display: flex;
  flex-direction: column;
  font-family: "Margem-black";
  font-size: 56px;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 100%;
  position: relative;
  text-transform: uppercase;
  width: max-content;
}

#banner-projeto.projeto-page .banner-title {
  width: fit-content;
  font-size: 52px;
}

#banner-projeto.projeto-page .banner-title br {
  display: none;
}

#banner-projeto .banner-title span {
  color: #dd303e;
  font-family: "Margem-black";
  font-size: 20px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 100%;
  text-transform: uppercase;
}

#banner-projeto .banner-content {
  padding-left: 32px !important;
  display: flex;
  flex-direction: column;
  width: 100%;
}

#banner-projeto.projeto-page .banner-content {
  padding-left: 0 !important;
}

#banner-projeto .banner-content .text {
  color: #ffffff;
  font-family: "Margem-regular";
  font-size: 20px;
  line-height: 125%;
}

#banner-projeto .banner-content .text b {
  font-family: "Margem-medium";
}

#banner-projeto .banner-content .text strong {
  font-family: "Margem-bold";
}

#banner-projeto .banner-content .text .highlight {
  color: #dd303e;
  text-transform: uppercase;
}

#banner-projeto .banner-content .banner-cta {
  background-color: #dd303e;
  border-radius: 3px;
  color: #ffffff;
  font-family: "Source Sans Pro";
  font-size: 16px;
  font-weight: 600;
  line-height: 125%;
  max-width: 255px;
  text-align: center;
  text-transform: uppercase;
  padding: 13px 20px;
}

#banner-projeto.projeto-page .banner-content .banner-cta {
  max-width: 100%;
  width: 100%;
}

#banner-projeto .bottom-structure {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

#banner-projeto.projeto-page .bottom-structure {
  flex-direction: column;
}

#banner-projeto .bottom-structure .banner-pricing div,
#banner-projeto .bottom-structure .banner-pricing span {
  color: #ffffff;
  font-family: "Margem-bold";
}

#banner-projeto .banner-content .text .hidden-text {
  display: none;
}

#banner-projeto.projeto-page .banner-content .text .hidden-text {
  display: inline;
}

#banner-projeto .bottom-structure .banner-pricing {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

#banner-projeto .bottom-structure .banner-pricing .pricing-description {
  display: none;
}

#banner-projeto.projeto-page
  .bottom-structure
  .banner-pricing
  .pricing-description {
  display: block;
  text-align: center;
  font-size: 14px;
  line-height: 135%;
  text-transform: uppercase;
}

#banner-projeto .bottom-structure .banner-pricing .pricing > span {
  color: #e24e5a;
  font-size: 16px;
  line-height: 15px;
  text-align: center;
  text-transform: uppercase;
}

#banner-projeto.projeto-page .bottom-structure .banner-pricing .pricing > span {
  font-size: 14px;
  line-height: 14px;
}

#banner-projeto .bottom-structure .banner-pricing .pricing {
  align-items: center;
  display: flex;
  flex-direction: column;
}

#banner-projeto .bottom-structure .banner-pricing .pricing .wrapper-pricing {
  display: flex;
  gap: 4px;
  font-size: 52px;
  line-height: 100%;
}

#banner-projeto
  .bottom-structure
  .banner-pricing
  .pricing
  .wrapper-pricing
  span {
  font-family: "Margem-regular";
  font-size: 14px;
}