/* Box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}


/* 1. Reset para prevenir overflow horizontal */
body {
  /* Garante que o body não crie margem externa inesperada */
  margin: 0; 
  /* IMPEDE a rolagem horizontal, escondendo qualquer elemento que exceda */
  overflow-x: hidden; 
  /* Garante que a box-model não cause problemas de largura (boa prática) */
  box-sizing: border-box;
}

/* 2. Aplica o box-sizing a todos os elementos */
*, *::before, *::after {
  box-sizing: inherit;
}

/* 3. Garante que todas as imagens sejam responsivas */
img {
  max-width: 100%;
  height: auto;
}

/* 4. Padding Consistente para Mobile (fora do media query) */
.container {
    padding-left: 20px;
    padding-right: 20px;
}
/* Garante que TODAS as seções (se não usarem .container) tenham padding lateral seguro */
section {
    padding-left: 20px;
    padding-right: 20px;
}

/* NO MOBILE: Garante que todos os elementos de grid e flex se ajustem */
@media (max-width: 768px) {
    /* Garante que elementos flexíveis não ultrapassem a largura do pai */
    .hero-left, .hero-right, .sobre-grid .text, .sobre-grid .video {
        width: 100%;
        min-width: unset; /* Remove restrições mínimas de largura que causam overflow */
    }
    
    /* Zera o padding lateral de elementos que já estão dentro do .container ou section
       para evitar padding duplo. Se você usa .container, remova o padding das sections. */
    .hero {
        padding-left: 0; 
        padding-right: 0;
    }
    .hero-grid {
        padding: 0 20px; /* Adiciona padding interno ao grid para respeitar o espaço */
    }

    /* O elemento que corrigimos antes, agora com padding de 0, confiando no .hero-grid */
    /* ANTES: .hero { padding: 20px 20px 40px 20px; } */
    .hero {
        padding: 20px 0 40px 0; /* Remove padding lateral, confiando no grid interno */
    }

    /* Garante que o container use a largura total do pai (já tem padding externo) */
    .sobre .container {
        width: 100%;
        max-width: none;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Fonte */
body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: #f0f2f5;
  color: #111;
}

/* 1. BARRA DE NAVEGAÇÃO FIXA E FLUTUANTE */
.navbar-float {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(6, 6, 143, 0.95); /* Cor primária do Hero, levemente transparente */
  padding: 10px 40px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000; /* Acima de tudo */
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Alinha o conteúdo à esquerda */
  justify-content: space-between;
}

/* NOVO: Estilização do Botão na NavBar */
.cta-navbar {
  /* Cor de alta conversão (verde vibrante) */
  background: #00ff55; 
  color: #05153d; /* Texto em cor primária escura */
  padding: 8px 18px; 
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  /* Sombra para destaque */
  box-shadow: 0 2px 10px rgba(0, 255, 85, 0.5); 
}
.cta-navbar:hover {
  background: #57ff8f;
  transform: scale(1.05); /* Efeito sutil no hover */
  box-shadow: 0 4px 15px rgba(0, 255, 85, 0.7);
}

.navbar-float .logo {
  max-height: 54px; /* Altura da logo na barra fixa */
  height: auto;
}

/* Responsividade Mobile - NOVO AJUSTE para MANTER O TEXTO */
@media (max-width: 768px) {
  .navbar-float {
    padding: 8px 15px; 
  }
  
  .cta-navbar {
    /* Ajusta o tamanho do padding para compactar, mas mantém o texto */
    padding: 6px 10px;
    font-size: 13px; /* Reduz a fonte do texto para caber melhor */
    height: auto; /* Permite que a altura seja definida pelo padding */
    width: auto;
    
    /* Garante que o ícone e o texto permaneçam visíveis */
    display: inline-flex;
    justify-content: flex-start;
  }
  
  .cta-navbar i {
    font-size: 14px; /* Ícone levemente menor, mas visível */
    margin-right: 4px; /* Espaçamento menor entre ícone e texto */
  }
}

/* Adiciona um preenchimento ao body para que o conteúdo não fique escondido sob a navbar fixa */
body {
  padding-top: 65px; /* Altura aproximada da navbar-float (45px altura da logo + 10px padding top + 10px padding bottom) */
}

/* WhatsApp flutuante - Otimizado para Alta Conversão */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #25d366; /* Cor oficial do WhatsApp */
  color: white;
  width: 65px; /* Levemente maior */
  height: 65px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px; /* Ícone maior */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* Sombra mais forte */
  z-index: 9999; /* Garante que fique acima de tudo */
  text-decoration: none;
  transition: background 0.3s, transform 0.2s;
  
  /* Ponto de Referência para o Balão */
  position: fixed; 
  
  /* EFEITO DE VIBRAÇÃO SUTIL PARA CHAMA A ATENÇÃO */
  animation: pulse-whatsapp 2s infinite; 
}
.whatsapp-float:hover {
  background: #1ebe5d;
  transform: scale(1.1); /* Efeito de zoom no hover */
  animation: none; /* Para a animação no hover */
}

/* Animação para o Botão Flutuante (Vibração Sutil) */
@keyframes pulse-whatsapp {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* 🚩 NOVO: Estilização do Balão de Notificação */
.whatsapp-text-bubble {
  position: absolute;
  /* Posicionamento à esquerda e ligeiramente acima do botão */
  right: 80px; 
  top: 5px; 
  
  background-color: #05153d; /* Fundo do balão na cor primária escura */
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap; /* Garante que o texto fique em uma linha */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  
  /* Triângulo do Balão (Arrow) */
  &::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #05153d; /* Cor do triângulo igual ao fundo do balão */
  }

  /* EFEITO DE ENTRADA E SAÍDA (PISCA) */
  animation: float-in-out 10s ease-in-out infinite;
}

