/*REGRAS GERAIS*/

* {
  /*universal*/
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /*cor de fundo e letra do site*/
  background-color: #f8f9fa;
  font-family: 'Georgia', serif;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/*CABEÇALHO*/

#headerMain {
  /*fundo do cabeçalho*/
  background-color: #345C64;
  text-align: center;
  position: relative;
  z-index: 1;
  min-height: 5rem;
  box-shadow: 0rem .5rem .5rem rgba(0, 0, 0, 0.3);
}

#logoVerde {
  /*logo do cabeçalho*/
  width: 7.5rem;
  height: auto;
  display: block;
  box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

#logoVerde:hover {
  /*logo cabeçalho quando passa o mouse*/
  transform: scale(1.02);
}

.menu-header {
  /*parte atrás das opções do menu + espaçamento das opções*/
  background-color: #345C64;
  padding: 1.25rem;
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
}

.menu-btn {
  /*opções do menu*/
  background: none;
  border: none;
  color: white;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  text-shadow: .6rem .6rem 1.5rem rgb(0, 0, 0);
  transition: transform 0.6s ease;
  padding: 1rem;
  margin-right: 1rem;
}

.menu-btn:hover {
  /*opções do menu quando passa o mouse*/
  transform: scale(1.1);
}

.cta-btn {
  /*botão menu "adquira um precatório"*/
  background-color: #e4e4e4;
  border: none;
  padding: 0 .8rem 0 .8rem;
  height: 3.45rem;
  border-radius: 0.6rem;
  box-shadow: 0.2rem 0.2rem 0.3rem rgba(0, 0, 0, 0.2);
  font-weight: bold;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  transition: transform 0.3s ease;
  white-space: nowrap;
  text-decoration: none; 
  color: inherit;        
}

.cta-btn:hover {
  /*botão menu "adquira um precatório" quando passa o mouse*/
  background-color: #ffffff;
  transform: scale(1.05);
}

.header-container {
  /*espaçamento dos itens do cabeçalho*/
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/*MARCAS-D'ÁGUA*/

.marca-dagua.branco {
  /*marca dagua dos fundos claros*/
  width: 100%;
  height: 100%;
  background-color: rgb(156, 156, 156);
  background-image: url('../img/backgroundBranco.png');
  background-repeat: no-repeat;
  background-position: center 46%;
  background-size: 70%;
  opacity: 0.20;
  position: absolute;
  top: 0;
  left: 0;
}

.marca-dagua.azul {
  /*fundo da página azul*/
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #235461;
  z-index: 0;
  overflow: hidden;
}

.marca-dagua.azul::before {
  /*marca dagua em si do fundo azul*/
  content: "";
  width: 100%;
  height: 100%;
  background-image: url('../img/backgroundVerde.png');
  background-repeat: no-repeat;
  background-position: center 41%;
  background-size: 63%;
  opacity: .1;
  position: absolute;
  top: 0;
  left: 0;
}

/*BOTÃO ZAP*/

.btn-zap {
  /*botão do whatsapp*/
  position: fixed;
  bottom: 1.2rem;
  right: .5rem;
  background-color: #25D366;
  color: white;
  border: none;
  padding: .5rem .7rem .5rem .7rem;
  border-radius: 1.5rem;
  font-size: .75rem;
  box-shadow: 0 0.25rem 0.37rem rgba(0, 0, 0, 0.3);
  z-index: 100;
  cursor: pointer;
  display: flex;
  transition: background-color 0.3s ease;
}

.btn-zap:hover {
  /*botão do whatsapp quando passa o mouse*/
  background-color: #27b15c;
}

/*PRIMEIRA TELA*/

.texto-depoimento h1 {
  /*título primeira tela*/
  font-weight: bold;
  color: #1e3c40;
  max-width: 50rem;
  font-size: 3rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  margin-left: 3rem;
  text-align: center;
  margin: 0 auto;
}

.texto-depoimento {
  /*texto depoimento como um todo*/
  padding-left: 2rem;
  transform: translateY(-6rem);
}

.texto-depoimento p {
  /*texto ao lado do vídeo; sobre o cliente*/
  color: #1e3c40;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: 1.5rem;
}

.video-depoimento {
  /*disposição do vídeo*/
  display: flex;
  flex-direction: column; 
  align-items: center;    
  padding-left: 0;        
}

.video-depoimento p { /*frase embaixo do vídeo*/
  max-width: 30rem;  
  text-align: center;
  word-wrap: break-word; 
}

.video-placeholder {
  /*caixa do vídeo*/
  width: 100%;
  max-width: 30rem;
  min-height: 30rem;
  border-radius: 0.75rem;
  display: flex;
  box-shadow: 0 0.25rem 0.62rem rgba(0, 0, 0, 0.3);
  margin-top: 1rem;
}

.video-depoimento iframe,
.video-depoimento video {
  /*colocando o vídeo por cima*/
  position: relative;
  z-index: 1;
}

.video-depoimento video {
  /*vídeo em si*/
  border-radius: .7rem;
  object-fit: cover;
  object-position: 50% 45%;
}

.btn-comprar {
  /*todos os botões azuis*/
  background-color: #1E3C40;
  color: white;
  font-weight: bold;
  padding: 0.75rem 2rem;
  height: 4rem;
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.62rem rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.3s ease;
  font-size: 1.5rem;
  font-family: 'Georgia', serif;
  position: relative;
  z-index: 2;
}

.btn-comprar:hover {
  /*todos os botões azuis quando passa o mouse*/
  background-color: #2f5a5f;
  transform: scale(1.05);
}

#botaoVenderPrimeiraPagina {
  /*botão "quero vender..." na primeira página*/
  margin-top: .5rem;
  margin-bottom: 2.5rem;
}

