/* Reset básico e fonte */
body, html {
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  color: #333;
  background-color: #fff;
  scroll-behavior: smooth;
}

h1, h2, h3 {
  margin: 0 0 1rem;
  font-weight: 800;
  text-align: center;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4rem 2rem;
  flex-wrap: wrap;
}

/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 2.5rem; /* Este padding define a altura inicial da navbar */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: transparent;
  transition: background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, padding 0.4s ease-in-out; /* Adicione 'padding' à transição */
  box-shadow: none;
  color: white;
  box-sizing: border-box;
}

/* Nova classe para quando a navbar estiver scrollada */
.navbar.scrolled {
  background-color: #0D2D4E;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  padding: 0.5rem 2.5rem; /* Novo padding para uma altura menor (50px aprox.) */
  /* Isso fará a navbar ter aproximadamente 50px de altura (2*0.5rem + 40px da logo no centro) */
}

/* Logo */
.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding-right: 1.5rem;
}

.logo-img {
  height: 50px; /* ALTURA INICIAL DA LOGO: Quando transparente (navbar default) */
  width: auto;
  vertical-align: middle;
  transition: height 0.4s ease-in-out; /* Transição suave para a altura da logo */
}

/* Reduz o tamanho da logo quando a navbar estiver scrollada */
.navbar.scrolled .logo-img {
  height: 40px; /* ALTURA FINAL DA LOGO: Quando a navbar ficar sólida */
}


/* Links de Navegação */
.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.nav-links li a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.05rem; /* TAMANHO INICIAL DA FONTE DO MENU */
  position: relative;
  padding: 0.5rem 0;
  transition: all 0.3s ease, font-size 0.4s ease-in-out; /* Adicione 'font-size' à transição */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Diminui a fonte do menu quando a navbar estiver scrollada */
.navbar.scrolled .nav-links li a {
  font-size: 0.95rem; /* TAMANHO FINAL DA FONTE DO MENU: Levemente menor */
  padding: 0.3rem 0; /* Ajuste o padding vertical dos links também */
}

/* Efeito de Underline Moderno no Hover (mantém o mesmo) */
.nav-links li a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: #F05323;
  transition: width 0.3s ease-in-out;
}

.nav-links li a:hover::after {
  width: 100%;
}

.nav-links li a:hover {
  color: #F05323;
  transform: translateY(-2px);
}

/* Ajustes para mobile e telas menores (mantenha como está ou ajuste conforme necessário) */
/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 2.5rem;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: transparent;
  transition: background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, padding 0.4s ease-in-out;
  box-shadow: none;
  color: white;
  box-sizing: border-box;
}

/* Nova classe para quando a navbar estiver scrollada */
.navbar.scrolled {
  background-color: #0D2D4E;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  padding: 0.5rem 2.5rem;
}

/* Logo */
.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding-right: 1.5rem;
}

.logo-img {
  height: 50px;
  width: auto;
  vertical-align: middle;
  transition: height 0.4s ease-in-out;
}

/* Reduz o tamanho da logo quando a navbar estiver scrollada */
.navbar.scrolled .logo-img {
  height: 40px;
}


/* Links de Navegação */
.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.nav-links li a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.05rem;
  position: relative;
  padding: 0.5rem 0;
  transition: all 0.3s ease, font-size 0.4s ease-in-out;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Diminui a fonte do menu quando a navbar estiver scrollada */
.navbar.scrolled .nav-links li a {
  font-size: 0.95rem;
  padding: 0.3rem 0;
}

/* Efeito de Underline Moderno no Hover */
.nav-links li a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: #F05323;
  transition: width 0.3s ease-in-out;
}

.nav-links li a:hover::after {
  width: 100%;
}

.nav-links li a:hover {
  color: #F05323;
  transform: translateY(-2px);
}

/* Estilos para o botão do menu hambúrguer */
.hamburger-menu {
  display: none; /* Escondido por padrão em telas grandes */
  background: none;
  border: none;
  font-size: 1.8rem;
  color: white;
  cursor: pointer;
  z-index: 1001; /* Acima de tudo */
  padding: 0.5rem;
  transition: color 0.3s ease;
}

.hamburger-menu:hover {
    color: #F05323;
}


