/* Estiliza o corpo da página */
body {
    font-family: "Roboto", sans-serif; /* Define a fonte padrão */
    background-color: #FFFFFF; /* Cor de fundo da página */
    display: flex; /* Usa Flexbox para layout */
    flex-direction: column; /* Alinha os itens na vertical */
    align-items: center; /* Centraliza os itens horizontalmente */
    justify-content: center; /* Centraliza os itens verticalmente */
    margin: 0; /* Remove a margem padrão */
    padding: 0; /* Remove o padding padrão */
    min-height: 100vh;
    padding-top: 30px; 
}

/* Home com o título principal */
.main-container {
  display: flex;
  flex-direction: column; /* Organiza os itens em coluna */
  justify-content: center; /* Centraliza verticalmente */
  align-items: center; /* Centraliza horizontalmente */
  height: 100vh;
  text-align: center; /* Alinha o texto no centro */
  margin-top: 0px;
}


/* Estiliza os elementos dentro da chave app que não tenham estilos específicos associados */
.app {
    text-align: center;
    background-color: #FFFFFF;
    font-family: Roboto, sans-serif;
    color: #929292;
    margin-top: 0px; /* Espaço acima */
    margin-bottom: 0px; /* Espaço para baixo */
    
  }


/* Estiliza o corpo da página dos termos, política e contrato*/
.legal-page {
  padding: 200px;
  padding-top: 60px;
  padding-bottom: 60px;
}


/* ESTILIZA OS TÍTULOS E TEXTOS h2 
font-weight: 100; para Thin
font-weight: 300; para Light
font-weight: 400; para Regular
font-weight: 500; para Medium
font-weight: 700; para Bold */

/* Estiliza os títulos dos argumentos */
h7 {
  font-family: "Roboto", sans-serif; /* Define a fonte padrão */
  font-weight: 300; /* Define o peso da fonte para "regular" */
  font-size: 1.7rem; /* Tamanho da fonte */
  color: #000000; /* Cor do texto: 797979 */
  text-align: left; /* Alinha o texto a esquerda */
  letter-spacing: 0rem; /* Espaçamento entre letras */
  margin-top: 1px; /* Espaço acima */
  line-height: 1.4; /* Ajuste o espaçamento entre linhas */
  word-wrap: break-word; /* Permite quebra automática */
  overflow-wrap: break-word; /* Suporte adicional para quebra de texto */
  max-width: 100%; /* Limita a largura máxima ao tamanho do container pai */
  box-sizing: border-box; /* Inclui padding e borda na largura */
}

/* Estiliza os textos dos argumentos */
h2 {
  font-family: "Roboto", sans-serif; /* Define a fonte padrão */
  font-weight: 300; /* Define o peso da fonte para "regular" */
  font-size: 1.1rem; /* Tamanho da fonte */
  color: #6C6C6C; /* Cor do texto */
  text-align: left; /* Alinha o texto a esquerda */
  letter-spacing: 0.05rem; /* Espaçamento entre letras */
  margin-top: 15px; /* Espaço acima */
  line-height: 150%; /* Espaço entrelinhas */
  word-wrap: break-word; /* Permite quebra automática */
  overflow-wrap: break-word; /* Suporte adicional para quebra de texto */
  max-width: 100%; /* Limita a largura máxima ao tamanho do container pai */
  box-sizing: border-box; /* Inclui padding e borda na largura */
  display: block; /* Evita comportamento inline do br */
}

/* Estiliza os textos do texto abaixo da tabela */
h20 {
  font-family: "Roboto", sans-serif; /* Define a fonte padrão */
  font-weight: 300; /* Define o peso da fonte para "regular" */
  font-size: 1.1rem; /* Tamanho da fonte */
  color: #929292; /* Cor do texto */
  text-align: center; /* Alinha o texto a esquerda */
  letter-spacing: 0.05rem; /* Espaçamento entre letras */
  margin-top: 25px; /* Espaço acima */
  line-height: 150%; /* Espaço entrelinhas */
  word-wrap: break-word; /* Permite quebra automática */
  overflow-wrap: break-word; /* Suporte adicional para quebra de texto */
  max-width: 100%; /* Limita a largura máxima ao tamanho do container pai */
  box-sizing: border-box; /* Inclui padding e borda na largura */
  display: block; /* Evita comportamento inline do br */
}

/* Estilo do título da Home */
h3 { 
  font-family: "Roboto", sans-serif; /* Define a fonte padrão */
  font-weight: 300; /* Define o peso da fonte para "regular" */
  font-size: 2.5rem; /* Tamanho da fonte */
  color: #424242; /* Cor do texto: 797979 */
  text-align: center; /* Alinha o texto ao centro */
  letter-spacing: 0rem; /* Espaçamento entre letras */
  margin-top: 0px; /* Espaço acima */
  margin-bottom: 10px; /* Espaço para baixo */
  line-height: 130%; /* Espaço entrelinhas */
  
}

/* Estilo do título do bloco2 dos argumentos de venda */
h8 {
  font-family: "Roboto", sans-serif; /* Define a fonte padrão */
  font-weight: 300; /* Define o peso da fonte para "regular" */
  font-size: 1.7rem; /* Tamanho da fonte */
  color: #000000; /* Cor do texto: 929292 */
  text-align: right; /* Alinha o texto a direita */
  letter-spacing: 0rem; /* Espaçamento entre letras */
  margin-top: 1px; /* Espaço acima */
  line-height: 1.4; /* Ajuste o espaçamento entre linhas */
  margin: 0; /* Remove margem extra */
  word-wrap: break-word; /* Permite quebra automática */
  max-width: 100%; /* Limita a largura máxima ao tamanho do container pai */
  box-sizing: border-box; /* Inclui padding e borda na largura */
  display: block; /* Evita comportamento inline do br */
}

/* Estilo do texto do bloco2 dos argumentos de venda */
h4 {
  font-family: "Roboto", sans-serif; /* Define a fonte padrão */
  font-weight: 300; /* Define o peso da fonte para "regular" */
  font-size: 1.1rem; /* Tamanho da fonte */
  color: #6C6C6C; /* Cor do texto */
  text-align: right; /* Alinha o texto a esquerda */
  letter-spacing: 0.05rem; /* Espaçamento entre letras */
  margin-top: 15px; /* Espaço acima */
  line-height: 150%; /* Espaço entrelinhas */
  word-wrap: break-word; /* Permite quebra automática */
  overflow-wrap: break-word; /* Suporte adicional para quebra de texto */
  max-width: 100%; /* Limita a largura máxima ao tamanho do container pai */
  box-sizing: border-box; /* Inclui padding e borda na largura */
  display: block; /* Evita comportamento inline do br */
}

/* Estiliza os títulos p */
p {
  font-size: 1rem; /* Tamanho da fonte */
  color: #000000; /* Cor do texto: 929292 */
  text-align: left; /* Alinha o texto ao centro */
  letter-spacing: 0rem; /* Espaçamento entre letras */
  margin-top: 0px; /* Espaço acima */
  width: 100%; /* Faz com que o contêiner ocupe toda a largura disponível 100% */
  font-weight: 300; /* Configura fonte para Light */
}

/* Estiliza a div do h11 para controlar margens */
.descricao-conta-gads {
  margin: 10px 10px; /* Define espaçamento superior e inferior */
  text-align: center;
}

/* Ajuste do h11 para evitar conflitos */
.info-conta-gads {
  font-size: 1.0rem;
  color: #929292;
  text-align: center;
  width: 100%;
  font-weight: 100;
  display: block;
  margin: 5px 0; /* Espaçamento apenas no próprio h11 */
  margin-bottom: 20px; /* Espaçamento apenas no próprio h11 */
}

