/* --- Estilos da Navbar --- */
.main-header {
  position: absolute; /* Posição absoluta relativa ao banner-section */
  top: 0;
  left: 0;
  width: 100%;
  background-color: transparent; /* Fundo transparente */
  padding: 20px 0;
  z-index: 1000; /* Garante que fique acima de TUDO, inclusive do menu/overlay */
  transition: background-color 0.3s ease;
}

/* Classe que será adicionada via JS quando a página for rolada */
.main-header.scrolled {
  background-color: rgba(
    10,
    10,
    10,
    0.9
  ); /* Fundo preto semi-transparente com efeito blur */
  backdrop-filter: blur(10px);
}

.navbar-container {
  width: 90%;
  max-width: 1400px; /* Limita a largura em telas grandes */
  margin: 0 auto;
  display: flex;
  justify-content: space-between; /* Alinha itens nas extremidades */
  align-items: center;
}

.navbar-logo img {
  height: 90px; /* Ajuste a altura do seu logo */
  width: auto;
  display: block; /* Garante que a imagem seja exibida corretamente */
}

/* --- Estilos do Menu Hambúrguer Animado --- */
.hamburger-menu {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 24px;
  padding: 0;
}

.hamburger-menu span {
  display: block;
  width: 30px;
  height: 3px;
  background-color: #ffffff; /* Cor das linhas */
  border-radius: 3px;
  transition: all 0.3s ease-in-out;
}

/* Animação para o estado ativo (quando clicado) */
.hamburger-menu.active span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
.hamburger-menu.active span:nth-child(2) {
  opacity: 0;
}
.hamburger-menu.active span:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
}

/* Estilos básicos para começar */
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background-color: #000000; /* Cor de base preta como fallback */
  color: #ffffff; /* Branco para texto/realce */
}

/* --- ESCONDE A BARRA DE ROLAGEM --- */
html {
  scrollbar-width: none; /* Para Firefox */
}
html::-webkit-scrollbar {
  display: none; /* Para Chrome, Safari, Edge */
}

/* --- VÍDEO DE BACKGROUND GLOBAL --- */
.video-background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Coloca atrás de todo o conteúdo */
  background-color: #000; /* Fallback caso o vídeo não carregue */
}

.global-background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 120%; /* Deixa o vídeo 20% mais alto que a tela */
  width: 100%;
  height: 100%;
  object-fit: cover; /* Garante que o vídeo cubra toda a área */
  opacity: 0.5; /* Reduz a opacidade para não distrair tanto */
}

/* --- NAVEGAÇÃO DE PONTOS (DOTS) --- */
.page-dots-nav {
  position: fixed;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  z-index: 1001; /* Acima de quase tudo */
}