/* Ajustes para mobile e telas menores */
@media (max-width: 992px) {
  .navbar {
    padding: 1rem 1.5rem;
  }
  .nav-links {
    gap: 1.5rem;
  }
  .nav-links li a {
    font-size: 1rem;
  }
  .navbar.scrolled .nav-links li a {
    font-size: 0.9rem;
  }
  .logo-img {
      height: 45px;
  }
  .navbar.scrolled .logo-img {
      height: 35px;
  }

  .nav-links { /* Esconde o menu de navegação em telas menores */
    display: none;
  }

  .hamburger-menu { /* Mostra o botão do hambúrguer */
    display: block;
  }

  /* Estilos para o menu de navegação quando aberto (em mobile) */
  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%; /* Inicialmente fora da tela */
    width: 70%;
    height: 100vh;
    background-color: #0D2D4E;
    padding-top: 80px;
    box-shadow: -5px 0 15px rgba(0,0,0,0.3);
    transition: right 0.4s ease-in-out;
    z-index: 999;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1.5rem;
  }

  .nav-menu.active { /* Classe para quando o menu estiver ativo/aberto */
    right: 0;
  }

  .nav-menu .nav-links {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    padding: 0;
  }

  .nav-menu .nav-links li {
    width: 100%;
    margin: 0;
  }

  .nav-menu .nav-links li a {
    padding: 1rem 0;
    width: 100%;
    display: block;
    font-size: 1.2rem;
    color: white;
  }

  .nav-menu .nav-links li a::after {
      width: 0;
  }
  .nav-menu .nav-links li a:hover {
      background-color: rgba(240, 83, 35, 0.2);
      color: #F05323;
      transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .navbar {
    padding: 0.8rem 1rem;
  }
  .nav-links {
    gap: 1rem;
  }
  .nav-links li a {
      padding: 0.3rem 0.2rem;
  }
}

/* HERO */
.hero {
  background: linear-gradient(to bottom, #0d2e4e, #0d2e4e), url('../img/b01.jpg') no-repeat center center/cover;
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: #fff;
  height: 100vh;
  display: flex; /* DESKTOP: Texto e Imagens lado a lado */
  align-items: center;
  justify-content: center;
  text-align: left;
  overflow: hidden;
  position: relative;
  gap: 4rem;
  padding: 0 4rem;
  padding-top: 80px; /* Afasta o conteúdo do Hero do Navbar no DESKTOP */
}

/* Conteúdo principal do Hero (Texto e Botão) - ESTILOS PARA DESKTOP */
.hero-main-content {
    flex: 1;
    max-width: 100%; /* Limita a largura da coluna de texto */
    padding-right: 2rem; /* Espaçamento entre o texto e as imagens */
    display: flex; /* Permite alinhar o hero-content dentro dele */
    align-items: center; /* Centraliza verticalmente o hero-content dentro de hero-main-content */
}

/* Container do conteúdo (h1, p, btn) */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
  padding: 0;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInMoveUp 1s ease-out forwards;
  animation-delay: 0.5s;
  text-align: left;
}

.hero-content h1 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  line-height: 1.2;
}