/* Estilo do texto abaixo da tabela INSIRA O SEU SITE PARA COMEÇAR */
h6 {
  font-size: 1.5rem; /* Tamanho da fonte */
  color: #6C6C6C; /* Cor do texto: 21538E */
  text-align: center; /* Alinha o texto ao centro */
  letter-spacing: 0rem; /* Espaçamento entre letras */
  margin-top: 200px; /* Espaço acima */
  margin-bottom: 7px; /* Espaço abaixo */
  width: 100%; /* Faz com que o contêiner ocupe toda a largura disponível 100% */
  font-weight: 300; /* Configura fonte para Light */
}


/* Estilo do texto TEM UM CUPOM */
h66 {
  font-size: 1.2rem; /* Tamanho da fonte */
  color: #6C6C6C; /* Cor do texto: 21538E */
  text-align: center; /* Alinha o texto ao centro */
  letter-spacing: 0rem; /* Espaçamento entre letras */
  margin-top: 40px; /* Espaço acima */
  margin-bottom: 10px; /* Espaço abaixo */
  width: 100%; /* Faz com que o contêiner ocupe toda a largura disponível 100% */
  font-weight: 300; /* Configura fonte para Light */
}

/* Estilo do texto do rodapé */
h9 {
  font-size: 1.2rem; /* Tamanho da fonte */
  color: #6C6C6C; /* Cor do texto: 21538E */
  text-align: center; /* Alinha o texto ao centro */
  letter-spacing: 0rem; /* Espaçamento entre letras */
  margin-top: 200px; /* Espaço acima */
  margin-bottom: 7px; /* Espaço abaixo */
  width: 100%; /* Faz com que o contêiner ocupe toda a largura disponível 100% */
  font-weight: 300; /* Configura fonte para Light */
}

/* Estilo do título do tabela de preços */
h5 {
  font-family: "Roboto", sans-serif; /* Define a fonte padrão */
  font-weight: 300; /* Define o peso da fonte para "regular" */
  font-size: 1.7rem; /* Tamanho da fonte */
  color: #000000; /* Cor do texto: 929292 */
  text-align: center; /* Alinha o texto a esquerda */
  letter-spacing: 0rem; /* Espaçamento entre letras */
  margin-top: 120px; /* Espaço acima */
  margin-bottom: 0px; /* Espaço abaixo da tabela */
  word-wrap: break-word; /* Permite quebra automática */
  overflow-wrap: break-word; /* Suporte adicional para quebra de texto */
  max-width: 100%; /* Limita a largura máxima ao tamanho do container pai */
  box-sizing: border-box; /* Inclui padding e borda na largura */
}

/* Estilo do título do FAQ */
h1 {
  font-family: "Roboto", sans-serif; /* Define a fonte padrão */
  font-weight: 300; /* Define o peso da fonte para "regular" */
  font-size: 1.7rem; /* Tamanho da fonte */
  color: #000000; /* Cor do texto */
  text-align: center; /* Alinha o texto a esquerda */
  letter-spacing: 0rem; /* Espaçamento entre letras */
  margin-top: 0px; /* Espaço acima */
  margin-bottom: 20px; /* Espaço abaixo da tabela */
  word-wrap: break-word; /* Permite quebra automática */
  overflow-wrap: break-word; /* Suporte adicional para quebra de texto */
  max-width: 100%; /* Limita a largura máxima ao tamanho do container pai */
  box-sizing: border-box; /* Inclui padding e borda na largura */
}

/* Título da seção FAQ */
.faq-container h2 {
  font-size: 1.8rem;
  color: #797979;
  text-align: center;
  margin-bottom: 20px;
}


/* FIM ESTILIZA OS TÍTULOS E TEXTOS h2 */


/* ESTILIZA O MENU */
/* Configurações do menu */
/* .navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #FFFFFF;
  color: #6C6C6C;
  position: fixed;
  top: 0;
  width: 90%;
  z-index: 1000;
} */

/* Imagem do logo do menu */
/* .logo {
  max-width: 280px; 
  cursor: pointer; 
} */

/* Imagem do logo do menu */
/* .quick {
  max-width: 25px; 
  cursor: pointer; 
} */

/* .menu {
  list-style: none;
  display: flex;
  gap: 30px; 
} */

/* .menu li a {
  text-decoration: none;
  color: #6C6C6C;
  font-size: 1rem;
  font-weight: 300;
  transition: color 0.3s;
}

.menu li a:hover {
  color: #8ED4FB;
} */

/* .section {
  scroll-margin-top: 300px; 
  height: auto; 
  min-height: 100vh; 
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem; 
  color: #929292; 
  background-color: #FFFFFF;
  border-bottom: 0px solid #DDD;
  
} */
/* FIM ESTILIZA O MENU */

/* ESTILIZA O MENU (NOVA VERSÃO COM LOGO CENTRAL E HAMBÚRGUER) */
.navbar {
  
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #FFFFFF;
  border-bottom: 0px solid #eee;
  width: 100%;
  padding: 0;                 /* <- zero padding resolve o “espaço a mais” */
}

.nav-inner {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  min-height: 80px;           /* <- define altura da faixa */
  position: relative;
}

/* Logo sem respiro extra */
.nav-logo img {
  display: block;             /* evita “gap” de baseline */
  height: 120px;               /* ajuste fino (antes estava 120px) */
  width: auto;
  margin: 0 auto;
  /* vertical-align: middle; */
}


/* BOTÃO HAMBÚRGUER — deixe SEMPRE visível */
.menu-toggle{
  position: relative;
  left: 12px;                    /* distância da borda esquerda */
  top: 30%;
  transform: translateY(-50%);   /* centraliza verticalmente na barra */
  justify-self: auto !important; /* cancela qualquer justify-self anterior */
  display: grid !important;      /* garante visibilidade em todos breakpoints */
  place-items: center;
  width: 44px;                   /* área clicável confortável (acessibilidade) */
  height: 44px;
  font-size: 28px;               /* ícone um pouco maior */
  color: #6C6C6C;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;                    /* fica acima de outros itens da barra */
}

.menu-toggle i {
  font-size: 35px; /* herda do .menu-toggle */
  line-height: 1;
}

/* Esconda a UL antiga (vamos usar overlay). Mantém compatibilidade caso exista no DOM */
.menu { display: none !important; }

/* Overlay vira “dropdown” posicionado abaixo da navbar, à esquerda */
.menu-overlay[hidden] { display: none; }
/* Overlay: ocupa a largura toda, começa logo abaixo da navbar */
.menu-overlay {
  position: fixed;
  top: 80px;   /* = min-height da .nav-inner (ajuste se mudar) */
  left: 0;     /* começa da borda esquerda da tela */
  right: 0;
  bottom: 0;
  background: transparent;
  backdrop-filter: none;
  display: block;
  z-index: 1100;
  pointer-events: auto;
}

/* A “caixa” do menu vira um dropdown compacto */
.menu-panel {
  pointer-events: auto;         /* recebe cliques */
  background: #fff;
  width: min(150px, 92vw);      /* menor que antes */
  margin-left: calc((100vw - 1450px)/2 + 16px + 12px);
  border-radius: 12px;
  padding: 16px;                /* menos padding */
  position: relative;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  border: 1px solid #eee;
}

/* lista mais enxuta */
.menu-list {
  gap: 10px;
  font-size: 16px;
  text-align: left;             /* opcional: alinha à esquerda */
}

/* botão X opcionalmente menor */
.menu-close {
  display: none !important;
  font-size: 18px;
  top: 8px;
  right: 8px;
}


.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  text-align: left;
  font-size: 18px;
  line-height: 1.4;
}

.menu-list a {
  text-decoration: none;
  color: #929292;
}
.menu-list a:hover { text-decoration: underline; }

/* acessibilidade (texto apenas para leitores de tela) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* FIM ESTILIZA O MENU (NOVA VERSÃO) */


/* ESTILIZA AS IMAGENS DOS ARGUMENTOS DE VENDAS */
/* Imagem do argumento de vendas 1 */
.img-arg1 {
  max-width: 250px; /* Tamanho do logo*/
  margin-top: -55px; /* Espaço acima */
}

