/* ESTILO GERAL */
body {
  margin:0; /* Garante que não haja margem padrão no body */
  font-family: Arial, sans-serif;
  color: #333;
}

/* --- CABEÇALHO --- */
header {
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  padding: 15px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky; /* Fixa o cabeçalho no topo */
  top: 0;
  z-index: 1000;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaço entre a imagem e o texto */
}

.logo-container p {
    color: #005a9c; /* Cor azul escuro */
    font-size: 1.5em;
    font-weight: bold;
    margin: 0; /* Remove margens padrão */
}

.logo img {
  height: 50px; /* Ajuste a altura da sua logo conforme necessário */
  display: block; /* Remove espaços extras embaixo da imagem */
}

header nav {
  margin-top: 0;
  display: flex;
  align-items: center;
}

header nav a {
  color: #333;
  margin: 0 15px;
  text-decoration: none;
  font-weight: bold;
  padding-bottom: 10px; /* Espaço para a borda */
  border-bottom: 3px solid transparent; /* Borda invisível */
  transition: color 0.3s, border-bottom 0.3s;
  display: flex;
  align-items: center;
  gap: 5px; /* Espaço entre o texto e o ícone */
}

header nav a:hover {
  color: #007bff; /* Cor ao passar o mouse */
}

header nav a.active {
  color: #28a745; /* Cor verde do exemplo */
  border-bottom: 3px solid #28a745;
}

/* Ícone do Menu (Mantido Verde) */
.nav-whatsapp-icon {
    color: #25D366;
    font-size: 17px;
}

/* SLIDES */
.slideshow-container {
  position: relative;
  max-width: 100%;
  height: 750px; /* Altura aumentada */
  overflow: hidden;
}

/* --- REGRA MODIFICADA --- */
.slide {
  width: 100%;
  height: 100%; /* Ocupa 100% da altura do slideshow-container */
  background-size: cover;
  background-position: center center; /* Centralizado */
  background-repeat: no-repeat;
  
  /* Adições para centralizar texto e adicionar filtro */
  position: relative; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  display: none; /* Oculta por padrão (JS controla) */
}

/* --- ESTA REGRA AGORA FUNCIONARÁ --- */
#slide-principal {
  background-image: url('Fotos/slide-principal-mobile.jpg');
}

@media (min-width: 769px) {
  #slide-principal {
    background-image: url('Fotos/slide-principal-desktop.jpg');
  }
}

/* --- REGRA MODIFICADA --- */
.active-slide {
  display: flex; /* MODIFICADO DE 'block' PARA 'flex' */
  animation: fade 0.5s;
}
@keyframes fade {
  from {opacity: 0}
  to {opacity: 1}
}

/* --- ADICIONADO: Estilo das setas --- */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.3s ease;
  border-radius: 0 3px 3px 0;
  user-select: none; /* Impede que o texto seja selecionado */
  background-color: rgba(0, 0, 0, 0.3); /* Fundo leve */
  z-index: 5; /* Garante que fiquem acima do conteúdo do slide */
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev {
  left: 0;
}

.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.7);
}
/* --- FIM Estilo das setas --- */


/* --- INÍCIO: ESTILOS PARA O SLIDESHOW COM TEXTO E FILTRO (Estilo HVAC ATUALIZADO) --- */
            
/* 1. Adiciona o filtro preto (overlay) em cada slide */
.slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* Preto com 40% de opacidade */
  z-index: 1; /* Fica acima da imagem de fundo */
}

/* 2. Estiliza o contêiner de texto */
.slide-content {
  position: relative; /* Para ficar na frente do filtro */
  z-index: 2; /* Fica acima do ::before */
  color: white;
  text-align: center;
  padding: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para legibilidade */
}

/* 3. Título Principal (H2) - Estilo HVAC */
.slide-content h2 {
  color: white; 
  font-size: 3em;  /* Tamanho grande */
  margin-bottom: 0; /* Remove margem inferior */
  font-weight: 700; /* Negrito */
  text-transform: uppercase; /* TUDO EM MAIÚSCULO */
}

/* 4. ADICIONADO: Linha divisória */
.slide-content h2::after {
  content: '';
  display: block;
  width: 200px; /* Largura da linha */
  height: 2px;  /* Espessura da linha */
  background-color: white;
  /* Centraliza a linha e dá espaço (15px acima/abaixo) */
  margin: 15px auto; 
}

