@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css");


.SegmentosPersonalizados{
  font-size: 16px;
  color: #4E5458;
  font-family: var(--font-family);
  font-weight: 500;
}

.SegmentosPersonalizados p{
  font-weight: 500;
  font-size: 15px !important;
}

.section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.section:nth-child(odd) {
  background-color: #f5f5f5;
}

.section:nth-child(even) {
  background-color: #fff;
}

.section h2 {
  font-size: 2rem;
  color: #333;
}

/* Slideshow */
.slideshow {
  position: relative;
  width: 100%;
  max-width: 1920px;
  height: 420px;
  margin: 0 auto;
  overflow: hidden;
}

.slideshow-images{
  background: #000000;
}

.slideshow-images .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 420px;
  opacity: 0;
  transition: opacity 1s ease;
}

.slideshow-images .slide img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}

.slideshow-images .slide.active {
  opacity: 1;
}

.slideshow-images::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0000007d;
    z-index: 2;
}


.SlideBoxe{
  width: 1100px;
  margin: 0 auto;
  height: 100%;
}

.slideshow-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    z-index: 99;
    position: relative;
}

.slideshow-content .nivel_01{
  font-size: 36px;
  font-weight: 500;
  text-transform: uppercase;
}

.slideshow-content .nivel_02{
  font-size: 36px;
  font-weight: 500;
  text-transform: uppercase;
}

.slideshow-content .nivel_03{
  font-size: 36px;
  font-weight: 800;
  text-transform: uppercase;
}

.slideshow-content .nivel_04{
  font-size: 64px;
  font-weight: 800;
  text-transform: uppercase;
}



.slideshow-cta {
    width: 425px;
    height: 65px;
    background: #D22630;
    color: #fff;
    font-size: 22px;
    text-transform: uppercase;
    border-radius: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-shadow: none;
    transition: background 0.3s ease;
}

.slideshow-cta:hover {
  background: #a81d25;
}

.ConteudoSegmentosPersonalizados{
    width: 1100px;
    margin: 0 auto;
}

#section-2.Chamada h2{
    margin: 50px 0;
    font-size: 27px;
    padding: 0 80px;
    text-align: center;
}

#section-3.Introdutorio{
  line-height: 25px;
}

/*Box Vantagens*/
.BoxesVantagens{
  display: flex;
  gap: 55px;
  margin: 50px 0;
}

.Boxvantage{
  display: flex;
   height: 100px;   
}

.Boxvantage_img{
  background: #D22630;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
}

.Boxvantage_img img{
  width: 70px;
  height: 70px;
}

.Boxvantage_texto{
    width: 230px;
    height: 100px;
    background: #E5E5E5;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.Boxvantage_texto div:nth-child(1){
  font-weight: bold;
  text-transform: uppercase;
}

.Boxvantage_texto div:nth-child(2){
  font-weight: 500;
  font-size:15px;
}

/*O QUE MUDA*/

.BoxVisual{
  display: flex;
  gap: 50px;
}

.BoxVisual_Montagem{
  margin-top: -62px ;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.BoxVisual_Montagem img {
  transition: opacity 0.5s ease;
}

.BoxVisual_Montagem_banner,
.BoxVisual_Montagem_vitrines {
  position: relative;
}

.BoxVisual_Montagem_mosaico{
  margin-top: -80px;
  margin-bottom: 20px;
  position: relative;
}

.BoxVisual_Montagem_carrossel{
  margin-bottom: 20px;
  position: relative;
}

#section-5-chamada.VisualChamda{
  width: 100%;
}

.BoxVisualChamada {
    display: flex;
    width: 100%;
    gap: 50px;
    justify-content: space-between;
}

.BoxVisual_Texto_Titulo{
  background: #D22630;
    color: #ffffff;
    font-size: 26px;
    text-transform: uppercase;
    font-weight: 700;
    height: 62px;
    display: flex;
    align-items: center;
    width: 55%;
    padding: 0 0 0 30px;
}

.BoxVisual_Texto ul{
  margin: 30px 0 0 20px;
  list-style: none;
}

.BoxVisual_Texto ul li h3{
  font-size: 20px;
  margin: 0 0 3px 0;
}

.BoxVisual_Texto ul li{
  padding: 18px 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
}

 #section-6.Login{
    text-align: center;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 60px 0 110px 0;
 }


 #section-6.Login a.FacaLogin{
    width: 425px;
    height: 65px;
    background: #D22630;
    color: #fff;
    font-size: 22px;
    text-transform: uppercase;
    border-radius: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-shadow: none;
    transition: background 0.3s ease;
 }

 #section-6.Login a.FacaLogin:hover{
    background: #a81d25;
 }

 #section-7.SegmentosCertos{
  background: #E5E5E5;
  padding: 30px;
 }

 .Boxes_SegmentosCertos{
    display: flex;
    flex-wrap: wrap;
    width: 1100px;
    margin: 0 auto;   
    gap: 45px; 
 }

 .BoxSegmentosCertos{
  width: 240px;
  height: 234px;
  position: relative;
 }

 .img_BoxSegmentosCertos{
  position: relative;
 }

  .img_BoxSegmentosCertos.ChamadaTit{
    background: #D22630;
    width: 240px;
    height: 188px;
  }

  .img_BoxSegmentosCertos img{
    filter: grayscale(100%);
  }

  .img_BoxSegmentosCertos img.AtivoSeg{
    filter: grayscale(0%);
  }

  .img_BoxSegmentosCertos img.ConstruSeg {
    filter: grayscale(0%);
  }

  .img_BoxSegmentosCertos:has(img.ConstruSeg)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 20%, gray 60%);
    mix-blend-mode: saturation;
    z-index: 1;
  }

