/* ================================================================
   ÍNDICE (2026-08-18) — ordem física real do arquivo, com o "dono"
   de cada bloco. Gerado conferindo classes reais usadas em
   templates/index.html, agencias.html, pmes.html, diagnostico.html
   (grep, não suposição) — ver commit que introduziu este índice para
   o método completo. Blocos marcados "SEM PÁGINA ATIVA" não são
   usados por nenhuma das 4 páginas hoje; não foram removidos nesta
   rodada (fora de escopo apagar CSS morto sem confirmação separada).

   COMPARTILHADO (reset/body/main)................... logo abaixo
   SEM PÁGINA ATIVA (main-container/app/legal-page/...) logo abaixo
   COMPARTILHADO (NAVBAR)............................. linha ~340
   HERO — INDEX.HTML................................... "   ~535
   HERO — PMES.HTML.................................... "   ~650
   COMPARTILHADO (hero-title/subtitle, só agencias.html
     + cópias hero-index-title/hero-pmes-title)......... "   ~745
   HERO — AGÊNCIAS...................................... "   ~845
   SEÇÃO 2 — AGÊNCIAS................................... "   ~950
   BLOCO 2 — INDEX.HTML................................. "  ~1085
   BLOCO 2 — PMES.HTML................................... "  ~1225
   COMPARTILHADO (BLOCO 3 — O QUE VOCÊ VAI TER,
     index+agencias+pmes)................................ "  ~1360
   INDEX.HTML (BLOCO 4 — CRIAÇÃO DE CAMPANHAS).......... "  ~1690
   SEM PÁGINA ATIVA (BLOCO 5 — GESTÃO DE CAMPANHAS,
     .screen-5* não aparece em nenhum template hoje)..... "  ~1850
   INDEX.HTML (BLOCO 6 — PRA QUEM É).................... "  ~2045
   INDEX.HTML (BLOCO 7 — PARCERIAS)..................... "  ~2290
   COMPARTILHADO (BLOCO 8 — FAQ, index+agencias+pmes)... "  ~2480
   COMPARTILHADO (RESULTADOS, index+agencias+pmes)...... "  ~2670
   COMPARTILHADO (DIVISOR ENTRE SEÇÕES)................. "  ~2895
   COMPARTILHADO (ACESSIBILIDADE — foco de teclado)..... "  ~2935
   DIAGNOSTICO.HTML (PÁGINA DE DIAGNÓSTICO)............. "  ~2960
   DIAGNOSTICO.HTML (FLUXO MULTI-STEP).................. "  ~3300
   COMPARTILHADO (FORMULÁRIOS — .form-group/.btn-*)..... "  ~3440
   COMPARTILHADO (RODAPÉ)............................... "  ~3785
   DIAGNOSTICO.HTML (ACEITES LEGAIS 2).................. "  ~3820
   SEM PÁGINA ATIVA (PÁGINAS LEGAIS — footer-text/
     footer-link/navbar-legals/logo-legals; só usadas
     pelos templates de termos/política/contrato, que
     carregam styles.css, não este arquivo).............. "  ~3880
   COMPARTILHADO (BOTÃO FLUTUANTE WHATSAPP)............. "  ~3905
   DIAGNOSTICO.HTML (BOTÃO PADRÃO GOOGLE)............... "  ~3945
   DIAGNOSTICO.HTML (Quick Check — .qc-*)............... "  ~4010

   Não fisicamente reorganizado (blocos continuam na ordem
   histórica em que foram escritos) — mover ~4200 linhas de CSS
   de uma vez tinha risco real de erro de copy-paste/cascata sem
   ganho proporcional. Cada bloco abaixo tem seu próprio banner
   INÍCIO/FIM ou uma tag de dono no cabeçalho existente.
   ================================================================ */

/* ============================================================
   COMPARTILHADO — reset global (html/body/*, correção de <main>)
   ============================================================ */

/* 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; 
}

/* CORREÇÃO GLOBAL: evita scroll lateral */
html, body {
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

/* CORREÇÃO (2026-08-18): <main> não tinha largura explícita e era
   dimensionado por shrink-to-fit (body é display:flex/
   flex-direction:column/align-items:center). Em telas <=600px, isso
   fazia max-width:100% nos títulos (.screen-4-title em index.html,
   .screen-2-title em pmes.html) resolver contra um container de
   largura indefinida — o texto não quebrava linha e empurrava <main>
   pra mais largo que a viewport, cortado visualmente pelo
   overflow-x:hidden acima. */
main {
  width: 100%;
}

*, *::before, *::after {
  box-sizing: border-box;
}
/* ============================================================
   FIM COMPARTILHADO — reset global
   ============================================================ */


/* ============================================================
   SEM PÁGINA ATIVA — .main-container/.app/.legal-page/
   .titulo-home/.conta-gads/.faq-container e afins não aparecem em
   nenhuma das 4 páginas ativas (index/agencias/pmes/diagnostico).
   Provavelmente legado de telas antigas ou de outra parte do site
   (dashboard/onboarding) fora do escopo deste arquivo. Não removido
   nesta rodada — fora de escopo apagar CSS morto sem confirmação.
   ============================================================ */

/* 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 */
  
}
/* DEPOIS — mantém o mesmo estilo, agora como classe */
h3,
.titulo-home { 
  font-weight: 300;
  font-size: 2.5rem;
  color: #424242;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 10px;
  line-height: 130%;
}

/* 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: 2.0rem; /* Tamanho da fonte */
  color: #000000; /* Cor do texto */
  text-align: left; /* Alinha o texto a esquerda */
  letter-spacing: 0rem; /* Espaçamento entre letras */
  margin-top: 0px; /* Espaço acima */
  margin-bottom: 10px; /* 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;
}

.conta-gads {
  color: #b71c1c;
  /* background-color: #fdecea; */
  padding: 8px 10px;
  /* border-left: 4px solid #d32f2f; */
  font-size: 0.9rem;
  margin-top: 8px;
  text-align: center;
}

/* FIM ESTILIZA OS TÍTULOS E TEXTOS h2 */
/* ============================================================
   FIM SEM PÁGINA ATIVA
   ============================================================ */


/* ============================================================
   COMPARTILHADO — NAVBAR — LOGO ESQUERDA / MENU DIREITA
   (index.html, agencias.html, pmes.html, diagnostico.html)
   ============================================================ */

.navbar {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 88px;

  z-index: 1000;

  background-color: #FFFFFF;
  border-bottom: 1px solid #EEEEEE;
}


/* ESTRUTURA */