/* Animação de Entrada e Saída (O balão aparece e some) */
@keyframes float-in-out {
    0%, 10% { opacity: 0; transform: scale(0.9) translateY(0); } /* Desaparecido no início */
    20%, 80% { opacity: 1; transform: scale(1) translateY(0); } /* Visível */
    90%, 100% { opacity: 0; transform: scale(0.9) translateY(0); } /* Desaparecido no final */
}

/* Responsividade Mobile: Ajuste o balão para caber na tela */
@media (max-width: 450px) {
    .whatsapp-text-bubble {
        /* Move o balão para cima e centraliza-o na largura */
        right: 50%;
        top: -45px; /* Acima do botão */
        transform: translateX(50%);
        padding: 6px 10px;
        font-size: 12px;
        
        /* Ajuste do Triângulo para o Novo Posicionamento */
        &::after {
            right: 50%;
            top: 100%;
            transform: translateX(50%);
            border-top: 8px solid #05153d;
            border-bottom: none;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
        }
    }
}

/* HERO */
.hero {
  /* Gradiente mais visível e vibrante */
  background: linear-gradient(135deg, #1111f8 0%, #21048b 50%, #131366 100%);
  background-size: 400% 400%; /* Permite uma animação de gradiente mais suave e visível */
  animation: gradientMove 15s ease infinite; /* Animação mais rápida */
  color: #fff;
  padding: 0px 20px 40px 20px; /* Reduz o padding superior e inferior, focando na altura mínima da grade */
  text-align: center;
  position: relative;
  overflow: hidden;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Container do Hero - Centraliza o conteúdo e garante a altura */
.hero-content {
  max-width: 1200px;
  margin: 0 auto;
  /* Removido o display flex daqui, a grade agora gerencia o layout */
}

/* Grid Principal do Hero (Conteúdo Esquerdo e Formulário/Imagem Direito) */
.hero-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  align-items: flex-start; /* Alinha o conteúdo principal (textos/formulario) mais para cima */
  justify-content: space-between;
  min-height: calc(100vh - 65px); /* Garante que o Hero tenha altura mínima de tela, menos a barra fixa */
  padding-top: 28px; /* Preenchimento para afastar o conteúdo da barra fixa */
}

/* Lado Esquerdo - Textos */
.hero-left {
  flex: 1 1 50%;
  min-width: 320px;
}

/* Lado Direito - Formulário/Imagem */
.hero-right {
  flex: 1 1 40%;
  min-width: 300px;
}

/* Logo (agora apenas dentro do .hero-left para o layout da seção) */
.hero-top {
  display: none; /* Remove a logo do Hero, pois agora está na navbar-float */
}

.hero h1 {
  text-align: left;
  margin-bottom: 10px;
  font-size: 2.0em; /* Aumento do destaque do título */
  font-weight: 800;
  line-height: 1.2;
}

.hero p {
  text-align: left;
  max-width: 600px;
  font-size: 1.1em;
}

.hero .sub-call {
  text-align: left;
  font-weight: 600;
  font-size: 1.1em;
  color: #ffffff; /* Cor de destaque */
  
}

/* Selos (agora mais à esquerda) */
.hero .selos {
  display: flex;
  justify-content: center; /* Alinha à esquerda no desktop */
  flex-wrap: wrap;
  gap: 15px;
  margin: 20px 0;
}
/* Melhoria visual dos Selos */
.hero .selo {
  background: rgba(255, 255, 255, 0.15); /* Fundo mais claro e destacado */
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 10px 18px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.hero .selo i {
  color: #00ff88; /* Icone de destaque (verde vibrante) */
  font-size: 18px;
}

/* Formulário Hero */
.form-hero {
  background: rgba(255, 255, 255, 0.1);
  padding: 30px;
  border-radius: 15px;
  display: grid;
  gap: 15px;
  margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* CAMPOS LADO A LADO (NOVO) */
.form-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Duas colunas iguais */
  gap: 15px;
}
/* Responsivo: retorna a coluna única em telas pequenas */
@media (max-width: 600px) {
  .form-fields-grid {
    grid-template-columns: 1fr;
  }
}

.form-hero label {
  text-align: left;
  color: #ffffff;
  font-weight: 600;
  font-size: 1em;
  display: block;
  margin-bottom: 5px;
}
.form-hero select,
.form-hero input {
  padding: 14px;
  border: 2px solid #00CC66;
  border-radius: 8px;
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
  color: #111;
  width: 100%; /* Garante que os campos dentro do grid fiquem 100% da sua coluna */
}
/* Botão CTA BEM VISÍVEL */
.form-hero button {
  background: #00ff55; /* Cor de alto contraste */
  color: #05153d; /* Texto escuro no CTA para contraste */
  padding: 18px; /* Maior padding */
  border: none;
  border-radius: 50px;
  font-weight: 700;
  font-size: 18px;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  margin-top: 20px;
  box-shadow: 0 4px 15px rgba(0, 255, 149, 0.5); /* Sombra para destaque */
}
.form-hero button:hover {
  background: #57ff8f; /* Mudança de cor ao passar o mouse */
  transform: translateY(-2px); /* Efeito sutil de levantar */
}


/* Outras Seções e Responsividade (Mantidas e Ajustadas) */

/* Seções */
section {
  padding: 60px 20px;
}

/* Sobre - Aprimorado para Visual e Responsividade */
.sobre {
  background: #fff;
  padding: 80px 20px; /* Aumento do padding vertical para mais respiro */
}
.sobre .container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: auto;
  gap: 60px; /* Aumento do espaço entre o texto e o vídeo */
  align-items: center;
}
.sobre-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  align-items: center;
  justify-content: space-between;
}

