@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@font-face {
  font-family: 'Montrchi';
  src: url('./fonts/Monterchi-Extrabold-trial.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ===== Reset e links ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
button { cursor: pointer; }

/* Zera estilo padrão dos links e cobre pseudo-classes */
a, a:link, a:visited, a:hover, a:active {
  text-decoration: none !important;
  
}

/* âncoras dentro de botões: tornam toda a área clicável */
.btnLink {
  display: inline-block;
  width: 100%;
  height: 100%;
}

/* Scroll suave por CSS (fallback no JS) */
html { scroll-behavior: smooth; }

/* Compensa o topo quando navegamos para âncoras visadas */
#inscricao, #ThisIsThaVideo {
  scroll-margin-top: 10px;
}

/* ===== Primary ===== */
#primary {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #3b180a;
  z-index: 1;
}

#primary #barSuperior {
  width: 100%;
  height: 40px;
  font-family: 'Poppins';
  font-size: 14px;
  text-align: center;
  color: white;
  background-color: #635244;
  padding: 10px;
}

#bgRosa {
  position: absolute;
  top: 0; left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, #f77da87a, rgba(0, 0, 0, 0));
  z-index: -1;
}

#AbarraSuperior { color: #fcc077; }

#ContainerHome {
  display: flex;
  flex-direction: row;
  width: 80%;
  margin-left: 10%;
  padding-top: 50px;
  height: calc(100dvh - 40px);
  justify-content: space-around;
}

#ContentText {
  padding-top: 90px;
  width: 40%;
  display: flex;
  flex-direction: column;
}

#imgHomeText { padding-top: 50px; width: auto; height: 180px; }

#corpoTextoHome {
  margin-top: 15px;
  color: white;
  font-size: 20px;
  font-family: 'Montrchi';
  line-height: 20px;
}

#buttons {
  width: 100%;
  margin-top: 20px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.btnHome {
  padding: 10px;
  border-radius: 50px;
  border: none;
  font-family: 'Poppins';
  font-size: 14px;
  font-weight: 600;
}

#BTN_0 { color: #3b180a; width: 50%; height: 40px;}
#BTNHOMEA_0 { color: #efa295; }

#BTN_1 { width: 40%; background-color: #3b180a; color: white; }
#BTNHOMEA_1 { color: white; }

#ImgAndressa { width: 50%; display: flex; justify-content: center; }

#overlayGradient {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 150px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.411), rgba(0,0,0,0));
  pointer-events: none;
  z-index: 99;
}

/* ===== Responsivo primary ===== */
@media (max-width: 900px) {
  #primary { height: auto; }
  #primary #barSuperior { height: 60px; }
  #ContainerHome {
    width: 90%; margin-left: 5%;
    height: auto; flex-direction: column;
  }
  #ImgAndressa { width: 100%; text-align: center; }
  #ImgPrincipal { width: 60%; }
  #ContentText { width: 100%; }
  #imgHomeText { width: 80%; }
  #BTN_1 { width: 40%; background-color: #33170c; color: white; font-size: 10px; }
  #BTN_0 { font-size: 10px; }
}

/* ===== Barra Branca ===== */
#BarraBranca{
  width: 100%; height: 60px; padding: 10px;
  display: flex; flex-direction: row; justify-content: center;
  background-color: #ffffff;
}
#iconeAgenda { width: 40px; height: 40px; margin-right: 30px; }
#divTxtBarr { display: flex; font-size: 32px; flex-direction: row; color: #ad5c50; }
#pBarraBranca  { font-family: 'Montrchi'; }

@media(max-width: 900px){
  #divTxtBarr { padding-top: 10px; font-size: 15px; }
  #iconeAgenda { width: 40px; height: 40px; padding: 5px; margin-right: 30px; }
}

/* ===== Section 2 ===== */
#secondSection{
  width: 100vw; height: auto;
  background-image: url(assets/bgsecondSection.webp);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; /* corrigido */
  padding-bottom: 30px;
}

#ContainerSectionSecond { margin-left: 10%; width: 80%; display: flex; flex-direction: row; }
#ContainerTextSectionSecond { width: 50%; padding-top: 100px; }
#ContainerTextSectionSecond  h1 { font-size: 63px; color: #efa295; margin-bottom: 20px; }
.corpoH1SecrtionSecond { font-family: 'Montrchi'; color: white; font-size: 20px; margin-bottom: 20px; }

.iconText {
  font-family: 'Montrchi'; color: white; font-size: 16px;
  display: flex; flex-direction: row; margin-bottom: 10px;
}
.ImgIconTxt { margin-right: 10px; }