/* 5. Subtexto (P) - Estilo HVAC */
.slide-content p {
  font-size: 1.1em;
  margin-top: 0; /* Remove margem superior */
  text-transform: uppercase; /* TUDO EM MAIÚSCULO */
  line-height: 1.6; /* Espaçamento entre linhas */
  max-width: 800px; /* Largura máxima do texto */
  margin-left: auto; /* Centraliza o bloco de texto */
  margin-right: auto; /* Centraliza o bloco de texto */
}

/* --- FIM: ESTILOS DO SLIDESHOW --- */


.container { width: 90%; max-width: 1200px; margin: auto; padding: 40px 0; }
h2 { color: #005a9c; text-align: center; margin-bottom: 30px;} /* Centralizado e com mais espaço abaixo */
.servicos { display: flex; flex-wrap: wrap; gap: 20px; }

.servico {
  flex:1 1 300px;
  background: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  text-align:center;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Adiciona transição suave */
}

/* Efeito Hover nos cards de serviço */
.servico:hover {
    transform: translateY(-5px); /* Levanta um pouco o card */
    box-shadow: 0 8px 15px rgba(0,0,0,0.1); /* Adiciona uma sombra mais pronunciada */
}


.sobre-lista {
  list-style: none;
  padding: 0;
}
.sobre-lista li {
  margin-bottom: 15px;
  line-height: 1.6;
  text-align: justify;
}

/* --- REGRAS PARA SERVIÇOS COM IMAGENS --- */
.servico-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 15px;
}

.servico h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #005a9c;
    min-height: 40px; /* Garante altura mínima para alinhar títulos de 1 ou 2 linhas */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Dentro de @media (max-width: 768px) { ... } */

.marcas-carousel-inner {
  animation-duration: 6s; /* Mais rápido: 30 segundos no celular */
}
.servico p { /* Descrição principal do serviço */
    font-size: 0.95em;
    color: #555;
    line-height: 1.5;
    text-align: justify;
    margin-top: auto;
}
/* --- FIM DAS REGRAS DE SERVIÇOS --- */

.portfolio-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 25px;
}
.portfolio-gallery img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
.portfolio-gallery img:hover {
    transform: scale(1.03);
}

.map-container {
    margin-top: 30px;
}
.map-container iframe {
    border: 2px solid #ddd;
    border-radius: 8px;
    width: 100%;
    height: 350px;
}

footer {
  background: #222;
  color: #ccc;
  padding: 40px 5%;
  text-align:center;
}

.footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 25px;
  gap: 15px;
}

.footer-nav a {
  color: #ccc;
  text-decoration: none;
  margin: 0 10px;
  font-weight: bold;
  font-size: 0.9em;
  transition: color 0.3s;
}

.footer-nav a:hover {
  color: #fff;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 25px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #005a9c;
  color: #005a9c;
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-social a:hover {
  background-color: #005a9c;
  color: #fff;
  border-color: #005a9c;
}

.footer-social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.copyright {
  font-size: 0.9em;
  color: #888;
  margin: 0;
}

.copyright a {
  color: #005a9c;
  text-decoration: none;
  font-weight: bold;
}

.copyright a:hover {
  text-decoration: underline;
}

.contato-form { max-width: 500px; margin:auto; }
.contato-form input, .contato-form textarea {
  width: 100%; padding: 10px; margin: 8px 0; border: 1px solid #aaa; border-radius: 4px;
}
.contato-form button {
  background: #005a9c; color: white; border: none; padding: 12px 20px;
  cursor: pointer; border-radius: 4px; font-size: 1em;
}

.whatsapp-button {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background-color: #25D366;
    color: white;
    padding: 12px 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.25);
    z-index: 1001;
    transition: transform 0.2s ease-in-out;
    font-size: 1em;
}
.whatsapp-button:hover {
    transform: scale(1.05);
}

.whatsapp-button i {
    font-size: 24px;
    color: white;
}
.whatsapp-button span {
    display: block;
}
/* Dentro de @media (max-width: 768px) */

.contato-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
  max-width: 500px;
  margin: 30px auto;
}
.info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.05em;
}
.info-item i {
  font-size: 1.4em;
  color: #005a9c;
  width: 25px;
  text-align: center;
}
.info-item a, .info-item span {
  color: #333;
  text-decoration: none;
  font-weight: 500;
}
.info-item a:hover {
  color: #007bff;
}

