/* ===============================
SLIDER DE PRODUTOS
=============================== */

.produtos-slider {
  padding: var(--rem-5) var(--rem-125); /* Espaçamento interno */
  background: var(--branco-suave); /* Cor de fundo da seção */
  text-align: center; /* Centraliza textos */
}

.produtos-slider h2 {
  font-size: var(--rem-2); /* Tamanho do título */
  margin-bottom: var(--rem-25); /* Espaço abaixo do título */
}

.slider {
  overflow: hidden; /* Esconde elementos que ultrapassarem o container */
  
  max-width: 1500px; /* Limita largura do slider */
  
  margin: var(--rem-2) auto; /* Centraliza horizontalmente e adiciona espaço vertical */
  
  display: flex; /* Usa Flexbox */
  justify-content: center; /* Centraliza conteúdo */
  
  padding: var(--rem-2) 0; /* Espaçamento interno vertical */
}

.slider-track {
  display: flex; /* Organiza imagens lado a lado */
  
  gap: var(--rem-25); /* Espaço entre imagens */
  
  justify-content: center; /* Centraliza elementos */
  align-items: center; /* Alinha verticalmente */
  
  position: relative; /* Permite usar z-index nos filhos */
}

.slider-track img {
  width: 250px; /* Largura das imagens */
  height: 250px; /* Altura das imagens */
  
  object-fit: cover; /* Ajusta a imagem sem distorcer */
  
  border-radius: var(--radius); /* Bordas arredondadas */
  
  opacity: 0.1; /* Deixa imagem quase invisível */
  
  filter: blur(5px); /* Aplica desfoque */
  
  transform: scale(0.6); /* Diminui o tamanho */
  
  transition: all 0.5s ease; /* Animação suave para mudanças */
  
  cursor: pointer; /* Mostra cursor de clique */
  
  display: none; /* Esconde imagens por padrão */
  
  box-shadow: 0 10px 28px rgba(0,0,0,0.5); /* Sombra forte */
  
  z-index: 1; /* Camada mais baixa */
}

/* Imagem mais distante do centro */
.slider-track img.lateral.escondido {
  opacity: 0.1; /* Muito transparente */
  filter: blur(5px); /* Muito desfocada */
  transform: scale(0.4); /* Bem pequena */
  display: block; /* Mostra a imagem */
  z-index: 1; /* Camada inferior */
}

/* Imagem lateral */
.slider-track img.lateral {
  opacity: 0.65; /* Parcialmente visível */
  filter: blur(3px); /* Desfoque médio */
  transform: scale(0.5); /* Reduz tamanho */
  display: block; /* Mostra imagem */
  box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Sombra leve */
  z-index: 4; /* Camada intermediária */
}

/* Imagem próxima ao centro */
.slider-track img.foco-medio {
  opacity: 0.9; /* Quase totalmente visível */
  filter: blur(1px); /* Pouco desfoque */
  transform: scale(0.8); /* Maior que as laterais */
  display: block; /* Mostra imagem */
  box-shadow: 0 6px 16px rgba(0,0,0,0.25); /* Sombra média */
  z-index: 6; /* Camada acima das laterais */
}

/* Imagem central (produto principal) */
.slider-track img.central {
  opacity: 1; /* Totalmente visível */
  filter: none; /* Remove desfoque */
  transform: scale(1); /* Tamanho normal */
  display: block; /* Mostra imagem */
  box-shadow: 0 10px 28px rgba(0,0,0,0.5); /* Sombra forte para destaque */
  z-index: 10; /* Fica acima de todas as outras */
}
/* ===============================
SLIDER SOBRE A EMPRESA
=============================== */

.sobre-slider {
  padding: var(--rem-5) var(--rem-125); /* Espaçamento interno (topo e fundo, esquerda e direita) */
  background: var(--azul-medio); /* Cor de fundo do slider */
  color: var(--branco); /* Cor do texto */
  text-align: center; /* Centraliza o texto */
}

.sobre-slider h1 {
  font-size: var(--rem-225); /* Tamanho da fonte do título */
  margin-bottom: var(--rem-25); /* Espaço abaixo do título */
}

.sobre-slider-container {
  max-width: 800px; /* Limita a largura do container */
  margin: auto; /* Centraliza o container */
  position: relative; /* Posiciona o container de forma relativa */
  overflow: hidden; /* Esconde qualquer conteúdo que ultrapasse o container */
}

.sobre-slide {
  display: none; /* Esconde os slides inicialmente */
  background: var(--azul); /* Cor de fundo do slide */
  padding: var(--rem-25); /* Espaçamento interno do slide */
  border-radius: var(--radius); /* Borda arredondada */
  box-shadow: 0 0625rem 15625rem rgba(0,0,0,0.1); /* Sombra do slide */
  color: var(--branco); /* Cor do texto dentro do slide */
  transition: all 0.5s ease; /* Animação suave para a transição */
}

.sobre-slide.ativo {
  display: block; /* Exibe o slide com a classe 'ativo' */
}

.sobre-slide h2 {
  font-size: var(--rem-125); /* Tamanho da fonte do subtítulo */
  margin-bottom: var(--rem-125); /* Espaço abaixo do subtítulo */
}

.sobre-slide p,
.sobre-slide ul {
  font-size: 1.125rem; /* Tamanho do texto dos parágrafos e listas */
  line-height: 1.6; /* Define o espaçamento entre as linhas do texto */
  text-align: left; /* Alinha o texto à esquerda */
  margin-top: var(--rem-1); /* Espaço acima do texto */
}