#fundoTela1 {
  /*marca dágua da tela 1*/
  width: 100%;
  height: 100%;
  background-color: rgb(156, 156, 156);
  background-image: url('../img/backgroundBranco.png');
  background-repeat: no-repeat;
  background-position: center 80%;
  background-size: 90%;
  opacity: 0.20;
  position: absolute;
  top: 0;
  left: 0;
}

.depoimentos-horizontal {
  /*posição dos depoimentos + barra de rolar*/
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 2rem;
  padding: 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-padding: 0 1rem;
}

.depoimentos-horizontal::-webkit-scrollbar {
  /*altura da barra de rolar*/
  height: 3px;
}

.depoimentos-horizontal::-webkit-scrollbar-track {
  /*estética do trilho*/
  background: #e0e0e0;
  border-radius: 4px;
}

.depoimentos-horizontal::-webkit-scrollbar-thumb {
  /*estética da barra que arrasta*/
  background: #345C64;
  border-radius: 4px;
}

.depoimentos-horizontal::-webkit-scrollbar-thumb:hover {
  /*cor da barra quando passa o mouse */
  background: #2a464c;
}

.card-depoimento {
  /*estética dos depoimentos*/
  background-color: #4c6e76;
  border-radius: 0.55rem;
  padding: .1rem .4rem .1rem .4rem;
  transition: transform 0.6s ease;
  height: auto;
  width: 50%;
  max-width: 35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}

.card-depoimento:hover {
  /*depoimento quando passa o mouse*/
  transform: scale(1.03);
}

.card-depoimento img {
  /*imagem dos depoimentos*/
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0.5rem;
  display: block;
  border: 1px solid #3e5f63;
}

#vejaMaisComentarios {
  /*botão "veja mais avaliações"*/
  text-decoration: none;
}

/*SEGUNDA TELA*/

#inicio {
  /*fundo azul*/
  background-color: #4c6e76;
  color: #ffffff;
  height: 30rem;
}

