.carrossel {
  position: relative;
  width: 100%;
  max-width: 950px;
  margin: auto;
  overflow: visible;

  margin-bottom: 50px;

  padding-bottom:50px ;
}

.container-cards {
  display: flex;
  flex-wrap: nowrap;

  gap: 15px;
  transition: transform 0.5s ease;
  overflow-x: auto;

}

.card {
  min-width: 280px;
  
     background: 
    linear-gradient(
      to top,
      /* início forte */
      rgba(197, 174, 210, 0.726), /* meio suave */
      rgba(197, 174, 210, 0)    /* transparência no final */
    ),
    url('./imagens/cards_img/card_1.png');



  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  
  box-shadow: 0 4px 10px rgba(0,0,0,0.6);
  text-align: center;
  padding-bottom: 20px;
  overflow: hidden;

  height: 452px;
  width: 252px;
  min-width: 280px;

  display: flex;
  flex-direction: column;
  flex-shrink: 0;

  flex: 0 0 auto;

  justify-content: space-between;

}

#n2{

  min-width: 280px;
  
     background: 
    linear-gradient(
      to top,
      /* início forte */
      rgba(197, 174, 210, 0.726), /* meio suave */
      rgba(197, 174, 210, 0)    /* transparência no final */
    ),
    url('./imagens/cards_img/card_2.png');



  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  
  box-shadow: 0 4px 10px rgba(0,0,0,0.6);
  text-align: center;
  padding-bottom: 20px;
  overflow: hidden;

  height: 452px;
  width: 252px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;

  justify-content: space-between;



}

#n3{

  min-width: 280px;
  
     background: 
    linear-gradient(
      to top,
      /* início forte */
      rgba(197, 174, 210, 0.726), /* meio suave */
      rgba(197, 174, 210, 0)    /* transparência no final */
    ),
    url('./imagens/cards_img/card_3.png');



  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  
  box-shadow: 0 4px 10px rgba(0,0,0,0.6);
  text-align: center;
  padding-bottom: 20px;
  overflow: hidden;

  height: 452px;
  width: 252px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;

  justify-content: space-between;
  
}

.card h2 {
  font-family: 'AMORIA', sans-serif;
  text-align: left;

  margin-left: 18px;
}

.card p {
  padding: 0 10px;
  color: #000000;
  margin-bottom: -150px;
  text-align:center;
  font-weight: 400;
}

.card button {
  margin: 30px 30px;
  background: linear-gradient(90deg, #e6a8c0, #a8d0f0);
  border: none;
  padding: 10px 25px;
  border-radius: 0px;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s;

  height: 40px;
  width: auto;
}

.card button:hover {
  transform: scale(1.05);
}

/* Botões de navegação */
.seta {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.7);
  border: none;
  font-size: 2rem;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.esquerda { left: 10px; }
.direita { right: 10px; }

.seta:hover {
  background: #fff;
}

/* Responsivo */
@media (max-width: 720px) {

  #catalogo_carrossel{
    width: 100%;
    padding-left: 10px;
    padding: 27px;
  }

  
  .carrossel{

    padding: 20px;
    padding-left: 0px;
  }

  .card {
  min-width: 85%;
  min-width: 280px;
  
   background: 
    linear-gradient(
      to top,
      rgba(197, 174, 210, 0.7), /* início forte */
      rgba(197, 174, 210, 0.4), /* meio suave */
      rgba(197, 174, 210, 0)    /* transparência no final */
    ),
    url('./imagens/cards_img/card_1.png');




  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  
  box-shadow: 0 4px 10px rgba(0,0,0,0.6);
  text-align: center;
  padding-bottom: 20px;
  overflow: hidden;

  height: 452px;
  width: 252px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;

  justify-content: space-between;

}

.card h2 {
  font-family: 'AMORIA', sans-serif;
  text-align: left;

  margin-left: 18px;

}

.card button {
  margin: 30px 30px;
  background: linear-gradient(90deg, #e6a8c0, #a8d0f0);
  border: none;
  padding: 10px 25px;
  border-radius: 0px;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s;

  height: 40px;
  width: auto;
}


.card p {
  
  padding: 0 10px;
  color: #000000;
  font-weight: 400;
  margin-bottom: -150px;
  text-align: center;


}

}