.nav-inner {
  width: 100%;
  max-width: 1500px;
  height: 88px;

  margin: 0 auto;
  padding: 0 50px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* ------------------------------------------------------------
   LOGO
   ------------------------------------------------------------ */

.nav-logo {
  display: flex;
  align-items: center;

  flex-shrink: 0;
}

.nav-logo img {
  display: block;

  width: auto;
  height: 60px;

  margin: 0;
}


/* ------------------------------------------------------------
   LADO DIREITO
   ------------------------------------------------------------ */

.nav-right {
  display: flex;
  align-items: center;

  gap: 34px;
}


/* LINKS */

.nav-links {
  display: flex;
  align-items: center;

  gap: 26px;

  white-space: nowrap;
}

.nav-links a {
  font-family: "Roboto", sans-serif;
  font-size: 0.92rem;
  font-weight: 300;

  color: #6C6C6C;

  text-decoration: none;

  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: #000000;
}


/* ------------------------------------------------------------
   ENTRAR
   ------------------------------------------------------------ */

.btn-table.nav-login {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 32px;

  margin: 0;
  padding: 0 18px;

  font-size: 0.95rem;
  line-height: 1;

  text-decoration: none;

  border-radius: 9px;

  flex-shrink: 0;
}


/* ------------------------------------------------------------
   HAMBÚRGUER
   ------------------------------------------------------------ */

.menu-toggle {
  display: none;

  width: 40px;
  height: 40px;

  padding: 0;

  place-items: center;

  color: #6C6C6C;

  background: transparent;
  border: 0;

  cursor: pointer;
}

.menu-toggle i {
  font-size: 22px;
  line-height: 1;
}


/* ============================================================
   TABLET / MOBILE
   ============================================================ */

@media (max-width: 900px) {

  .nav-links {
    display: none;
  }

  .menu-toggle {
    display: grid;
  }

  .nav-right {
    gap: 12px;
  }

}


/* ============================================================
   CELULAR
   ============================================================ */

@media (max-width: 600px) {

  .nav-inner {
    padding: 0 16px;
  }

  .nav-logo img {
    height: 56px;
  }

  .btn-table.nav-login {
    height: 30px;
    padding: 0 14px;

    font-size: 0.9rem;
  }

}

/* ============================================================
   MENU MOBILE
   ============================================================ */

.menu-overlay {
  position: fixed;

  top: 88px;
  left: 0;

  width: 100%;

  z-index: 999;

  background: #FFFFFF;
  border-bottom: 1px solid #EEEEEE;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.menu-panel {
  width: 100%;
}

.menu-list {
  display: flex;
  flex-direction: column;

  margin: 0;
  padding: 0;

  list-style: none;
}

.menu-list li {
  margin: 0;
  padding: 0;

  border-bottom: 1px solid #EEEEEE;
}

.menu-list li:last-child {
  border-bottom: none;
}

.menu-list a {
  display: block;

  width: 100%;

  padding: 18px 20px;

  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: 400;

  color: #6C6C6C;

  text-decoration: none;

  background: #FFFFFF;
}

.menu-list a:hover {
  color: #000000;
  background: #F8F8F8;
}


/* ============================================================
   MENU MOBILE — SOMENTE TABLET/CELULAR
   ============================================================ */

@media (min-width: 901px) {
  .menu-overlay {
    display: none !important;
  }
}

/* ============================================================
   FIM COMPARTILHADO — NAVBAR
   ============================================================ */


/* ============================================================
   HERO — INDEX.HTML (independente de pmes.html — não compartilha
   hero-pmes-(nada) / img-arg1-pmes. Ver .hero-title/.hero-subtitle
   logo abaixo — essas DUAS continuam compartilhadas, mas agora só
   com agencias.html, que ainda depende delas.)
   ============================================================ */

.hero-index-section {
  width: 100%;
  min-height: calc(100vh - 88px);

  padding: 120px 0 90px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero-index-content {
  padding-left: 7%;
  padding-right: 30px;

  flex: 7;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-index-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 80px;
}

.hero-index-cta .btn-table {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.hero-index-legal {
  margin: 8px 0 0;
  max-width: 620px;
  font-size: 0.68rem;
  font-weight: 300;
  line-height: 1.4;
  color: #777777;
  text-align: left;
}

.hero-index-image {
  padding-right: 7%;
  padding-left: 30px;

  flex: 3;

  display: flex;
  align-items: center;
  justify-content: center;
}

.img-arg1-index {
  max-width: 450px; /* mesmo valor calibrado nesta sessão (era .img-arg1) */
  margin-top: -55px;
  filter: drop-shadow(0 50px 10px rgba(0, 0, 0, 0.35));
}

@media (max-width: 992px) {
  .hero-index-section {
    min-height: auto;
    flex-direction: column;
    padding: 100px 7% 60px;
    gap: 40px;
  }

  .hero-index-content,
  .hero-index-image {
    width: 100%;
    flex: none;
    padding-left: 0;
    padding-right: 0;
  }

  .img-arg1-index {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    margin-top: 0;
    filter: drop-shadow(0 30px 7px rgba(0, 0, 0, 0.35));
  }
}

@media (max-width: 600px) {
  .hero-index-section {
    padding: 90px 24px 50px;
  }

  .img-arg1-index {
    max-width: 260px;
    filter: drop-shadow(0 25px 6px rgba(0, 0, 0, 0.35));
  }

  .hero-index-cta {
    margin-top: 40px;
  }
}

/* ============================================================
   FIM HERO — INDEX.HTML
   ============================================================ */


/* ============================================================
   HERO — PMES.HTML (independente de index.html — não compartilha
   hero-index-(nada))
   ============================================================ */

.hero-pmes-section {
  width: 100%;
  min-height: calc(100vh - 88px);

  padding: 120px 0 90px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero-pmes-content {
  padding-left: 7%;
  padding-right: 30px;

  flex: 7;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-pmes-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 80px;
}

.hero-pmes-cta .btn-table {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.hero-pmes-legal {
  margin: 8px 0 0;
  max-width: 620px;
  font-size: 0.68rem;
  font-weight: 300;
  line-height: 1.4;
  color: #777777;
  text-align: left;
}

.hero-pmes-image {
  padding-right: 7%;
  padding-left: 30px;

  flex: 3;

  display: flex;
  align-items: center;
  justify-content: center;
}

.img-arg1-pmes {
  max-width: 450px; /* mesmo valor calibrado nesta sessão (era .img-arg1) */
  margin-top: -55px;
  filter: drop-shadow(0 50px 10px rgba(0, 0, 0, 0.45));
}

@media (max-width: 992px) {
  .hero-pmes-section {
    min-height: auto;
    flex-direction: column;
    padding: 100px 7% 60px;
    gap: 40px;
  }

  .hero-pmes-content,
  .hero-pmes-image {
    width: 100%;
    flex: none;
    padding-left: 0;
    padding-right: 0;
  }

  .img-arg1-pmes {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    margin-top: 0;
    filter: drop-shadow(0 30px 7px rgba(0, 0, 0, 0.35));
  }
}

@media (max-width: 600px) {
  .hero-pmes-section {
    padding: 90px 24px 50px;
  }

  .img-arg1-pmes {
    max-width: 260px;
    filter: drop-shadow(0 30px 7px rgba(0, 0, 0, 0.35));
  }

  .hero-pmes-cta {
    margin-top: 40px;
  }
}

/* ============================================================
   FIM HERO — PMES.HTML
   ============================================================ */


/* Título principal — AINDA COMPARTILHADA, mas só com agencias.html
   (index.html e pmes.html usam .hero-index-title/.hero-pmes-title,
   que têm os mesmos valores, ver abaixo). Fora de escopo renomear
   pra agencias.html nesta rodada. */
.hero-title {
  font-family: "Roboto", sans-serif;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0;
  color: #000000;
  text-align: left;

  max-width: 760px;

  margin: 0 0 18px;
}

/* Subtítulo — mesma observação acima */
.hero-subtitle {
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.03rem;
  color: #6C6C6C;

  margin: 0;
}

/* Título principal — INDEX.HTML (cópia de .hero-title) */
.hero-index-title {
  font-family: "Roboto", sans-serif;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0;
  color: #000000;
  text-align: left;

  max-width: 760px;

  margin: 0 0 18px;
}

/* Subtítulo — INDEX.HTML (cópia de .hero-subtitle) */
.hero-index-subtitle {
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.03rem;
  color: #6C6C6C;

  margin: 0;
}

/* Título principal — PMES.HTML (cópia de .hero-title) */
.hero-pmes-title {
  font-family: "Roboto", sans-serif;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0;
  color: #000000;
  text-align: left;

  max-width: 760px;

  margin: 0 0 18px;
}

/* Subtítulo — PMES.HTML (cópia de .hero-subtitle) */
.hero-pmes-subtitle {
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.03rem;
  color: #6C6C6C;

  margin: 0;
}


/* ============================================================
   AGENCIAS.HTML — HERO (independente do hero de index.html —
   não compartilha .hero/.hero-section/.hero-content/.hero-image)
   ============================================================ */

.hero-agencias-section {
  width: 100%;
  max-width: 1400px;
  min-height: calc(100vh - 88px);

  margin: 0 auto;
  padding: 120px 4% 90px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 5px; /* ajuste este valor pra aproximar/afastar texto e imagem */
}

.hero-agencias-content {
  flex: 5; /* ajuste a proporção texto:imagem aqui */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-agencias-image {
  flex: 5; /* ajuste a proporção texto:imagem aqui */
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-arg-agencias {
  width: 650px; /* valor direto, não % — ajuste o tamanho aqui */
  max-width: 100%; /* trava de segurança pra não estourar em mobile */
  height: auto;
  display: block;
  filter: drop-shadow(0 50px 10px rgba(0, 0, 0, 0.45));
}

.hero-agencias-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 80px; /* ajuste esse valor independente do hero de index.html */
}

.hero-agencias-cta .btn-table {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.hero-agencias-legal {
  margin: 8px 0 0;
  max-width: 620px;
  font-size: 0.68rem;
  font-weight: 300;
  line-height: 1.4;
  color: #777777;
  text-align: left;
}

/* ============================================================
   RESPONSIVO — HERO AGÊNCIAS
   ============================================================ */

@media (max-width: 992px) {
  .hero-agencias-section {
    min-height: auto;
    flex-direction: column;
    padding: 100px 7% 60px;
    gap: 40px;
  }

  .hero-agencias-content,
  .hero-agencias-image {
    width: 100%;
    flex: none;
  }

  .img-arg-agencias {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    filter: drop-shadow(0 30px 7px rgba(0, 0, 0, 0.45));
  }
}

@media (max-width: 600px) {
  .hero-agencias-section {
    padding: 90px 24px 50px;
  }

  .img-arg-agencias {
    max-width: 260px;
    filter: drop-shadow(0 20px 6px rgba(0, 0, 0, 0.45));
  }
}

@media (max-width: 600px) {
  .hero-agencias-cta {
    margin-top: 40px;
  }
}

/* ============================================================
   AGENCIAS.HTML — SEÇÃO 2 (independente de index.html —
   não compartilha .screen-2/.screen-2-section/.screen-2-image/
   .screen-2-content/.screen-2-title/.screen-2-text)
   ============================================================ */

.screen-2-agencias {
  width: 100%;
  background-color: #FFFFFF;
}

.screen-2-agencias-section {
  width: 100%;
  max-width: 1400px;
  min-height: 620px;

  margin: 0 auto;
  padding: 90px 7%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 80px; /* ajuste este valor pra aproximar/afastar texto e imagem */
}

.screen-2-agencias-image {
  flex: 0 0 35%; /* ajuste a proporção texto:imagem aqui */

  display: flex;
  align-items: center;
  justify-content: center;
}

.img-arg2-agencias {
  width: 450px; /* valor direto, não % — ajuste o tamanho aqui */
  max-width: 100%; /* trava de segurança pra não estourar em mobile */
  height: auto;
  display: block;
  filter: drop-shadow(0 50px 10px rgba(0, 0, 0, 0.45));
}

.screen-2-agencias-content {
  flex: 1;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  text-align: left;
}

.screen-2-agencias-title {
  max-width: 760px;

  margin: 0 0 24px;

  font-family: "Roboto", sans-serif;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.15;

  letter-spacing: 0;
  color: #000000;
  text-align: left;
}

.screen-2-agencias-text {
  max-width: 760px;

  margin: 0;

  font-family: "Roboto", sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.65;

  letter-spacing: 0.02rem;
  color: #6C6C6C;
  text-align: left;
}


/* ============================================================
   RESPONSIVO — SEÇÃO 2 AGÊNCIAS
   ============================================================ */

@media (max-width: 992px) {

  .screen-2-agencias-section {
    min-height: auto;

    flex-direction: column;

    padding: 70px 7%;
    gap: 45px;
  }

  .screen-2-agencias-image,
  .screen-2-agencias-content {
    width: 100%;
    flex: none;
  }

  .img-arg2-agencias {
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
  }

  .screen-2-agencias-title,
  .screen-2-agencias-text {
    max-width: 100%;
  }
}


@media (max-width: 600px) {

  .screen-2-agencias-section {
    padding: 55px 24px;
    gap: 35px;
  }

  .img-arg2-agencias {
    max-width: 260px;
  }

  .screen-2-agencias-title {
    font-size: 1.65rem;
    margin-bottom: 18px;
  }

  .screen-2-agencias-text {
    font-size: 1rem;
    line-height: 1.6;
  }
}

/* ============================================================
   BLOCO 2 — PROBLEMA / COMO APARECER NO GOOGLE — INDEX.HTML
   (independente de pmes.html — ver bloco PMES logo abaixo)
   ============================================================ */

.screen-2-index {
  width: 100%;
  background-color: #FFFFFF;
}

.screen-2-index-section {
  width: 100%;
  max-width: 1400px;
  min-height: 620px;

  margin: 0 auto;
  padding: 90px 7%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 100px;
}

.screen-2-index-image {
  flex: 0 0 35%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-arg2-index {
  width: 130%; /* mesmo valor calibrado nesta sessão (era .screen-2 .screen-2-image img) */
  max-width: 600px;
  height: auto;
  margin: 0;
  display: block;
  filter: drop-shadow(0 50px 10px rgba(0, 0, 0, 0.45));
}

.screen-2-index-content {
  flex: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.screen-2-index-title {
  max-width: 760px;
  margin: 0 0 24px;
  font-family: "Roboto", sans-serif;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0;
  color: #000000;
  text-align: left;
}

.screen-2-index-text {
  max-width: 760px;

  margin: 0;

  font-family: "Roboto", sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.65;

  letter-spacing: 0.02rem;
  color: #6C6C6C;
  text-align: left;
}

@media (max-width: 992px) {

  .screen-2-index-section {
    min-height: auto;
    flex-direction: column;
    padding: 70px 7%;
    gap: 45px;
  }

  .screen-2-index-image,
  .screen-2-index-content {
    width: 100%;
    flex: none;
  }

  .img-arg2-index {
    max-width: 240px;
    filter: drop-shadow(0 20px 6px rgba(0, 0, 0, 0.45));
  }

  .screen-2-index-title,
  .screen-2-index-text {
    max-width: 100%;
  }
}

@media (max-width: 600px) {

  .screen-2-index-section {
    padding: 55px 24px;
    gap: 35px;
  }

  .img-arg2-index {
    max-width: 260px;
    filter: drop-shadow(0 25px 6px rgba(0, 0, 0, 0.45));
  }

  .screen-2-index-title {
    font-size: 1.65rem;
    margin-bottom: 18px;
  }

  .screen-2-index-text {
    font-size: 1rem;
    line-height: 1.6;
  }
}
/* ============================================================
   FIM BLOCO 2 — INDEX.HTML
   ============================================================ */


/* ============================================================
   BLOCO 2 — PROBLEMA / COMO APARECER NO GOOGLE — PMES.HTML
   (independente de index.html — bloco acima)
   ============================================================ */

.screen-2-pmes {
  width: 100%;
  background-color: #FFFFFF;
}

.screen-2-pmes-section {
  width: 100%;
  max-width: 1400px;
  min-height: 620px;

  margin: 0 auto;
  padding: 90px 7%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 100px;
}

.screen-2-pmes-image {
  flex: 0 0 35%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-arg2-pmes {
  width: 130%; /* mesmo valor calibrado nesta sessão (era .screen-2 .screen-2-image img) */
  max-width: 600px;
  height: auto;
  margin: 0;
  display: block;
  filter: drop-shadow(0 50px 10px rgba(0, 0, 0, 0.55));
}

.screen-2-pmes-content {
  flex: 1;

  padding: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  text-align: left;
}

.screen-2-pmes-title {
  max-width: 760px;

  margin: 0 0 24px;

  font-family: "Roboto", sans-serif;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.15;

  letter-spacing: 0;
  color: #000000;
  text-align: left;
}

.screen-2-pmes-text {
  max-width: 760px;

  margin: 0;

  font-family: "Roboto", sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.65;

  letter-spacing: 0.02rem;
  color: #6C6C6C;
  text-align: left;
}

@media (max-width: 992px) {

  .screen-2-pmes-section {
    min-height: auto;
    flex-direction: column;
    padding: 70px 7%;
    gap: 45px;
  }

  .screen-2-pmes-image,
  .screen-2-pmes-content {
    width: 100%;
    flex: none;
  }

  .img-arg2-pmes {
    max-width: 240px;
    filter: drop-shadow(0 30px 7px rgba(0, 0, 0, 0.35));
  }

  .screen-2-pmes-title,
  .screen-2-pmes-text {
    max-width: 100%;
  }
}

@media (max-width: 600px) {

  .screen-2-pmes-section {
    padding: 55px 24px;
    gap: 35px;
  }

  .img-arg2-pmes {
    max-width: 260px;
    filter: drop-shadow(0 20px 6px rgba(0, 0, 0, 0.35));
  }

  .screen-2-pmes-title {
    font-size: 1.65rem;
    margin-bottom: 18px;
  }

  .screen-2-pmes-text {
    font-size: 1rem;
    line-height: 1.6;
  }
}
/* ============================================================
   FIM BLOCO 2 — PMES.HTML
   ============================================================ */


/* ============================================================
   COMPARTILHADO — BLOCO 3 — O QUE VOCÊ VAI TER (VERSÃO 2)
   (index.html, agencias.html, pmes.html)
   ============================================================ */

.screen-3 {
  width: 100%;
  position: relative;

  /* fallback universal */
  background-image:
    linear-gradient(rgba(245,245,245,0.0), rgba(245,245,245,0.0)),
    url("/static/imgs/monkeys-bg.png");

  /* navegadores modernos escolhem o melhor formato */
  background-image:
    linear-gradient(rgba(245,245,245,0.0), rgba(245,245,245,0.0)),
    image-set(
      url("/static/imgs/monkeys-bg.avif") type("image/avif"),
      url("/static/imgs/monkeys-bg.webp") type("image/webp"),
      url("/static/imgs/monkeys-bg.png") type("image/png")
    );

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.screen-3-section {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 100px 5% 110px;
}

/* ------------------------------------------------------------
   TÍTULO
   ------------------------------------------------------------ */

.screen-3-heading {
  margin: 0 0 80px;
  font-family: "Roboto", sans-serif, bold;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0;
  color: #FFFFFF;
  text-align: center;
}

/* ------------------------------------------------------------
   GRID
   ------------------------------------------------------------ */

.screen-3-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}

/* agencias.html reaproveita .screen-3-grid/.feature-card (mesmas
   classes de index_new.html, que tem 5 cards) mas só tem 3 planos —
   com repeat(5,1fr) os 3 cards ocupam só as 3 primeiras colunas de
   5, sobrando ~470px vazios à direita (medido). Escopado com uma
   2ª classe pra não mexer no grid de 5 colunas de index_new.html. */
.screen-3-grid.planos-agencia-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* Mesma causa raiz do texto legal "maior que deveria" dentro dos
   cards: .feature-card p (0.98rem, branco sólido) é mais específico
   que .screen-3-legal (0.68rem, 78% opacidade) sozinho, então vence
   quando o <p class="screen-3-legal"> está dentro de um .feature-card
   — só acontece em agencias.html (index_new.html nunca aninha
   .screen-3-legal dentro de .feature-card). Nova classe, específica
   o bastante pra vencer .feature-card p sem tocar nele. */
.feature-card p.planos-agencia-legal {
  font-size: 0.65rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 50px;
}

/* ------------------------------------------------------------
   CARDS
   ------------------------------------------------------------ */

.feature-card {
  min-height: 300px;
  padding: 34px 24px;

  background: rgba(0, 0, 0, 0.60);
  backdrop-filter: blur(4px);

  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 18px;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* ------------------------------------------------------------
   ÍCONES
   ------------------------------------------------------------ */

.feature-icon {
  width: 64px;
  height: 64px;

  margin-bottom: 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #FFFFFF;
}

.feature-icon i {
  font-size: 32px;
  line-height: 1;
}

/* ------------------------------------------------------------
   TÍTULO DOS CARDS
   ------------------------------------------------------------ */

.feature-card h3 {
  margin: 0 0 14px;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  color: #FFFFFF;
  text-align: center;
}

/* ------------------------------------------------------------
   TEXTO DOS CARDS
   ------------------------------------------------------------ */

.feature-card p {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.55;
  color: #FFFFFF;
  text-align: center;
}

/* Lista de benefícios (Quick Check/Criação/Gestão) dos planos de
   agência: .feature-card p centraliza cada linha dentro da própria
   largura do texto (shrink-to-fit, herdado do flex do .feature-card),
   então linhas de tamanhos diferentes começam em x diferentes. O
   BLOCO já fica centralizado sozinho — é filho de .feature-card, que
   é display:flex + align-items:center — só o texto por dentro
   precisa virar left. */
/* .feature-card p.planos-agencia-beneficios {
  display: table;
  margin: 0 auto;
  text-align: left;
  padding: 0px 70px;
} */
.planos-agencia-preco {
  font-size: 1.4em; /* ajuste o valor até ficar no tamanho que quiser */
}

.feature-card p.planos-agencia-beneficios {
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
}


/* ------------------------------------------------------------
   CTA — O QUE VOCÊ VAI TER
   ------------------------------------------------------------ */

.screen-3-cta {
  width: 100%;
  margin-top: 55px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.screen-3-legal {
  width: auto;

  margin: 8px 0 0;

  font-family: "Roboto", sans-serif;
  font-size: 0.68rem;
  font-weight: 300;
  line-height: 1.4;

  color: rgba(255, 255, 255, 0.78);
  text-align: center;
}

.screen-3-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 34px;
  padding: 6px 22px;

  background-color: #FFFFFF;
  color: #000000;

  border: 1px solid #FFFFFF;
  border-radius: 10px;

  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;

  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.screen-3-cta-button:hover {
  background-color: transparent;
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 1100px) {
  .screen-3-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {

  .screen-3 {
    background-attachment: scroll;

    background-image:
      linear-gradient(rgba(245,245,245,0.0), rgba(245,245,245,0.0)),
      url("/static/imgs/monkeys-bg.png");

    background-image:
      linear-gradient(rgba(245,245,245,0.0), rgba(245,245,245,0.0)),
      image-set(
        url("/static/imgs/monkeys-bg-mobile.avif") type("image/avif"),
        url("/static/imgs/monkeys-bg-mobile.webp") type("image/webp"),
        url("/static/imgs/monkeys-bg.png") type("image/png")
      );
  }

  .screen-3-section {
    padding: 75px 24px 85px;
  }

  .screen-3-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* .planos-agencia-grid fica sem media query lá em cima (3 colunas
     fixas), então precisa do próprio breakpoint aqui — senão vence
     por especificidade e trava em 3 colunas até no mobile. */
  .screen-3-grid.planos-agencia-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .screen-3-heading {
    font-size: 1.7rem;
    margin-bottom: 36px;
  }

  .feature-card {
    min-height: 270px;
  }
}

@media (max-width: 520px) {
  .screen-3-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .feature-card {
    min-height: auto;
    padding: 28px 22px;
  }

  .feature-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
  }

  .feature-icon i {
    font-size: 28px;
  }
}

/* ============================================================
   FIM BLOCO 3 — O QUE VOCÊ VAI TER
   ============================================================ */


/* ============================================================
   INDEX.HTML — BLOCO 4 — CRIAÇÃO DE CAMPANHAS
   ============================================================ */

.screen-4 {
  width: 100%;
  background-color: #FFFFFF;
}

.screen-4-section {
  width: 100%;
  max-width: 1400px;
  min-height: 620px;

  margin: 0 auto;
  padding: 90px 7%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 80px;
}


/* ------------------------------------------------------------
   TEXTO
   ------------------------------------------------------------ */

.screen-4-content {
  flex: 1;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  padding: 0;
}

.screen-4-title {
  max-width: 760px;

  margin: 0 0 24px;

  font-family: "Roboto", sans-serif;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.15;

  letter-spacing: 0;
  color: #000000;
  text-align: left;
}

.screen-4-text {
  max-width: 760px;

  margin: 0;

  font-family: "Roboto", sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.65;

  letter-spacing: 0.02rem;
  color: #6C6C6C;
  text-align: left;
}


/* ------------------------------------------------------------
   IMAGEM
   ------------------------------------------------------------ */


.screen-4-image {
  flex: 0 0 35%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.screen-4-image img {
  display: block;
  width: 100%;
  max-width: 330px;
  height: auto;
  margin: 0;
}

.screen-4-image .img-arg3 {
  width: 100%;
  max-width: 380px; /* ajuste esse valor até o tamanho que quiser */
  height: auto;
  display: block;
  margin: 0;
  filter: drop-shadow(0 50px 10px rgba(0, 0, 0, 0.35));
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 992px) {

  .screen-4-section {
    min-height: auto;

    flex-direction: column;

    padding: 70px 7%;
    gap: 45px;
  }

  .screen-4-content,
  .screen-4-image {
    width: 100%;
    flex: none;
  }

  .screen-4-image {
    order: 1;
  }

  .screen-4-content {
    order: 2;
  }

  .screen-4-image img {
    max-width: 240px;
  }

  .img-arg3 {
    max-width: 240px;
    filter: drop-shadow(0 20px 6px rgba(0, 0, 0, 0.35));
  }

  .screen-4-title,
  .screen-4-text {
    max-width: 100%;
  }
}


@media (max-width: 600px) {

  .screen-4-section {
    padding: 55px 24px;
    gap: 35px;
  }

  .screen-4-image .img-arg3 {
    max-width: 260px;
    filter: drop-shadow(0 20px 6px rgba(0, 0, 0, 0.35));
  }

  .screen-4-title {
    font-size: 1.65rem;
    margin-bottom: 18px;
  }

  .screen-4-text {
    font-size: 1rem;
    line-height: 1.6;
  }
}
/* ============================================================
   FIM BLOCO 4 — CRIAÇÃO DE CAMPANHAS
   ============================================================ */

/* ============================================================
   SEM PÁGINA ATIVA — BLOCO 5 — GESTÃO DE CAMPANHAS
   (.screen-5* não aparece em nenhum dos 4 templates ativos hoje —
   confirmado por grep; CSS morto, não removido nesta rodada)
   ============================================================ */

.screen-5 {
  width: 100%;
  background-color: #FFFFFF;
}

.screen-5-section {
  width: 100%;
  max-width: 1400px;
  min-height: 620px;

  margin: 0 auto;
  padding: 90px 7%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 80px;
}


/* ------------------------------------------------------------
   IMAGEM
   ------------------------------------------------------------ */

.screen-5-image {
  flex: 0 0 35%;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
}

.screen-5-image img {
  display: block;

  width: 100%;
  max-width: 320px;
  height: auto;

  margin: 0;
}


/* ------------------------------------------------------------
   CONTEÚDO
   ------------------------------------------------------------ */

.screen-5-content {
  flex: 1;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  padding: 0;
}


/* Título */

.screen-5-title {
  max-width: 760px;

  margin: 0 0 24px;

  font-family: "Roboto", sans-serif;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.15;

  letter-spacing: 0;
  color: #000000;
  text-align: left;
}


/* Texto */

.screen-5-text {
  max-width: 760px;

  margin: 0 0 14px;

  font-family: "Roboto", sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.65;

  letter-spacing: 0.02rem;
  color: #6C6C6C;
  text-align: left;
}


/* ------------------------------------------------------------
   CTA
   ------------------------------------------------------------ */

.screen-5-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 34px;
}

.screen-5-cta .btn-table {
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
}

.screen-5-legal {
  margin: 8px 0 0;

  font-size: 0.68rem;
  font-weight: 300;
  line-height: 1.4;

  color: #777777;
  text-align: left;
}


/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 992px) {

  .screen-5-section {
    min-height: auto;

    flex-direction: column;

    padding: 70px 7%;
    gap: 45px;
  }

  .screen-5-image,
  .screen-5-content {
    width: 100%;
    flex: none;
  }

  .screen-5-image img {
    max-width: 240px;
  }

  .screen-5-title,
  .screen-5-text {
    max-width: 100%;
  }
}


@media (max-width: 600px) {

  .screen-5-section {
    padding: 55px 24px;
    gap: 35px;
  }

  .screen-5-image img {
    max-width: 260px;
  }

  .screen-5-title {
    font-size: 1.65rem;
    margin-bottom: 18px;
  }

  .screen-5-text {
    font-size: 1rem;
    line-height: 1.6;
  }

  .screen-5-cta {
    margin-top: 28px;
  }
}
/* ============================================================
   FIM BLOCO 5 — GESTÃO DE CAMPANHAS
   ============================================================ */

/* ============================================================
   INDEX.HTML — BLOCO 6 — PRA QUEM É A QUICKMKT
   ============================================================ */

.screen-6 {
  width: 100%;
  background-color: #F7F7F7;
}

.screen-6-section {
  width: 100%;
  max-width: 1200px;

  margin: 0 auto;
  padding: 85px 6% 95px;
}


/* ------------------------------------------------------------
   TÍTULO
   ------------------------------------------------------------ */

.screen-6-heading {
  margin: 0 0 45px;

  font-family: "Roboto", sans-serif;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.2;

  color: #000000;
  text-align: center;
  letter-spacing: 0;
}


/* ------------------------------------------------------------
   GRID
   ------------------------------------------------------------ */

.screen-6-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  gap: 30px;

  max-width: 1000px;
  margin: 0 auto;
}


/* ------------------------------------------------------------
   CARDS
   ------------------------------------------------------------ */

.audience-card {
  min-height: 360px;

  padding: 42px 46px;

  background-color: #FFFFFF;

  border: 1px solid #E7E7E7;
  border-radius: 18px;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.audience-card:hover {
  transform: translateY(-5px);

  border-color: #DADADA;

  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.07);
}


/* ------------------------------------------------------------
   ÍCONES
   ------------------------------------------------------------ */

.audience-icon {
  width: 72px;
  height: 72px;

  margin-bottom: 26px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #424242;
}

.audience-icon i {
  font-size: 38px;
  line-height: 1;
}


/* ------------------------------------------------------------
   TÍTULOS DOS CARDS
   ------------------------------------------------------------ */

.audience-card h3 {
  margin: 0 0 18px;
  padding: 0;

  font-family: "Roboto", sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.3;

  color: #202020;
  text-align: center;
  letter-spacing: 0;
}


/* ------------------------------------------------------------
   TEXTO
   ------------------------------------------------------------ */

.audience-card p {
  max-width: 390px;

  margin: 0 0 28px;

  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;

  color: #6C6C6C;
  text-align: center;
  letter-spacing: 0;
}


/* ------------------------------------------------------------
   LINKS
   ------------------------------------------------------------ */

.audience-link {
  margin-top: auto;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-family: "Roboto", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;

  color: #000000;
  text-decoration: none;

  transition: gap 0.2s ease;
}

.audience-link:hover {
  gap: 13px;
  text-decoration: underline;
}


/* ============================================================
   RESPONSIVO — TABLET
   ============================================================ */

@media (max-width: 768px) {

  .screen-6-section {
    padding: 70px 24px 80px;
  }

  .screen-6-grid {
    grid-template-columns: 1fr;
    gap: 20px;

    max-width: 560px;
  }

  .screen-6-heading {
    font-size: 1.7rem;
    margin-bottom: 35px;
  }

  .audience-card {
    min-height: auto;
    padding: 38px 32px;
  }

}


/* ============================================================
   RESPONSIVO — CELULAR
   ============================================================ */

@media (max-width: 520px) {

  .screen-6-section {
    padding: 55px 18px 65px;
  }

  .audience-card {
    padding: 32px 22px;
  }

  .audience-icon {
    width: 60px;
    height: 60px;

    margin-bottom: 20px;
  }

  .audience-icon i {
    font-size: 32px;
  }

  .audience-card h3 {
    font-size: 1.1rem;
  }

  .audience-card p {
    font-size: 0.95rem;
    line-height: 1.55;
  }

}

/* ============================================================
   FIM BLOCO 6 — PRA QUEM É A QUICKMKT
   ============================================================ */


/* ============================================================
   INDEX.HTML — BLOCO 7 — PARCERIAS / PROVA SOCIAL
   ============================================================ */

.screen-7 {
  width: 100%;
  background-color: #F7F7F7;
}

.screen-7-section {
  width: 100%;
  max-width: 1300px;
  min-height: 520px;

  margin: 0 auto;
  padding: 85px 7%;

  display: grid;
  grid-template-columns: 0.8fr 1.2fr;

  align-items: center;
  gap: 100px;
}


/* ------------------------------------------------------------
   TEXTO
   ------------------------------------------------------------ */

.screen-7-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.screen-7-title {
  margin: 0 0 20px;

  font-family: "Roboto", sans-serif;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.2;

  color: #000000;
  text-align: left;
  letter-spacing: 0;
}

.screen-7-text {
  max-width: 470px;

  margin: 0;

  font-family: "Roboto", sans-serif;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.65;

  color: #6C6C6C;
  text-align: left;
  letter-spacing: 0;
}


/* ------------------------------------------------------------
   GRID DE LOGOS
   ------------------------------------------------------------ */

.screen-7-logos {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 24px;
}


/* ------------------------------------------------------------
   BOX DOS LOGOS
   ------------------------------------------------------------ */

.partner-logo {
  height: 125px;

  padding: 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: #FFFFFF;

  border: 1px solid #EEEEEE;
  border-radius: 14px;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.partner-logo:hover {
  transform: translateY(-3px);

  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.06);
}


/* Logo propriamente dito */

.partner-logo img {
  display: block;

  width: auto;
  height: auto;

  max-width: 85%;
  max-height: 65px;

  object-fit: contain;

  filter: none;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

  .screen-7-section {
    grid-template-columns: 1fr;

    min-height: auto;

    padding: 70px 7% 80px;
    gap: 50px;
  }

  .screen-7-text {
    max-width: 650px;
  }

}


/* ============================================================
   CELULAR
   ============================================================ */

@media (max-width: 600px) {

  .screen-7-section {
    padding: 55px 24px 65px;
    gap: 40px;
  }

  .screen-7-title {
    font-size: 1.65rem;
    margin-bottom: 16px;
  }

  .screen-7-text {
    font-size: 1rem;
    line-height: 1.6;
  }

  .screen-7-logos {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .partner-logo {
    height: 105px;
    padding: 18px;
  }

  .partner-logo img {
    max-width: 88%;
    max-height: 55px;
  }

}

/* ============================================================
   FIM BLOCO 7 — PARCERIAS / PROVA SOCIAL
   ============================================================ */

/* ============================================================
   COMPARTILHADO — BLOCO 8 — FAQ
   (index.html, agencias.html, pmes.html)
   ============================================================ */

.screen-8 {
  width: 100%;
  background-color: #FFFFFF;
}

.screen-8-section {
  width: 100%;
  max-width: 1050px;

  margin: 0 auto;
  padding: 95px 6% 100px;
}

.screen-8-title {
  margin: 0 0 50px;

  font-family: "Roboto", sans-serif;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.2;

  color: #000000;
  text-align: center;
  letter-spacing: 0;
}


/* FAQ */

.screen-8 .faq-item {
  border-bottom: 1px solid #E3E3E3;
}

.screen-8 .faq-question {
  width: 100%;

  padding: 21px 4px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: transparent;
  border: 0;
  border-radius: 0;

  font-family: "Roboto", sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.4;

  color: #202020;
  text-align: left;

  cursor: pointer;
}

.screen-8 .faq-question:hover {
  background: transparent;
  color: #000000;
}


/* + */

.screen-8 .faq-question::after {
  content: "+";

  flex-shrink: 0;

  margin-left: 25px;

  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;

  color: #6C6C6C;
}


/* Quando aberta */

.screen-8 .faq-question.active::after {
  content: "−";
}


/* Resposta */

.screen-8 .faq-answer {
  display: block;

  padding: 0 45px 22px 4px;

  background: transparent;
  border: 0;
  border-radius: 0;

  font-family: "Roboto", sans-serif;
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.65;

  color: #6C6C6C;
}

.screen-8 .faq-answer[hidden] {
  display: none !important;
}

.screen-8 .faq-answer p {
  margin: 0;

  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;

  color: inherit;
  text-align: left;
}


/* RESPONSIVO */

@media (max-width: 600px) {

  .screen-8-section {
    padding: 65px 24px 75px;
  }

  .screen-8-title {
    font-size: 1.65rem;
    margin-bottom: 35px;
  }

  .screen-8 .faq-question {
    padding: 18px 0;
    font-size: 1rem;
  }

  .screen-8 .faq-answer {
    padding: 0 30px 20px 0;
    font-size: 0.95rem;
  }
}

/* ------------------------------------------------------------
   CTA FINAL DO FAQ
   ------------------------------------------------------------ */

.screen-8-cta {
  margin-top: 55px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.screen-8-cta .btn-table {
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
}

.screen-8-legal {
  max-width: 620px;

  margin: 10px 0 0;

  font-size: 0.68rem;
  font-weight: 300;
  line-height: 1.45;

  color: #777777;
  text-align: center;
}
/* ============================================================
   FIM BLOCO 8 — FAQ
   ============================================================ */


/* ============================================================
   COMPARTILHADO — RESULTADOS
   (index.html, agencias.html, pmes.html)
   ============================================================ */

.screen-results {
  width: 100%;
  background-color: #FFFFFF;
}

.screen-results-section {
  width: 100%;
  max-width: 1100px;

  margin: 0 auto;
  padding: 85px 6% 75px;
}


/* TÍTULO */

.screen-results-title {
  margin: 0 0 55px;

  font-family: "Roboto", sans-serif;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.2;

  color: #000000;
  text-align: center;
  letter-spacing: 0;
}


/* GRID */

.results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  max-width: 900px;
  margin: 0 auto;

  align-items: center;
}


/* RESULTADO */

.result-item {
  padding: 15px 50px;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}


/* divisor central */

.result-item + .result-item {
  border-left: 1px solid #E3E3E3;
}


/* NÚMERO */

.result-number {
  display: flex;
  align-items: baseline;
  justify-content: center;

  margin-bottom: 14px;

  font-family: "Roboto", sans-serif;
  color: #000000;
  line-height: 1;
}

.counter {
  font-size: 4.5rem;
  font-weight: 300;
  letter-spacing: -0.15rem;
}

.result-prefix,
.result-suffix {
  font-size: 2.3rem;
  font-weight: 300;
}


/* DESCRIÇÃO */

.result-item h3 {
  margin: 0 0 8px;

  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: 500;

  color: #202020;
  text-align: center;
  letter-spacing: 0;
}

.result-item p {
  margin: 0;

  font-family: "Roboto", sans-serif;
  font-size: 0.95rem;
  font-weight: 300;

  color: #6C6C6C;
  text-align: center;
}


/* NOTA */

.results-disclaimer {
  max-width: 760px;

  margin: 45px auto 0;

  font-size: 0.68rem;
  font-weight: 300;
  line-height: 1.5;

  color: #929292;
  text-align: center;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 650px) {

  .screen-results-section {
    padding: 65px 24px 60px;
  }

  .screen-results-title {
    font-size: 1.65rem;
    margin-bottom: 40px;
  }

  .results-grid {
    grid-template-columns: 1fr;
  }

  .result-item {
    padding: 25px 10px;
  }

  .result-item + .result-item {
    border-left: 0;
    border-top: 1px solid #E3E3E3;

    margin-top: 15px;
    padding-top: 40px;
  }

  .counter {
    font-size: 3.8rem;
  }

  .result-prefix,
  .result-suffix {
    font-size: 2rem;
  }

}

/* ------------------------------------------------------------
   CTA DIAGNÓSTICO
   ------------------------------------------------------------ */

.results-cta {
  margin-top: 100px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.results-cta-subtitle {
  width: auto;

  margin: 0 0 10px;

  font-family: "Roboto", sans-serif;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.4;

  color: #6C6C6C;
  text-align: center;
}

.results-cta .btn-table.results-cta-button {
  margin: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 30px;
  padding: 4px 20px;

  text-align: center;
  line-height: 1;

  text-decoration: none;
}

/* ============================================================
   FIM RESULTADOS
   ============================================================ */

/* ============================================================
   COMPARTILHADO — DIVISOR ENTRE SEÇÕES
   (index.html, agencias.html, pmes.html)
   ============================================================ */

.section-divider {
  width: 100%;
  background-color: #FFFFFF;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0 24px;
}

.section-divider img {
  display: block;

  width: 100%;
  max-width: 680px;
  height: auto;

  object-fit: contain;
}

@media (max-width: 600px) {

  .section-divider {
    padding: 18px 24px;
  }

  .section-divider img {
    max-width: 320px;
  }

}

/* ============================================================
   FIM DIVISOR ENTRE SEÇÕES
   ============================================================ */


/* ============================================================
   COMPARTILHADO — ACESSIBILIDADE — FOCO DE TECLADO
   (todas as 4 páginas)
   ============================================================ */

a:focus-visible,
button:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 4px;
}

.navbar a:focus-visible,
.menu-toggle:focus-visible,
.menu-list a:focus-visible,
.faq-question:focus-visible,
.audience-link:focus-visible,
.whats-float:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 4px;
  border-radius: 4px;
}

/* ============================================================
   FIM ACESSIBILIDADE — FOCO DE TECLADO
   ============================================================ */


/* ============================================================
   DIAGNOSTICO.HTML — PÁGINA DE DIAGNÓSTICO
   ============================================================ */

.diagnostico-page {
    width: 100%;
    box-sizing: border-box;
    padding-top: 50px; /* altura da navbar fixa */
}


/* ------------------------------------------------------------
   INTRODUÇÃO
   ------------------------------------------------------------ */

.diagnostico-intro {
    width: min(900px, calc(100% - 40px));
    margin: 0 auto;
    padding: 55px 20px 30px;
    text-align: center;
    box-sizing: border-box;
}

.diagnostico-title {
    margin: 0;
    padding: 0;

    font-family: "Roboto", sans-serif;
    font-size: 2.15rem;
    line-height: 1.15;
    font-weight: 600;

    color: #000;
    text-align: center;
    letter-spacing: 0;

    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

.diagnostico-subtitle {
    margin: 12px auto 0;

    max-width: 500px;

    font-family: "Roboto", sans-serif;
    font-size: 1.05rem;
    line-height: 1.5;
    font-weight: 300;

    color: #6c6c6c;
    text-align: center;
}


/* FORMULÁRIO */

#main-container {
  width: 100%;
  max-width: 760px;
  margin: 0 auto !important;
  padding: 0 20px 80px;
  float: none !important;
}


/* Cada campo */

.diagnostico-field {
  width: 100%;
  margin: 0 0 18px;
}


/* Campo de texto */

.diagnostico-field input,
.diagnostico-field select {
  width: 100%;
  height: 58px;
  box-sizing: border-box;

  padding: 0 20px;

  border: 1px solid #d8d8d8;
  border-radius: 10px;

  background: #fff;

  font-family: inherit;
  font-size: 1rem;
  color: #333;

  outline: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.diagnostico-field input::placeholder {
  color: #999;
  text-transform: uppercase;
}

#site_cliente::placeholder {
    font-size: 14px;
    font-weight: 100;
    color: #999;
    text-align: left;
}

#objetivo_cliente {
    width: 100%;
    max-width: 360px;
    height: 42px;
    padding: 0 16px;

    border: 1px solid #ccc;
    border-radius: 10px;

    font-size: 14px;
    font-weight: 100;
    color: #999;

    text-align: left;
    background-color: #fff;
    box-sizing: border-box;
}

#objetivo_cliente:valid {
    color: #333;
    font-weight: 400;
}

#estado_cliente,
#cidade_cliente,
#regiao_cliente {
    width: 100%;
    max-width: 360px;
    height: 42px;
    padding: 0 16px;

    border: 1px solid #ccc;
    border-radius: 10px;

    font-size: 14px;
    font-weight: 100;
    color: #999;

    text-align: left;
    background-color: #fff;
    box-sizing: border-box;
}

/* Mesmo tratamento que #objetivo_cliente:valid já tinha — sem isso,
   o texto do select continua cinza claro mesmo depois de escolhido
   um valor real. Mesma cor de #objetivo_cliente:valid, pra unificar
   os 4 selects. */
#estado_cliente:valid,
#cidade_cliente:valid,
#regiao_cliente:valid {
    color: #333;
}

#verba_cliente::placeholder {
    font-size: 14px;
    font-weight: 100;
    color: #999;
    text-align: left;
}

.form-group2 input::placeholder {
    font-size: 14px;
    font-weight: 100;
    color: #999;
    text-align: left;
}

#btn-sem-cupom {
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;

    /* Ajustes para centralizar e caber o texto */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    min-width: 180px;
    height: 30px;
    line-height: 1.3;
    box-sizing: border-box;
}

.diagnostico-field input:focus,
.diagnostico-field select:focus {
  border-color: #00aaff;
  box-shadow: 0 0 0 3px rgba(0, 170, 255, 0.10);
}

@media (max-width: 768px) {

  .diagnostico-header {
    padding: 120px 20px 35px;
  }

  .diagnostico-title {
    font-size: 2rem;
  }

  .diagnostico-subtitle {
    font-size: 1rem;
  }

  #main-container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .diagnostico-field input,
  .diagnostico-field select {
    height: 54px;
    padding: 0 16px;
  }

}

.diagnostico-form-grid {
    width: min(760px, 92%);
    margin: 0 auto;
}

.diag-field {
    width: 100%;
    margin: 0 0 12px;
}

.diag-field .form-group2 {
    width: 95%;
    margin: 0;
}

/* Causa raiz do desalinhamento com .btn-google: dentro dos campos
   estreitos, .form-group2 ocupa 95% do wrapper mas fica encostado
   à esquerda (margin:0 acima) — sobra 5% de vão só do lado direito,
   deslocando o campo visível ~6px à esquerda do centro real do
   wrapper (que já está centralizado por fora). .btn-google não tem
   essa camada interna, então fica no centro verdadeiro. Aqui só
   centralizamos o form-group2 DENTRO dos 3 wrappers estreitos —
   não mexe nos campos full-width (site, objetivo, estado/cidade/
   região, que dependem do form-group2 encostado à esquerda pra
   bater com a borda da linha de baixo). */
.diag-field.diag-field--narrow .form-group2,
.diag-field.diag-field--narrow-md .form-group2,
.diag-field.diag-field--narrow-lg .form-group2 {
    margin-left: auto;
    margin-right: auto;
}

/* Unifica o tamanho e a largura do texto REAL digitado nos inputs
   com o dos selects: a regra genérica de input[type] no arquivo
   aplica font-size:18px e width:80% (centralizado) só aos inputs
   de texto, enquanto cada select tem regra própria por ID com
   font-size:14px e width:100% — isso deixava o valor digitado
   maior que o placeholder/selects e desalinhava a borda esquerda
   dos campos em .diag-row. */
.form-group2 input[type="text"],
.form-group2 input[type="email"],
.form-group2 select {
    font-size: 14px;
    width: 100%;
}

/* Cor do texto REAL digitado, unificada com a dos selects (#333,
   ver #estado_cliente:valid etc. mais acima) — antes os inputs
   ficavam com #6C6C6C (herdado da regra genérica de input[type]),
   mais claro que o texto escolhido nos selects. Não mexe no select
   aqui: seu #333 já vem da regra :valid, que é mais específica. */
.form-group2 input[type="text"],
.form-group2 input[type="email"] {
    color: #333;
}

/* Neutraliza o highlight azul/amarelo nativo do Chrome quando o
   navegador reconhece o campo como autofill — comportamento nativo
   do :-webkit-autofill, não bug de CSS. Escopado a .form-group2,
   não afeta index_new.html (que não tem nenhum input). */
.form-group2 input[type="text"]:-webkit-autofill,
.form-group2 input[type="email"]:-webkit-autofill,
.form-group2 input[type="text"]:-webkit-autofill:hover,
.form-group2 input[type="email"]:-webkit-autofill:hover,
.form-group2 input[type="text"]:-webkit-autofill:focus,
.form-group2 input[type="email"]:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: #333;
    transition: background-color 5000s ease-in-out 0s;
}

.diag-row {
    display: grid;
    width: 100%;
    gap: 10px;
    margin-bottom: 12px;
}

.diag-row-3 {
    grid-template-columns: repeat(3, 1fr);
}

.diag-row-2 {
    grid-template-columns: 2fr 1fr;
}

@media (max-width: 700px) {

    .diagnostico-form-grid {
        width: 92%;
    }

    .diag-row-3,
    .diag-row-2 {
        grid-template-columns: 1fr;
    }

}


/* ============================================================
   FIM PÁGINA DE DIAGNÓSTICO
   ============================================================ */


/* ============================================================
   DIAGNOSTICO.HTML — FLUXO MULTI-STEP (3 PASSOS)
   Reaproveita .diag-field e .diag-row/.diag-row-3 (definidas
   acima) que já existiam no arquivo sem uso em nenhum HTML —
   não afeta index_new.html.
   ============================================================ */

.diag-progress {
    width: 100%;
    margin: 0 0 28px;
}

.diag-progress-track {
    display: flex;
    gap: 6px;
    width: 100%;
}

.diag-progress-seg {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: #e6e6e6;
    transition: background-color 0.25s ease;
}

.diag-progress-seg.is-active,
.diag-progress-seg.is-done {
    background: #0096FF;
}

.diag-progress-label {
    margin: 10px 0 0;
    text-align: center;
    font-family: "Roboto", sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: #6c6c6c;
}

.diag-step {
    width: 100%;
}

.diag-step[hidden] {
    display: none;
}

.diag-label {
    display: block;
    margin: 0 0 6px 4px;
    font-family: "Roboto", sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: #444;
    text-align: left;
}

.diag-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    width: 100%;
    margin-top: 24px;
    margin-bottom: 36px;
}

.diag-btn-back,
.diag-btn-next {
    padding: 4px 20px;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
    min-width: 140px;
    height: 30px;
}

.diag-btn-back {
    background-color: #f0f0f0;
    color: #333;
}

.diag-btn-next {
    background-color: #000;
    color: #fff;
}

.diag-field--narrow {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

/* Largura igual à renderizada de .btn-google (234,3px reais,
   medidos com getBoundingClientRect), compensando o encolhimento
   de 95% que .diag-field .form-group2 aplica por dentro. */
.diag-field--narrow-md {
    max-width: 247px;
    margin-left: auto;
    margin-right: auto;
}

.diag-field--narrow-lg {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 480px) {
    .diag-btn-back,
    .diag-btn-next {
        flex: 1 1 100%;
    }
}

#gads-account-picker {
  max-width: 247px; /* mesmo valor calibrado pra e-mail/WhatsApp */
  margin: 8px auto 0; /* centraliza o bloco, mesmo padrão dos outros campos */
}

#gads-account-picker .form-label {
  width: 100%;
  text-align: center;
}

#conta_gads_selector {
  width: 100%;
  max-width: 247px;
  height: 42px; /* mesma altura dos outros campos/select do formulário */
  padding: 0 16px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-sizing: border-box;
}