.titulo-principal {
  /*título*/
  font-size: 2.5rem;
  font-weight: 700;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  max-width: 70rem;
  margin: 0 auto;
  text-align: center;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.subtitulo-principal {
  /*subtítulo*/
  font-size: 1.7rem;
  margin-top: 4.5rem;
  margin-bottom: 6rem;
  color: #f0f0f0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
  text-align: center;
}

.btn-melhorProposta {
  /*botão branco da 2 página (a azul)*/
  background-color: #ffffff;
  color: #1e3c40;
  font-weight: bold;
  font-size: 1.5rem;
  padding: .3rem 1rem;
  border-radius: 0.5rem;
  border: none;
  box-shadow: 0 0.25rem 0.62rem rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  transition: transform 0.3s ease;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  white-space: normal;
}

.btn-melhorProposta:hover {
  /*botão branco da 2 página (a azul) quando passa o mouse*/
  background-color: #e6e6e6;
  transform: scale(1.05);
}

/*TERCEIRA TELA*/

#sobreEmpresaBackground {
  /*fundo/logo da terceira tela*/
  background-position: center 39%;
  background-size: 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  opacity: 0.20;
}

#sobreEmpresa {
  /*fundo claro*/
  background-color: #f8f9fa;
  color: #1e3c40;
}

.titulo-principal-sobre {
  /*título terceira tela*/
  font-size: 3rem;
  font-weight: 700;
  color: #1e3c40;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.subtitulo-principal-sobre {
  /*frase terceira tela*/
  font-size: 1.5rem;
  color: #1e3c40;
  margin-bottom: 2rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
  margin-top: 2rem;
  text-align: center;
}

.card-sobre {
  /*caixa azul*/
  background-color: #2f545c;
  border-radius: 0.75rem;
  box-shadow: 0 0.25rem 0.62rem rgba(0, 0, 0, 0.3);
  opacity: 0.85;
  transition: transform 0.6s ease;
  padding: 1.5rem;
  width: 100%;
  max-width: 100%;
  word-wrap: break-word;
}

.card-sobre:hover {
  /*caixa azul quando passa o mouse*/
  background-color: #1e3c40;
  transform: scale(1.05);
}

h4 {
  /*título do texto dentro da caixa azul*/
  font-size: 2rem;
  color: #ffffff;
  margin-bottom: 2rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
  margin-top: 1rem;
}

#textoSobreAEmpresa {
  /*texto dentro da caixa azul*/
  font-size: 1rem;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
  text-align: justify;
}

#sobreEmpresaRodape {
  /*itens abaixo da caixa azul*/
  font-size: 1.5rem;
}

#sobreEmpresaRodape p {
  /*alinhar os textos*/
  display: grid;
  grid-template-columns: auto 1fr;
  margin-top: 0.3rem;
}

#icone {
  /*ícones dos textos*/
  margin-left: 1rem;
  margin-right: 1rem;
}

#btn-interesse {
  /*botão "tem interesse"?*/
  white-space: nowrap;
}

/*QUARTA TELA*/

#motivosEscolha {
  /*fundo da quarta tela*/
  max-height: unset;
  height: auto;
}

#logoPag4::before {
  /*marca dágua da pag 4*/
  background-size: 100%;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center 41%;
  position: absolute;
}

.titulo-principal-motivo {
  /*título quarta tela*/
  font-size: 3rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.card-ponto {
  /*cada card ponto*/
  min-height: 22rem;
  max-width: 100%;
  border-radius: 1rem;
  background-color: #fff;
}

/*.badge {
  /*título "ponto..."
  font-size: 1.2rem;
  background-color: #1E3C40;
  color: white;
  transition: transform 0.3s ease, background-color 0.3s ease;
  padding: 0.4rem 1rem;
  border-radius: 0.5rem;
}*/

/*.badge:hover { caixinha do título dentro de cada card quando passa o mouse
  background-color: #2f5a5f;
  transform: scale(1.05);
}*/

/* .card-ponto,
.card-passos {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  border-radius: 0.8rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
} */

.tituloDosMotivos {
  /*título com o motivo - dentro de cada card*/
  font-size: 1rem;
  line-height: 1.4;
  font-weight: bold;
  text-align: center;
  background-color: #1E3C40;
  color: white;
  padding: 0.4rem 0.7rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  white-space: normal;
}

.osMotivos {
  /*texto com os motivos de escolha*/
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: justify;
  color: #1e3c40;
  font-weight: 500;
}

#btnPag4 {
  /*botão "tem" interesse?*/
  background-color: #ffffff;
  color: #1e3c40;
  font-weight: bold;
  font-size: 1.5rem;
  padding: .3rem 1rem;
  border-radius: 0.5rem;
  border: none;
  box-shadow: 0 0.25rem 0.62rem rgba(0, 0, 0, 0.3);
  white-space: normal;
  margin-top: 2rem;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 0.5rem;
  min-height: 3rem;
  max-width: 30rem;
  transition: all 0.3s ease;
  transition: transform 0.3s ease;
}