.page-dots-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-dots-nav .dot {
  display: block;
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.page-dots-nav .dot:hover {
  background-color: rgba(255, 255, 255, 0.8);
  transform: scale(1.2);
}

/* Estilo do ponto ativo (seção atual) */
.page-dots-nav .dot.active {
  background-color: #26292656; /* Verde neon */
  transform: scale(1.6);
}

.banner-section {
  position: relative; /* Essencial para conter o .main-header */
  width: 100%;
  height: 100vh; /* Ocupa a altura total da tela inicial */
  padding-bottom: 8vh; /* Adiciona um respiro na parte de baixo */
  box-sizing: border-box; /* Garante que o padding não aumente a altura total */

  /* Movendo a imagem para o background */
  background-image: url("assets/banner.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative; /* Essencial para posicionar o .mouse-glow dentro do banner */
  overflow: hidden; /* Garante que o brilho não vaze para fora do banner */

  /* Ocultando a imagem interna que foi movida para o background */
  display: flex;
  justify-content: center;
  align-items: flex-end; /* Alinha o conteúdo na parte de baixo */
}

/* Garante que o container da animação ocupe todo o espaço do banner */
#animation-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.banner-content {
  position: relative; /* Garante que o conteúdo fique acima do container de animação */
  z-index: 10;
  text-align: center;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #39ff14; /* Verde neon */
  color: #000000; /* Texto preto para alto contraste */
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
  font-size: 1.1rem;
  text-decoration: none;
  padding: 15px 30px;
  border: 2px solid #39ff14; /* Borda verde */
  border-radius: 50px; /* Bordas bem arredondadas */
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.cta-button:hover {
  background-color: #000000; /* Fundo preto no hover */
  color: #39ff14; /* Texto verde no hover */
  box-shadow: 0 0 25px -5px #39ff14; /* Sombra verde (glow) no hover */
}

.cta-icon {
  margin-left: 12px; /* Espaço entre o texto e o ícone */
}

/* Estilo para o cifrão pulsante */
.pulsating-cifrao {
  position: fixed; /* agora fixa na viewport para controlar via transforms */
  top: 0;
  left: 0;
  width: 150px; /* Tamanho do cifrão */
  height: auto;
  z-index: 1002; /* acima dos dots e do conteúdo do banner */
  /* Sombra verde com um efeito de brilho (glow) */
  filter: drop-shadow(0 0 10px #00ff00) drop-shadow(0 0 20px #00ff00);
  pointer-events: none; /* Impede que a imagem bloqueie cliques */
  /* A visibilidade será controlada pelo GSAP */
  visibility: hidden;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0) scale(1);
}

/* --- Estilos do Menu de Navegação (Tela Cheia) e Overlay --- */

/* Estilo do Overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Fundo preto semi-transparente */
  opacity: 0; /* Começa invisível */
  pointer-events: none; /* Não pode ser clicado quando invisível */
  transition: opacity 0.4s ease-in-out;
  z-index: 998; /* Abaixo do menu, mas acima do resto do conteúdo */
}

.overlay.active {
  opacity: 1; /* Fica visível */
  pointer-events: auto; /* Permite cliques (para fechar o menu) */
}

/* Estilo do Menu de Navegação */
.nav-menu {
  position: fixed;
  top: 0;
  right: 0; /* Ancorado à direita */
  height: 100%; /* Altura total da tela */
  width: 100%; /* Ocupa a largura total da tela */
  background-color: rgba(
    0,
    0,
    0,
    0.8
  ); /* Fundo preto semi-transparente para o menu */
  box-shadow: none; /* Remove a sombra, pois o menu agora é tela cheia */

  /* Centraliza os itens do menu */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  transform: translateX(100%); /* Começa 100% fora da tela, à direita */
  transition: transform 0.4s ease-in-out;
  z-index: 999; /* Fica acima de tudo, inclusive do overlay */
}

.nav-menu.active {
  transform: translateX(0); /* Move o menu para dentro da tela */
}

/* Estilos para os links do menu */
.nav-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

/* Deixa os itens da lista invisíveis por padrão para a animação */
.nav-menu ul li {
  opacity: 0;
  transform: translateX(20px); /* Começam deslocados para a direita */
}

.nav-menu ul li a {
  display: block;
  position: relative; /* Necessário para posicionar o pseudo-elemento ::after */
  padding: 20px 15px; /* Ajuste no padding para dar espaço */
  color: #ffffff;
  text-decoration: none;
  font-family: "Permanent Marker", cursive;
  font-size: 1.5rem;
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* Cria a linha (outline) embaixo do link */
.nav-menu ul li a::after {
  content: "";
  position: absolute;
  width: 0; /* Começa com largura zero */
  height: 3px;
  bottom: 10px; /* Posição da linha em relação à base do link */
  left: 50%;
  transform: translateX(-50%);
  background-color: #39ff14; /* Cor da linha */
  transition: width 0.3s ease-in-out; /* Animação da largura */
}

.nav-menu ul li a:hover {
  color: #39ff14; /* Verde neon no hover */
}

/* Expande a linha quando o mouse está sobre o link */
.nav-menu ul li a:hover::after {
  width: 100%;
}

/* --- Seção de Estatísticas --- */
.stats-section {
  background-color: transparent; /* Permite que o fundo do body apareça */
  padding: 100px 0; /* Aumenta o padding para dar mais espaço para o scroll */
  border-top: 1px solid #222; /* Linha sutil para separar do banner */
  border-bottom: 1px solid #222;
  overflow: hidden; /* Essencial: esconde os KPIs que estão fora da tela */
}

.stats-container {
  /* Novo Layout com Flexbox para o carrossel */
  display: flex;
  width: 200%; /* O dobro da largura da tela para acomodar 8 itens */
  /* Removemos o max-width e margin auto para permitir o scroll horizontal */
}

.stat-block {
  flex: 1;
  text-align: center;
  padding: 20px;
  position: relative;
}

/* Divisor vertical entre os blocos (apenas em desktop) */
.stat-block:not(:last-child)::after {
  /* Removemos o divisor vertical que não faz sentido no carrossel */
  display: none;
}

.stat-icon {
  font-size: 3rem;
  color: #39ff14; /* Verde neon */
  margin-bottom: 20px;
}

.stat-number {
  font-size: clamp(2rem, 6vw, 2.8rem); /* Tipografia Fluida */
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.stat-description {
  font-size: 1rem;
  font-weight: 300; /* Fonte mais fina */
  color: #a0a0a0;
  margin: 5px 0 0 0;
}

/* --- Responsividade para a Seção de Estatísticas --- */
@media (max-width: 992px) {
  /* A responsividade agora é controlada pelo flexbox e pelo carrossel.
       As regras antigas não são mais necessárias aqui. */
}

/* --- Seção de Serviço (App) --- */
.service-section {
  background-color: rgba(10, 10, 10, 0.8);
  padding: 120px 0;
  border-bottom: 1px solid #222;
}

.service-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
}

/* Modificador para inverter a ordem das colunas */
.service-section.layout-reversed .service-container {
  flex-direction: row-reverse;
}

.service-image-column {
  flex: 1;
  min-width: 300px;
  overflow: hidden; /* necessário para aplicar border-radius visual no container */
  border-radius: 12px; /* cantos arredondados do bloco */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0a0a0a; /* cor de fundo caso a imagem não preencha totalmente */
}

.service-image-column img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain; /* mostra a imagem por inteiro sem cortar */
  border-radius: 12px; /* garante cantos arredondados na própria imagem (opcional) */
  transform: none; /* remove qualquer transformação prévia */
  transition: transform 220ms ease, opacity 200ms ease;
}

.service-text-column {
  flex: 1.2; /* Dá um pouco mais de espaço para o texto */
}

.service-title {
  font-size: clamp(2.2rem, 7vw, 2.8rem); /* Tipografia Fluida */
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 20px 0;
  line-height: 1.2;
}

.service-description {
  font-size: 1.1rem;
  color: #c0c0c0;
  line-height: 1.7;
  margin-bottom: 30px;
}

/* Estilo para as palavras individuais na animação de pintura */
.service-title > span,
.service-description > span {
  color: #555; /* Cinza escuro, dando a impressão de "apagado" */
  transition: color 0.3s ease; /* Suaviza a mudança de cor */
}

.service-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.service-features-list li {
  display: flex;
  align-items: center;
  font-size: 1.05rem;
  color: #ffffff;
}

.service-features-list .fa-check-circle {
  color: #39ff14; /* Verde neon */
  margin-right: 12px;
  font-size: 1.2rem;
}

/* --- Responsividade para a Seção de Serviço --- */
@media (max-width: 992px) {
  .service-container {
    flex-direction: column;
    text-align: center;
  }

  /* Anula a inversão em telas pequenas para manter a ordem padrão (imagem primeiro) */
  .service-section.layout-reversed .service-container {
    flex-direction: column;
  }

  .service-text-column {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza o botão */
  }
}

/* --- Seção de Features --- */
.features-section {
  background-color: rgba(
    10,
    10,
    10,
    0.8
  ); /* Preto semi-transparente com efeito blur */
  padding: 100px 0;
  overflow: hidden; /* Esconde os elementos antes de animarem para dentro */
}

.features-container {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: stretch; /* Faz todos os blocos terem a mesma altura */
  flex-wrap: wrap;
  gap: 20px; /* Espaço entre os blocos */
}

.feature-block {
  flex: 1;
  min-width: 240px;
  text-align: center;
  padding: 30px 20px;
  background-color: #111;
  border: 1px solid #222;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  /* Estado inicial para a animação com GSAP */
  opacity: 0;
  transform: translateY(50px);
}

.feature-block:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 30px -10px #39ff1440;
}