.hero-content p {
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
  font-weight: 300;
  line-height: 1.6;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.btn-cta {
  background-color: #F05323;
  padding: 1.2rem 2.5rem;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  display: inline-block; /* DESKTOP: Botão como inline-block */
  margin-top: 2rem; 
}

.btn-cta:hover {
  background-color: #d9471c;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* Animação para o hero-content */
@keyframes fadeInMoveUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Bloco de imagens - ESTILOS PARA DESKTOP */
.hero-image-gallery {
    flex: 1;
    max-width: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px; /* Altura mínima para o container de imagens */
}

/* Esconder o carrossel mobile por padrão no desktop */
.hero-image-gallery .mobile-carousel {
    display: none;
}

/* Wrappers individuais para as imagens - ESTILOS PARA DESKTOP */
/* Os estilos de position: absolute, transform, etc., aplicam-se apenas a .desktop-only */
.image-wrapper.desktop-only {
    position: absolute; /* Permite sobreposição e posicionamento livre */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    opacity: 0; /* Inicia invisível para animação */
    transform: translateY(50px); /* Inicia mais baixo para animação de subida */
    transition: transform 0.8s ease-out, opacity 0.8s ease-out; /* Transição para animação */
}

.image-wrapper.desktop-only.animate-visible {
    opacity: 1;
    transform: translateY(0);
}

.image-wrapper.desktop-only img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Posicionamento individual das imagens para o efeito de sobreposição NO DESKTOP */
.image-wrapper.image-1.desktop-only {
    width: 380px;
    height: 280px;
    top: 50%;
    left: 50%;
    transform: translate(-90%, -100%);
    z-index: 1;
}

.image-wrapper.image-2.desktop-only {
    width: 420px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-30%, -30%);
    z-index: 2;
}

.image-wrapper.image-3.desktop-only {
    width: 350px;
    height: 250px;
    top: 50%;
    left: 50%;
    transform: translate(-70%, 50%);
    z-index: 3;
}

/* **MUDANÇAS PARA MOBILE** - Aplicado APENAS a partir de 992px para baixo */
@media (max-width: 992px) {
    .hero {
        flex-direction: column !important; /* FORÇA coluna no mobile */
        height: auto !important; /* Altura automática para conteúdo */
        padding: 4rem 1.5rem !important; /* Padding horizontal adequado */
        padding-top: 120px !important; /* ***FORÇADO: AFASTAR DO NAVBAR*** */
        padding-bottom: 4rem !important; /* Padding inferior para afastar do final da seção */
        text-align: center !important; /* Centraliza o hero inteiro quando em coluna */
        justify-content: center !important; /* Centraliza verticalmente */
        gap: 0 !important; /* Remove o gap entre hero-main-content e hero-image-gallery, vamos controlar margens */
    }

    /* Esconder as imagens de desktop no mobile */
    .hero-image-gallery .desktop-only {
        display: none !important;
    }

    /* Mostrar e estilizar o carrossel mobile */
    .hero-image-gallery .mobile-carousel {
        display: block !important; /* Garante que o carrossel seja visível */
        width: 100% !important;
        max-width: 500px !important; /* Limita a largura do carrossel no mobile */
        margin: 1.5rem auto 0 auto !important; /* Centraliza e adiciona margem superior */
    }

    .hero-image-gallery .mobile-carousel .swiper-slide img {
        width: calc(100% - 2rem) !important; /* Largura compensada */
        height: 250px !important; /* Altura fixa para as imagens do carrossel */
        object-fit: cover !important;
        border-radius: 10px !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
        margin: 0 1rem !important; /* Margem lateral */
        display: block !important; /* Garante que seja um bloco */
    }
    
    /* Estilos para os controles do Swiper (opcional, ajuste cores e tamanhos) */
    .swiper-pagination-bullet {
        background-color: #fff !important; /* Bolinhas brancas */
        opacity: 0.7 !important;
    }
    .swiper-pagination-bullet-active {
        background-color: #F05323 !important; /* Bolinha ativa laranja */
        opacity: 1 !important;
    }
    .swiper-button-next,
    .swiper-button-prev {
        color: #F05323 !important; /* Setas laranjas */
        background-image: none !important; /* Remove a imagem de fundo padrão do Swiper */
    }
    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 1.5rem !important; /* Tamanho do ícone da seta */
    }

    .hero-main-content {
        max-width: 100% !important; /* Ocupa a largura total no mobile */
        padding: 0 !important; /* Limpa qualquer padding lateral */
        margin: 0 auto !important; /* Centraliza o bloco */
        margin-bottom: 1rem !important; /* ***AJUSTADO: REDUZIDO O ESPAÇO ENTRE hero-main-content e hero-image-gallery*** */
        display: flex !important; /* Faz ele um flex container para centralizar o texto/botão */
        flex-direction: column !important; /* Conteúdo em coluna */
        align-items: center !important; /* Centraliza itens horizontalmente */
        text-align: center !important; /* Garante centralização do texto dentro deste bloco */
        order: 1 !important; /* Garante que o conteúdo do texto venha primeiro */
    }

    .hero-content {
        padding: 0 !important; /* Remove padding extra que pode ter */
        max-width: 100% !important; /* Ocupa a largura total disponível */
        animation: none !important; /* Desabilita a animação de entrada no mobile */
        opacity: 1 !important; /* Garante visibilidade */
        transform: none !important; /* Garante posição normal */
        position: static !important; /* Remove posicionamento absoluto */
        text-align: center !important; /* Força centralização do texto */
        margin-bottom: 0rem !important; /* ***AJUSTADO: REDUZIDO O ESPAÇO ENTRE TEXTO E BOTÃO*** */
        white-space: normal !important; /* Permite que o texto quebre linhas normalmente */
        word-wrap: break-word !important; /* Garante que palavras longas quebrem */
    }

    .hero-content h1 {
        font-size: 2.2rem !important; /* Ajuste para melhor leitura em mobile */
        text-align: center !important; /* Centraliza o H1 em mobile */
        margin-bottom: 0.1rem !important;
    }
    .hero-content p {
        font-size: 1.05rem !important; /* Ajuste para melhor leitura em mobile */
        text-align: center !important; /* Centraliza o P em mobile */
        margin-bottom: 1rem !important; /* Espaçamento abaixo do parágrafo, ajustado */
    }
    .btn-cta {
        max-width: 280px !important; /* Limita a largura do botão no mobile */
        margin: 0 auto !important; /* Centraliza o botão */
        display: block !important; /* O botão se torna um bloco para ocupar a largura limitada e centralizar */
    }

    .hero-image-gallery {
        min-height: auto !important; /* Remove altura mínima fixa */
        max-width: 100% !important; /* Ocupa a largura total no mobile */
        position: relative !important; /* Volta a ser relativo */
        height: auto !important;
        display: flex !important; /* Retorna a flex para o container da galeria em mobile para centralizar o carrossel */
        flex-direction: column !important; /* Para que o carrossel apareça como um bloco */
        align-items: center !important; /* Centraliza o carrossel */
        justify-content: center !important;
        order: 2 !important; /* Garante que a galeria de imagens venha depois do conteúdo do texto */
        padding-bottom: 0 !important; /* Remove padding-bottom aqui para não conflitar com o do .hero */
    }
}