/* Imagem do argumento de vendas 2 */
.img-arg2 {
  max-width: 300px; /* Tamanho do logo*/
  margin-top: -55px; /* Espaço acima */
}

/* Imagem do argumento de vendas 3 */
.img-arg3 {
  max-width: 200px; /* Tamanho do logo*/
  margin-top: -55px; /* Espaço acima */
}

/* Imagem do argumento de vendas 3 */
.img-arg30 {
  max-width: 400px; /* Tamanho do logo*/
  margin-top: -55px; /* Espaço acima */
}

/* Imagem do argumento de vendas 4 */
.img-arg4 {
  max-width: 275px; /* Tamanho do logo*/
  margin-top: -55px; /* Espaço acima */
}
/* FIM ESTILIZA AS IMAGENS DOS ARGUMENTOS DE VENDAS */


/* ESTILIZA AS SESSÕES DE TEXTO DA PÁGINA */
/* Sessões de texto da página */
.left-section {
  flex: 7; /* para a seção esquerda 80% da largura */
  display: flex;
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  padding: 20px;
  box-sizing: border-box;
}
.right-section {
  flex: 3; /* para a seção direita 20% da largura */
  display: flex;
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  padding: 20px;
  box-sizing: border-box;
}


/* Telas divididas com os argumentos de vendas 1 */
.argumentos-vendas1 {
  display: flex;
  justify-content: space-between; /* Espaço entre os elementos */
  align-items: center; /* Centraliza verticalmente */
  height: 50vh; /* Ocupar toda a altura da tela */
  padding: 50 0px; /* Adiciona espaçamento lateral */
  box-sizing: border-box;
  margin-top: 0px; /* Reduza o espaço no topo */
}
.left-section1 {
  flex: 7; /* para a seção esquerda 80% da largura */
  display: flex;
  flex-direction: column; /* Garante que o conteúdo fique alinhado em coluna */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: flex-start; /* Alinha o texto à esquerda */
  padding: 100px;
  box-sizing: border-box;
}
.right-section1 {
  flex: 3; /* para a seção direita 20% da largura */
  display: flex;
  flex-direction: column; /* Garante que o conteúdo fique alinhado em coluna */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  padding: 100px;
  box-sizing: border-box;
  position: relative; /* Mantém a hierarquia correta */
  z-index: 1; /* Garante que a seção fique abaixo de elementos sobrepostos */
}
/* Estilo para o menu ancora da sessão argumento 1 */
.sectionconceito {
  scroll-margin-top: 300px; /* Ajusta a posição do scroll para evitar corte */
  height: auto; /* Deixa altura automática */
  min-height: 50vh; /* Garante que ocupa a altura da tela */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem; /* Alterado de 0rem para algo visível */
  color: #6C6C6C; /* Ajusta a cor do texto para ser visível */
  background-color: #FFFFFF;
  border-bottom: 0px solid #DDD;
  position: relative; /* Mantém a hierarquia correta */
  z-index: 1; /* Garante que a seção fique abaixo de elementos sobrepostos */
}


/* Telas divididas com os argumentos de vendas 2 */
.argumentos-vendas2 {
  display: flex;
  justify-content: space-between; /* Espaço entre os elementos */
  align-items: center; /* Centraliza verticalmente */
  height: 60vh; /* Ocupar toda a altura da tela */
  padding: 50 0px; /* Adiciona espaçamento lateral */
  box-sizing: border-box;
  margin-top: 0px; /* Reduza o espaço no topo */
}
.left-section2 {
  flex: 3; /* para a seção esquerda 80% da largura */
  display: flex;
  flex-direction: column; /* Garante que o conteúdo fique alinhado em coluna */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Alinha o texto à esquerda */
  padding: 100px;
  box-sizing: border-box;
}
.right-section2 {
  flex: 7; /* para a seção direita 20% da largura */
  display: flex;
  flex-direction: column; /* Garante que o conteúdo fique alinhado em coluna */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: flex-end; /* Alinha todo o conteúdo à direita */
  padding: 110px;
  box-sizing: border-box;
  text-align: right; /* Garante que o texto fique alinhado à direita */
}
/* Estilo para o menu ancora da sessão argumento 2 */
.sectionanalises {
  scroll-margin-top: 300px; /* Ajusta a posição do scroll para evitar corte */
  height: auto; /* Deixa altura automática */
  min-height: 60vh; /* Garante que ocupa a altura da tela */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem; /* Alterado de 0rem para algo visível */
  color: #6C6C6C; /* Ajusta a cor do texto para ser visível */
  background-color: #FFFFFF;
  border-bottom: 0px solid #DDD;
  position: relative; /* Mantém a hierarquia correta */
  z-index: 1; /* Garante que a seção fique abaixo de elementos sobrepostos */
}

/* Telas divididas com os argumentos de vendas 3 */
.argumentos-vendas-planomkt {
  display: flex;
  justify-content: space-between; /* Espaço entre os elementos */
  align-items: center; /* Centraliza verticalmente */
  height: 60vh; /* Ocupar toda a altura da tela */
  padding: 50 0px; /* Adiciona espaçamento lateral */
  box-sizing: border-box;
  margin-top: 0px; /* Reduza o espaço no topo */
}
.left-section-planomkt {
  flex: 8; /* para a seção esquerda 80% da largura */
  display: flex;
  flex-direction: column; /* Garante que o conteúdo fique alinhado em coluna */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: flex-start; /* Alinha o texto à esquerda */
  padding: 50px;
  box-sizing: border-box;
  text-align: left;
}
.right-section-planomkt {
  flex: 2; /* para a seção direita 20% da largura */
  display: flex;
  flex-direction: column; /* Garante que o conteúdo fique alinhado em coluna */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: flex-start; /* Centraliza verticalmente */
  padding: 250px;
  box-sizing: border-box;
}
/* Estilo para o menu ancora da sessão argumento 3 */
.sectionguia {
  scroll-margin-top: 300px; /* Ajusta a posição do scroll para evitar corte */
  height: auto; /* Deixa altura automática */
  min-height: 40vh; /* Garante que ocupa a altura da tela */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem; /* Alterado de 0rem para algo visível */
  color: #6C6C6C; /* Ajusta a cor do texto para ser visível */
  background-color: #FFFFFF;
  border-bottom: 0px solid #DDD;
  position: relative; /* Mantém a hierarquia correta */
  z-index: 1; /* Garante que a seção fique abaixo de elementos sobrepostos */
}

/* Telas divididas com os argumentos de vendas 4 */
.argumentos-vendas4 {
  display: flex;
  justify-content: space-between; /* Espaço entre os elementos */
  align-items: center; /* Centraliza verticalmente */
  height: 60vh; /* Ocupar toda a altura da tela */
  padding: 50 0px; /* Adiciona espaçamento lateral */
  box-sizing: border-box;
  margin-top: 0px; /* Reduza o espaço no topo */
}
.left-section4 {
  flex: 2; /* para a seção esquerda 80% da largura */
  display: flex;
  flex-direction: column; /* Garante que o conteúdo fique alinhado em coluna */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: flex-start; /* Alinha o texto à esquerda */
  padding: 250px;
  box-sizing: border-box;
}
.right-section4 {
  flex: 7; /* para a seção direita 20% da largura */
  display: flex;
  flex-direction: column; /* Garante que o conteúdo fique alinhado em coluna */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: flex-end; /* Alinha todo o conteúdo à direita */
  padding: 50px;
  box-sizing: border-box;
  text-align: right; /* Garante que o texto fique alinhado à direita */
}