.feature-icon {
  font-size: 2.5rem;
  color: #39ff14;
  margin-bottom: 20px;
}

.feature-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 10px 0;
}

.feature-description {
  font-size: 1rem;
  font-weight: 300;
  color: #a0a0a0;
  line-height: 1.6;
}

/* --- Seção de FAQ --- */
.faq-section {
  background-color: transparent;
  padding: 100px 0;
  border-top: 1px solid #222;
}

.faq-container {
  width: 90%;
  max-width: 900px; /* Uma largura mais contida para melhor legibilidade */
  margin: 0 auto;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.faq-item {
  background-color: #111;
  border: 1px solid #222;
  border-radius: 8px;
  padding: 20px 30px;
  transition: background-color 0.3s ease;
}

.faq-item:hover {
  background-color: #1a1a1a;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none; /* Impede a seleção do texto da pergunta ao clicar */
}

.faq-question h3 {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0;
  transition: color 0.3s ease;
}

.faq-item.active .faq-question h3 {
  color: #39ff14; /* Muda a cor da pergunta quando ativa */
}

.faq-icon {
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efeito "elástico" */
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background-color: #39ff14;
  border-radius: 2px;
  transition: transform 0.3s ease-out;
}

.faq-icon::before {
  /* Linha horizontal */
  width: 100%;
  height: 3px;
  top: 50%;
  transform: translateY(-50%);
}

.faq-icon::after {
  /* Linha vertical */
  width: 3px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.faq-item.active .faq-icon {
  transform: rotate(135deg); /* Gira o ícone para formar um "X" ou similar */
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

.faq-answer p {
  color: #a0a0a0;
  line-height: 1.7;
  margin: 0;
  padding-top: 20px;
}

.faq-item.active .faq-answer {
  max-height: 300px; /* Altura máxima esperada para a resposta */
}

/* --- Estilos para Títulos de Seção Genéricos --- */
.section-title {
  text-align: center;
  font-size: clamp(2rem, 8vw, 2.8rem); /* Tipografia Fluida */
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 60px;
  position: relative;
}

.section-title::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 4px;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #39ff14;
  border-radius: 2px;
}

/* --- Ajustes de posicionamento do título para os painéis do Case (horizontal) --- */
.case-horizontal .case-study-container {
  /* volta ao comportamento padrão (não empilhar tudo em coluna) */
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  /* NÃO definir display:flex nem flex-direction aqui — permite que .case-study-layout organize colunas */
}

/* Mantém o título alinhado à esquerda e com espaçamento adequado sem alterar o fluxo */
.case-horizontal .section-title {
  text-align: left;
  width: 100%;
  font-size: clamp(2.2rem, 8vw, 3rem); /* Tipografia Fluida */
  margin: 0 0 10px 0; /* ajustar espaçamento abaixo do título */
  padding: 0;
  line-height: 1.08;
}

/* --- Seção de Depoimentos --- */
.testimonials-section {
  background-color: transparent;
  padding: 100px 0;
  border-top: 1px solid #222;
}

.testimonials-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.testimonial-card {
  background-color: #111;
  border: 1px solid #222;
  border-radius: 8px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 25px -10px #39ff1480;
}

.testimonial-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #39ff14;
  margin-bottom: 20px;
}

.testimonial-text {
  font-size: 1rem;
  font-style: italic;
  color: #c0c0c0;
  margin-bottom: 20px;
  flex-grow: 1; /* Garante que os cards tenham a mesma altura */
}

.testimonial-author {
  font-weight: 700;
  color: #ffffff;
  font-size: 1.1rem;
}

.testimonial-role {
  font-size: 0.9rem;
  color: #39ff14;
}

/* --- Seção Como Funciona --- */
.how-it-works-section {
  background-color: rgba(10, 10, 10, 0.8);
  padding: 100px 0;
}

.how-it-works-container {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
}

.process-steps {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}

.step {
  flex: 1;
  text-align: center;
  padding: 0 20px;
  position: relative;

  /* Estado inicial para a animação com GSAP */
  opacity: 0;
  transform: translateY(50px);
}

.step-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #111;
  border: 2px solid #39ff14;
  color: #39ff14;
  font-size: 2rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  transition: background-color 0.3s, color 0.3s;
}