.img_BoxSegmentosCertos.ChamadaTit .Tit_BoxSegmentosCertos{
  text-shadow:initial;
}

 .Tit_BoxSegmentosCertos{
    position: absolute;
    z-index: 3;
    font-size: 20px;
    line-height: 28px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 15px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
 }

 .texto_BoxSegmentosCertos{
    text-transform: uppercase;
    text-align: center;
    width: 240px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
 }

 .AlongaBackred{
    width: 620px;
    height: 188px;
    background: #D22630;
    position: absolute;
    right: 50px;
 }




 @media (min-width: 1025px) and (max-width: 1170px) {
  .ConteudoSegmentosPersonalizados {width: 100%;padding: 0 10px;}
  .slideshow-content .nivel_01 {font-size: 26px;}
  .slideshow-content .nivel_02 {font-size: 26px;}
  .slideshow-content .nivel_03 {font-size: 26px;}
  .slideshow-content .nivel_04 {font-size: 54px;}
  .slideshow-cta {width: 325px;height: 50px;font-size: 16px;}
  .slideshow-images .slide {height: 320px;}
  .slideshow {height: 320px;padding: 30px;}
  #section-2.Chamada h2 {padding: 0 158px;margin: 30px 0;font-size: 21px;line-height: 28px;}
  #section-3.Introdutorio {line-height: 23px;padding: 0 30px;}
  .BoxVisual_Texto{width: 510px;}
  .BoxVisual_Texto_Titulo {width: 56%;}
  #section-6.Login {margin: 30px 0 40px 0;}
  .img_BoxSegmentosCertos img {width: 100%;height: auto;}
  .texto_BoxSegmentosCertos {width: 100%;font-size: 13px;height: 46px;}
  .BoxSegmentosCertos {width: 236px;}
  .img_BoxSegmentosCertos.ChamadaTit {width: 100%;height: 100%;}
  .AlongaBackred {display: none;}
  .Boxes_SegmentosCertos {gap: 7px;}
  .Tit_BoxSegmentosCertos {font-size: 16px;line-height: 23px;padding: 6px;}
  .BoxVisual_Texto ul li h3 {font-size: 17px;}
  .BoxVisual_Texto ul li {padding: 10px 0;font-size: 15px;line-height: 21px;}
  .BoxesVantagens {gap: 7px;}
  .SlideBoxe {width: 100%;}
  #section-6.Login a.FacaLogin {width: 375px;height: 55px;font-size: 20px;}
 }

 @media (max-width: 1024px) {
  .ConteudoSegmentosPersonalizados {width: 100%;padding: 0 10px;}
  .slideshow-content .nivel_01 {font-size: 26px;}
  .slideshow-content .nivel_02 {font-size: 26px;}
  .slideshow-content .nivel_03 {font-size: 26px;}
  .slideshow-content .nivel_04 {font-size: 54px;}
  .slideshow-cta {width: 325px;height: 50px;font-size: 16px;}
  .slideshow-images .slide {height: 320px;}
  .slideshow {height: 320px;padding: 30px;}
  #section-2.Chamada h2 {padding: 0 158px;margin: 30px 0;font-size: 21px;line-height: 28px;}
  #section-3.Introdutorio {line-height: 23px;padding: 0 30px;}
  .BoxVisual_Texto{width: 510px;}
  .BoxVisual_Texto_Titulo {width: 56%;}
  #section-6.Login {margin: 30px 0 40px 0;}
  .img_BoxSegmentosCertos img {width: 100%;height: auto;}
  .texto_BoxSegmentosCertos {width: 100%;font-size: 13px;height: 46px;}
  .BoxSegmentosCertos {width: 236px;}
  .img_BoxSegmentosCertos.ChamadaTit {width: 100%;height: 100%;}
  .AlongaBackred {display: none;}
  .Boxes_SegmentosCertos {gap: 7px;}
  .Tit_BoxSegmentosCertos {font-size: 16px;line-height: 23px;padding: 6px;}
  .BoxVisual_Texto ul li h3 {font-size: 17px;}
  .BoxVisual_Texto ul li {padding: 10px 0;font-size: 15px;line-height: 21px;}
  .BoxesVantagens {gap: 7px;}
  .SlideBoxe {width: 100%;}
  #section-6.Login a.FacaLogin {width: 375px;height: 55px;font-size: 20px;}
 }

  @media (min-width: 769px) and (max-width: 1023px) {
  .BoxesVantagens {gap: 10px;display: flex;flex-direction: column;margin: 30px 0;}
  .Boxes_SegmentosCertos {width: 100%;}
  .BoxSegmentosCertos {width: 231px;}
  .BoxVisual_Montagem {margin-top: 40px;}
  .BoxVisualChamada {display: flex;width: 100%;gap: 0;justify-content: center;margin: 0;}
  .BoxVisual_Texto_Titulo {width: 98%;height: 50px;font-size: 19px;padding: 0 20px;}
  .BoxVisual {gap: 10px;}
  .Boxvantage {height: 60px;}
  .Boxvantage_img {width: 80px;height: 60px;}
  .Boxvantage_img img {width: 40px;height: 40px;}
  .Boxvantage_texto {width: 100%;height: 60px;}
  .BoxVisual_Texto ul li {font-size: 14px;line-height: 20px;}
  .slideshow-images .slide {height: 410px;}
  .slideshow {height: 410px;}
  .slideshow-content .nivel_01 {font-size: 16px;}
  .slideshow-content .nivel_02 {font-size: 16px;}
  .slideshow-content .nivel_03 {font-size: 16px;}
  .slideshow-content .nivel_04 {font-size: 34px;}
  .slideshow-cta {width: 245px;height: 34px;font-size: 12px;}
  #section-2.Chamada h2 {padding: 0 38px;}
  #section-3.Introdutorio {padding: 0;}
  }

  @media (max-width: 768px) {
  .BoxesVantagens {gap: 10px;display: flex;flex-direction: column;margin: 30px 0;}
  .Boxes_SegmentosCertos {width: 100%;}
  .BoxSegmentosCertos {width: 231px;}
  .BoxVisual_Montagem {margin-top: 40px;}
  .BoxVisualChamada {display: flex;width: 100%;gap: 0;justify-content: center;margin: 0;}
  .BoxVisual_Texto_Titulo {width: 98%;height: 50px;font-size: 19px;padding: 0 20px;}
  .BoxVisual {gap: 10px;}
  .Boxvantage {height: 60px;}
  .Boxvantage_img {width: 80px;height: 60px;}
  .Boxvantage_img img {width: 40px;height: 40px;}
  .Boxvantage_texto {width: 100%;height: 60px;}
  .BoxVisual_Texto ul li {font-size: 14px;line-height: 20px;}
  .slideshow-images .slide {height: 410px;}
  .slideshow {height: 410px;}
  .slideshow-content .nivel_01 {font-size: 16px;}
  .slideshow-content .nivel_02 {font-size: 16px;}
  .slideshow-content .nivel_03 {font-size: 16px;}
  .slideshow-content .nivel_04 {font-size: 34px;}
  .slideshow-cta {width: 245px;height: 34px;font-size: 12px;}
  #section-2.Chamada h2 {padding: 0 38px;}
  #section-3.Introdutorio {padding: 0;}
  }

  @media (min-width: 476px) and (max-width: 767px) {
  .BoxVisual {flex-direction: column;}
  .BoxVisual_Texto {width: 100%;}
  #section-6.Login a.FacaLogin {width: 285px;height: 45px;font-size: 15px;}
  .Boxvantage_texto div:nth-child(2) {font-size: 13px;}
  .SegmentosPersonalizados {font-size: 13px;}
  #section-2.Chamada h2 {padding: 0px 17px;margin: 20px 0;font-size: 16px;line-height: 23px;}
  .BoxVisual_Texto_Titulo {height: 44px;font-size: 16px;}
  .slideshow {height: 410px;}
  .slideshow-images .slide {height: 410px;}
  .slideshow-cta {width: 213px;height: 30px;font-size: 10px;}
  #section-7.SegmentosCertos {padding: 10px;}
  .BoxSegmentosCertos {width: 224px;}
  }

   @media (max-width: 475px) {
  .BoxVisual {flex-direction: column;}
  .BoxVisual_Texto {width: 100%;}
  #section-6.Login a.FacaLogin {width: 285px;height: 45px;font-size: 15px;}
  .Boxvantage_texto div:nth-child(2) {font-size: 13px;}
  .SegmentosPersonalizados {font-size: 13px;}
  #section-2.Chamada h2 {padding: 0px 17px;margin: 20px 0;font-size: 16px;line-height: 23px;}
  .BoxVisual_Texto_Titulo {height: 44px;font-size: 16px;}
  .slideshow {height: 410px;}
  .slideshow-images .slide {height: 410px;}
  .slideshow-cta {width: 213px;height: 30px;font-size: 10px;}
  #section-7.SegmentosCertos {padding: 10px;}
  .BoxSegmentosCertos {width: 224px;}
  }

  @media (min-width: 399px) and (max-width: 474px) {
  .BoxVisual_Montagem img{width: 100%;}
  .BoxSegmentosCertos {width: 186px;height: 191px;}
  }