.servicios {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background-color: rgb(255, 255, 255);
  gap: 2rem;
}


.servicios p {
  margin-top: 0rem; 
  text-align: justify;
  padding: 0.5rem 1rem;
  color: black;
}

.servicios strong {
  margin-top: 0rem;
  text-align: justify;
  padding: 0.5rem 1rem;
}


.contenedor-tratamientos {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.card-tratamientos {
  width: 100%;
  max-width: 300px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-radius: 20px;
  background-color: white;
  box-shadow: 0px 0px 15px rgba(54, 53, 53, 0.612);
}

.card-tratamientos p {
  margin-top: 0rem; 
  text-align: center;
  padding: 0.5rem 1rem;
  color: black;
}

.card-tratamientos img {

  width: 100%;
  max-width: 150px;
  padding: 1rem 1rem;
  margin-top: 0rem;
  transition: transform 2s ease; 
}

.card-tratamientos img:hover {
  transform: rotateY(180deg); 
}


.card-tratamientos a {
  width: 100%;
  max-width: 200px;
  height: 2rem;
  border-radius: 15px;
  background-color: rgb(51, 196, 210);
  color: white;
  font-size: 1rem;
  transition: 0.5s;
  margin-bottom: 1rem;
  text-decoration: none;
}

.card-tratamientos a:hover {
  background-color: rgb(30, 134, 134);
}

#verMas {
  width: 100%;
  max-width: 200px;
  height: 3rem;
  border-radius: 15px;
  background-color: rgb(51, 196, 210);
  color: white;
  font-size: 1rem;
  text-align: center;
  transition: 0.5s;
}
#verMas:hover {
  background-color: rgb(30, 134, 134);
}

@media (min-width: 768px) {
  .servicios {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; 
    flex-direction: row;
    gap: 2rem; 
  }


  .servicios p {
    text-align: center;
    padding: 2rem 2rem;
    color: black;
    font-size: 2rem;
  }
  .contenedor-tratamientos {
    display: flex;
    flex-direction: row; 
    justify-content: center; 
    align-items: center; 
    flex-wrap: wrap;
    gap: 7rem; 
  }

  .contenedor-tratamientos p {
    text-align: center;
    padding: 1rem 0.5rem;
    color: black;
    font-size: 1rem;
  }

  .card-tratamientos {
    width: 100%;
    max-width: 300px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    border-radius: 20px;
    background-color: white;
    box-shadow: 0px 0px 15px rgba(54, 53, 53, 0.612);
  }

  .card-tratamientos p {
    margin-top: 0rem; 
    text-align: center;
    padding: 0.5rem 1rem;
    color: black;
  }

  .card-tratamientos img {

    width: 100%;
    max-width: 150px;
    padding: 1rem 1rem;
    margin-top: 0rem;
    transition: transform 2s ease; 
  }

  .card-tratamientos img:hover {
    transform: rotateY(180deg); 
  }


  .card-tratamientos button {
    width: 100%;
    max-width: 200px;
    height: 2rem;
    border-radius: 15px;
    background-color: rgb(51, 196, 210);
    color: white;
    font-size: 1rem;
    transition: 0.5s;
    margin-bottom: 1rem;
  }
  #verMas {
    width: 100%;
    max-width: 200px;
    height: 3rem;
    border-radius: 15px;
    background-color: rgb(51, 196, 210);
    color: white;
    font-size: 1rem;
    text-align: center;
    transition: 0.5s;
  }
  #verMas:hover {
    scroll-behavior: smooth;
    background-color: rgb(30, 134, 134);
  }
}