@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2rem !important;
    }
    .hero-content p {
        font-size: 0.95rem !important;
    }
    .btn-cta {
        max-width: 250px !important;
    }
    .hero-image-gallery .mobile-carousel .swiper-slide img {
        height: 200px !important; /* Altura um pouco menor em tablets */
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 3rem 1rem !important; /* Ajuste para mobile extra pequeno */
        padding-top: 100px !important; /* Mantém um bom espaço para o navbar */
    }
    .hero-content h1 {
        font-size: 1.6rem !important;
    }
    .hero-content p {
        font-size: 0.85rem !important;
    }
    .btn-cta {
        max-width: 220px !important;
        padding: 1rem 2rem !important;
    }
    .hero-image-gallery .mobile-carousel .swiper-slide img {
        height: 180px !important; /* Altura menor em smartphones */
    }
}
/* Sobre */
.sobre {
    background: linear-gradient(to right, #e8f0f8, #f5fafd); /* Um gradiente suave em tons de azul/cinza claro */
    padding: 8rem 2rem; /* Aumentei o padding vertical para mais respiro */
    color: #333; /* Cor de texto padrão mais escura */
    overflow: hidden; /* Importante para o carrossel */
}

.sobre .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4rem; /* Aumentei o espaçamento entre o texto e a imagem/carrossel */
    max-width: 1200px; /* Limita a largura máxima do conteúdo */
    margin: 0 auto; /* Centraliza o container */
}

.sobre-texto {
    flex: 1;
    min-width: 320px; /* Aumentei a largura mínima para melhor leitura */
    max-width: 550px; /* Aumentei a largura máxima do bloco de texto */
    padding-right: 1rem; /* Pequeno padding à direita */
}

.sobre-texto h2 {
    font-size: 3.2rem; /* Tamanho do título maior e mais impactante */
    color: #0d2e4e; /* Azul escuro da sua paleta */
    margin-bottom: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.04em; /* Leve espaçamento negativo para título moderno */
}

.sobre-texto p {
    font-size: 1.25rem; /* Aumentei a fonte do parágrafo */
    line-height: 1.8; /* Aumentei a altura da linha para melhor leitura */
    margin-bottom: 1.5rem; /* Espaçamento entre parágrafos */
    color: #555; /* Cor um pouco mais suave que o título */
    text-align: center;
}

/* Estilos do Carrossel (Seção "Sobre") */
.carousel-container {
    flex: 1;
    min-width: 350px; /* Largura mínima para o carrossel */
    max-width: 600px; /* Largura máxima para o carrossel */
    height: 400px; /* Altura fixa para o carrossel */
    position: relative;
    border-radius: 15px; /* Bordas mais arredondadas */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); /* Sombra mais profunda */
    overflow: hidden; /* ESSENCIAL para esconder slides que não estão ativos */
    background-color: #fff; /* Fundo branco para o carrossel */
    /* Adicione estas duas linhas para o cursor de arrastar */
    cursor: grab; /* Cursor padrão para indicar que é arrastável */
    user-select: none; /* Previne que o texto seja selecionado ao arrastar */
}

.carousel-slides {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.8s ease-in-out; /* Transição suave para a mudança de slide */
}

.carousel-slide {
    min-width: 100%; /* Cada slide ocupa 100% da largura do carousel-container */
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem cubra todo o slide */
    border-radius: 15px; /* Bordas arredondadas para as imagens dentro do carrossel */
}

/* Indicadores de navegação (pontinhos na parte inferior) */
.carousel-indicators {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10; /* Garante que os indicadores fiquem por cima da imagem */
}

.indicator {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.6); /* Cor branca semi-transparente */
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.indicator.active {
    background-color: #F05323; /* Laranja ativo */
    border: 1px solid #F05323;
}

/* Estilos para os botões de navegação (próximo/anterior) */
.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5); /* Fundo semi-transparente */
    color: #fff; /* Cor do ícone/texto da seta */
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1.5rem; /* Tamanho da seta */
    z-index: 10; /* Para ficar acima do slide */
    border-radius: 5px; /* Bordas arredondadas para os botões */
    transition: background-color 0.3s ease;
    display: flex; /* Para centralizar o conteúdo do botão (a seta) */
    align-items: center;
    justify-content: center;
}

.carousel-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.carousel-button.prev {
    left: 10px;
}

