.carrossel_exames {
  display: flex;
  flex-direction: column; /* Alinha os filhos verticalmente */
  padding: 30px 50px;
  align-items: center;
  justify-content: center;
  height: 700px; /* Faz o carrossel ocupar toda a altura da tela */
  background-image: url('../img/traces.png');
  font-family: 'Quicksand', sans-serif;

}
.wrapper {
  background-color: transparent;
  max-width: 1100px; /* Define a largura máxima */
  width: 100%; /* Preenche a largura total */
  position: relative; /* Permite posicionamento absoluto dos filhos */
  display: flex; /* Define layout flexível */
  box-shadow: none;
  align-items: center; /* Centraliza verticalmente */
  justify-content: center; /* Centraliza horizontalmente os itens do carrossel */
  margin: 0 auto; /* Centraliza horizontalmente */
}

/* Estiliza os botões de seta */
.wrapper i {
  top: 50%; /* Posiciona verticalmente no meio */
  height: 100px; /* Altura dos botões */
  width: 100px; /* Largura dos botões */
  cursor: pointer; /* Define o cursor como pointer */
  font-size: 1.25rem; /* Tamanho da fonte */
  position: absolute; /* Permite posicionamento relativo ao contêiner */
  text-align: center; /* Alinha texto no centro horizontalmente */
  line-height: 50px; /* Centraliza verticalmente */
  background: transparent; /* Fundo branco */
  border-radius: 50%; /* Botões redondos */
  transform: translateY(-50%); /* Ajusta o posicionamento vertical */
  transition: transform 0.1s linear; /* Transição suave ao pressionar */
  z-index: 10;
}

/* Reduz o botão levemente ao clicar */
.wrapper i:active {
  transform: translateY(-50%) scale(0.85);
}

/* Posiciona o botão esquerdo à esquerda */
.wrapper i:first-child {
  left: -80px;
  
}

/* Posiciona o botão direito à direita */
.wrapper i:last-child {
  right: -80px;

}

/* Define o layout do carrossel como uma grade horizontal */
.wrapper .carousel_ex {
  display: grid;
  grid-auto-flow: column; /* Define o fluxo das colunas */
  grid-auto-columns: calc((100% / 4)); /* Define a largura de cada coluna */
  overflow-x: auto; /* Permite rolagem horizontal */
  scroll-snap-type: x mandatory; /* Alinhamento suave ao rolar */
  gap: 10px; /* Espaço entre os itens */
  border-radius: 8px; /* Bordas arredondadas */
  scroll-behavior: smooth; /* Rolagem suave */
  scrollbar-width: none; /* Remove a barra de rolagem no Firefox */
  box-shadow: none;
}

/* Remove a barra de rolagem no Chrome */
.carousel_ex::-webkit-scrollbar {
  display: none;
}

/* Remove a transição de rolagem */
.carousel_ex.no-transition {
  scroll-behavior: auto;
}

/* Ajusta o comportamento do carrossel enquanto arrastando */
.carousel_ex.dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

/* Altera o cursor e impede a seleção de texto enquanto arrastando */
.carousel_ex.dragging .card {
  cursor: grab;
  user-select: none;
}

/* Centraliza os elementos dentro do carrossel */
.carousel_ex :where(.card, .img) {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Estiliza os cartões do carrossel */
.carousel_ex .card {
  scroll-snap-align: start; /* Garante que cada cartão fique alinhado ao início */
  height: 342px; /* Altura dos cartões */
  list-style: none; /* Remove os marcadores de lista */
  background-color: transparent;
  cursor: pointer; /* Define o cursor como pointer */
  flex-direction: column; /* Coloca os elementos verticalmente */
  border-radius: 8px; /* Bordas arredondadas */
  border: none; /* Remove a borda */
}

/* Define a área da imagem dentro do cartão */
.card .img {
  position: relative; /* Permite posicionamento dos elementos internos */
  width: 90%; /* Largura relativa */
  height: auto; /* Altura ajustada automaticamente */ 
}

/* Estiliza a imagem normal (padrão) */
.card .img img.normal-img {
  width: 100%; /* Largura total */
  height: auto; /* Altura proporcional */
  object-fit: cover; /* Ajusta a imagem para cobrir o espaço */
  transition: opacity 0.5s ease-in-out; /* Transição suave de opacidade */
}

/* Estiliza a imagem ao passar o mouse */
.card .img img.hover-img {
  position: absolute; /* Sobrepõe a imagem normal */
  top: 0; /* Alinha ao topo */
  left: 0; /* Alinha à esquerda */
  width: 100%; /* Largura total */
  height: auto; /* Altura proporcional */
  object-fit: cover; /* Ajusta para cobrir o espaço */
  opacity: 0; /* Torna a imagem invisível por padrão */
  transform: scale(1); /* Sem escala inicial */
  transition: opacity 0.5s ease-in-out transform 0.3s ease-in-out; /* Transições suaves */
}

/* Oculta a imagem normal ao passar o mouse */
.card .img:hover img.normal-img {
  opacity: 0;
}

/* Mostra a imagem de hover ao passar o mouse */
.card .img:hover img.hover-img {
  opacity: 1; /* Torna visível */
  transform: scale(1.1); /* Aumenta levemente a escala */
}

/* Estiliza o título dentro dos cartões */
.carousel_ex .card h2 {
  font-weight: 500; /* Peso médio da fonte */
  font-size: 1.56rem; /* Tamanho da fonte */
  margin: 30px 0 5px; /* Margens superior e inferior */
}

/* Estiliza o subtítulo dentro dos cartões */
.carousel_ex .card span {
  color: #6A6D78; /* Cor do texto */
  font-size: 1.31rem; /* Tamanho da fonte */
}

.button-container {
    display: flex;
    justify-content: center; /* Centraliza o botão horizontalmente */
    margin-top: 20px; /* Adiciona espaço acima */
    width: 100%; /* Garante que ocupe toda a largura */
}

.titulocarrossel {
  font-weight: bold;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 30px;
  font-size: 40px;
  font-family: 'Quicksand', sans-serif;
  color: #881c56;
}

.subtituloexames{
  font-size: 20px;
  color: #638595;
}

.linhacarrossel{
  margin: 0 auto;
  border: 2px solid #638595; /* Cor da borda */
  max-width: 50%;
  align-items: center;
}

.linhacarrossel hr {	
  display: none;
}

/* Ajustes de layout para telas menores que 900px */
@media screen and (max-width: 900px) {
  .wrapper .carousel_ex {
    grid-auto-columns: calc((100% / 2) + 9px); /* Reduz a largura das colunas */
  }
}

/* Ajustes de layout para telas menores que 600px */
@media screen and (max-width: 600px) {
  .wrapper .carousel_ex {
    grid-auto-columns: calc((100% / 2) + 15px); /* Reduz a largura das colunas */
  }
}

@media (max-width: 768px) {
  .titulocarrossel{
    font-size: 30px;
  }
  .subtituloexames{
    display: none;
  }
}