/* Estilização do Conteúdo de Texto */
.sobre-grid .text {
  flex: 1 1 50%;
  min-width: 320px;
}
.sobre h2 {
  font-size: 32px; /* Aumento do título para maior impacto */
  color: #05153d; /* Azul escuro forte (cor primária) */
  margin-top: 0;
  margin-bottom: 20px;
  line-height: 1.2;
}
.sobre p {
  font-size: 17px; /* Fonte levemente maior para melhor leitura */
  margin-bottom: 25px;
  color: #555;
}

/* Lista de Vantagens (Ul) */
.sobre ul {
  list-style: none;
  padding: 0;
}
.sobre li {
  display: flex;
  align-items: center;
  margin-bottom: 15px; /* Mais espaçamento entre os itens */
  font-size: 16px;
  color: #333;
}
.sobre li i {
  color: #00CC66; /* Cor de sucesso */
  margin-right: 12px; /* Mais espaçamento para o ícone */
  font-size: 18px;
}

/* Estilo do Botão CTA Secundário */
.sobre .cta-secondary {
  display: inline-block;
  margin-top: 30px; /* Mais espaço acima do botão */
  background: #00CC66;
  color: #fff;
  padding: 14px 28px; /* Botão ligeiramente maior */
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700; /* Mais negrito */
  transition: background 0.3s, transform 0.2s;
  box-shadow: 0 4px 10px rgba(0, 204, 102, 0.3); /* Sombra para destaque */
}
.sobre .cta-secondary:hover {
  background: #1ebe5d; /* Variação do verde */
  transform: translateY(-2px); /* Efeito sutil */
}

/* 2. RESPONSIVIDADE DO VÍDEO (Embed Responsivo) */
.sobre-grid .video {
  flex: 1 1 40%; /* Ajustado para dar um pouco mais de espaço ao texto se necessário */
  min-width: 300px;
  /* NOVO: Wrapper para manter a proporção 16:9 */
  position: relative;
  padding-bottom: 28.125%; /* 45% da largura do contêiner flex (16:9 de 40% é aproximadamente 28.125%) */
  height: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Sombra para emoldurar o vídeo */
}

/* Garante que o iframe cubra o wrapper de proporção */
.sobre-grid .video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

/* Responsividade Mobile */
@media (max-width: 768px) {
  .sobre .container,
  .sobre-grid {
    flex-direction: column;
    gap: 40px;
  }
  .sobre-grid .text {
      min-width: 100%;
      text-align: center; /* Centraliza o texto no mobile */
  }
  .sobre h2 {
      font-size: 28px;
  }
  .sobre ul {
      text-align: left; /* Mantém a lista alinhada à esquerda no bloco centralizado */
      max-width: 350px;
      margin: 0 auto 25px auto;
  }
  .sobre .cta-secondary {
      width: 80%; /* Botão maior no mobile */
      max-width: 300px;
  }
  /* Ajuste para o vídeo responsivo no mobile */
  .sobre-grid .video {
    width: 100%;
    min-width: auto;
    /* Recálculo da proporção para 16:9 em largura total (9 / 16 * 100% = 56.25%) */
    padding-bottom: 56.25%; 
    height: 0;
  }
}

/* Diferenciais */
.diferenciais {
  background: linear-gradient(135deg, #0a0035, #122d5a);
  color: #fff;
  text-align: center;
}
.diferenciais h2 {
  font-size: 26px;
  margin-top: 0;
}
.diferenciais .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}
.diferenciais .card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 30px 20px;
  width: 260px;
  transition: background 0.3s;
}
.diferenciais .card:hover {
  background: rgba(255, 255, 255, 0.1);
}
.diferenciais .card i {
  font-size: 32px;
  color: #00CC66;
  margin-bottom: 15px;
}
.diferenciais .card h3 {
  font-size: 20px;
  margin: 0 0 10px;
}
.diferenciais .card p {
  font-size: 14px;
}
.diferenciais .cta-secondary {
  display: inline-block;
  margin-top: 30px;
  background: #00CC66;
  color: #fff;
  padding: 12px 24px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s;
}
.diferenciais .cta-secondary:hover {
  background: #00CC66;
}

/* Depoimentos - Aprimorado para Confiança */
.depoimentos {
  background: #fff;
  padding: 80px 20px; /* Mais padding para melhor visual */
  text-align: center;
}
.depoimentos h2 {
  font-size: 32px; /* Título maior e mais audacioso */
  color: #05153d; /* Cor primária forte */
  font-weight: 700;
  margin-bottom: 50px; /* Espaço antes dos depoimentos */
}
/* Otimização do Container de Depoimentos */
.depoimentos .testimonials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px; /* Aumento do espaço entre os cards */
  margin-top: 0;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Card Individual de Depoimento */