/* Estilo para o menu ancora da sessão argumento 4 */
.sectiondados {
  scroll-margin-top: 300px; /* Ajusta a posição do scroll para evitar corte */
  height: auto; /* Deixa altura automática */
  min-height: 60vh; /* Garante que ocupa a altura da tela */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem; /* Alterado de 0rem para algo visível */
  color: #6C6C6C; /* Ajusta a cor do texto para ser visível */
  background-color: #FFFFFF;
  border-bottom: 0px solid #DDD;
  position: relative; /* Mantém a hierarquia correta */
  z-index: 1; /* Garante que a seção fique abaixo de elementos sobrepostos */
}

/* Telas divididas com os argumentos de vendas 3 */
.argumentos-vendas3 {
  display: flex;
  justify-content: space-between; /* Espaço entre os elementos */
  align-items: center; /* Centraliza verticalmente */
  height: 60vh; /* Ocupar toda a altura da tela */
  padding: 40 0px; /* Adiciona espaçamento lateral */
  box-sizing: border-box;
  margin-top: 0px; /* Reduza o espaço no topo */
}
.left-section3 {
  flex: 7; /* para a seção esquerda 80% da largura */
  display: flex;
  flex-direction: column; /* Garante que o conteúdo fique alinhado em coluna */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: flex-start; /* Alinha o texto à esquerda */
  padding: 100px;
  box-sizing: border-box;
}
.right-section3 {
  flex: 3; /* para a seção direita 20% da largura */
  display: flex;
  flex-direction: column; /* Garante que o conteúdo fique alinhado em coluna */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  padding: 150px;
  box-sizing: border-box;
}

header {
  width: 100%; /* Garante que o contêiner ocupe a largura total */
}
/* FIM ESTILIZA AS SESSÕES DE TEXTO DA PÁGINA */


/* ESTILIZA A TABELA */
/* Fonte do título */
header h2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.2rem;
  word-spacing: 0px;
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif; /* Define a fonte padrão */
  font-weight: 300; /* Define o peso da fonte para "regular" */
  color: #6C6C6C; /* Cor do texto */
  text-align: left; /* Alinha o texto ao centro */
  letter-spacing: 0rem; /* Espaçamento entre letras */
  margin-top: 1px; /* Espaço acima */
  line-height: 140%;
}

.tabela {
  max-width: 0px;
  margin-top: 0px; /* Espaço acima */
  align-items: center; /* Centraliza os itens horizontalmente */
  justify-content: center; /* Centraliza os itens verticalmente */
}
/* FIM ESTILIZA A TABELA */



/* ESTILIZA OS FORMULÁRIOS */
/* Formulários */
.form-group {
  justify-content: space-between; /* Distribui o input e o botão, colocando o botão à direita */
  align-items: center; /* Alinha verticalmente o input e o botão no centro */
  margin-bottom: 20px; /* Adiciona espaço abaixo do grupo para outros elementos */
  width: 100%;
  font-size: 14px;
}
  
.form-label {
  display: block;
  margin-bottom: 5px;
  color: #A9A9A9;
}

.form-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ffffff;
  border-radius: 4px;
}

.form-button {
  padding: 10px 20px;
  background-color: #21538E;
  color: #21538E;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  
}

/* Estilo para o formulário LOCALIZAÇÃO */
.form-containerregiao {
  display: flex;
  flex-wrap: wrap;  /* Permite que os itens quebrem em telas menores */
  gap: 10px;  /* Espaço entre os campos */
  justify-content: space-between;  /* Distribui os campos igualmente */
  align-items: center;  /* Alinha os campos verticalmente */
  margin-top: 30px;
}

.form-containerregiao .form-group2 {
  display: flex;
  flex-direction: column; /* Mantém label e select empilhados */
  align-items: flex-start; /* Alinha os elementos à esquerda */
  justify-content: flex-start; /* Mantém espaçamento */
  flex: 1; /* Faz os campos ocuparem espaços iguais */
  width: 100%; /* Evita que os campos fiquem muito pequenos */
  gap: 2px; /* Reduz o espaço entre label e select */
}

.form-group2 label {
  white-space: nowrap; /* Impede quebra de linha no rótulo */
  font-size: 1rem;
  margin-right: 8px; /* Ajusta o espaçamento entre o label e o select */
  margin-left: 25px; /* Ajusta o espaçamento entre o label e o select */
  flex-shrink: 0; /* Evita que o label diminua excessivamente */
}

.form-group2 select {
  width: 100%;  /* Garante que o select ocupe todo o espaço do container */
  max-width: 700px; /* Evita que o select fique muito grande */
  min-width: 150px; /* Evita que o select fique muito pequeno */
  padding: 10px;
  font-size: 18px;
}

/* Estilo CUPOM */
.form-group22 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;  /* Garante que o select ocupe todo o espaço do container */
  margin-top: 0;
  margin-bottom: 10px;

  max-width: 500px; /* Evita que o select fique muito grande */
  min-width: 100px; /* Evita que o select fique muito pequeno */
  padding: 4px 20px;
  font-size: 16px;
}

/* Input do cupom */
.form-group22 input[type="text"] {
  width: 80%;
  max-width: 500px;
  padding: 10px;
  font-size: 18px;
  border-radius: 10px;
  border: 1px solid #ccc;
  margin: 0 auto; /* Centraliza o input */
}

/* Feedback do cupom - centralizado */
#cupom-feedback {
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px; /* Reduz espaço antes dos botões */
  min-height: 20px;
  font-size: 0.9rem;
  width: 100%;
}
/* Estilo CUPOM */

/* Estilo botões de LOCALIZAÇÃO */
.buttonregiao-group {
  margin-top: 15px;  /* Espaçamento entre os botões e os selects */
  display: flex;
  justify-content: center; /* Centraliza os botões horizontalmente */
  align-items: center;  /* Alinha os botões verticalmente */
  gap: 20px;  /* Espaçamento fixo entre os botões */
  width: 100%;  /* Garante que o container ocupe toda a largura disponível */
  padding: 4px 20px;
  border-radius: 10px;
  font-size: 1.0rem;
  height: 30px;
}

.buttonregiao-group button {
  width: 15%;  /* Define um tamanho fixo para os botões */
  height: 30px;  /* Define uma altura fixa */
  font-size: 1.0rem;
  text-align: center;  /* Garante que o texto fique centralizado */
  padding: 4px 20px;  
  white-space: nowrap; /* Evita que o texto quebre */
  border-radius: 10px;
}
/* FIM Estilo para o formulário LOCALIZAÇÃO */


/* Estilo para a div que envolve os botões*/
.button-group {
  position: relative;
  text-align: center; 
  width: 100%; 
  margin-top: 30px; 
  z-index: 10;
  gap: 20px;
}

/* Estilo para o botão ENVIAR OBJETIVO*/
.btn-envobj {
  padding: 4px 20px;
  background-color: #0096FF;
  color: #FFFFFF;
  font-size: 1.0rem;
  border: none;
  border-radius: 10px;
  white-space: nowrap; /* Impede quebra de linha no botão */
  width: 15%; /* Define a largura dos botões */
  height: 30px;  /* Define uma altura fixa */
  max-width: 300px; /* Impede que fiquem muito largos */
  cursor: pointer; /* Cursor tipo "mãozinha" */
  display: inline-block; /* Garante que respeite a largura sem ocupar uma linha toda */
  gap: 20px;
}

/* Estilo para o botão VOLTAR OBJETIVO*/
.btn-voltarobj {
  padding: 4px 20px;
  background-color: #003462;
  color: #FFFFFF;
  font-size: 1.0rem;
  border: none;
  border-radius: 10px;
  white-space: nowrap; /* Impede quebra de linha no botão */
  width: 15%; /* Ajusta a largura ao conteúdo do texto */
  height: 30px;  /* Define uma altura fixa */
  max-width: 300px; /* Impede que fiquem muito largos */
  cursor: pointer; /* Cursor tipo "mãozinha" */
  display: inline-block; /* Garante que respeite a largura sem ocupar uma linha toda */
  gap: 20px;
}