#BtnSecondSection {
  display: flex; flex-direction: row; justify-content: space-between;
  font-family: 'Poppins'; font-weight: 600; font-size: 14px; padding-bottom: 30px;
}
#BtnSecond_0 { border: none; border-radius: 50px; width: 50%; background-color: #fcffe9; height: 30px; padding: 5px; }
#BtnSecond_0 a { color: #c4897e; }
#BtnSecond_1 { border: none; border-radius: 50px; width: 40%; background-color: #963333; height: 30px; padding: 5px;}
#BtnSecond_1 a { color: white; }

@media(max-width: 900px){
  #ContainerSectionSecond { margin-left: 5%; width: 90%; }
  #ContainerTextSectionSecond { width: 100%; padding-top: 100px; }
  #ContainerTextSectionSecond  h1 { font-size: 43px; }
  .corpoH1SecrtionSecond { font-size: 15px; }
  .ImgIconTxt { margin-right: 5px; padding: 10px; }
}

/* ===== Vídeo ===== */
#DivVideoVSL { margin-top: 200px; width: 80%; margin-left: 10%; }
#coroaVideo { margin-left: 5%; display: flex; justify-content: center; width: 90%; }
#coroaVideo img { width: 60%; }
#Video { display: flex; justify-content: center; width: 90%; margin-left: 5%; padding-bottom: 100px; }
#ThisIsThaVideo { height: 400px; border-radius: 20px; }

@media(max-width: 900px){
  #coroaVideo img { width: 90%; }
  #ThisIsThaVideo { width: 100%; border-radius: 20px; }
}

/* ===== Para quem é ===== */
#forWhatIs{
  width: 100%; height: auto;
  background-image: url(assets/bgparaQuem.webp);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; /* corrigido */
  padding-bottom: 100px;
}
#containerTituliForWhats {
  width: 50%; padding: 10px; margin-left: 25%;
  display: flex; flex-direction: column; justify-content: center;
}
#TitleForWhat { text-align: center; font-size: 83px; color: #fcffe9; }
#corpoForWhats { margin-top: 20px; text-align: center; font-family: 'Montrchi'; color: white; font-size: 28px; line-height: 20px; }

#Grid_0 {
  margin-top: 50px; width: 80%; margin-left: 10%;
  display: flex; flex-direction: row; justify-content: space-around;
  padding-bottom: 100px;
}
.elementGrid_0 {
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.644), rgba(255,255,255,0));
  width: 20%; border-radius: 10px; text-align: center; padding: 10px; color: white;
}
.titleElementGrid_0{ font-family: 'Montrchi'; font-size: 22px; }
.corpoElementGrid_0{ font-family: 'Poppins'; font-size: 16px; }

.TitleOqueAprender { font-size: 60px; font-weight: 600; text-align: center; color: white; padding-bottom: 100px; }

#Grid_1 {
  width: 80%; margin-left: 10%;
  display: flex; flex-direction: row; justify-content: space-between;
  padding-bottom: 150px;
}
.ElementDrid_1 {
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.644), rgba(255,255,255,0));
  width: 20%; border-radius: 10px; text-align: center; padding: 10px;
  font-family: 'Montrchi'; color: white;
}
.TitelElementGrid_1 { font-family: 'Montrchi'; font-size: 22px; }
.corpoElementGrid_1 { font-family: 'Poppins'; }

@media(max-width:900px){
  #forWhatIs{
    width: 100%; height: auto;
    background-image: url(assets/bgparaQuemMobile.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; /* corrigido */
    padding-bottom: 100px;
  }
  #containerTituliForWhats { width: 90%; margin-left: 5%; }
  #TitleForWhat { font-size: 43px; }
  #corpoForWhats { font-size: 15px; line-height: 20px; }
  #Grid_0 {
    width: 90%; margin-left: 5%;
    flex-direction: column; padding-bottom: 30px;
  }
  .elementGrid_0 { width: 80%; margin-left: 10%; margin-bottom: 49px; }
  .titleElementGrid_0{ font-size: 25px; }
  .corpoElementGrid_0{ font-size: 20px; }
  .TitleOqueAprender { font-size: 50px; }
  #Grid_1 {
    width: 90%; margin-left: 5%;
    flex-direction: column; padding-bottom: 30px;
  }
  .ElementDrid_1 { width: 80%; margin-left: 10%; margin-bottom: 50px; }
}

/* ===== Quem conduz ===== */
#QuemConduz{
  width: 100%; height: auto; padding-top: 100px;
  background-image: url(assets/conduz.webp);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; /* corrigido */
  padding-bottom: 150px;
}
#QuemConduzContainer{ width: 80%; margin-left: 10%; }
#ContainerQuemConduz { width: 50%; padding-bottom: 50px; }
#TitleQuemConduz{ font-size: 63px; color: #efa295; padding-bottom: 30px; }
#CorpoContainerQuemConduz { font-family: 'Poppins'; font-size: 16px; color: white; }
#ConduzButton{ padding-top: 30px; display: flex; flex-direction: row; justify-content: space-between; }
.btnConduz { border: none; border-radius: 50px; height: 30px; padding: 5px; font-family: 'Poppins'; font-weight: 600; font-size: 12px; }
#btnConduz_0 { width: 40%; background-color: white; }
#btnConduz_0 a { color: #963333; }
#btnConduz_1 { width: 30%; background-color: #963333; }
#btnConduz_1 a { color: #fffafa; }