.depoimentos .testimonial {
  background: #ffffff; /* Fundo branco puro */
  border-radius: 12px;
  padding: 30px; /* Mais padding interno */
  max-width: 320px; /* Levemente maior */
  font-size: 16px; /* Melhor legibilidade */
  text-align: left;
  line-height: 1.6;
  /* Borda sutil na cor de sucesso e sombra elegante */
  border: 1px solid #e0e0e0; 
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.depoimentos .testimonial:hover {
    transform: translateY(-5px);
    border-color: #00CC66; /* Borda verde no hover para destaque */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Nome do Cliente/Curso */
.depoimentos .testimonial strong {
  display: block;
  margin-top: 15px;
  font-weight: 700;
  color: #05153d;
  font-size: 1.1em;
}

/* NOVO: Estilização do CTA Secundário (Mais chamativo) */
.depoimentos .cta-secondary {
  display: inline-block;
  margin-top: 50px; /* Mais espaço acima do botão */
  background: #00CC66;
  color: #fff;
  padding: 14px 30px; /* Botão maior e mais visível */
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  transition: background 0.3s, transform 0.2s;
  box-shadow: 0 4px 15px rgba(0, 204, 102, 0.4); /* Sombra para destaque */
}
.depoimentos .cta-secondary:hover {
  background: #1ebe5d;
  transform: translateY(-2px);
}

/* Responsividade Mobile (Garantindo que os cards se alinhem) */
@media (max-width: 768px) {
    .depoimentos h2 {
        font-size: 28px;
    }
    .depoimentos .testimonials {
        flex-direction: column;
        gap: 20px;
    }
    .depoimentos .testimonial {
        max-width: 100%; /* Ocupa largura total no mobile */
    }
}

/* Formulário Seção - Otimizado para Conversão */
.form-section {
  /* Fundo branco puro ou muito claro */
  background: #ffffff; 
  padding: 80px 20px; /* Mais espaço para respirar */
  border-top: 1px solid #eee; /* Borda sutil de separação */
}
.form-section .container {
  max-width: 650px; /* Levemente mais largo */
  margin: auto;
  text-align: center;
  /* NOVO: Estilo Card para o Container do Formulário */
  background: #f7f9fc; /* Fundo mais claro para contraste interno */
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Sombra mais destacada */
}
.form-section h2 {
  font-size: 34px; /* Título maior e com mais impacto */
  color: #05153d;
  font-weight: 800;
  margin-bottom: 5px;
  line-height: 1.2;
}
.form-section p {
  font-size: 18px; /* Subtítulo mais legível */
  margin-bottom: 30px;
  color: #555;
  font-weight: 500;
}
.form-section form {
  display: grid;
  gap: 20px; /* Mais espaço entre os campos */
}
.form-section label {
  text-align: left;
  font-weight: 700; /* Mais negrito */
  color: #05153d;
  font-size: 16px;
  margin-bottom: 5px;
  display: block; /* Garante que a label ocupe sua própria linha */
}
/* Campos de Input e Select (Melhorias de Estilo) */
.form-section select,
.form-section input {
  width: 100%;
  padding: 16px; /* Aumento do padding interno */
  border: 2px solid #ddd; /* Borda mais definida */
  border-radius: 10px; /* Arredondamento suave */
  font-size: 16px;
  color: #333;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.form-section select:focus,
.form-section input:focus {
    border-color: #00CC66; /* Borda de foco na cor de sucesso */
    box-shadow: 0 0 0 3px rgba(0, 204, 102, 0.2); /* Brilho suave no foco */
    outline: none;
}
/* Botão de Envio (CTA Primário) */
.form-section button {
  background: #00ff55; /* Cor de alto contraste (Igual ao Hero) */
  color: #05153d; /* Texto escuro no CTA para máximo contraste */
  padding: 18px; 
  border: none;
  border-radius: 50px;
  font-weight: 800; /* Extra bold */
  font-size: 18px;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  margin-top: 30px;
  box-shadow: 0 4px 15px rgba(0, 255, 85, 0.5); /* Sombra que "salta" */
}
.form-section button:hover {
  background: #57ff8f;
  transform: translateY(-2px);
}

/* CTA Final - Focado no Contato Imediato */
.cta-final {
  background: #05153d; /* Azul Escuro Primário */
  color: #fff;
  padding: 60px 20px;
  text-align: center;
}
.cta-final h2 {
  font-size: 28px;
  margin: 0 0 10px;
  font-weight: 700;
}
.cta-final p {
  font-size: 18px;
  margin-bottom: 30px; /* Mais espaço antes do botão */
  color: rgba(255, 255, 255, 0.9);
}
/* Botão WhatsApp em Destaque */
.cta-final .cta-whatsapp {
  display: inline-block;
  margin-top: 20px;
  background: #25d366; /* Cor oficial do WhatsApp */
  color: #fff;
  padding: 15px 35px; /* Botão mais largo e alto */
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  transition: background 0.3s, transform 0.2s;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.5); /* Sombra verde */
}
.cta-final .cta-whatsapp:hover {
  background: #1ebe5d;
  transform: translateY(-2px);
}

/* Footer - Otimizado para Confiança e Legibilidade */
.footer {
  /* Fundo sutilmente mais escuro que o corpo, mas mais claro que o CTA final */
  background: #e9ecef; 
  text-align: center;
  padding: 40px 20px; /* Mais padding vertical */
  font-family: 'Montserrat', sans-serif; /* Mantendo a fonte padrão */
}

/* Container para centralizar o conteúdo */
.footer-container {
    max-width: 1000px; /* Limita a largura para melhor leitura */
    margin: 0 auto;
}

/* 1. Copyright e CNPJ (Linha Superior) */
.footer-container p:first-child {
    font-size: 14px;
    color: #333; /* Cor mais escura para destaque do contato legal */
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dcdcdc; /* Separador visual */
}

/* 2. Bloco de Isenção de Responsabilidade (Ética) */
.footer-container p:nth-child(2) {
    font-size: 13px; /* Tamanho padrão para texto legal */
    color: #6c757d; /* Cinza suave para texto secundário */
    line-height: 1.8; /* Aumento da altura da linha para facilitar a leitura do bloco denso */
    margin-bottom: 30px;
    text-align: justify; /* Alinha o texto na horizontal (melhor para blocos longos) */
    text-align-last: center; /* Centraliza a última linha do bloco justificado */
}

/* 3. Links Legais (Política e Termos) */
.footer-container p:last-child {
    margin-top: 15px;
    font-size: 14px;
    font-weight: 600;
}
.footer-container p:last-child a {
    color: #05153d;
    text-decoration: none;
    transition: color 0.3s;
    margin: 0 15px;
    border-bottom: 2px solid transparent; /* Borda transparente para efeito */
}
.footer-container p:last-child a:hover {
    color: #00CC66; /* Cor de destaque no hover */
    border-color: #00CC66;
    text-decoration: none; /* Remove underline no hover, usa a borda */
}

/* Faixa Trabalhos (Marquee) - Visuais de Alta Conversão */

/* Container da Faixa */
.faixa-trabalhos {
  background: #f0f2f5; /* Fundo mais suave para contraste */
  overflow: hidden;
  padding: 15px 0; /* Aumento do padding vertical */
  font-size: 16px;
  border-top: 1px solid #e0e0e0; /* Borda sutil para separar */
  border-bottom: 1px solid #e0e0e0;
}
.marquee {
  display: flex;
  width: 100%;
  overflow: hidden;
  position: relative;
  max-width: 100vw;
}
.marquee-content {
  display: flex;
  /* Aumentar a velocidade para chamar mais atenção */
  animation: scroll-left 35s linear infinite; 
  width: max-content; 
  min-width: 200%; /* Garante que tenha espaço para rolar */
}

/* Selos Individuais de Trabalho */
.marquee-content .selo-trabalho {
  display: inline-flex; /* Uso de flex para alinhar ícone e texto */
  align-items: center;
  /* Fundo de Destaque */
  background: #ffffff; 
  color: #05153d; /* Texto em azul escuro */
  font-size: 15px; /* Leve aumento na fonte */
  font-weight: 600; /* Mais negrito */
  padding: 8px 16px; /* Aumento do padding interno */
  margin: 0 12px; /* Aumento da margem entre os selos */
  border-radius: 50px; /* Borda totalmente arredondada (Pill shape) */
  white-space: nowrap;
  border: 2px solid #00CC66; /* Borda verde vibrante (Cor de sucesso) */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave para profundidade */
  transition: all 0.3s ease;
  cursor: default;
}
/* Efeito Sutil de Hover (embora não seja clicável, adiciona polimento) */
.marquee-content .selo-trabalho:hover {
    background: #f7fff7; /* Fundo muito levemente mais claro */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); 
}

/* NOVO: Estilização do Ícone */
.selo-trabalho i {
    color: #00CC66; /* Ícone na cor de sucesso */
    margin-right: 8px; /* Espaçamento entre o ícone e o texto */
    font-size: 18px; /* Ícone levemente maior */
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Textos Digitados (Mantidos, mas garantindo a cor primária) */
#tipoTrabalho {
  color: #00c98c; /* Cor primária de texto */
  font-weight: 700; /* Mais forte */
  font-size: 1.1em;
}
#cursor {
  color: #00CC66; /* Cursor na cor de destaque */
  font-weight: 600;
  animation: blink 1s infinite;
}
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* Slider Provas (Aprimorado para Conversão) */
.slider-provas {
  /* Gradiente mais nítido e autoritário */
  background: linear-gradient(135deg, #05153d 0%, #173366 100%); 
  color: #fff;
  padding: 60px 20px 80px 20px; /* Aumento do padding para respirar */
  text-align: center;
}
.slider-provas h2 {
  font-size: 32px; /* Título maior */
  margin-bottom: 5px;
  font-weight: 800; /* Extra bold */
}
.slider-provas p {
  font-size: 18px; /* Subtítulo maior para destaque */
  color: #00ff88; /* Destaque verde vibrante no número de projetos */
  font-weight: 600;
  margin-bottom: 50px; /* Mais espaço antes do slider */
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Container do Slider (Swiper) */
.swiper {
  padding-top: 20px;
  padding-bottom: 50px; /* Mais espaço para a paginação */
  max-width: 1200px;
  margin: 0 auto;
}

/* Slides Individuais */
.swiper-slide {
  background: #ffffff; /* Fundo branco limpo para o slide */
  color: #333;
  border-radius: 12px;
  overflow: hidden;
  /* Sombra mais pronunciada e com cor sutil do fundo para profundidade */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: grab;
}
.swiper-slide:hover {
  transform: translateY(-5px); /* Efeito de levantar no hover */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.swiper-slide img {
  width: 100%;
  height: auto; /* Mantém a proporção da imagem */
  display: block;
}

/* Caixa de Avaliação Abaixo da Imagem */
.avaliacao {
  padding: 15px; /* Aumento do padding */
  background: #f7f7f7; /* Fundo cinza muito claro */
  border-top: 1px solid #eee;
  font-size: 16px;
  color: #555;
  font-weight: 500;
}
.avaliacao span {
    font-weight: 700;
    color: #05153d; /* Nota em destaque na cor primária */
    display: block;
    font-size: 1.1em;
    margin-top: 5px;
}

/* Paginação (Pontos de navegação) */
.swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    transition: all 0.3s;
}
.swiper-pagination-bullet-active {
    background: #00CC66; /* Paginação ativa na cor de destaque */
    transform: scale(1.2);
}

/* Responsividade Mobile */
@media (max-width: 768px) {
    .slider-provas h2 {
        font-size: 26px;
    }
    .slider-provas p {
        font-size: 16px;
    }
    .swiper {
        padding-left: 0;
        padding-right: 0;
    }
    .swiper-slide {
        /* Garante que o slide ocupe a largura total do container no mobile */
        width: 100% !important; 
    }
}

/* Níveis Acadêmicos (Aprimorado para Serviços e Conversão) */

/* Container Principal */
.niveis-academicos {
  /* Gradiente mais profundo e profissional, alinhado com o Hero */
  background: linear-gradient(135deg, #05153d 0%, #122d5a 100%); 
  color: #fff;
  padding: 80px 20px; /* Mais padding para "respirar" */
  text-align: center;
}
.niveis-academicos h2 {
  font-size: 32px; /* Título maior */
  margin-bottom: 10px;
  font-weight: 700;
}
.niveis-academicos p {
  font-size: 18px; /* Texto descritivo mais visível */
  margin-bottom: 50px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(255, 255, 255, 0.8); /* Cor mais suave */
}
.niveis-grid {
  display: grid;
  /* Garante 3 ou 4 colunas no desktop, mas é responsivo */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
  gap: 30px;
  max-width: 1200px;
  margin: auto;
}

/* Cards Individuais (Nível) */
.nivel {
  background: #fff;
  color: #333;
  padding: 30px; /* Mais padding interno */
  border-radius: 12px;
  /* Sombra elegante com efeito de levantar */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); 
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 2px solid transparent; /* Adiciona uma borda transparente para o efeito hover */
  display: flex; /* Garante que o conteúdo fique organizado */
  flex-direction: column;
  justify-content: space-between;
}
.nivel:hover {
  transform: translateY(-8px); /* Efeito de levantar mais pronunciado */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  border-color: #00CC66; /* Borda verde vibrante no hover */
}

/* Ícone */
.nivel i {
  font-size: 42px; /* Ícone maior */
  color: #00CC66; /* Cor de sucesso */
  margin-bottom: 20px;
}
/* Título do Card */
.nivel h3 {
  font-size: 20px;
  margin: 0 0 10px;
  color: #05153d; /* Cor primária forte */
  font-weight: 700;
}
/* Descrição do Card */
.nivel p {
  font-size: 15px;
  margin-bottom: 20px;
  color: #555;
  font-weight: 400;
  flex-grow: 1; /* Permite que o texto se expanda */
}

/* NOVO: Botão CTA no Card */
.nivel .cta-card {
  display: block;
  width: 100%;
  background: #00CC66;
  color: #fff;
  padding: 12px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  transition: background 0.3s, transform 0.2s;
  margin-top: 15px; /* Espaçamento antes do botão */
  box-shadow: 0 4px 10px rgba(0, 204, 102, 0.4);
}
.nivel .cta-card:hover {
  background: #1ebe5d;
  transform: translateY(-2px);
}

/* Responsividade Mobile */
@media (max-width: 768px) {
    .niveis-academicos h2 {
        font-size: 28px;
    }
    .niveis-academicos p {
        font-size: 16px;
    }
    .niveis-grid {
        gap: 20px;
    }
}

/* Selo Preço */
.selo-preco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #00CC66; /* verde */
  color: #fff;
  padding: 8px 18px;
  border-radius: 25px;
  font-size: 15px;
  font-weight: 500;
  margin: 0 auto 25px auto;
  box-shadow: 0 0 10px #00CC66, 0 0 20px #00CC66;
  animation: brilho 3s infinite alternate;
}
.selo-preco i {
  margin-right: 8px;
  font-size: 16px;
}
@keyframes brilho {
  0% {
    box-shadow: 0 0 10px #00CC66, 0 0 20px #00CC66;
  }
  100% {
    box-shadow: 0 0 20px #00CC66, 0 0 40px #00CC66;
  }
}

/* Logos Instituições - Otimizado para Confiança e Autoridade */
.instituicoes {
  /* Fundo sutil para contraste sem ser agressivo */
  background-color: #f7f9fc; 
  padding: 80px 20px; /* Mais padding para "respirar" */
  text-align: center;
}
.instituicoes h2 {
  font-size: 30px; /* Título maior e mais impactante */
  margin-bottom: 10px;
  color: #05153d; /* Cor primária forte */
  font-weight: 700;
}
.instituicoes p {
  /* Texto mais direto e com leve destaque na cor primária */
  color: #05153d; 
  font-size: 18px;
  margin-bottom: 50px; /* Mais espaço antes das logos */
  font-weight: 500;
}
.logos-instituicoes {
  display: flex;
  flex-wrap: wrap;
  gap: 40px; /* Aumento do gap para mais separação */
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: auto;
}

/* Logos Individuais */
.logos-instituicoes img {
  max-height: 70px; /* Logos levemente maiores */
  max-width: 200px;
  object-fit: contain;
  /* NOVO: Aplica o filtro cinza sutilmente e reduz a opacidade */
  filter: grayscale(80%); 
  opacity: 0.6;
  transition: all 0.4s ease-in-out; /* Transição mais suave */
  
  /* NOVO: Adiciona uma sombra sutil para dar profundidade ao hover */
  box-shadow: 0 0 0 transparent; 
}
.logos-instituicoes img:hover {
  /* No hover, elas voltam à cor original (graysale(0%)) e ficam totalmente visíveis */
  filter: grayscale(0%); 
  opacity: 1;
  /* Adiciona um pequeno brilho/sombra sutil */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 
  transform: scale(1.05); /* Efeito sutil de zoom */
}

/* Como Funciona */
.como-funciona-section {
  padding: 60px 20px;
  background-color: #f9f9f9;
}
.container {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.section-title {
  font-size: 2.2em;
  color: #05153d;
  margin-bottom: 10px;
}
.section-subtitle {
  font-size: 1.1em;
  color: #555;
  margin-bottom: 40px;
}
.etapas-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}
.etapa-box {
  background: #fff;
  flex: 1 1 220px;
  max-width: 260px;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: all 0.3s ease;
}
.etapa-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.etapa-icon {
  font-size: 2.5em;
  color: #00CC66;
  margin-bottom: 15px;
}
.etapa-title {
  font-size: 1.1em;
  color: #05153d;
  margin-bottom: 10px;
}
.etapa-desc {
  font-size: 0.95em;
  color: #555;
}

/* Efeitos de Imagem Hero */
.hero-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; 
  display: flex; 
  justify-content: center;
  align-items: center;
}

.hero-right .hero-main-image { 
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative; 
  z-index: 2; 

  /* Efeito de Esfumaçamento */
  mask-image: linear-gradient(to bottom, black 40%, transparent 90%);
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 90%); 
  mask-mode: alpha; 
}