.carousel-button.next {
    right: 10px;
}
/* Contadores */
.contadores {
    padding: 6rem 2rem; /* Aumentei o padding para dar mais respiro */
    background-color: #f8f8f8; /* Cor de fundo mais clara e neutra, menos "apagada" */
    text-align: center;
}

.contadores h2 {
    font-size: 3.2rem; /* Aumentei o tamanho da fonte para o título */
    color: #0d2e4e; /* Usei o azul escuro da sua identidade visual */
    margin-bottom: 3.5rem; /* Aumentei a margem inferior para separar do cards */
    font-weight: 700; /* Deixei a fonte mais encorpada */
    letter-spacing: -0.03em; /* Ajuste para espaçamento entre letras, comum em títulos modernos */
}

.stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem; /* Aumentei o espaçamento entre os cards */
    margin-top: 2rem; /* Mantido, mas a margem do h2 já dá bom espaçamento */
}

.stat-card {
    background: white;
    padding: 2.5rem 2rem; /* Ajustei o padding interno dos cards */
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* Sombra um pouco mais pronunciada e suave */
    width: 220px; /* Aumentei um pouco a largura do card para melhor visualização */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Adicionei transição para hover */
}

.stat-card:hover {
    transform: translateY(-5px); /* Efeito de "levantar" no hover */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* Sombra mais forte no hover */
}

.stat-card h3 {
    font-size: 2.8rem; /* Aumentei o tamanho da fonte dos números */
    color: #F05323; /* Mantido o laranja vibrante */
    margin-bottom: 0.5rem; /* Ajustei a margem para o parágrafo */
    font-weight: 700; /* Deixei mais forte */
    line-height: 1.1; /* Ajuste da altura da linha */
}

.stat-card p {
    font-size: 1.1rem; /* Tamanho da fonte do texto descritivo */
    color: #555; /* Cor de texto mais suave para a descrição */
    font-weight: 400; /* Peso normal da fonte */
}
/* Serviços */
.servicos {
    background-color: #f9f9f9;
    padding: 6rem 2rem;
    text-align: center;
    max-width: 100%;
    overflow-x: hidden; /* Evita scroll horizontal */
}

.servicos h2 {
    font-size: 3.2rem;
    color: #0d2e4e;
    margin-bottom: 3.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 2.5rem;
    margin-top: 2rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.card {
    background-color: white;
    border-left: 6px solid #F05323;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 230px;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.card h3 {
    font-size: 1.5rem;
    color: #0d2e4e;
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.card p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Blog */
.blog {
    padding: 6rem 2rem; /* Aumentei o padding vertical para mais respiro */
    background: #fdfdfd;
    text-align: center;
}

.blog h2 {
    font-size: 3.2rem; /* Tamanho da fonte maior e mais impactante, igual aos outros títulos */
    color: #0d2e4e; /* O azul escuro da sua identidade visual */
    margin-bottom: 3.5rem; /* Margem inferior para separar dos cards */
    font-weight: 700; /* Deixei a fonte mais encorpada */
    letter-spacing: -0.03em; /* Ajuste para espaçamento entre letras, comum em títulos modernos */
}

.blog .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Ajustei o minmax para cards ligeiramente maiores */
    gap: 2.5rem; /* Aumentei o espaçamento entre os cards */
    max-width: 1000px; /* Limita a largura máxima dos cards */
    margin: 0 auto; /* Centraliza os cards */
}

.blog .card {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08); /* Sombra um pouco mais pronunciada e suave */
    padding: 2rem;
    text-align: left; /* Alinha o texto do card à esquerda */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Adiciona transição para hover */
    display: flex; /* Transforma o card em flex para organizar melhor o conteúdo */
    flex-direction: column; /* Conteúdo em coluna */
    justify-content: space-between; /* Espaçamento entre os elementos */
    min-height: 250px; /* Garante uma altura mínima para os cards */
}

.blog .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); /* Sombra mais forte no hover */
}