#btnPag4:hover {
  /*botão página 4 quando passa o mouse*/
  background-color: #e6e6e6;
  transform: scale(1.05);
}

/*QUINTA TELA*/

.card-ponto,
.card-passos {
  /*regras em comum dos cards pontos e passos*/
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  border-radius: 0.8rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.card-ponto:hover,
.card-passos:hover {
  /*cards pontos e passos ao passar o mouse*/
  transform: translateY(-10px) scale(1.01);
}

.card-passos {
  /*cada card passos*/
  min-height: 20rem;
  background-color: #2f545c;
}

#titulopag5 {
  /*título da página 5*/
  font-weight: bold;
  color: #1e3c40;
  max-width: 100%;
  font-size: 3rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  text-align: center;
  padding-inline: 1rem;
}

#logoPag5 {
  /*marca dágua*/
  background-size: 100%;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center 20%;
  position: absolute;
}

.osPassos {
  /*texto com os passos para a venda*/
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: justify;
  color: #ffffff;
  font-weight: 500;
}

#passos-section .card .badge {
  /*deixa o número e o título um embaixo do outro*/
  display: block;
}

.bi-1-circle-fill,
.bi-2-circle-fill,
.bi-3-circle-fill,
.bi-4-circle-fill {
  /*números*/
  display: block;
  font-size: 1.7rem;
  text-align: left;
}

.badge.bg-light.text-black.mb-3.px-3.py-2 {
  /*alinhando os títulos "proposta, análise..."*/
  margin: 0.5rem auto 1rem;
  max-width: 10rem;
}

#botaoPag5 {
  /*botão "quero negociar meu precatório"*/
  font-size: 1.5rem;
  margin-top: 6rem !important;
  background-color: #1E3C40;
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  padding: 0.8rem 2rem;
  transition: background-color 0.3s ease;
}

#botaoPag5:hover {
  /*botão da página 5 ao passar o mouse*/
  background-color: #29585D;
}

/*BANNER*/

/*#cardDentroDoBanner .card-body { +
  position: relative;
  z-index: 2;
}*/

#banner {
  /*caixa azul/banner "seja um parceiro..."*/
  background-color: #1E3C40;
  border-radius: 2rem;
  box-shadow: 1rem 1rem 3rem #1E3C40;
  margin-top: 2rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  max-width: 80rem;
  min-height: 25rem;
  transition: transform 0.3s ease, background-color 0.3s ease;
  margin-bottom: 12rem;
}

#banner:hover {
  /*caixa azul do banner quando passa o mouse*/
  background-color: #2f5a5f;
  transform: scale(1.02);
}

#tamanhoDoTitulo {
  /*título "seja um parceiro..."*/
  font-size: 3rem;
  text-align: center;
  color: #ffffff;
}

#cardDentroDoBanner {
  /*caixa branca dentro do banner*/
  max-width: 100rem;
  width: 90%;
  margin: 2rem auto;
  min-height: 20rem;
}

#logoBanner {
  /*marca dágua banner*/
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center 39%;
  background-size: 50%;
  position: absolute;
}

#textoBanner {
  /*texto dentro da caixa branca dentro do banner*/
  font-size: 1.8rem;
  margin-bottom: 2.5rem;
  color: #1E3C40;
  padding-top: 2rem;
}

#botaoPag6 {
  /*botão do banner*/
  background-color: #1E3C40;
  color: white;
  font-weight: bold;
  padding: 0.8rem 2rem;
  border: none;
  box-shadow: 0 0.25rem 0.62rem rgba(0, 0, 0, 0.3);
  cursor: pointer;
  font-size: 1.5rem;
  margin-top: 3rem;
}