.step:hover .step-icon {
  background-color: #39ff14;
  color: #000;
}

.step-title {
  font-size: 1.5rem;
  color: #fff;
  margin: 0 0 10px 0;
}

.step-description {
  color: #a0a0a0;
  line-height: 1.6;
}

/* --- Responsividade para a Seção "Como Funciona" --- */
@media (max-width: 768px) {
  .process-steps {
    flex-direction: column; /* Empilha os passos verticalmente */
    align-items: center; /* Centraliza os passos empilhados */
    gap: 50px; /* Adiciona espaço entre os passos */
  }
}

/* --- Seção Case de Sucesso --- */
.case-study-section {
  background-color: transparent;
  /* Restaurando o padding original para dar espaçamento */
  padding: 120px 0;
  border-top: 1px solid #222;
  overflow: hidden; /* Garante que as colunas não criem scrollbars ao animar */
}

.case-study-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.case-study-layout {
  display: flex;
  gap: 60px;
  align-items: center;
}

/* --- Layout horizontal para Case de Sucesso --- */
.case-horizontal {
  position: relative;
  overflow: hidden; /* Esconde o conteúdo fora da viewport durante o scroll horizontal */
  /* Mantém o espaçamento vertical das sections internas via padding interno das .case-study-section */
}

.case-horizontal-track {
  display: flex;
  flex-direction: row;
  width: max-content; /* Largura determinada pelo número de painéis */
  will-change: transform;
}

