
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style-type: square;
  padding-left: 1.5em; /* pode precisar ajustar */
}
ul li::marker {
  color: rgba(54, 5, 74, 0.95);
  content: '✔';
  
}
body {
  font-family: Arial, sans-serif;
  background-color: #ffffff;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.5;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #5e167c;
  color:  rgba(54, 5, 74, 0.95);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 1000;
}
header .logo {
  font-size: 1.2rem;
  font-weight: bold;
}
header nav a {
  color: #fff;
  text-decoration: none;
  margin-left: 20px;
  font-size: 0.9rem;
}

main {
  padding-top: 60px; /* espaço para header fixo */
}
.miniLogo{
  width: 5%;
}
.subtituloPoliticas{
  padding: 30px 0 30px;
}
.hero {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-top: 40px;
  background: url('https://source.unsplash.com/random/1600x900?series') center/cover no-repeat;
  min-height: 70vh;
}
.cardPlano{
  width: 90%;
}
#botaoScrollarCompras{
  cursor: pointer;
  font-weight: bold;
  color: #5e167c;
  font-size: 1.2rem;
  margin-top: 50px;
  border: none;
  border-radius: 30px;
  padding: 30px;
  width: 300px;
}
.hero .intro {
  
  background-image: #14041b;
  background-size: cover;
  background-position: center;
  padding: 20px;
  min-height: 40vh;
  
}
.intermed{
  width: 100%;
  background-color: #14041b;
  margin-top: -1px;        /* sobrepõe 1px para não aparecer linha branca */
  min-height: 50vh;

  /* CURVA PARA CIMA no topo da div */
   
   color: black;
}

.hero .intro h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}
.hero .intro p {
  font-size: 1.1rem;
}
.hero .cta {
  padding-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero .cta button {
  background-color: #25D366;
  color: #fff;
  border: none;
  padding: 25px 40px;
  font-size: 1.5rem;
  border-radius: 105px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 0 5px #ffffff,
    0 0 10px #ffffff,
    0 0 15px #ffffff,
    0 0 20px #ffffff;
}
#tituloGatilho{
  color: rgba(255, 255, 255, 0.95);
}
.paragrafoPoliticas{
  font-size: 1.3rem;
}
#erros li::marker{
  content: '●';
}
#erros li{
  font-size: 1.2rem;
}
.scrollarWpp{
    background-color: #25D366;
    border-radius: 105px;
    cursor: pointer;
    text-decoration: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    padding: 25px 40px;

    box-shadow:
    0 0 5px #ffffff,
    0 0 10px #ffffff,
    0 0 15px #ffffff,
    0 0 20px #ffffff;

  /* animação de brilho */
  animation: brilhar 2s infinite;
}
.beneficiosUl{
  text-align: left;
}

#perguntas{
  color: black;
}

@keyframes brilhar {
  0%, 100% {
    box-shadow:
      0 0 5px #ffffff,
      0 0 10px #ffffff,
      0 0 15px #ffffff,
      0 0 20px #ffffff;
  }
  50% {
    box-shadow:
      0 0 10px #ffffff,
      0 0 20px #ffffff,
      0 0 30px #ffffff,
      0 0 40px #ffffff;
  }
}


.scrollarWpp:hover{
    border: solid 
}

/* Footer */
footer {
  background-color: #44105b;
  color: #dedddd; 
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
}


@keyframes piscar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2;  }
}

.piscar {
  animation: piscar 0.6s ease-in-out 3;
}
#PFrequentes{
  text-align: center; 
  color: #5e167c;
}
.h2Pergunta{
  padding-left: 10px;
}
#cartao{
  width: 60%;
}
.intro{
  background-color: #5e167c;
}
 #botaoWhatsappContato{
  background-color: #25D366;
  color: #fff;
  border: none;
  padding: 25px 40px;
  font-size: 1.5rem;
  border-radius: 105px;
  cursor: pointer;
  text-decoration: none;
  }
  #divBtnContato{
    padding: 144px;
  }
  .mainContato{
    color:rgba(98, 10, 132, 0.95);
    text-align: center;
    margin-top: 100px;
    padding: 0 50px 0 50px;

  }
  #divWppContato{
    padding: 30px 0 30px;
  }