#botaoPag6:hover {
  /*botão do banner quando passa o mouse*/
  background-color: #2f5a5f;
}

/*ENTRE EM CONTATO CONOSCO*/

#logoPag6 {
  /*marca dágua*/
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center 110%;
  position: absolute;
}

/*FORMULÁRIO*/

#parteAtrasDoFormulario {
  /*fundo azul do formulário*/
  background-color: #1E3C40;
  border-radius: 2rem;
  box-shadow: 1rem 1rem 3rem #1E3C40;
  max-width: 50rem;
  padding: 5rem 2rem 2rem 2rem;
  margin-bottom: 5rem;
  flex: 0 0 60%;
}

#nomeCompleto {
  /*distância da borda do formulário para "nome completo"*/
  padding-top: 1rem;
}

#botaoFormulario {
  /*botão "enviar" do formulário*/
  margin-top: 1rem;
  margin-bottom: 2rem;
  background-color: #f0f0f0;
  transition: transform 0.3s ease, color 0.3s ease;
}

#botaoFormulario:hover {
  /*botão "enviar" do formulário quando passa o mouse*/
  color: #000000;
  transform: scale(1.05);
}

/*CONTATOS ASIDE*/

#tipoDeContato {
  /*caixinha do "telefone, email, endereço"*/
  background-color: #1E3C40;
  color: white;
  border-radius: .5rem;
}

aside {
  /*posição dos elementos do aside*/
  margin-top: 9rem;
  flex: 0 0 30%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.info-text{ /*dados no aside*/
  text-decoration: none; 
  color: inherit; 
}

.info-text,
.info-btn {
  /*centraliza os dados "telefone, email, endereço"*/
  text-align: center;
}

.contato-flex {
  /*garante a posição do aside*/
  display: flex;
  justify-content: space-between;
}

/*RODAPÉ*/

#parteEscuraRodape {
  /*faixa escura do rodapé*/
  background-color: #1E3C40;
}

#logoRodape {
  /*logo do rodapé*/
  max-width: 4rem;
  box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.footer-divider {
  /*linha que divide o rodapé*/
  border: 0;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.3);
  margin: 0.25rem 0;
}

#logoRodape:hover {
  /*logo do rodapé quando passa o mouse*/
  transform: scale(1.05);
}

.marca-dagua {
  /*faz o hover no rodapé funcionar*/
  pointer-events: none;
}

#depoimento,
#inicioRodape,
#sobre,
#comoFunciona,
#adqUmPrecat {
  /*opções do "institucional"*/
  transition: transform 0.6s ease, color 0.3s ease;
  font-size: .7rem;
}

#depoimento:hover,
#inicioRodape:hover,
#sobre:hover,
#comoFunciona:hover,
#adqUmPrecat:hover {
  /*opções do "institucional" quando passa o mouse*/
  color: #ffffff;
  transform: scale(1.03);
  cursor: pointer;
}

.opcoesRodape {
  /*tamanho dos títulos no rodapé*/
  font-size: .8rem;
}

.infoRodape {
  /*tamanho das opções no rodapé*/
  font-size: .7rem;
  text-decoration: none; 
  color: inherit; 
}





/*RESPONSIVIDADE*/