.animated-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #00000000; 
  z-index: 1; 
}

.bubble {
  position: absolute;
  border-radius: 50%;
  background: rgba(26, 0, 198, 0.3); 
  animation: moveBubbles 15s infinite ease-in-out alternate;
}

.bubble-1 {
  width: 80px;
  height: 80px;
  top: 10%;
  left: 10%;
  animation-duration: 12s;
  background: rgba(255, 255, 255, 0.1); 
}

.bubble-2 {
  width: 150px;
  height: 150px;
  top: 60%;
  left: 70%;
  animation-duration: 18s;
  background: rgba(0, 198, 175, 0.4); 
}

.bubble-3 {
  width: 120px;
  height: 120px;
  top: 35%;
  left: 40%;
  animation-duration: 15s;
}

@keyframes moveBubbles {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(30px, -30px) scale(1.1);
  }
  100% {
    transform: translate(-20px, 40px) scale(0.9);
  }
}

/* Responsividade Geral - CORRIGIDO O ESPAÇAMENTO LATERAL NO MOBILE */
@media (max-width: 768px) {
  /* Altera o preenchimento do body para a barra fixa no mobile */
  body {
    padding-top: 60px; /* Ajusta se necessário */
  }
  
  /* Mantém o padding da barra fixa */
  .navbar-float {
    padding: 8px 15px; 
  }
  
  .sobre .container,
  .diferenciais .cards,
  .depoimentos .testimonials {
    flex-direction: column;
    align-items: center;
  }
  
  .hero-grid {
    flex-direction: column; 
    min-height: auto; 
    padding-top: 20px; 
  }
  
  .hero-left {
    order: 1; 
  }
  
  .hero-right {
    order: 2; 
    height: 300px; 
    margin-bottom: 20px;
  }
  
  .hero-right .hero-main-image {
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%); 
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
  }
  
  .hero h1,
  .hero p,
  .hero .sub-call,
  .hero .selos,
  .form-hero {
    text-align: center;
  }
  
  .hero .selos {
    justify-content: center;
  }
  
  .hero h1 {
    font-size: 1.5em; 
  }
  
  .hero p {
    font-size: 1em;
  }
  
  .etapas-grid {
    flex-direction: column;
    align-items: center;
  }
  
  .etapa-box {
    width: 100%;
    max-width: 100%;
  }
  
  /* CORREÇÃO CHAVE: Padroniza o padding lateral do HERO para 20px em ambos os lados */
  .hero {
    padding: 20px 20px 40px 20px; /* Superior 20px, Laterais 20px, Inferior 40px */
  }
  
  .sobre-grid .video iframe {
    width: 100%;
    /* Removido o height fixo aqui, pois já corrigimos no CSS da seção sobre, usando padding-bottom para proporção. */
    /* Se você quiser manter um valor fixo em um iframe antigo, use: height: 250px; */
  }

  /* Garante que todas as sections também usem um padding lateral padrão (geralmente 20px, mas bom conferir) */
  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