/* Cada painel ocupa 100vw para que a translação mostre painéis um a um */
.case-horizontal .case-study-section {
  min-width: 100vw;
  box-sizing: border-box;
  padding: 120px 0; /* Mantém o mesmo padding vertical definido anteriormente */
  border-top: 1px solid #222;
  background-color: transparent;
}

/* Ajustes menores para manter o conteúdo centralizado dentro de cada painel */
.case-horizontal .case-study-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.case-study-details {
  flex: 1.2; /* Mais espaço para o texto */
}

.case-study-results {
  flex: 0.8; /* Menos espaço para os resultados, que são mais visuais */
  text-align: center;
}

.case-study-details h3 {
  font-size: 1.8rem;
  color: #39ff14;
  margin-top: 30px;
  margin-bottom: 10px;
}

.case-study-details p {
  color: #c0c0c0;
  line-height: 1.7;
  font-size: 1.1rem;
}

.client-logo img {
  max-height: 80px; /* antes: 60px */
  width: auto;
  opacity: 0.95;
  transition: transform 220ms ease, opacity 200ms ease;
}

.testimonial-quote {
  margin-top: 30px;
  padding-left: 20px;
  border-left: 3px solid #39ff14;
}

.testimonial-quote blockquote {
  font-style: italic;
  font-size: 1.2rem;
  color: #ffffff;
  margin: 0 0 10px 0;
}