/*ATÉ 768px*/
@media (max-width: 768px) {

  #fundoTela1 {
    /*marca dágua da tela 1*/
    background-position: center 80%;
    background-size: 100%;
  }

  .marca-dagua.azul::before {
    /*marca dagua tela 2*/
    background-position: center 60%;
    background-size: 130%;
  }

  #sobreEmpresaBackground {
    /*marca dagua tela 3*/
    background-position: center 97%;
    background-size: 120%;
  }

  #logoPag4::before {
    /*marca dagua tela 4*/
    background-size: 100%;
    background-position: center 108%;
  }

  #logoPag5 {
    /*marca dágua tela 5*/
    background-size: 120%;
    background-position: center 111%;
    position: absolute;
  }

  #logoBanner {
    /*marca dágua banner*/
    background-position: center 39%;
    background-size: 110%;
  }

  #cardDentroDoBanner {
    /*caixa branca dentro do banner*/
    min-height: 15rem;
  }

  #logoPag6 {
    /*marca dágua tela 6*/
    background-size: 120%;
    background-position: center 73%;
  }
  
  /* Cabeçalho */
  .header-container {
    flex-direction: column;
    align-items: center;
    padding: 1rem;
  }

  .menu-header {
    flex-direction: column;
    padding: 0.5rem;
    gap: 0.5rem;
  }

  .menu-btn,
  .cta-btn {
    width: 100%;
    margin: 0;
  }

  #logoVerde {
    width: 6rem;
    margin-bottom: 1rem;
  }

  /* Primeira tela - vídeo e texto */
  .video-depoimento {
    flex-direction: column;
    justify-content: center;
  }

  .texto-depoimento h1 {
    width: 100%;
    font-size: 2rem;
  }

  .texto-depoimento p {
    font-size: 1.2rem;
  }

  .video-placeholder {
    max-width: 100%;
    min-height: 15rem;
  }

  #parteAtrasDoFormulario {
    /*fundo azul do formulário*/
    margin-bottom: 3rem;
  }

  aside {
    /*posição dos elementos do aside*/
    margin-bottom: 4rem;
  }

  /* Segunda e terceira telas */
  .titulo-principal,
  .titulo-principal-sobre {
    font-size: 2rem;
  }

  .subtitulo-principal,
  .subtitulo-principal-sobre {
    font-size: 1.2rem;
    margin-top: 2rem;
  }

  /* Cards de motivos e passos */
  .card-ponto,
  .card-passos {
    min-height: auto;
  }

  .container-fluid {
    padding-inline: 1rem;
  }

  /* Banner */
  #tamanhoDoTitulo {
    font-size: 2rem;
  }

  #textoBanner {
    font-size: 1.2rem;
  }

  /* Contato (formulário + aside) */
  .contato-flex {
    flex-direction: column-reverse;
    align-items: center;
  }

  #parteAtrasDoFormulario {
    width: 100%;
    max-width: 100%;
  }

  aside {
    flex: unset;
    width: 100%;
    margin-top: 3rem;
  }

  /* Rodapé */
  #parteEscuraRodape .container-fluid,
  #parteEscuraRodape .container {
    flex-direction: column;
    text-align: center;
  }

  #logoRodape {
    margin-bottom: 1rem;
  }

  #linksRodape {
    align-items: center;

  }

  .cta-btn,
  .btn-comprar,
  .btn-melhorProposta,
  #btnPag4,
  #botaoPag5,
  #botaoPag6,
  #botaoFormulario {
    width: 100%;
    max-width: 100%;
    font-size: 1.2rem;
    padding: 0.75rem;
    margin: 1rem auto;
    display: block;
    text-align: center;
  }

  #motivosEscolha {
    /*fundo da quarta tela*/
    max-height: unset;
    height: auto;
  }

  .titulo-principal,
  .subtitulo-principal-sobre,
  .texto-passos {
    white-space: norma;
  }

  .texto-depoimento h1 {
    margin-left: 0;
    text-align: center;
  }

  .btn-comprar {
    margin-bottom: 2rem !important;
  }

  .btn-zap {
    gap: .5rem;
    font-size: 0;
  }

  /* oculta texto sem remover o ícone */
  /* CORREÇÃO GLOBAL: Impede o scroll horizontal */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* CARD DEPOIMENTO RESPONSIVO */
  .card-depoimento {
    background-color: #4c6e76;
    border-radius: 0.55rem;
    padding: 0.25rem;
    box-shadow: 0 0.25rem 0.62rem rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .card-depoimento:hover {
    transform: scale(1.03);
  }

  .card-depoimento img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 0.5rem;
  }

  /* CARD SOBRE RESPONSIVO */
  .card-sobre {
    background-color: #2f545c;
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 0.62rem rgba(0, 0, 0, 0.3);
    opacity: 0.85;
    transition: transform 0.3s ease;
    padding: 1.5rem;
    width: 100%;
    max-width: 100%;
    word-wrap: break-word;
  }

  #textoSobreAEmpresa {
    font-size: 1rem;
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    font-family: 'Georgia', serif;
    text-align: justify;
  }

  .btn-zap i {
    font-size: 1.5rem;
  }

  #vejaMaisComentarios {
    padding-top: 1rem;
  }

  .card-ponto,
  .card-passos {
    margin-bottom: 1.5rem;
  }

  .tituloDosMotivos {
    font-size: 0.9rem;
  }

  .osMotivos {
    font-size: 0.9rem;
  }

  #btnPag4,
  #botaoPag5 {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
  }

  .card-ponto {
    max-width: 100%;
    margin-bottom: 1.5rem;
  }

  .video-placeholder {
    /*caixa do vídeo*/
    margin-left: .5rem;
  }

  #inicio {
    /*fundo azul*/

    height: 45rem;
  }

  .subtitulo-principal {
    /*subtítulo*/
    font-size: 1.7rem;
    margin-top: 4.5rem;
    margin-bottom: 6rem;
    color: #f0f0f0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    text-align: center;
  }

  .btn-melhorProposta {
    /*botão branco da 2 página (a azul)*/
    background-color: #ffffff;
    color: #1e3c40;
    font-weight: bold;
    font-size: 1.5rem;
    padding: .3rem 1rem;
    border-radius: 0.5rem;
    border: none;
    box-shadow: 0 0.25rem 0.62rem rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    transition: transform 0.3s ease;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    white-space: normal;
  }

  .btn-melhorProposta:hover {
    /*botão branco da 2 página (a azul) quando passa o mouse*/
    background-color: #e6e6e6;
    transform: scale(1.05);
  }

  .titulo-principal-motivo{
    font-size: 2.5rem;
  }

  #btnPag4 {
    /*botão "tem" interesse?*/
    
    max-width: 20rem;
  }

  #botaoPag5 {
    margin: 0;
  }
  
  #banner {
    /*caixa azul/banner "seja um parceiro..."*/
    margin-top: 0rem;
    margin-bottom: 5rem;
  }

  #botaoVenderPrimeiraPagina {
    padding-bottom: 4rem;
  }

  #titulopag5 {
    /*título da página 5*/
    font-size: 2.5rem;
  }

}

