/* Estilos específicos para a página Index (Home) */

/* Banner Section - Restaurado para o design original (apenas imagem) */
.banner {
  position: relative;
  overflow: hidden;
  background-color: var(--cor-primaria); /* Fundo caso a imagem não carregue */
  /* Garante que o banner não tenha margem superior que possa ser a faixa azul */
  margin-top: 0;
}

.banner-wrapper {
  position: relative;
}

/* NOVO: Estilo para o link do banner, para que ocupe todo o espaço da imagem */
.banner-link {
  display: block; /* Garante que o link ocupe toda a largura/altura */
  width: 100%;
  height: 100%;
  text-decoration: none; /* Remove sublinhado padrão do link */
  line-height: 0; /* Remove espaço extra que alguns navegadores adicionam ao redor de imagens em links */
}

.banner-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  /* Isso é importante para remover qualquer espaço extra abaixo da imagem */
  vertical-align: middle;
}

/* ============================================= */
/* ===== SEÇÃO DE BOAS-VINDAS COM IMAGEM ===== */
/* ============================================= */

/* Estilização da Seção de Boas-Vindas com Imagem */
.secao-boas-vindas .boas-vindas-grid {
  display: grid;
  grid-template-columns: 2fr 1fr; /* Coluna de texto um pouco maior que a da imagem */
  align-items: center;
  gap: 3rem; /* Espaçamento entre o texto e a imagem */
}

.secao-boas-vindas .boas-vindas-texto {
  text-align: left; /* Alinha o texto à esquerda no layout de grid */
}

/* Sobrescreve a centralização padrão dos títulos para este layout específico */
.secao-boas-vindas .boas-vindas-texto .heading--secondary,
.secao-boas-vindas .boas-vindas-texto .subtitulo {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.boas-vindas-imagem img {
  width: 320px;
  height: 320px;
  object-fit: cover; /* Garante que a imagem preencha o círculo sem distorcer */
  border-radius: 15%; /* Deixa a imagem redonda */
  border: 6px solid var(--cor-secundaria); /* Usa a cor azul clara do seu site para a borda */
  box-shadow: var(--sombra-media); /* Usa a sombra padrão do seu site para um efeito de profundidade */
  margin: 0 auto; /* Centraliza a imagem na sua coluna */
  display: block;
}

/* --- Responsividade --- */
@media (max-width: 992px) {
  .secao-boas-vindas .boas-vindas-grid {
      gap: 2rem;
  }
  .boas-vindas-imagem img {
      width: 280px;
      height: 280px;
  }
}

@media (max-width: 768px) {
  .secao-boas-vindas .boas-vindas-grid {
      grid-template-columns: 1fr; /* Layout de uma coluna única em telas menores */
  }

  .boas-vindas-imagem {
      order: 1; /* Coloca a imagem ANTES do texto em telas mobile */
      margin-bottom: 1.5rem;
  }

  .secao-boas-vindas .boas-vindas-texto {
      order: 2; /* Coloca o texto DEPOIS da imagem em telas mobile */
      text-align: center; /* Centraliza o texto no mobile */
  }

  .secao-boas-vindas .boas-vindas-texto .heading--secondary,
  .secao-boas-vindas .boas-vindas-texto .subtitulo {
      text-align: center; /* Garante a centralização dos títulos */
  }

  .boas-vindas-imagem img {
      width: 220px;
      height: 220px;
  }
}

/* ============================================= */
/* ===== FIM DA SEÇÃO DE BOAS-VINDAS       ===== */
/* ============================================= */

/* Tipos de Planos / Serviços Grid Section */
.servicos-home-section {
  background-color: var(--cor-terciaria); /* Fundo da seção: bege */
  padding: var(--espacamento-grande) 0;
}

/* ADICIONADO: Classe específica para o subtítulo desta seção, removendo o estilo inline do HTML */
.servicos-home-section .servicos-subtitulo {
  color: var(--cor-primaria); /* Cor do subtítulo: azul primário */
}

/* REMOVIDO: .servicos-home-section .heading--primary, .servicos-home-section .subtitulo { color: var(--cor-primaria); }
  MOTIVO: O subtítulo foi movido para a classe .servicos-subtitulo.
  O heading--primary é uma classe mais genérica e a cor já é definida por padrão para fundos claros em styles.css. */


.servicos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: var(--espacamento-grande);
}

.servico {
  background-color: var(--cor-fundo-claro); /* Fundo do card: bege claro para melhor contraste */
  border-radius: var(--borda-radius);
  padding: var(--espacamento-grande);
  box-shadow: var(--sombra-suave);
  transition: var(--transicao-media);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
}

.servico:hover,
.servico:focus-within {
  transform: translateY(-5px);
  box-shadow: var(--sombra-media);
}

.servico-img {
  max-width: 300px;
  height: auto;
  border-radius: var(--borda-radius);
  margin-bottom: var(--espacamento-medio);
  transition: var(--transicao-media);
}