/* ============================================================
   FIM DIAGNÓSTICO — FLUXO MULTI-STEP
   ============================================================ */


/* .img-arg1 e .sectionconceito removidas em 2026-08-18: desacoplamento
   hero index.html/pmes.html (ver blocos HERO — INDEX.HTML / HERO —
   PMES.HTML). Confirmado via grep que nenhum template ativo (routeado
   em main.py) usa mais essas classes — só templates/index_new.html
   (sem rota, backup do index.html antigo) ainda as referencia, e ele
   carrega styles.css, não stylesnew.css, então não é afetado. */
/* FIM ESTILIZA AS IMAGENS DOS ARGUMENTOS DE VENDAS */


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


/* COMPARTILHADO (todas as 4 páginas) — 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: 95%; /* 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: 95%;  /* 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;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  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: #000000; /* 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 */


/* COMPARTILHADO (todas as 4 páginas) — 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 */
}

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

/* FIM ESTILIZA O RODAPÉ */


/* DIAGNOSTICO.HTML — INICIO ESTILO ACEITES LEGAIS 2 */
/* === WRAPPER CENTRALIZADOR === */
.aceite-termos {
  width: min(560px, 90%);
  margin: 16px auto 8px;   /* centraliza horizontalmente */
  text-align: left;
}