/*ACIMA 768px*/
@media (min-width: 769px) {

  .titulo-principal,
  .subtitulo-principal-sobre,
  .texto-passos {
    white-space: nowrap;
    /* só impede quebra em telas grandes */
  }
}

/*ATÉ 576px*/
@media (max-width: 576px) {
  .texto-depoimento {
    transform: translateY(0);
    padding: 0 1rem;
  }

  .video-placeholder {
    min-height: 12rem;
  }

  .subtitulo-principal,
  .texto-passos,
  #textoBanner {
    font-size: 1rem;
  }

  #tamanhoDoTitulo {
    font-size: 1.5rem;
  }

  #botaoPag6,
  #botaoPag5,
  #botaoFormulario {
    font-size: 1.1rem;
    padding: 0.6rem 1rem;
  }

  #parteEscuraRodape .d-flex {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
  }

  .btn-melhorProposta {
    margin-bottom: 3rem !important;
  }

  .card-ponto,
  .card-passos {
    padding: 1rem 0.8rem;
  }

  .tituloDosMotivos {
    font-size: 0.85rem;
  }

  .osMotivos {
    font-size: 0.85rem;
    text-align: left;
  }
}

/*ACIMA 992px*/
@media (min-width: 992px) {
  .depoimentos-horizontal {
    justify-content: center;
    gap: 2rem;
  }

  .card-depoimento {
    min-width: 500px;
    height: 130px;
  }
}

/*ATÉ 991px*/
@media (max-width: 991px) {
  .depoimentos-horizontal {
    justify-content: flex-start;
    gap: 1rem;
  }

  .card-depoimento {
    min-width: 95vw;
    max-width: 95vw;
    height: auto;
    padding: 0;
  }

  .card-depoimento img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}