.testimonial-quote cite {
  font-style: normal;
  color: #a0a0a0;
}

.results-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.result-value {
  display: block;
  font-size: clamp(2.8rem, 10vw, 4rem); /* Tipografia Fluida */
  font-weight: 700;
  color: #39ff14;
  line-height: 1;
}

.result-metric {
  font-size: 1.1rem;
  color: #ffffff;
}

/* --- Rodapé (Footer) --- */
.main-footer {
  background-color: rgba(
    10,
    10,
    10,
    0.9
  ); /* Quase opaco para boa legibilidade */
  padding: 80px 0 40px 0;
  border-top: 1px solid #222;
  color: #a0a0a0;
}

.footer-container {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 50px;
}

@media (max-width: 768px) {
  .footer-top {
    justify-content: center; /* Centraliza as colunas quando quebram a linha */
    text-align: center;
  }
}

.footer-column {
  flex: 1;
  min-width: 250px;
}

.footer-logo-area .footer-logo img {
  height: 80px;
  margin-bottom: 15px;
}

.footer-logo-area p {
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 300px;
}

.footer-column h4 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 20px 0;
  position: relative;
  padding-bottom: 10px;
}

@media (max-width: 768px) {
  .footer-column h4::after {
    left: 50%; /* Centraliza a linha decorativa abaixo do título */
    transform: translateX(-50%);
  }
}

.footer-column h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background-color: #39ff14;
  border-radius: 2px;
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links ul li a {
  color: #a0a0a0;
  text-decoration: none;
  display: block;
  padding: 8px 0;
  transition: color 0.3s ease, transform 0.3s ease;
}

.footer-links ul li a:hover {
  color: #39ff14;
  transform: translateX(5px);
}

.social-icons {
  display: flex;
  gap: 15px;
}

.social-icons a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  font-size: 1.2rem;
  color: #a0a0a0;
  border: 2px solid #333;
  border-radius: 50%;
  text-decoration: none;
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.social-icons a:hover {
  color: #39ff14;
  border-color: #39ff14;
  transform: translateY(-3px);
}

.footer-bottom {
  text-align: center;
  padding-top: 30px;
  border-top: 1px solid #222;
  font-size: 0.9rem;
}

/* --- Seção de Contato --- */
.contact-section {
  background-color: rgba(10, 10, 10, 0.8);
  padding: 100px 0;
  border-top: 1px solid #222;
}

.contact-container {
  width: 90%;
  max-width: 1200px; /* Aumenta a largura máxima para acomodar as duas colunas */
  margin: 0 auto;
}

/* Novo container flex para o layout */
.contact-layout {
  display: flex;
  align-items: center; /* Alinha verticalmente o form e a imagem */
  gap: 60px; /* Espaço entre o formulário e a imagem */
}

.contact-form-wrapper {
  flex: 1.2; /* Faz a coluna do formulário ser um pouco maior */
  min-width: 300px;
}

.contact-image-wrapper {
  flex: 0.8; /* Coluna da imagem um pouco menor */
  display: block; /* Garante que a imagem seja exibida */
  overflow: hidden;
}

.contact-image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1.03);
  transform-origin: center;
  transition: transform 220ms ease;
}

.section-subtitle {
  color: #a0a0a0;
  font-size: 1.1rem;
  margin-top: -40px;
  margin-bottom: 50px;
  text-align: left; /* Alinha o subtítulo à esquerda */
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  gap: 20px;
}

.form-group input {
  width: 100%;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 15px;
  /* Efeito Glassmorphism */
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px); /* Para compatibilidade com Safari */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #ffffff;
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box; /* Garante que o padding não afete a largura */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  -webkit-appearance: none; /* Remove estilos padrão do select no iOS */
  appearance: none;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: #39ff14;
  box-shadow: 0 0 15px -5px #39ff1480;
}

.contact-form textarea {
  resize: vertical; /* Permite que o usuário redimensione a altura */
}