/* Estilo para o botão ENVIAR DA PAGINA INICIAL*/
.btn-envinicio {
  padding: 4px 20px;
  background-color: #0096FF;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  white-space: nowrap; /* Impede quebra de linha no botão */
  display: inline-block; /* Ajusta o botão ao tamanho do conteúdo */
  width: auto; /* Ajusta a largura ao conteúdo do texto */
  cursor: pointer; /* Cursor tipo "mãozinha" */
  font-size: 1.5rem;
  height: 30px
}

/* Estilo para o botão ENVIAR DOS OUTROS FORMULARIOS*/
.btn-env {
  padding: 4px 20px;
  background-color: #0096FF;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  white-space: nowrap; /* Impede quebra de linha no botão */
  width: 15%;
  cursor: pointer; /* Cursor tipo "mãozinha" */
  font-size: 1.0rem;
  height: 30px;
  gap: 20px;
}

/* Estilo para o botão ENVIAR DO CUPOM DE DESCONTO*/
.btn-envb {
  padding: 4px 20px;
  background-color: #21538E;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  white-space: nowrap; /* Impede quebra de linha no botão */
  width: 15%;
  cursor: pointer; /* Cursor tipo "mãozinha" */
  font-size: 1.0rem;
  height: 30px;
  gap: 20px;
}

/* Estilo para o botão VOLTAR */
.btn-voltar {
  padding: 4px 20px;
  background-color: #003462;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  white-space: nowrap; /* Impede quebra de linha no botão */
  width: 15%;
  cursor: pointer; /* Cursor tipo "mãozinha" */
  font-size: 1.0rem;
  gap: 20px;
  height: 30px;
}

/* Estilo para o botão CONTA */
.btn-conta {
  padding: 4px 20px;
  background-color: #C0C0C0;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  white-space: nowrap; /* Impede quebra de linha no botão */
  /* cursor: pointer; /* Cursor tipo "mãozinha" */
}

/* Estilo para o botão TABELA */
.btn-table {
  padding: 4px 20px;
  background-color: #0096FF; /* Cor do botão */
  color: #FFFFFF; /* Cor do texto do botão */
  border: none;
  border-radius: 10px;
  white-space: nowrap; /* Impede quebra de linha no botão */
  display: inline-block; /* Ajusta o botão ao tamanho do conteúdo */
  width: auto; /* Ajusta a largura ao conteúdo do texto */
  font-size: 1.0rem; /* Tamanho da fonte */
  cursor: pointer; /* Cursor tipo "mãozinha" */
  justify-content: center; /* Centraliza o botão horizontalmente */
  margin-top: 20px; /* Adiciona espaço acima do botão */
  margin-bottom: 20px; /* Adiciona espaço acima do botão */
  height: 30px;
}

/* Estilo para o botão TABELA abaixo do arg3 */
.btn-table3 {
  padding: 4px 20px;
  background-color: #0096FF; /* Cor do botão */
  color: #FFFFFF; /* Cor do texto do botão */
  border: none;
  border-radius: 10px;
  /* width: 30%; */
  width: auto; /* Ajusta a largura ao conteúdo do texto */
  font-size: 1.0rem; /* Tamanho da fonte */
  cursor: pointer; /* Cursor tipo "mãozinha" */
  justify-content: center; /* Centraliza o botão horizontalmente */
  margin-top: 5px; /* Adiciona espaço acima do botão */
  white-space: nowrap; /* Impede quebra de linha no botão */
  display: inline-block; /* Ajusta o botão ao tamanho do conteúdo */
  height: 30px;
}


/* Estilo para o botão HOME no rodapé da página */
.btn-home {
  padding: 4px 20px;
  background-color: #0096FF; /* Cor do botão */
  color: #FFFFFF; /* Cor do texto do botão */
  border: none;
  border-radius: 10px;
  width: 30%;
  font-size: 16px; /* Tamanho da fonte */
  cursor: pointer; /* Cursor tipo "mãozinha" */
  justify-content: center; /* Centraliza o botão horizontalmente */
  margin-top: 0px; /* Adiciona espaço acima do botão */
}

.form-button:hover {
  background-color: #1A4271;
}

.hidden {
  display: none;
}