/* === LINHA: CHECKBOX + TEXTO === */
.aceite-label {
  display: flex;
  align-items: flex-start; /* alinha topo do texto com checkbox */
  gap: 10px;
  margin-bottom: 12px;
}

/* === CHECKBOX === */
.aceite-label input[type="checkbox"] {
  margin-top: 4px;
  flex: 0 0 auto;
}

/* === TEXTO === */
.aceite-text {
  display: block;
  font-size: 0.9rem;
  font-weight: 300;
  color: #929292;
  line-height: 1.35;
  margin: 0;
}

/* remove quebra artificial */
.aceite-text br {
  display: none;
}

/* === LINKS === */
.aceite-text a {
  color: #929292;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.aceite-text a:hover {
  text-decoration: underline;
}

/* === BOTÃO ENVIAR DESABILITADO === */
.btn-env:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(100%);
}
/* FIM DIAGNOSTICO.HTML — ESTILO ACEITES LEGAIS 2 */

/* SEM PÁGINA ATIVA — ESTILO PÁGINAS LEGAIS (.footer-text/.footer-link/
   .navbar-legals/.logo-legals): só usadas pelos templates de termos/
   política/contrato/cookies, que carregam static/styles.css, não este
   arquivo — confirmado por grep. .footer img (a única regra "viva"
   aqui) já está coberta pelo bloco COMPARTILHADO — RODAPÉ acima. */