.destaque {
  color: #00ff88; 
  font-weight: 700; 
}

/* Seção Quem Somos / Especialistas - Versão 3: Minimalista e Autoridade */
.quem-somos-especialistas {
    /* Fundo branco com um sutil gradiente no topo para modernidade */
    background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%); 
    color: #333;
    padding: 80px 20px;
    text-align: center;
}

.quem-somos-especialistas .container {
    max-width: 1000px;
    margin: 0 auto;
}

/* Títulos Clássicos e Fortes */
.quem-somos-especialistas .section-title {
    font-size: 34px;
    color: #05153d;
    font-weight: 800;
    margin-bottom: 5px;
}

.quem-somos-especialistas .section-subtitle {
    font-size: 18px;
    color: #6c757d; /* Cinza sutil */
    margin-bottom: 50px;
    font-weight: 500;
}

/* Card Principal: Layout Horizontal e Limpo */
.especialista-card {
    display: flex;
    align-items: flex-start; /* Alinha o conteúdo ao topo */
    gap: 40px;
    background: #ffffff;
    padding: 40px;
    border-radius: 10px;
    /* Borda sutil na cor de destaque, sem sombra pesada */
    border: 3px solid #00CC66; 
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); 
    text-align: left;
}

/* Foto do Especialista (Estilo Ficha Técnica) */
.especialista-info-box {
    flex-shrink: 0;
    width: 250px; 
    text-align: center;
    padding-right: 20px;
    border-right: 1px solid #ddd; /* Linha divisória vertical (Desktop) */
}