#downloadsFAQ{
  border: none;
  padding: 25px 50px 25px 50px;
  border-radius: 120px;
  font-weight: bold;
  color: #5e167c;
 
  
}
#WhatsFAQ{
  border: none;
  padding: 25px 50px 25px 50px;
  border-radius: 120px;
  font-weight: bold;
  color: #5e167c;
  
  
}
/* Responsividade */
@media (min-width: 875px) {
  .botaoNav{
    padding: 20px;
    font-size: 1.2rem;
  }
  
  main{
    width: 100%;
  }
  .divContato{
    padding-top: 50px;
  }
  #divWppContato{
    padding: 150px 0 150px;
  }
  .hero{
    flex-wrap: wrap;
  }
  .intro{
    width: 100%;
  }
  #divInternaHero{
    text-align: center;
    min-height: 600px;
    max-width: 600px;
  }
  #titulo{
    font-size: 3rem;
  }
  #tituloGatilho{
    font-size: 3rem;
  }
  #btnDiv{
    padding-top: 300px;
  }
  #scrollarWpp{
    width: 40%;
    padding: 2.5% 0 2.5% 0;
  }
  .intermed{
    padding-top: 120px;
    text-align: center;
  }
  .beneficiosUl{
    font-size: 2rem;

  }
  #ul{
    padding-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .liBeneficios{
    padding-top: 30px;
  }
  #pagSeguro{
    width: 30%;
    padding-top: 30px;
  }
  
  .descricaoFooter{
    text-align: left;
    

  }
  .pFooter{
    padding-top: 20px;
  }
  #botaoWhatsapp{
    max-height: 100px;
  }
 
  .iconewhatsapp{
    width: 5%;
    padding-right: 10px;
    filter: invert();
  }
  .cta{
    
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #PFrequentes{
    font-size: 3rem;
  }
  .PerguntaMain{
    display: flex;
    flex-wrap: wrap;
    
    justify-content: space-evenly;
    align-items: center;
    justify-content: center;
    gap: 50px;

    
    text-align: center;
    padding-top: 70px;
  
  }
  #perguntas{
    padding: 100px 0 100px 0;
    justify-content: space-between;
  }
  .divPergunta{
    animation: gradient 1s ease infinite;
    background-image: linear-gradient(135deg, #28105a, #5e167c, #6634bb, #28105a) ;
    color: white;
    border-radius: 30px;
    width:25%;
    min-width: 300px;
    height: 415px;
  }

  @keyframes gradient {
  0% {
    background-position: 51% 0%;
  }
  50% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 51% 0%;
  }
}

 #downloadsFAQ, #whatsFAQ{
     margin-top: 10px;
  }
  .h2Pergunta{
    font-size: 2rem;
  }
  .pPerguntas{
    padding-top: 30px;
    font-size: 1.2rem;
    margin: 0 15px 0 15px;
  }
  .iconePergunta{
    filter: invert();
    width: 20%;
    padding: 20px 0 20px 0;
  }
   .botaoDownloadTVE, .botaoDownloadEP{
    min-width: 300px;
    
  }
  #perguntasFAQ{
    padding: 100px 0 100px;
  }
  
}
  .planos{
    display: flex;
    flex-wrap: wrap;
    gap: 70px;
    justify-content: center;
    align-items: center;
    padding-top: 70px;
  }
  .titlePlanos{
    padding-top: 60px;
    font-size: 3rem;
    color: #5e167c;
    text-align: center;
    width: 100%;
  }
  .subtituloPlano{
    font-size: 1rem;
  }
  .plano{
    padding-top: 20px;
    width: 300px;
    text-align: center;
    font-size: 1.5rem;
    border-radius: 30px;
    height: 550px;
    animation: gradient 1s ease infinite;
    background-color: white ;
  }
  .h6Titulo{
    color: #5e167c;
  }
  .h7Titulo{
    color: black;
  }
  .Preço{
    font-size: 3.2rem;
    font-weight: bold;
    padding-top: 5px;
    padding-bottom: 10px;
  }
  .precoFake{
    font-size: 1rem;
    padding-top: 40px;
    opacity: 80%;
    text-decoration: line-through;
  }
  .btnCompra{
    background-color:#5e167c;
    font-weight: bold;
    border-radius: 105px;
    cursor: pointer;
    text-decoration: none;
    border: none;
    color: #ffffff;
    font-size: 1.2rem;
    padding: 15px 30px;
    margin-top: 20px;
  }
  .botaoNav{
    color: rgba(255, 255, 255, 0.95);
    font-weight: bold;
   
    
  }
  
  