/* Estiliza as opções dentro do select */
.contact-form select option {
  background-color: #0a0a0a;
  color: #ffffff;
}

/* Adiciona uma seta ao select para indicar que é um dropdown */
.contact-form select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2339FF14' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1em;
}

.submit-button {
  background-color: #39ff14;
  color: #000000;
  font-weight: bold;
  font-size: 1.1rem;
  padding: 15px 30px;
  border: 2px solid #39ff14;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  align-self: flex-start; /* Alinha o botão à esquerda */
}

.submit-button:hover {
  background-color: #000000;
  color: #39ff14;
  box-shadow: 0 0 25px -5px #39ff14;
}

.form-feedback {
  margin-top: 20px;
  font-size: 1rem;
  font-weight: 500;
}

/* --- Responsividade para a Seção de Contato --- */
@media (max-width: 992px) {
  .contact-layout {
    flex-direction: column; /* Empilha as colunas em telas menores */
    gap: 50px;
  }
  
  .section-subtitle {
    text-align: center; /* Centraliza o subtítulo em telas menores */
  }

  .contact-image-wrapper {
    order: -1; /* Coloca a imagem acima do formulário em telas menores */
  }
}

/* --- Classe Adicional para Texto Primário --- */
.text-primary {
  color: #39ff14 !important; /* cor principal do site */
  transition: color 0.18s ease;
  /* pequena sombra opcional para legibilidade */
  text-shadow: 0 0 6px rgba(57, 255, 20, 0.12);
}

/* Ícones sociais (individuais) à esquerda dos pontos de navegação */
.banner-social-left {
    position: fixed;
    right: 70px;               /* à esquerda dos dots (ajuste conforme necessário) */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1003;             /* acima dos dots (1001) e do cifrão (1002) */
    align-items: center;
    pointer-events: auto;
}

.banner-social-left-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.6);
    transition: transform 150ms ease, box-shadow 180ms ease, color 150ms ease, background 150ms ease;
    border: 1px solid rgba(255,255,255,0.06);
}

/* Hover/focus: glow no tom verde do site */
.banner-social-left-link:hover,
.banner-social-left-link:focus {
    transform: translateY(-3px);
    color: #000;
    background: #39ff14;
    box-shadow: 0 8px 28px rgba(57,255,20,0.18), 0 2px 6px rgba(0,0,0,0.4);
    outline: none;
}

/* centraliza o ícone dentro do botão */
.banner-social-left-link i { line-height: 1; }

/* Em telas muito pequenas, remove para não competir com conteúdo */
@media (max-width: 480px) {
    .banner-social-left { display: none; }
}

/* Estilos para os ícones dentro do menu fullscreen (aparecem abaixo do item "Contato") */
.nav-menu ul .nav-menu-socials {
    display: flex;
    gap: 14px;
    margin-top: 18px; /* espaço entre os links do menu e os ícones */
    justify-content: center;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.04); /* leve separador opcional */
}

.nav-menu .nav-social-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius: 100%;
    background: rgba(255,255,255,0.04);
    color: #ffffff;
    text-decoration: none;
    font-size: 1.2rem;
    border: 1px solid rgba(255,255,255,0.06);
    transition: background 160ms ease, color 160ms ease, transform 140ms ease, box-shadow 160ms ease;
}

/* Hover/focus: destaque verde */
.nav-menu .nav-social-link:hover,
.nav-menu .nav-social-link:focus {
    background: #39ff14;
    color: #000;
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(57,255,20,0.12);
    outline: none;
}

/* Ajuste para ícone interno */
.nav-menu .nav-social-link i { line-height: 1; }

/* Em telas pequenas, mantém o menu limpo (se quiser remover, ajuste) */
@media (max-width: 480px) {
    .nav-menu ul .nav-menu-socials { gap: 10px; margin-top: 12px; }
    .nav-menu .nav-social-link { width: 40px; height: 40px; font-size: 1rem; }
}