/* 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 */



/* COMPARTILHADO (todas as 4 páginas) — BOTÃO FLUTUANTE DO WHATSAPP */
.whats-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  height: 56px;
  border-radius: 28px;        /* pill shape */
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 0 14px;     /* mais espaço à direita pro texto */
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  text-decoration: none;
  z-index: 9500;
  transition: transform .15s ease, box-shadow .15s ease;
}

.whats-float i {
  font-size: 32px;             /* ícone maior */
  line-height: 1;
  flex-shrink: 0;
}

.whats-float__texto {
  font-size: 15px;
  font-weight: 500;
  font-family: "Roboto", sans-serif;
  white-space: nowrap;
}

.whats-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.22);
}
/* FIM BOTÃO FLUTUANTE DO WHATSAPP */


/* DIAGNOSTICO.HTML — BOTÃO PADRÃO GOOGLE */
#form10 {
  text-align: center;
}

.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: 10px;                /* 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 */

.aceite-label + .aceite-label {
  margin-top: 30px;
}

p.texto-rodape {
  font-size: 1.2rem;
  color: #6C6C6C;
  text-align: center;
  letter-spacing: 0rem;
  margin-top: 20px;
  margin-bottom: 7px;
  width: 100%;
  font-weight: 300;
}


/* DIAGNOSTICO.HTML — Quick Check: Estilos inline para os steps (pode mover para styles.css) */