.blog .card h3 {
    font-size: 1.6rem; /* Tamanho do título do artigo */
    color: #0d2e4e; /* Azul escuro */
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.blog .card p {
    font-size: 1.05rem; /* Tamanho do parágrafo do artigo */
    color: #666; /* Cor de texto mais suave */
    line-height: 1.6;
    flex-grow: 1; /* Faz o parágrafo ocupar o espaço restante */
}

.blog .card a {
    display: inline-block;
    margin-top: 1.5rem; /* Aumentei a margem superior para o link */
    color: #F05323; /* Laranja da sua identidade visual */
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog .card a:hover {
    color: #d9471c; /* Laranja mais escuro no hover */
}
/* Contato */
.contato {
    padding: 8rem 2rem; /* Mais padding para o conteúdo */
    background: linear-gradient(rgba(13, 46, 78, 0.7), rgba(13, 46, 78, 0.7)), url('../img/b02.PNG') no-repeat center center; /* Imagem de fundo com overlay */
    background-size: cover;
    background-attachment: fixed; /* Efeito Parallax */
    background-position: center; /* Garante que a imagem esteja centralizada */
    color: #fff; /* Texto em branco para contrastar com o fundo escuro */
    text-align: center;
    position: relative; /* Para posicionar elementos filhos, se necessário */
}

/* Título da seção Contato */
.contato h2 {
    font-size: 3.2rem; /* Tamanho da fonte maior e impactante */
    color: #fff; /* Título em branco */
    margin-bottom: 3.5rem; /* Margem inferior para separar do formulário */
    font-weight: 700;
    letter-spacing: -0.03em;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); /* Sombra para o título para destacá-lo */
}

.contato-content {
    max-width: 700px; /* Largura máxima do conteúdo para centralizar melhor */
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.95); /* Fundo branco semi-transparente para o formulário */
    padding: 3rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* Sombra mais forte para destacar o formulário */
    color: #333; /* Cor do texto dentro do container */
}

.formulario {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Aumentei o espaçamento entre os campos */
}

.formulario input,
.formulario select, /* <---- AQUI ESTÁ A MUDANÇA PRINCIPAL! Adicionado 'select' */
.formulario textarea {
    padding: 1.2rem 1.5rem; /* Aumentei o padding */
    border: 1px solid #ddd; /* Borda mais suave */
    border-radius: 10px; /* Bordas mais arredondadas */
    font-size: 1.1rem; /* Fonte maior nos campos */
    color: #333;
    background-color: #fcfcfc; /* Fundo levemente off-white */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    /* Estilos específicos para o SELECT para remover o padrão do navegador e adicionar seta */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13.2-6.4H18.8c-7.7%200-13.5%204.8-13.5%2012.7s5.8%2012.7%2013.5%2012.7h255c7.7%200%2013.5-4.8%2013.5-12.7%200-3.9-1.9-7.5-5.5-10.4z%22%2F%3E%3C%2Fsvg%3E'); /* Seta personalizada SVG */
    background-repeat: no-repeat;
    background-position: right 1.5rem center; /* Ajusta a posição da seta */
    background-size: 10px; /* Tamanho da seta */
    cursor: pointer;
}

.formulario input:focus,
.formulario select:focus, /* <---- AQUI TAMBÉM! Adicionado 'select' */
.formulario textarea:focus {
    border-color: #F05323; /* Borda laranja ao focar */
    box-shadow: 0 0 0 3px rgba(240, 83, 35, 0.2); /* Sombra suave ao focar */
    outline: none; /* Remove o outline padrão do navegador */
}

.formulario textarea {
    resize: vertical; /* Permite redimensionar verticalmente */
    min-height: 120px; /* Altura mínima para o textarea */
}

.formulario button {
    background-color: #F05323; /* Laranja vibrante */
    padding: 1.4rem 2rem; /* Aumentei o padding do botão */
    border: none;
    border-radius: 50px; /* Botão mais arredondado (pílula) */
    font-weight: bold;
    color: white;
    font-size: 1.2rem; /* Fonte maior no botão */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    display: flex; /* Para centralizar o ícone e texto */
    align-items: center;
    justify-content: center;
    gap: 0.8rem; /* Espaçamento entre o ícone e o texto */
}

.formulario button i {
    font-size: 1.4rem; /* Tamanho do ícone do WhatsApp */
}

.formulario button:hover {
    background-color: #d9471c; /* Laranja mais escuro no hover */
    transform: translateY(-3px); /* Efeito de "levantar" no hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Sombra mais forte no hover */
}

.whatsapp-direto {
    margin-top: 1.5rem;
    font-size: 1.1rem;
    color: #666; /* Cor do texto */
}