.servico:hover .servico-img {
  transform: scale(1.05);
}

.servico p {
  margin-bottom: var(--espacamento-grande);
  flex-grow: 1;
}

.botao-servico {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background-color: var(--cor-primaria);
  color: var(--cor-terciaria);
  border-radius: var(--borda-radius);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transicao-rapida);
  margin-top: auto;
}

.botao-servico:hover,
.botao-servico:focus {
  background-color: #003366;
  transform: translateY(-2px);
}


/* Mapa Brasil Section */
.mapa-brasil-section {
  background-color: var(--cor-primaria); /* Azul escuro */
  text-align: center;
}

.mapa-brasil-container {
  display: flex;
  align-items: center;
  gap: var(--espacamento-grande);
}

.mapa-brasil-imagem {
  flex: 0 0 35%;
}

.mapa-brasil-img {
  max-width: 100%;
  height: auto;
  border-radius: var(--borda-radius);
  box-shadow: var(--sombra-media);
}

.mapa-brasil-content {
  flex: 0 0 60%;
  text-align: left;
}

.mapa-brasil-content p {
  margin-bottom: var(--espacamento-medio);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--cor-terciaria); /* Bege claro */
}

.mapa-brasil-content h2,
.mapa-brasil-content .subtitulo {
  text-align: left;
  color: var(--cor-terciaria); /* Bege claro */
}


/* Diferenciais Section */
.diferenciais-section {
  background-color: var(--cor-fundo-claro); /* Fundo claro para esta seção */
}

/* REMOVIDO: background-color: var(--cor-fundo-medio); do .diferenciais-section
  MOTIVO: Alterado para 'var(--cor-fundo-claro)' para manter a consistência com
  o fundo do body e outros elementos, criando um visual mais "limpo" e harmônico.
  O azul médio já é usado na header e em outros pontos. */

.diferenciais-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  margin-top: var(--espacamento-grande);
}

.diferencial-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--espacamento-grande);
  background-color: #fff; /* Fundo branco para os cards de diferencial */
  border-radius: var(--borda-radius);
  box-shadow: var(--sombra-suave);
  transition: var(--transicao-media);
}

/* REMOVIDO: background-color: #fefcea; do .diferencial-item
  MOTIVO: Alterado para 'white' (#fff) para um contraste mais nítido e "clean"
  com o fundo claro da seção, mantendo a consistência com a identidade visual. */

.diferencial-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-media);
}

.diferencial-icon {
  font-size: 2.5rem;
  color: var(--cor-primaria);
  margin-bottom: var(--espacamento-medio);
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  background-color: rgba(137, 176, 211, 0.3); /* Círculo de fundo com leve transparência */
  display: inline-block;
}

.diferencial-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: var(--espacamento-pequeno);
  color: var(--cor-primaria);
}


/* Depoimentos Section */
.depoimentos-section {
  background-color: var(--cor-terciaria); /* Mantido bege */
  color: var(--cor-texto);
}

.depoimentos-container {
  position: relative;
  padding: var(--espacamento-medio) 0;
  overflow: hidden; /* Garante que os slides que não estão visíveis fiquem escondidos */
}

.depoimentos-slider {
  display: flex;
  flex-wrap: nowrap; /* Impede quebra de linha dos slides */
  transition: transform 0.5s ease-in-out;
  width: 100%;
}

.depoimento {
  flex: 0 0 100%; /* Cada depoimento ocupa 100% da largura do contêiner */
  max-width: 100%;
  box-sizing: border-box;
  scroll-snap-align: start; /* Ajuda na rolagem se for implementado scroll-snapping */
  padding: var(--espacamento-grande);
  background-color: rgba(57, 90, 125, 0.1); /* Cor de fundo do card de depoimento */
  border-radius: var(--borda-radius);
  margin: 0; /* Remove margens extras que poderiam atrapalhar o cálculo do transform */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.depoimento:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-media);
}

/* Ícones de aspas decorativos */
/* ADICIONADO: Posicionamento absoluto e ajuste para as aspas decorativas para melhor UX/UI */
.depoimento-texto {
  font-style: italic;
  margin-bottom: var(--espacamento-medio);
  position: relative; /* Essencial para o posicionamento das aspas pseudo-elementos */
  padding: 0 20px; /* Adiciona padding para o texto não ficar grudado nas aspas */
}

.depoimento-texto::before,
.depoimento-texto::after {
  content: '"';
  font-size: 3.5rem; /* Aumenta o tamanho das aspas */
  color: var(--cor-primaria);
  position: absolute;
  opacity: 0.15; /* Reduz levemente a opacidade para não distrair */
  line-height: 1; /* Ajusta a altura da linha para aspas */
}

.depoimento-texto::before {
  top: 0px; /* Ajusta a posição superior */
  left: 0px; /* Ajusta a posição lateral */
}