/* Quick Check — wrapper trilho + steps */
#qc-track-wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 24px;
  position: relative;
}

/* Trilho vertical */
#qc-track {
  position: relative;
  width: 36px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Linha de fundo (cinza) */
#qc-track::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  background-color: #e0e0e0;
  border-radius: 2px;
  z-index: 0;
}

/* Linha de progresso (azul) */
#qc-track-fill {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 0%;
  background-color: #0096FF;
  border-radius: 2px;
  z-index: 1;
  transition: height 0.8s ease;
}

/* Macaco no trilho */
#qc-gorila {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  object-fit: contain;
  z-index: 2;
  transition: top 0.8s ease;
}

/* Steps — lado direito */
#qc-steps {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qc-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: #f5f5f5;
  transition: background-color 0.3s ease;
  font-size: 0.95rem;
}

.qc-step.qc-done {
  background-color: #e8f5e9;
}

.qc-step.qc-active {
  background-color: #e3f0ff;
}

.qc-icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  min-width: 24px;
}

.qc-label {
  color: #333;
}


/* Quick Check — progresso horizontal */
#qc-progress-horizontal {
  position: relative;
  width: 100%;
  margin-bottom: 8px;
}

/* Container dos ícones — referência para o macaco */
#qc-icons {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 44px;
}