.sobre-slide ul li {
  margin-bottom: var(--rem-05); /* Espaço abaixo de cada item da lista */
}

.sobre-slider-nav {
  margin-top: var(--rem-2); /* Espaço acima da navegação */
  display: flex; /* Organiza os botões de navegação em linha */
  justify-content: center; /* Centraliza os botões */
  gap: var(--rem-1); /* Espaço entre os botões de navegação */
}

.sobre-nav-btn {
  background: var(--verde-escuro); /* Cor de fundo do botão */
  color: var(--branco); /* Cor do texto */
  border: none; /* Remove a borda padrão */
  padding: var(--rem-075) var(--rem-125); /* Espaçamento interno (vertical e horizontal) */
  border-radius: var(--radius); /* Bordas arredondadas */
  font-weight: bold; /* Texto em negrito */
  cursor: pointer; /* Muda o cursor para indicar que é clicável */
  transition: 0.3s; /* Animação suave nas mudanças de estilo */
}

.sobre-nav-btn:hover {
  background: var(--verde); /* Muda a cor ao passar o mouse */
}

.sobre-nav-btn.ativo {
  background: var(--verde); /* Cor quando o botão está ativo */
}

@media (max-width: 480px) {
  
/* ===============================
   SLIDER DE PRODUTOS
   =============================== */

.produtos-slider h2 {
  font-size: var(--rem-15); /* Define o tamanho do título da seção de produtos */
  margin-bottom: var(--rem-2); /* Espaço abaixo do título */
}

.slider-track {
  gap: var(--rem-1); /* Espaço entre as imagens dentro do slider */
}

.slider-track img {
  width: 150px; /* Define a largura das imagens do slider */
  height: 150px; /* Define a altura das imagens */
  transform: scale(0.5); /* Diminui a escala da imagem para metade do tamanho */
}

.slider-track img.lateral,
.slider-track img.lateral.escondido {
  transform: scale(0.4); /* Imagens laterais ficam ainda menores */
}

.slider-track img.foco-medio {
  transform: scale(0.6); /* Imagens próximas ao centro ficam um pouco maiores */
}

.slider-track img.central {
  transform: scale(0.8); /* Imagem central fica maior para destacar o produto */
}


/* ===============================
   SLIDER SOBRE A EMPRESA
   =============================== */

.sobre-slider h1 {
  font-size: var(--rem-15); /* Define o tamanho do título da seção sobre a empresa */
  margin-bottom: var(--rem-2); /* Espaço abaixo do título */
}

.sobre-slide h2 {
  font-size: 1.2rem; /* Define o tamanho do subtítulo dentro do slide */
}

.sobre-slide p,
.sobre-slide ul {
  font-size: 0.95rem; /* Define o tamanho do texto e listas dentro do slide */
}

.sobre-nav-btn {
  padding: 0.5rem 1rem; /* Espaçamento interno dos botões de navegação */
  font-size: 0.85rem; /* Tamanho da fonte dos botões */
}

}

@media (max-width: 380px) {

/* ===============================
   SLIDER DE PRODUTOS
   ================================ */

.produtos-slider {
  padding: 3rem 0.5rem; /* Define o padding da seção de slider de produtos */
}

.produtos-slider h2 {
  font-size: 1.3rem; /* Define o tamanho do título do slider de produtos */
  margin-bottom: 1.5rem; /* Adiciona espaço abaixo do título */
}

.slider {
  padding: 1rem 0; /* Define o padding do slider (em cima e embaixo) */
}

.slider-track {
  gap: var(--rem-05); /* Define o espaço entre as imagens do slider */
}

.slider-track img {
  width: 180px; /* Define a largura das imagens do slider */
  height: 180px; /* Define a altura das imagens do slider */
  transform: scale(0.6); /* Reduz a escala das imagens para 60% do seu tamanho original */
}

.slider-track img.lateral,
.slider-track img.lateral.escondido {
  transform: scale(0.5); /* Imagens laterais ficam com 50% do seu tamanho original */
}

.slider-track img.foco-medio {
  transform: scale(0.7); /* Imagens em foco médio ficam com 70% do seu tamanho */
}

.slider-track img.central {
  transform: scale(0.9); /* A imagem central fica com 90% do seu tamanho */
}


/* ===============================
   SLIDER SOBRE A EMPRESA
   ================================ */

.sobre-slider {
  padding: 3rem 0.5rem; /* Define o padding da seção do slider sobre a empresa */
}

.sobre-slider h1 {
  font-size: 1.2rem; /* Define o tamanho do título do slider sobre a empresa */
  margin-bottom: 1.5rem; /* Adiciona espaço abaixo do título */
}

.sobre-slide {
  padding: 1rem 1rem; /* Define o padding dos slides individuais */
}

.sobre-slide h2 {
  font-size: var(--rem-1); /* Define o tamanho do título dentro de cada slide */
}

.sobre-slide p,
.sobre-slide ul {
  font-size: 0.8rem; /* Define o tamanho da fonte do parágrafo e das listas */
  line-height: 1.4; /* Define a altura da linha do texto para maior legibilidade */
}

.sobre-nav-btn {
  padding: 0.4rem 0.8rem; /* Define o padding dos botões de navegação do slider */
  font-size: var(--rem-075); /* Define o tamanho da fonte dos botões de navegação */
}

}