.hidden {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

  input[type="text"],
  input[type="url"],
  input[type="number"],
  input[type="email"],
  select {
      width: 80%; /* Aumenta a largura para 100% do contêiner pai */
      max-width: 700px; /* Define uma largura máxima */
      height: 42px; /* Define a altura do campo */
      padding: 10px; /* Adiciona espaço a esquerda do input */
      font-size: 18px; /* Aumenta o tamanho da fonte */
      border-radius: 10px; /* Arredonda as bordas */
      border: 1px solid #ccc; /* Define a cor e o estilo da borda */
      box-sizing: border-box; /* Garante que padding e borda sejam incluídos na largura e altura */
      margin: 0 auto; /* Garante centralização automática */
      color: #6C6C6C; /* Cor do texto dentro do campo de resposta o input */
      font-weight: 100; /* Configura fonte para Light */
      display: block;
      margin-top: 5px;
      margin-bottom: 10px;
  }

.form-group2 {
  display: flex;
  justify-content: center; /* Centraliza o input horizontalmente */
  align-items: center; /* Alinha verticalmente o input e o botão no centro */
  font-size: 14px;
  width: 50%;
  margin: 0 auto; /* Garante que o container fique centralizado */
}
/* FIM ESTILIZA OS FORMULÁRIOS */


/* ESTILIZA O RODAPÉ */
/* Estilo para o rodapé - Reflete abaixo dos botões enviar e voltar*/
.footer {
  background-color: #ffffff; /* Cor de fundo do rodapé */
  font-size: 12px; /* Tamanho da fonte do texto do rodapé */
  color: #D6D6D6; /* Cor do texto */
  text-align: center;
  padding: 20px;
  width: 100%;
  margin-top: 10px; /* Espaço acima da tabela */
  margin-bottom: 0px; /* Espaço abaixo da tabela */
}

.footer p {
  margin: 5px auto; /* Adiciona espaço entre as linhas */
}

.footer a {
  color: #D6D6D6; /* Cor do link */
  text-decoration: none; /* Remove o sublinhado do link */
  font-size: 12px; /* Tamanho da fonte do texto do rodapé */
  
}

.footer a:hover {
  text-decoration: underline; /* Sublinha o link ao passar o mouse */
}
/* FIM ESTILIZA O RODAPÉ */


/* ESTILIZA A TABELA DE PREÇOS */
/* Estilo para a tabela de preços */
table {
  border-collapse: collapse;
  width: 80%;
  flex-direction: center;
  min-height: 80vh; /* Garante que ocupa a altura da tela */
  margin-top: 40px; /* Espaço acima da tabela */
  margin-bottom: 0px; /* Espaço abaixo da tabela */
}

table th, table td {
  border: 0.3px solid #C0C0C0;
  padding: 10px;
}

/* Conteúdo da tabela de preços */
.table-container { 
  color: #6C6C6C; /* Cor do texto */
  font-size: 1.0rem; /* Tamanho da fonte */
  font-family: "Roboto", sans-serif; /* Define a fonte padrão */
  font-weight: 300; /* Define o peso da fonte para "regular" */
  text-align: center;
  padding: 10px 10px; /* 10px no topo e embaixo, 10px nos lados */
  width: 80%;
  margin: 0px auto 0 auto; /* Adiciona espaçamento superior sem sobrepor a imagem */
  justify-content: center; /* Centraliza o conteúdo verticalmente */
  align-items: center; /* Centraliza o conteúdo horizontalmente */
  position: relative; /* Mantém a ordem correta dos elementos */
  z-index: 1; /* Garante que fique abaixo da imagem */
}

/* Estilo para o menu ancora da tabela */
.sectiontabela {
  scroll-margin-top: 300px; /* Ajusta a posição do scroll para evitar corte */
  height: auto; /* Deixa altura automática */
  min-height: 70vh; /* Garante que ocupa a altura da tela */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem; /* Alterado de 0rem para algo visível */
  color: #6C6C6C; /* Ajusta a cor do texto para ser visível */
  background-color: #FFFFFF;
  border-bottom: 0px solid #DDD;
}
/* FIM ESTILIZA A TABELA DE PREÇOS */


.section-padding {
  height: 100px; /* Espaço para criar uma página separada */
} 


/* INICIO: ESTILO PARA FAQ */
/* Imagem do logAQo em cima do F */
.cabeca {
  max-width: 150px; /* Tamanho do logo*/
  cursor: pointer; /* Cursor tipo "mãozinha"*/
  margin-bottom: 5px; /* Espaço abaixo da tabela */
}

/* Estilização da seção FAQ */
.faq-container {
  width: 80%;
  max-width: 800px;
  margin: 50px auto; /* Centraliza a seção */
  text-align: left;
  margin-bottom: 20px; /* Diminui a distância entre FAQ e botão */
}

/* Estiliza cada pergunta (botão) */
.faq-question {
  width: 100%;
  background-color: #D6D6D6;
  color: #000000;
  border: None;
  text-align: left;
  padding: 15px;
  font-size: 1rem;
  font-weight: 300;
  cursor: pointer;
  outline: none;
  border-radius: 10px;
  transition: background-color 0.3s ease;
  margin-bottom: 3px; /* Adiciona espaçamento entre as perguntas */
}
/* Muda a cor quando a pergunta for clicada */
.faq-question:hover {
  background-color: #0096FF;
  color: #D6D6D6;
}
/* Container da resposta (inicialmente oculto) */
.faq-answer {
  display: none;
  padding: 15px;
  border-left: 4px solid #0096FF;
  background-color: #F5F5F5;
  font-size: 0.95rem;
  color: #333;
  border-radius: 5px;
  margin-bottom: 10px;
  line-height: 1.3; /* Ajusta a altura da linha */
}

/* Estilo para o botão abaixo de FAQ */
.btn-faq {
  padding: 4px 20px;
  background-color: #0096FF; /* Cor do botão */
  color: #FFFFFF; /* Cor do texto do botão */
  border: none;
  border-radius: 10px;
  white-space: nowrap; /* Impede quebra de linha no botão */
  display: inline-block; /* Ajusta o botão ao tamanho do conteúdo */
  width: auto; /* Ajusta a largura ao conteúdo do texto */
  font-size: 1.0rem; /* Tamanho da fonte */
  cursor: pointer; /* Cursor tipo "mãozinha" */
  justify-content: center; /* Centraliza o botão horizontalmente */
  margin-top: 5px; /* Adiciona espaço acima do botão */
  margin-bottom: 20px; /* Adiciona espaço acima do botão */
  height: 30px;
}
/* Classe ativa para exibir a resposta */
.faq-answer.active {
  display: block;
}
/* Estilo para o menu ancora da sessão faq */
.sectionfaq {
  scroll-margin-top: 100px; /* Ajusta a posição do scroll para evitar corte */
  height: auto; /* Deixa altura automática */
  min-height: 90vh; /* Garante que ocupa a altura da tela */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem; /* Alterado de 0rem para algo visível */
  color: #929292; /* Ajusta a cor do texto para ser visível */
  background-color: #FFFFFF;
  border-bottom: 0px solid #DDD;
  position: relative; /* Mantém a hierarquia correta */
  z-index: 2; /* Garante que a seção fique abaixo de elementos sobrepostos */
}
/* FIM: ESTILO PARA FAQ */


/* RESPONSIVIDADE APRIMORADA */
/* Para tablets e telas menores */
@media (max-width: 992px) {
  .argumentos-vendas1,
  .argumentos-vendas2,
  .argumentos-vendas3 {
    flex-direction: column; /* Empilha as seções */
    height: auto; /* Altura automática para evitar cortes */
    padding: 40px 20px;
  }

  .left-section1, .right-section1,
  .left-section2, .right-section2,
  .left-section3, .right-section3 {
    width: 100%;
    padding: 20px;
    align-items: center;
    text-align: center;
  }

  .left-section2, .right-section2 {
    text-align: center;
    align-items: center;
  }

  h2, h4, h7, h8 {
    text-align: center !important;
  }

  .img-arg1,
  .img-arg2,
  .img-arg3 {
    max-width: 80%;
    margin-top: 20px;
  }

  .form-group2 {
    width: 40%;
  }

  input[type="text"],
  input[type="url"],
  input[type="number"],
  input[type="email"],
  select {
    width: 90%;
    min-width: auto;
  }


/* Responsivo BUTTON-GROUP: botões verba, etc  */
  .btn-env,
  .btn-envb,
  .btn-voltar,
  .btn-envobj,
  .btn-voltarobj {
    width: 15%;
  }

  .btn-table,
  .btn-table3,
  .btn-faq {
    width: 90%;
    font-size: 1rem;
  }

  /* Responsivo: empilha em telas menores */
@media (max-width: 768px) {
  .button-group {
    gap: 12px;
  }
  .button-group .btn-env,
  .button-group .btn-envb,
  .button-group .btn-voltar,
  .button-group .btn-envobj,
  .button-group .btn-voltarobj {
    flex: 1 1 100%;   /* cada botão ocupa a linha inteira */
    max-width: 90%;
  }
}

/* Bem pequeno */
@media (max-width: 480px) {
  .button-group {
    gap: 10px;
  }
  .button-group .btn-env,
  .button-group .btn-envb,
  .button-group .btn-voltar,
  .button-group .btn-envobj,
  .button-group .btn-voltarobj {
    height: 44px;
    font-size: 1rem;
  }
}

  table {
    width: 95%;
    font-size: 0.9rem;
  }

  .faq-container {
    width: 95%;
  }
}

/* Para smartphones pequenos */
@media (max-width: 480px) {
  h3 {
    font-size: 1.6rem;
  }

  h7, h8 {
    font-size: 1.2rem;
  }

  h2, h4, p {
    font-size: 1rem;
  }

  .menu {
    flex-direction: column;
    gap: 10px;
  }

  .logo {
    max-width: 120px;
  }

  .faq-question {
    font-size: 0.95rem;
  }

  .faq-answer {
    font-size: 0.9rem;
  }
}

@media (max-width: 768px) {
  #home.section {
    padding-top: 100px; /* ou ajuste conforme a altura real da navbar */
  }
}


/* Responsividade do menu (sanduíche) */
.menu-toggle {
  display: block;
  font-size: 1.5rem;
  color: #6C6C6C;
  cursor: pointer;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px; /* abaixo da navbar */
    right: 20px;
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 10px;
    z-index: 999;
    padding: 10px;
  }

  .menu.show {
    display: flex;
  }

  .menu li {
    margin: 10px 0;
  }
}


/* Responsividade antiga */
@media (max-width: 768px) {
  .menu {
    flex-direction: column;
    gap: 10px;
  }

  .logo {
    max-width: 100px;
  }
}


/* ESTILO ACEITES LEGAIS */
/* Configurações para os aceites nos termos de uso, contrato e política
/* container do aceite */
.aceite-termos {
  margin: 12px 0 4px;
}

/* label alinhado bonitinho */
.aceite-label {
  display: flex;
  gap: 8px;
  align-items: flex-start;   /* checkbox e texto alinhados no topo */
  justify-content: center;   /* centraliza como estava no seu inline */
}

/* checkbox */
#aceite_termos {
  margin-top: 3px;
}

/* h11 do aceite: mesmo padrão visual do seu h11 geral */
.aceite-text {
  display: block;
  font-size: 0.9rem;        /* herda do seu h11 */
  font-weight: 300;      /* idem */
  color: #929292;            /* idem */
}

/* links: sem azul, seguem o h11 */
.aceite-text a {
  color: #929292;
  text-decoration: none;
  border-bottom: 1px dotted currentColor; /* visual sutil opcional */
}
.aceite-text a:hover {
  text-decoration: underline;
}