.depoimento-texto::after {
  bottom: -5px; /* Ajusta a posição inferior */
  right: 0px; /* Ajusta a posição lateral */
  transform: rotate(180deg); /* Gira a segunda aspa para parecer mais natural */
}

/* Ajustes na cor dos títulos para depoimentos, removendo !important */
.depoimentos-section .heading--primary,
.depoimentos-section .subtitulo {
  color: var(--cor-primaria); /* Garante a cor primária sem !important */
}


.depoimento-autor {
  font-weight: 700;
  margin-top: var(--espacamento-pequeno);
}

.depoimento-cargo {
  font-size: 0.9rem;
  opacity: 0.8;
}

.depoimento-estrelas {
  color: #FFD700; /* Cor padrão de estrela dourada */
  font-size: 1.2rem;
  margin: var(--espacamento-pequeno) 0;
}

/* Slider Controls for Depoimentos (Home Specific) */
.slider-controls {
  text-align: center;
  margin-top: var(--espacamento-medio);
}

.slider-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.slider-dot.active {
  background-color: var(--cor-primaria);
  transform: scale(1.2);
}


/* FAQ Section */
.faq-section {
  background-color: var(--cor-fundo-claro);
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  margin-bottom: var(--espacamento-medio);
  border-radius: var(--borda-radius);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  background-color: #fff;
}

.faq-question {
  padding: var(--espacamento-medio);
  background-color: var(--cor-secundaria);
  color: var(--cor-primaria);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--transicao-rapida);
  border: none;
  width: 100%;
  text-align: left;
  font-size: 1.1rem; /* Aumenta um pouco a fonte da pergunta para melhor legibilidade */
}

.faq-question:hover {
  background-color: #7ba3c9;
}

.faq-question::after {
  content: '+';
  font-size: 1.5rem;
  transition: var(--transicao-rapida);
  margin-left: 10px; /* Adiciona espaçamento entre o texto e o ícone */
}

.faq-item.active .faq-question::after {
  content: '−';
}

.faq-answer {
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, padding 0.4s ease-out; /* Adicionado transição para padding */
}

.faq-item.active .faq-answer {
  padding: var(--espacamento-medio);
  max-height: 500px; /* Um valor alto para cobrir a maioria dos conteúdos.
           Para conteúdo muito variável, uma solução JS seria mais precisa. */
}

/* REMOVIDO: Estilos para o Pop-up "Conheça Silas Novaes"
   MOTIVO: O pop-up e sua lógica foram movidos para o sistema global de pop-ups (scripts.js e styles.css).
   Esses estilos específicos de página não são mais necessários aqui. */


/* ===== RESPONSIVIDADE PARA SEÇÕES DA HOME ===== */

@media (max-width: 1024px) {
  /* Banner */
  .banner-wrapper img {
      height: 500px;
  }

  /* Depoimentos Slider */
  .depoimento {
      flex: 0 0 100%;
  }
}

@media (max-width: 768px) {
  /* Banner */
  .banner-wrapper img {
      height: 350px;
  }

  /* Serviços Grid (1 coluna em mobile) */
  .servicos-grid {
      grid-template-columns: 1fr;
  }
  .servico-img {
      max-width: 180px;
      margin-left: auto;
      margin-right: auto;
  }
  .servico h3 {
      font-size: 1.5rem;
  }
  .servico p {
      font-size: 0.95rem;
      padding: 0 0.5rem;
  }

  /* Mapa Brasil Section */
  .mapa-brasil-container {
      flex-direction: column;
  }

  .mapa-brasil-imagem,
  .mapa-brasil-content {
      flex: 0 0 100%;
      width: 100%;
  }

  .mapa-brasil-content {
      text-align: center;
      margin-top: var(--espacamento-medio);
  }
  .mapa-brasil-img {
      margin: 0 auto;
  }
  .mapa-brasil-content h2,
  .mapa-brasil-content .subtitulo {
      text-align: center;
  }

  /* Depoimentos Slider (1 coluna em mobile) */
  .depoimento {
      flex: 0 0 100%;
      margin: 0;
  }
  /* ADICIONADO: Ajuste para as aspas decorativas em mobile */
  .depoimento-texto::before {
      top: -15px; /* Ajusta a posição superior para telas menores */
      left: -5px;
      font-size: 3rem;
  }
  .depoimento-texto::after {
      bottom: -15px;
      right: -5px;
      font-size: 3rem;
  }
}

@media (max-width: 480px) {
  /* Banner */
  .banner-wrapper img {
      height: 280px;
  }
  /* Ajuste de espaçamento para telas muito pequenas */
  .bloco {
      padding: var(--espacamento-medio) 0;
  }
  .faq-question {
      font-size: 1rem; /* Volta a fonte para um tamanho mais padrão em telas muito pequenas */
  }
}