.orcamento-button-container {
  text-align: center;
  margin: 40px 0;
}

.orcamento-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #FFC107;
  color: #003366;
  padding: 15px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease; /* Adicionada transição */
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* --- MODIFICADO: Efeito :hover com animação --- */
.orcamento-button:hover {
  background-color: #FFB300;
  
  /* Aplica a animação 'pulse' que acabamos de criar */
  animation: pulse 1s ease-in-out infinite;
}

.orcamento-button i {
  font-size: 1.2em;
}

/* --- REGRAS ATUALIZADAS PARA CARROSSEL DE MARCAS --- */
.marcas-carousel-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 30px;
  padding: 15px 0;
  background: #f8f9fa;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.marcas-carousel-inner {
  display: flex;
  /* ATUALIZADO: Velocidade do desktop alterada de 60s para 40s (mais rápido) */
  animation: scrollLogos 30s linear infinite;
}

.marcas-carousel-container:hover .marcas-carousel-inner {
  animation-play-state: paused;
}

.marcas-carousel-inner img {
  height: 50px;
  width: auto;
  max-width: 150px;
  margin: 0 25px;
  object-fit: contain;
  transition: transform 0.3s ease;
  flex-shrink: 0; /* <<< ADICIONADO: Impede que as imagens encolham */
}

.marcas-carousel-inner img:hover {
  transform: scale(1.1);
}

/* Animação de rolagem */
@keyframes scrollLogos {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* Rola exatamente o primeiro set de logos */
  }
}
/* --- FIM DAS REGRAS DO CARROSSEL --- */


/* --- ADICIONADO: Animação Pulsante para Botão --- */
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  }
  50% {
    transform: scale(1.05); /* Aumenta o botão em 5% */
    box-shadow: 0 6px 12px rgba(0,0,0,0.25); /* Aumenta a sombra */
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  }
}


/* RESPONSIVIDADE */
@media (max-width: 768px) {
  header {
    flex-direction: column;
  }
  header nav {
    margin-top: 15px;
  }
  header nav a {
    margin: 0 8px;
    font-size: 0.9em;
  }
  /* MODIFICADO: Altura do slideshow para mobile */
  .slideshow-container {
    height: 400px; /* Altura aumentada */
    max-width: 100%; 
    margin: 0; 
    box-shadow: none; 
  }

  .slide {
    height: 100%; 
    background-position: center center; /* Centralizado */
  }
  
  .servicos {
    flex-direction: column;
  }

  .servico-img {
    height: 150px;
  }

  .whatsapp-button {
    padding: 12px;
    border-radius: 50%;
    right: 15px;
    bottom: 15px;
  }
  .whatsapp-button span {
    display: none;
  }

  .whatsapp-button i {
    font-size: 28px;
  }

  .contato-info {
      align-items: flex-start;
      padding-left: 10px;
  }

  /* Ajuste responsivo para logos das marcas */
  .marcas-carousel-inner img {
    height: 40px;
    margin: 0 15px;
  }
  
  /* --- CORRIGIDO: Regra de velocidade do carrossel para celular --- */
  .marcas-carousel-inner {
    animation-duration: 15s; 
  }

  /* --- INÍCIO: AJUSTES DO SLIDESHOW PARA MOBILE --- */
  
  /* Ajusta as setas */
  .prev, .next {
    padding: 10px;          /* Diminui o preenchimento (área de clique) */
    font-size: 18px;        /* Diminui o tamanho do ícone da seta */
    margin-top: -18px;      /* Re-centraliza verticalmente */
    background-color: rgba(0, 0, 0, 0.25); /* Fundo um pouco mais sutil */
  }

  /* Ajusta os textos */
  .slide-content h2 {
    font-size: 1.8em;  /* Título um pouco menor para caber melhor */
  }
  
  .slide-content h2::after {
    width: 120px;      /* Linha divisória menor */
    margin: 10px auto; /* Menos espaço vertical */
  }

  .slide-content p {
    font-size: 0.9em;  /* Texto descritivo um pouco menor */
    max-width: 90%;    /* Garante que o texto não encoste nas laterais */
    line-height: 1.5;  /* Melhora a leitura */
  }
  /* --- FIM: AJUSTES DO SLIDESHOW PARA MOBILE --- */
  
}
/* <-- CORRIGIDO: O '}' extra foi removido daqui */