/* botão "Enviar" desabilitado fica cinza e com cursor bloqueado */
.btn-env:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(100%);
}
/* FIM ESTILO ACEITES LEGAIS */


/* ESTILO PÁGINAS LEGAIS */
/* Estilo para pagina de politica, termos e contrato*/
.footer-text { font-size: 12px; color: #9b9a9a; text-align:center; line-height:1.6; }
.footer-link { color: #9b9a9a; text-decoration: none; }
.footer-link:hover { text-decoration: underline; }

.footer img {
  margin-bottom: 12px; /* controla a distância entre imagem e texto */
}

/* Centraliza a logo no topo */
.navbar-legals {
  display: flex;              /* Corrige o display */
  justify-content: center;    /* Centraliza horizontalmente */
  align-items: center;        /* Centraliza verticalmente */
  padding: 40px 0 20px;       /* Espaço acima (40px) e abaixo (20px) */
}

/* Garante que a imagem da logo não distorça */
.logo-legals img {
  max-width: 380px;           
  height: auto;
  cursor: pointer;
  margin-bottom: 24px;       
}
/* FIM ESTILO PÁGINAS LEGAIS */


/* ESTILO POPUP TRIAL */
/* Overlay igual aos demais popups */
#popup-trial-esgotado {
  position: fixed;
  inset: 0;
  background: rgba(206, 204, 204, 0.8);
  display: none;            /* abre via JS com display:flex */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Caixa do popup */
.popup-trial-card {
  background: #ffffff;
  padding: 24px;
  max-width: 520px;
  width: calc(100% - 32px);
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 10px 30px #9b9a9a;
}

/* Título e texto */
.popup-trial-card h3 { 
  font-family: "Roboto", sans-serif; /* Define a fonte padrão */
  font-weight: 400; /* Define o peso da fonte para "regular" */
  font-size: 1.7rem; /* Tamanho da fonte */
  color: #000000; /* Cor do texto */
  text-align: center; /* Alinha o texto a esquerda */
  letter-spacing: 0rem; /* Espaçamento entre letras */
  margin-top: 0px; /* Espaço acima */
  margin-bottom: 20px; /* Espaço abaixo da tabela */
  word-wrap: break-word; /* Permite quebra automática */
  overflow-wrap: break-word; /* Suporte adicional para quebra de texto */
  max-width: 100%; /* Limita a largura máxima ao tamanho do container pai */
  box-sizing: border-box; /* Inclui padding e borda na largura */
}

.popup-trial-card p  { margin: 0 0 16px 0; line-height: 1.5; color: #6C6C6C; }


/* Botões do popup de trial-esgotado */
#btn-trial-fechar,
#btn-trial-quero {
  position: relative;
  text-align: center;
  width: 100%;
  margin-top: 30px;
  z-index: 10;
  font-size: 0.9rem;
  justify-content: center;
  align-items: center;
  gap: 30px;
  display: flex;
  
  padding: 10px 16px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
}

/* Botões “Fechar” e “Quero” */
#btn-trial-fechar { 
  background: #003462; 
  color: #ffffff; 
  width: 50%;
  height: 30px;
  max-width: 150px;
  display: inline-block;
  padding: 4px 20px;
}
#btn-trial-quero { 
  background: #0096FF; 
  color: #ffffff; 
  width: 100%;
  height: 30px;
  max-width: 150px;
  display: inline-block; 
  padding: 4px 20px;
}

/* POPUP SUCESSO */
#popup-sucesso {
  position: fixed;
  inset: 0;
  background: rgba(206, 204, 204, 0.8);
  display: none;            /* abre via JS com display:flex */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Reusa .popup-trial-card já existente (caixa, títulos, textos) */

/* Botão OK do sucesso (clone do estilo de botões existentes) */
#btn-sucesso-ok {
  position: relative;
  text-align: center;
  width: 100%;
  margin-top: 30px;
  z-index: 10;
  font-size: 0.9rem;
  justify-content: center;
  align-items: center;
  gap: 30px;
  display: flex;

  padding: 10px 16px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;

  background: #0096FF;  /* mesmo do #btn-trial-quero */
  color: #ffffff;
  width: 50%;
  height: 30px;
  max-width: 150px;
  display: inline-block;
  padding: 4px 20px;
}

/* FIM ESTILO POPUP TRIAL B */



/* ESTILO POPUP FORMA DE PAGAMENTO */
/* Overlay igual aos demais popups */
#popup-forma-pagamento {
  position: fixed;
  inset: 0;
  background: rgba(206, 204, 204, 0.8);
  display: none;            /* abre via JS com display:flex */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Botões do popup de forma de pagamento */
#btn-forma-fechar,
#btn-forma-cartao,
#btn-forma-pix {
  position: relative;
  text-align: center;
  width: 100%;
  margin-top: 30px;
  z-index: 10;
  font-size: 0.9rem;
  justify-content: center;
  align-items: center;
  gap: 30px;
  display: flex;
  
  padding: 10px 16px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
}

/* “Cartão” e “PIX” = mesmo do #btn-trial-quero */
#btn-forma-cartao { 
  background: #21538E; 
  color: #ffffff; 
  width: 50%;
  height: 30px;
  max-width: 150px;
  display: inline-block;
  padding: 4px 20px;
}
#btn-forma-pix { 
  background: #0096FF; 
  color: #ffffff; 
  width: 100%;
  height: 30px;
  max-width: 150px;
  display: inline-block; 
  padding: 4px 20px;
}
/* “Cartão” e “PIX” = mesmo do #btn-trial-quero */
#btn-forma-fechar { 
  background: #003462; 
  color: #ffffff; 
  width: 50%;
  height: 30px;
  max-width: 150px;
  display: inline-block;
  padding: 4px 20px;
}
/* FIM ESTILO POPUP FORMA DE PAGAMENTO */


/* ESTILO CHECKOUT MERCADO PAGO */ 
/* utilitário para esconder blocos inteiros quando em checkout */
.hidden-page { display: none !important; }

#form-card {
  display: flex;
  width: 100%;
  position: relative;          /* participa do fluxo normal, sem sobrepor */
  z-index: 9999;                  /* atrás de popups, mas acima do fundo */
  margin: 0;          /* um respiro em cima */
  padding: 0px 0 100px;        /* espaço extra embaixo p/ não grudar na seção seguinte */
  overflow: visible;           /* não cortar nada do conteúdo */
  clear: both;                 /* garante que desça abaixo de qualquer bloco anterior */
  border-top: 1px solid transparent;  /* impede colapso de margem vindo de cima */
  padding-top: 16px !important;       /* um respiro próprio do bloco */
  margin-top: 20px !important;        /* ajuste fino (aumente se quiser mais espaço) */
}

/* 2) Garante que o 1º filho do #form-card não traga margem de herança */
#form-card > *:first-child {
  margin-top: 0 !important;
}

/* zera o margin-top gigante herdado do h6 global, só aqui no checkout */
#form-card h7 {
  display: block;
  margin-top: 0 !important;         /* evita “colar” no topo */
  margin-bottom: 12px;   /* respiro abaixo do título */
}

/* container centralizado e com largura controlada */
#form-card .checkout-form {
  max-width: 520px;
  margin: 0 auto;
  margin-top: 0 !important;
}

/* 5) (Opcional) Se ainda parecer “colado” em alguns breakpoints, injeta um espaçador neutro */
#form-card::before {
  content: "";
  display: block;
  height: 12px; /* ajuste fino aqui, pode ser 0–24px */
}

/* rótulos do checkout sempre alinhados à esquerda */
#form-card .checkout-label {
  display: block;
  margin: 12px 0 6px;
  font-size: 13px;
  color: #333;
  text-align: left;
}