.especialista-foto img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Borda sutil */
    margin-bottom: 15px;
    /* Sombra suave e discreta */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
}

.especialista-details h3 {
    font-size: 22px;
    color: #05153d;
    font-weight: 800;
    margin-bottom: 5px;
}
.especialista-details p {
    font-size: 15px;
    color: #00CC66; /* Destaque para a especialidade */
    font-weight: 600;
    margin-bottom: 0;
}

/* Conteúdo Principal (Texto e Listas) */
.especialista-content {
    flex-grow: 1; 
    padding-top: 10px; /* Alinha o texto ao lado do nome */
}

.especialista-content strong {
    color: #05153d; 
    font-weight: 700;
}
.especialista-content > p:first-of-type {
    font-size: 17px;
    margin-bottom: 25px;
}

/* Destaques de Métricas (Em Linha e Mais Fortes) */
.highlight-metrics {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; 
    gap: 15px 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 30px;
    border-top: 2px dashed #eee; /* Linha de separação entre texto e métricas */
    border-bottom: 2px dashed #eee;
}
.highlight-metrics p {
    font-size: 16px;
    color: #333;
    font-weight: 600;
    margin: 0;
}
.highlight-metrics i {
    color: #05153d; /* Ícone de check na cor primária */
    margin-right: 8px;
    font-size: 1.1em;
}