/* Ícones banana/casca */
.qc-step-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* Macaco — posicionado absolutamente dentro de #qc-icons */
#qc-gorila-slider {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  object-fit: contain;
  z-index: 2;
  transition: left 4s ease-in-out;
}

/* Linha horizontal — abaixo dos ícones */
#qc-linha {
  position: relative;
  width: 100%;
  height: 3px;
  background-color: #e0e0e0;
  border-radius: 2px;
  margin-top: 6px;
  margin-bottom: 0;
}

#qc-linha-fill {
  height: 100%;
  width: 0%;
  background-color: #0096FF;
  border-radius: 2px;
  transition: width 4s ease-in-out;
}

/* Label piscando */
#qc-label-ativo {
  margin-top: 10px;
  text-align: center;
  min-height: 48px;
}

#qc-label-texto {
  display: block;
  color: #0096FF;
  font-size: 0.9rem;
  font-weight: 400;
  animation: benchmark-pulse 1.2s ease-in-out infinite;
}

#qc-label-texto.qc-label-done {
  animation: none;
  color: #21538E;
  font-weight: 500;
}

#qc-done-msg {
  display: none;
  color: #21538E;
  font-weight: 500;
  font-size: 0.9rem;
  text-align: center;
  width: 100%;
  margin-top: 4px;
}

#popup-quickcheck-progress {
  position: fixed;
  inset: 0;
  background: rgba(206, 204, 204, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#btn-qc-ok {
  position: relative;
  text-align: center;
  margin-top: 30px;
  z-index: 10;
  font-size: 0.9rem;
  padding: 4px 20px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  background: #0096FF;
  color: #ffffff;
  width: 50%;
  height: 30px;
  max-width: 150px;
  display: none;
}

/* ADICIONAR: */
#btn-qc-ok:disabled {
  background: #cccccc;
  color: #888888;
  cursor: not-allowed;
}

/* Macaco deslizante — posicionado sobre a linha */