/* os wrappers dos iframes do Mercado Pago */
#form-card .container-checkout {
  position: relative;
  z-index: 100000;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 35px;
  min-height: 30px; 
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 1px 12px;
  box-sizing: border-box;
  pointer-events: auto !important;
}
#form-card .container-checkout iframe{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 48px; 
  border: 0 !important;
  display: block !important;
  z-index: 100001 !important;
  pointer-events: auto !important;
}

/* se algum ancestral recebeu pointer-events:none por engano, reabilite no form */
#form-card, #form-checkout, #form-card * { pointer-events: auto; }

/* inputs/selects comuns aqui devem ocupar 100% para não herdar 60% do global */
#form-card input,
#form-card select {
  width: 100% !important;
  max-width: none !important;
  height: 37px;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 1.0rem;
  box-sizing: border-box;
  margin: 5px 0 10px 0;   /* remove o margin:auto centralizado do global */
}

/* linha do número do cartão já está ok por padrão (100%) */

/* linha com validade e CVV lado a lado */
#form-card .card-row {
  display: grid;
  grid-template-columns: 1fr 1fr; /* duas colunas para a segunda linha */
  gap: 10px;
  width: 100%;
}

/* o primeiro campo (número do cartão) ocupa as duas colunas, ficando sozinho na primeira linha */
#form-card .card-field:first-child {
  grid-column: 1 / -1;
}

/* os campos “small” (validade e CVV) ficam lado a lado na segunda linha */
#form-card .card-field.small {
  grid-column: auto;
  min-width: 120px;
}

/* botões do checkout: espaço extra embaixo pra não “misturar” com a próxima seção */
#form-card .button-group {
  position: relative;
  text-align: center; 
  width: 100%; 
  margin-top: 30px; 
  z-index: 10;
  font-size: 1.0rem;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 4px auto;
  border-radius: 10px;
  
}

/* botão Voltar */
#form-card .btn-voltar {
  padding: 4px 20px;
  background-color: #003462;
  color: #FFFFFF;
  font-size: 1.0rem;
  border: none;
  border-radius: 10px;
  white-space: nowrap; /* Impede quebra de linha no botão */
  width: 100%; /* Ajusta a largura ao conteúdo do texto */
  height: 30px;  /* Define uma altura fixa */
  max-width: 200px; /* Impede que fiquem muito largos */
  cursor: pointer; /* Cursor tipo "mãozinha" */
  display: inline-block; /* Garante que respeite a largura sem ocupar uma linha toda */
}
/* botão principal (Enviar/Pagar) */
#form-card .btn-env {
  padding: 4px 20px;
  background-color: #0096FF;
  color: #FFFFFF;
  font-size: 1.0rem;
  border: none;
  border-radius: 10px;
  white-space: nowrap; /* Impede quebra de linha no botão */
  width: 100%; /* Define a largura dos botões */
  height: 30px;  /* Define uma altura fixa */
  max-width: 200px; /* Impede que fiquem muito largos */
  cursor: pointer; /* Cursor tipo "mãozinha" */
  display: inline-block; /* Garante que respeite a largura sem ocupar uma linha toda */
}


/* responsivo: empilha validade e CVV no mobile */
@media (max-width: 600px) {
  #form-card .card-row {
    grid-template-columns: 1fr;
  }
  #form-card .card-field:first-child {
    grid-column: auto;
  }
}


/* botões do checkout PIX*/
#pix-section .button-group {
  position: relative;
  text-align: center; 
  width: 100%; 
  margin-top: 30px; 
  z-index: 10;
  font-size: 0.9rem;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 4px auto;
  border-radius: 10px;
}
/* botão Voltar */
#pix-section .btn-voltar {
  padding: 4px 20px;
  background-color: #003462;
  color: #FFFFFF;
  font-size: 0.9rem;
  border: none;
  border-radius: 10px;
  white-space: nowrap; /* Impede quebra de linha no botão */
  width: 100%; /* Ajusta a largura ao conteúdo do texto */
  height: 30px;  /* Define uma altura fixa */
  max-width: 200px; /* Impede que fiquem muito largos */
  cursor: pointer; /* Cursor tipo "mãozinha" */
  display: inline-block; /* Garante que respeite a largura sem ocupar uma linha toda */
}
/* botão principal (Enviar/Pagar) */
#pix-section .btn-env {
  padding: 4px 20px;
  background-color: #0096FF;
  color: #FFFFFF;
  font-size: 0.9rem;
  border: none;
  border-radius: 10px;
  white-space: nowrap; /* Impede quebra de linha no botão */
  width: 100%; /* Define a largura dos botões */
  height: 30px;  /* Define uma altura fixa */
  max-width: 200px; /* Impede que fiquem muito largos */
  cursor: pointer; /* Cursor tipo "mãozinha" */
  display: inline-block; /* Garante que respeite a largura sem ocupar uma linha toda */
}


/* ESTILO POPUP CPF */
/* Overlay igual aos demais popups */
#popup-cpf {
  position: fixed;
  inset: 0;
  background: rgba(206, 204, 204, 0.8);
  display: none;            /* abre via JS com display:flex */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Botões do popup CPF 
/* #btn-forma-fechar, */
#btn-cpf-cancelar,
#btn-cpf-confirmar {
  position: relative;
  text-align: center;
  width: 100%;
  margin-top: 30px;
  z-index: 10;
  font-size: 0.9rem;
  justify-content: center;
  align-items: center;
  gap: 30px;
  display: flex;
  
  padding: 10px 16px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
}

#btn-cpf-cancelar { 
  background: #003462; 
  color: #ffffff; 
  width: 50%;
  height: 30px;
  max-width: 150px;
  display: inline-block;
  padding: 4px 20px;
}
#btn-cpf-confirmar { 
  background: #0096FF; 
  color: #ffffff; 
  width: 100%;
  height: 30px;
  max-width: 150px;
  display: inline-block; 
  padding: 4px 20px;
}

/* FIM ESTILO POPUP CPF */


/* BOTÃO FLUTUANTE DO WHATSAPP */
.whats-float{
  position: fixed;
  right: 16px;          /* distancia da borda direita */
  bottom: 16px;         /* distancia da borda inferior */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;  /* verde oficial do WhatsApp */
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  text-decoration: none;
  z-index: 9500;        /* abaixo dos seus popups (9999) e acima do resto */
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s;
}

.whats-float i{
  font-size: 28px;       /* tamanho do ícone (as três linhas) */
  line-height: 1;
}

.whats-float:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.22);
}

/* Ajuste em telas bem pequenas */
@media (max-width: 480px){
  .whats-float{
    right: 12px;
    bottom: 12px;
    width: 52px;
    height: 52px;
  }
  .whats-float i{ font-size: 26px; }
}
/* FIM DO BOTÃO FLUTUANTE DO WHATSAPP */



/* BOTÃO PADRÃO GOOGLE */
.btn-google {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid #DADCE0;        /* borda cinza claro */
  border-radius: 4px;                /* leve arredondado */
  background: #FFFFFF;
  color: #3C4043;                    /* cinza Google */
  font: 500 14px/20px "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  cursor: pointer;
  transition: box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
  margin-top: 10px;
  margin-bottom: 15px;
}

.btn-google:hover {
  background: #F7F8F8;
  border-color: #DADCE0;
  box-shadow: 0 1px 2px rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
}

.btn-google:active {
  background: #EEF0F1;
  box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.02);
}

.btn-google:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(66,133,244,0.35); /* foco azul */
}

.btn-google[disabled] {
  opacity: .6;
  cursor: not-allowed;
  box-shadow: none;
}

/* Ícone e texto */
.btn-google__icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
}

.btn-google__text {
  white-space: nowrap;
}

/* Dark mode opcional */
@media (prefers-color-scheme: dark) {
  .btn-google {
    background: #FFFFFF;      /* Google mantém o botão branco no dark */
    color: #3C4043;
    border-color: #DADCE0;
  }
}
/* FIM BOTÃO PADRÃO GOOGLE */