/* Lista de Serviços (Ul) */
.especialista-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.especialista-content ul li {
    font-size: 16px;
    display: flex;
    align-items: center;
}
.especialista-content ul li i {
    color: #00CC66;
    margin-right: 10px;
    font-size: 18px;
}

/* CTA Primário */
.cta-primary-specialist {
    display: inline-block;
    background: #00CC66;
    color: #fff;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 17px;
    transition: background 0.3s, transform 0.2s;
    margin-top: 10px;
    box-shadow: 0 4px 15px rgba(0, 204, 102, 0.4);
}
.cta-primary-specialist:hover {
    background: #1ebe5d;
    transform: translateY(-2px);
}

/* Responsividade Mobile */
@media (max-width: 768px) {
    .especialista-card {
        flex-direction: column; /* Volta para vertical */
        align-items: center;
        text-align: center;
        gap: 30px;
    }
    .especialista-info-box {
        width: 100%;
        padding-right: 0;
        border-right: none;
        padding-bottom: 20px;
        border-bottom: 1px solid #ddd; /* Adiciona a linha divisória horizontal no mobile */
    }
    .especialista-foto img {
        max-width: 180px;
    }
    .especialista-content {
        text-align: center;
    }
    .highlight-metrics {
        justify-content: center;
    }
    .especialista-content ul {
        grid-template-columns: 1fr;
        text-align: left; /* Mantém a lista fácil de ler */
        max-width: 400px;
        margin: 0 auto 30px auto;
    }
    .cta-primary-specialist {
        width: 100%;
        max-width: none;
    }
}

/* Seção Prova Social Visual (Carrossel de Projetos) */
.projetos-carrossel-section {
    background: #0b39ce;
    padding: 60px 0;
}

.projetos-carrossel-section .container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 40px;
}

/* Área de Texto e CTA */
.carrossel-texto {
    flex-basis: 50%; /* Ocupa metade do espaço no desktop */
    text-align: left;
}

.carrossel-texto h2 {
    font-size: 32px;
    color: #ffffff;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
}

.highlight-number {
    color: #45ffa2; /* Cor de destaque para o número de projetos */
    font-size: 1.2em;
}

.carrossel-texto p {
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 30px;
}

/* CTA Exclusivo para a Seção */
.cta-carrossel {
    display: inline-flex;
    align-items: center;
    background: #00CC66;
    color: #fff;
    padding: 14px 28px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    transition: background 0.3s, transform 0.2s;
}

.cta-carrossel:hover {
    background: #1ebe5d;
    transform: translateY(-2px);
}
.cta-carrossel i {
    margin-left: 10px;
}

/* 1. Contêiner de Rolagem (Desktop: Vertical) */
.carrossel-wrapper {
    flex-basis: 50%;
    height: 400px; /* Limite vertical fixo (ajuste conforme a altura das suas imagens) */
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.projetos-lista {
    display: flex;
    flex-direction: column; /* Padrão: Vertical */
    list-style: none;
    padding: 0;
    margin: 0;
    animation: scroll-vertical 25s linear infinite; /* Animação Vertical */
}

.projetos-lista li {
    padding: 10px 0;
    flex-shrink: 0; /* Impede o encolhimento */
}

.projetos-lista img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
}

/* Keyframes para Rolagem Vertical (Desktop) */
@keyframes scroll-vertical {
    0% {
        transform: translateY(0%);
    }
    100% {
        /* Move a lista inteira (original + cópia) para cima */
        transform: translateY(-50%); 
    }
}

/* 2. Responsividade (Mobile: Horizontal) - CORREÇÃO */
@media (max-width: 768px) {
    .projetos-carrossel-section .container {
        flex-direction: column; /* Pilha verticalmente */
        text-align: center;
        padding: 0 0px; /* Adiciona padding lateral para o container principal */
    }
    
    .carrossel-texto {
        flex-basis: auto;
        margin-bottom: 30px;
        padding: 0 10px; /* Padding para o texto */
    }
    .carrossel-texto h2 {
        font-size: 28px;
    }

    /* Redefinir Contêiner de Rolagem para Mobile */
    .carrossel-wrapper {
        width: 100%;
        height: 500px; /* Altura menor no mobile */
        /* NOVO: Garante que o conteúdo role horizontalmente */
        display: flex; /* Faz os 'ul' ficarem lado a lado */
        overflow: hidden; /* Mantém a rolagem ativa */
        position: relative;
    }

    .projetos-lista {
        flex-direction: row; /* Rolagem Horizontal */
        flex-wrap: nowrap; /* IMPEDE a quebra de linha dos 'li' */
        animation: scroll-horizontal 15s linear infinite; /* Nova Animação Horizontal */
        width: max-content; /* Permite que a lista tenha a largura de todo o seu conteúdo */
        display: flex; /* Garante que os 'li' fiquem em linha */
    }
    
    .projetos-lista li {
        padding: 0 10px;
        flex-shrink: 0; /* IMPEDE que as imagens encolham */
        width: 150px; /* Largura fixa para os itens no mobile */
        height: 200px; /* Altura fixa para os itens no mobile */
        display: flex; /* Para centralizar a imagem se ela for menor */
        align-items: center;
        justify-content: center;
    }

    .projetos-lista img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* Garante que a imagem se ajuste sem cortar */
    }

    /* Keyframes para Rolagem Horizontal (Mobile) */
    @keyframes scroll-horizontal {
        0% {
            transform: translateX(0%);
        }
        100% {
            /* Move a lista inteira (original + cópia) para a esquerda */
            transform: translateX(-50%); 
        }
    }
}