.whatsapp-direto a {
    color: #F05323; /* Laranja para o link */
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.whatsapp-direto a:hover {
    color: #d9471c;
    text-decoration: underline;
}

/* Estilo para a opção placeholder do select */
.formulario select option[value=""][disabled] {
    color: #999; /* Cor cinza mais clara, similar a um placeholder */
}

/* Garante que as opções selecionadas tenham a cor normal do texto */
.formulario select:not(:valid) {
    color: #999; /* Aplica a cor do placeholder quando a opção padrão está selecionada */
}

.formulario select:valid {
    color: #333; /* Cor normal do texto quando uma opção válida é selecionada */
}

/* Media Queries para responsividade do Contato */
@media (max-width: 992px) {
    .contato {
        padding: 6rem 1.5rem;
    }
    .contato h2 {
        font-size: 2.8rem;
        margin-bottom: 2.5rem;
    }
    .contato-content {
        padding: 2.5rem;
    }
    .formulario input,
    .formulario select, /* <---- E AQUI! */
    .formulario textarea {
        padding: 1rem 1.2rem;
        font-size: 1rem;
    }
    .formulario select { /* Ajuste da seta para telas menores */
        background-position: right 1.2rem center;
    }
    .formulario button {
        padding: 1.2rem 1.5rem;
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .contato {
        padding: 5rem 1rem;
    }
    .contato h2 {
        font-size: 2.4rem;
        margin-bottom: 2rem;
    }
    .contato-content {
        padding: 2rem;
    }
    .formulario button {
        font-size: 1rem;
        gap: 0.5rem;
    }
    .formulario button i {
        font-size: 1.2rem;
    }
    .whatsapp-direto {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .contato {
        padding: 4rem 1rem;
    }
    .contato h2 {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }
    .contato-content {
        padding: 1.5rem;
        border-radius: 10px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    }
    .formulario input,
    .formulario select, /* <---- E PELA ÚLTIMA VEZ, AQUI! */
    .formulario textarea {
        padding: 0.8rem 1rem;
        font-size: 0.95rem;
        border-radius: 8px;
    }
    .formulario select { /* Ajuste da seta para telas muito pequenas */
        background-position: right 1rem center;
    }
    .formulario button {
        padding: 1rem;
        font-size: 0.95rem;
    }
}
/* Footer */
footer {
    text-align: center;
    padding: 3rem 2rem; /* Aumentei o padding para dar mais espaço */
    background-color: #0d2e4e; /* Cor azul escuro da sua paleta */
    color: white;
    font-size: 1rem; /* Fonte um pouco maior para o copyright */
    position: relative;
    z-index: 10; /* Garante que o footer fique acima de outros elementos se houver sobreposição */
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 1200px; /* Limita a largura do conteúdo do footer */
    margin: 0 auto; /* Centraliza o conteúdo */
}

.footer-social {
    margin-bottom: 1.5rem; /* Espaço entre os ícones e o copyright */
    display: flex;
    gap: 1.5rem; /* Espaçamento entre os ícones */
}

.footer-social a {
    color: white;
    font-size: 1.8rem; /* Tamanho dos ícones */
    transition: color 0.3s ease, transform 0.2s ease;
    text-decoration: none; /* Remove sublinhado padrão do link */
    padding: 0.5rem; /* Área clicável maior */
    border-radius: 50%; /* Faz o padding ficar redondo */
}

.footer-social a:hover {
    color: #F05323; /* Laranja no hover */
    transform: translateY(-3px) scale(1.1); /* Leve efeito de "levantar" e aumentar */
}

footer p {
    font-size: 0.95rem; /* Mantém o tamanho do copyright */
    margin: 0; /* Remove margem padrão de parágrafo */
    opacity: 0.8; /* Torna o texto um pouco mais suave */
}

/* Media Queries para o Footer */
@media (max-width: 768px) {
    footer {
        padding: 2.5rem 1rem;
        font-size: 0.9rem;
    }
    .footer-social {
        margin-bottom: 1rem;
        gap: 1.2rem;
    }
    .footer-social a {
        font-size: 1.6rem;
    }
    footer p {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    footer {
        padding: 2rem 0.8rem;
    }
    .footer-social {
        gap: 1rem;
    }
    .footer-social a {
        font-size: 1.4rem;
    }
}

.card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}
/* Passos */
.passos {
    background: linear-gradient(to right, #ff6600, #004aad);
    color: white;
    padding: 60px 20px;
}

.passos h2 {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 60px;
    color: white;
}

.timeline {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 10px;
    background: white;
    border-radius: 10px;
    transform: translateX(-50%);
    z-index: 1;
}

/* Novo wrapper para cada passo e seu sol */
.passo-wrapper {
    position: relative;
    display: flex;
    align-items: center; /* Alinha verticalmente os itens (sol e passo) */
    margin-bottom: 60px; /* Espaço entre os passos */
    min-height: 120px; /* Altura mínima para garantir bom espaçamento e alinhamento do sol */
    width: 100%; /* Ocupa a largura total do timeline */
}

/* Regras para alternar os lados dos cards usando o passo-wrapper */
/* Ajuste aqui para usar a margem negativa nos .passo para afastar da linha */
.passo-wrapper:nth-child(odd) { /* Para os passos ímpares (1º, 3º, 5º) */
    justify-content: flex-end; /* Empurra o conteúdo para a direita da timeline */
}

.passo-wrapper:nth-child(even) { /* Para os passos pares (2º, 4º, 6º) */
    justify-content: flex-start; /* Empurra o conteúdo para a esquerda da timeline */
}

.passo {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    max-width: calc(50% - 40px); /* Limitando a largura para 50% menos a distância de 40px */
    flex-grow: 1; /* Permite que o passo cresça para preencher o espaço disponível até o max-width */
    flex-shrink: 1; /* Permite encolher se necessário */
    padding: 20px; /* O padding do conteúdo já está no .conteudo, aqui é para o próprio .passo se precisar */
}

/* O conteúdo do card */
.passo .conteudo {
    background: white;
    color: #222;
    padding: 20px; /* Padding interno do conteúdo */
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    z-index: 2;
    width: 100%; /* Garante que o conteúdo ocupe a largura total do .passo */
}

/* O sol agora é posicionado em relação ao .passo-wrapper */
.passo-wrapper .sol {
    position: absolute;
    left: 50%; /* Centraliza o sol na linha do tempo */
    transform: translateX(-50%); /* Ajuste final para centralizar perfeitamente o sol */
    width: 60px;
    height: 60px;
    font-size: 36px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3; /* Garante que o sol fique acima da linha e dos cards */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    pointer-events: none; /* Impede que o sol seja clicável ou interfira com outros eventos */
}


/* Lados dos passos: USANDO MARGIN NEGATIVA E WIDTH AJUSTADO */
.passo.esquerda {
    text-align: right; /* Alinha o texto dentro do card à direita */
    margin-right: -40px; /* Puxa o card para a esquerda, criando 40px de espaço na direita */
    /* Removido padding-right, pois o margin-right faz o espaçamento */
}

.passo.direita {
    text-align: left; /* Alinha o texto dentro do card à esquerda */
    margin-left: -40px; /* Puxa o card para a direita, criando 40px de espaço na esquerda */
    /* Removido padding-left, pois o margin-left faz o espaçamento */
}

/* Animação opcional futura */
[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate].visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsivo */
/* Responsivo */
@media (max-width: 768px) {
    .timeline::before {
        left: 20px; /* Alinha a linha do tempo à esquerda em telas menores */
    }

    .passo-wrapper {
        flex-direction: column; /* Conteúdo em coluna (sol e card) */
        align-items: flex-end; /* ***NOVO: Alinha o conteúdo (card) à DIREITA do passo-wrapper*** */
        min-height: auto;
        margin-bottom: 40px;
        justify-content: flex-end; /* ***NOVO: Empurra o passo-wrapper para a DIREITA*** */
    }

    /* Em mobile, sobrescrevemos as regras nth-child e de margem para garantir que todos os cards fiquem à direita */
    .passo-wrapper:nth-child(odd),
    .passo-wrapper:nth-child(even) {
        justify-content: flex-end; /* Garante que todos os cards fiquem à direita */
    }

    .passo {
        width: calc(100% - 60px); /* Ocupa a largura total menos o espaço para a linha e sol à esquerda */
        max-width: 100%;
        flex-direction: row; /* Conteúdo interno do card em linha (se houver ícones e texto) */
        padding-left: 15px; /* Padding interno à esquerda do card */
        padding-right: 15px; /* Padding interno à direita do card */
        text-align: left; /* Texto dentro do card alinhado à esquerda */
        margin-left: 0; /* Remove margens negativas de desktop */
        margin-right: 0; /* Remove margens negativas de desktop */
    }

    .passo.esquerda, .passo.direita { /* Garante que ambos os tipos de card se comportem da mesma forma em mobile */
        left: auto; /* Remove posicionamento fixo de esquerda/direita */
        right: 0; /* Alinha o card à direita do seu container */
        margin-right: 0; /* Garante que não haja margens indesejadas */
        margin-left: auto; /* ***NOVO: Empurra o card para a extrema direita disponível*** */
        padding-left: 15px; /* Mantém o padding interno para o texto */
        padding-right: 15px; /* Mantém o padding interno para o texto */
    }

    .passo .conteudo {
        padding: 15px; /* Padding interno do conteúdo do card */
    }

    .passo-wrapper .sol {
        position: absolute; /* O sol é posicionado absolutamente em relação ao passo-wrapper */
        left: 20px; /* ***NOVO: Posiciona o sol na mesma linha da timeline (20px da esquerda)*** */
        width: 40px; /* ***NOVO: Diminui a largura do sol*** */
        height: 40px; /* ***NOVO: Diminui a altura do sol*** */
        font-size: 24px; /* ***NOVO: Diminui o tamanho da fonte do sol*** */
        transform: translateY(-50%); /* Ajuste para centralizar verticalmente na linha */
        top: 50%; /* Alinha o sol ao centro vertical do passo-wrapper */
        margin-bottom: 0; /* Remove margem inferior */
        margin-right: 0; /* Remove margem direita */
    }

    /* Ajuste para o texto dentro do card para mobile */
    .passo .conteudo h3 {
        font-size: 1.1em;
        text-align: left;
    }
    .passo .conteudo p {
        font-size: 0.9em;
        text-align: left;
    }
}