@media(max-width:900px){
  #QuemConduz{ background-color: #33170c; }
  #QuemConduzContainer{ width: 90%; margin-left: 5%; }
  #ContainerQuemConduz { width: 100%; }
  #TitleQuemConduz{ font-size: 53px; }
  #ConduzButton{ flex-direction: row; }
  .btnConduz { height: 30px; padding: 5px; }
  #btnConduz_0 { width: 50%; background-color: white; color: #963333; }
  #btnConduz_1 { width: 40%; background-color: #963333; color: #fffafa; }
}

/* ===== Transformação ===== */
#SectionTransformacao{
  width: 100%; height: auto;
  background-image: url(assets/back.webp);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; /* corrigido */
}
#TitleTransformacao { color: white; text-align: center; font-size: 83px; padding-top: 20px; }
#feedBack{
  width: 80%; margin-left: 10%;
  display: flex; flex-direction: row; justify-content: space-around;
  padding-bottom: 200px; padding-top: 200px;
}
.elementFeedBack{
  width: 30%; background-color: #963333;
  border: solid #efa295 1px; border-radius: 10px; padding: 20px; text-align: center;
}
.corpoFeedBack { font-size: 18px; font-family: 'Montrchi'; color: white; }
.nomeCliente { margin-top: 15px; font-size: 15px; font-family: 'Montrchi'; color: white; }

@media(max-width:900px){
  #TitleTransformacao { font-size: 53px; }
  #feedBack{
    width: 90%; margin-left: 5%;
    flex-direction: column; padding-bottom: 100px; padding-top: 50px;
  }
  .elementFeedBack{ width: 90%; margin-left: 5%; margin-bottom: 20px; }
}

/* ===== Benefícios ===== */
#Beneficios{
  width: 100%; height: auto;
  background-image: url(assets/bene.webp);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; /* corrigido */
  padding-bottom: 100px;
}
#containerBeneficios{ width: 80%; margin-left: 10%; }
#ContentContainer{ width: 60%; padding-top: 50px; }
#TitleBeneficios{ font-size: 80px; color: white; padding-top: 10px; padding-bottom: 10px; }
#ContainerICONTEXT{ display: flex; flex-direction: row; justify-content: space-between; padding-bottom: 50px; }
.containerTXTicon{ display: flex; flex-direction: column; }
.SubContainerTXTicon { display: flex; flex-direction: row; }
.iconTXTcontainer { width: 30px; height: 30px; padding: 5px; }
.PTXTContainer{ padding: 5px; color: white; font-family: 'Montrchi'; font-size: 12px; }
#BtnBeneficios { width: 100%; display: flex; flex-direction: row; justify-content: space-between; }
.BTNBeneFicios {
  height: 30px; border: none; border-radius: 50px; padding: 5px;
  font-size: 14px; font-family: 'Poppins'; font-weight: 600;
}
#btnB_0{ width: 50%; background-color: white; }
#btnB_0 a { color: #963333; }
#btnB_1{ width: 40%; background-color: #963333; }
#btnB_1 a { color: #ffffff; }

@media(max-width:900px){
  #containerBeneficios{ width: 90%; margin-left: 5%; }
  #ContentContainer{ width: 100%; padding-top: 50px; }
  #TitleBeneficios{ font-size: 60px; }
  .BTNBeneFicios { font-size: 10px; }
}

/* ===== Final ===== */
#Final {
  width: 100%; height: 100vh;
  background-image: url(assets/final.webp);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; /* corrigido */
  padding-bottom: 100px;
}
#inscricao {
  text-align: center;
  padding-top: 40vh;
  padding-bottom: 30vh;
  width: 90%; margin-left: 5%;
}

@keyframes balanco {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-5px); }
  50% { transform: translateY(5px); }
  75% { transform: translateY(-5px); }
}

#BTNFINAL{
  background-color: white; width: 50%; margin-left: 25%;
  border-radius: 50px; height: 40px; padding: 10px;
  font-family: 'Poppins'; font-size: 14px; cursor: pointer;
  display: flex; flex-direction: row; justify-content: space-around;
  animation: balanco 1s ease-in-out infinite;
}
@media(max-width:900px){
  #BTNFINAL{ width: 80%; margin-left: 10%; }
}

#BTNFINAL a { color: #efa295; }
#conteinerFooter{
  width: 100%; display: flex; flex-direction: row; justify-content: space-around;
  padding: 10px; font-size: 10px; color: white;
}
footer{ color: white; width: 100%; height: 40px; text-align: center; }
#CS{ width: 20px; padding-top: 5px; margin-right: 10px; }