.mainDownload, .mainPoliticas{
  color:rgba(98, 10, 132, 0.95);
  text-align: center;
  margin-top: 100px;
  padding: 0 50px 0 50px;

}
.divPoliticas{
  text-align: left;
}
.botaoDownloadTVE{
  padding: 30px;
  background-image: linear-gradient(135deg, #2b035c, #6e6075) ;
  color: white;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
}
.botaoDownloadEP{
  cursor: pointer;
  padding: 30px;
  background-image: linear-gradient(135deg, #732929, #035c41) ; 
  color: white;
  border-radius: 30px;
  border: none;
  font-size: 1.2rem;
}
.btnsDld{
  padding: 200px 0 200px;
  display: flex;
  flex-wrap: wrap;
  gap:  40px;
  justify-content: center;
  align-items: center;

}

.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  z-index: 1100;
  
}
.hamburger span {
  height: 3px;
  width: 25px;
  background: rgba(255, 255, 255, 0.95);
  
  margin: 5px;
  border-radius: 5px;
  transition: 0.3s ease;
}


.intro{
  display: flex;
  justify-content: space-evenly;
}

@media (max-width: 874px) {
  .hero {
    flex-direction: column;
    text-align: center;
    min-height: 70vh;
  }
  .hero .intro h1 {
    font-size: 2rem;
  }
  #btnDiv{
    padding-top: 100px;
  }

  .botaoDownloadTVE, .botaoDownloadEP{
    max-width: 307px;
  }
  .intro{
    display:block;
  }
  #celularImg{
    width: 50%;
  }


  nav#navLinks {
    position: fixed;
    top: 100px;
    right: -100%;
    background-color: #5e167c;
    color: rgba(255, 255, 255, 0.95);
    height: calc(100vh - 100px);
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 20px;
    gap: 20px;
    transition: right 0.3s ease;
    z-index: 1050;
  }
  nav#navLinks a {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.2rem;
  }
 
  .hamburger {
    display: flex;
  }

  nav#navLinks.active {
    right: 0;

  }








}
@media (max-width: 874px) {
  .iconePergunta{
    filter: invert();
    width: 50px;
  }
  .miniLogo{
  width: 7%;
}
.botaoDownloadTVE , .botaoDownloadEP{
  padding: 50px;
  font-size: 1.5rem;
}
.btnsDld{
  padding: 200px 0 200px;
  display: flex;
  flex-direction: column;
  gap:  40px;
  justify-content: center;
  align-items: center;

}
  .pFooter{
  padding-top: 20px;
  text-align: left;
  font-size: 1rem;
}
  .intro{
    padding: 20px;
    min-height: 40vh;
    max-width: 800px;
    width: 100%;
  }
  #ultimoP{
    text-align: center;
    padding-top: 30px;
  }
  .hero{
    padding-top: 40px;
  }
  .hero .intro h1 {
    font-size: 1.9rem;
  }
  .hero .intro p {
    padding-top: 15px;
    font-size: 1.3rem;
  }
  .hero .cta button {
    padding: 25px 40px;
    font-size: 1.5rem;
  }
  .iconewhatsapp{
    padding-right: 12px;
    width: 27px;
    filter: invert();
  }
  .intermed{
    padding-top: 70px;
  }
  .beneficiosUl{
    padding-top: 60px;
    font-size: 1.4rem;
    list-style-type: circle;
    
}
  .beneficiosUl li{
    padding-top: 30px;
  }
  #tituloGatilho{
    
    font-size: 2rem;
    font-weight: bold;
  }
  #btnDiv{
    padding-top: 100px;
  }
  #perguntas{
    padding: 50px 0 100px;
    text-align: left;
  }
  #perguntasFAQ{
    padding: 130px 0 100px;
  }
  .divPergunta{
    
    text-align: center;
    padding-top: 25px ;
    animation: gradient 1s ease infinite;
    background-image: linear-gradient(135deg, #28105a, #5e167c, #6634bb, #28105a) ;
    color: white;
    border-radius: 30px;
    width:80%;
    padding-right: 10px;
    min-height: 350px;
  }
  .PerguntaMain{
    padding-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 50px;
  }
  .pPerguntas{
  padding: 10px 30px;
  font-size: 1.4rem;
}
  #pagSeguro{
    width: 80%;
    padding-top: 30px;
  }
  
}
 