* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

.servicios h2 {
  font-size: 1.5rem;
  padding: 0.5rem 4rem;
  text-align: center;
  margin-bottom: 0.5rem; /* Reducir espacio abajo */
  background: linear-gradient(to right, #00b9cd, #6484c4);
  border-radius: 15px;
  color: white;
}

.servicios p {
  margin-top: 0rem; /* Reducir espacio arriba */
  text-align: justify;
  padding: 0.5rem 1rem;
  font-family: "Open sans";
  color: black;
}

.servicios strong {
  margin-top: 0rem; /* Reducir espacio arriba */
  text-align: justify;
  padding: 0.5rem 1rem;
}
/*descripcion de los crad-tratamientos*/

.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; /* Reducir espacio arriba */
  text-align: center;
  padding: 0.5rem 1rem;
  color: black;
}

.card-tratamientos img {
  /*estilos de las imagenes*/
  width: 100%;
  max-width: 150px;
  padding: 1rem 1rem;
  margin-top: 0rem;
  transition: transform 2s ease; /* Suaviza la rotación */
}

.card-tratamientos img:hover {
  transform: rotateY(180deg); /* Gira 360 grados */
}

/*botones de card-tratamientos*/
.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;
  border: 1px solid black;
}

.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-family: "Open sans";
  font-size: 1rem;
  text-align: center;
  transition: 0.5s;
}
#verMas:hover {
  background-color: rgb(30, 134, 134);
}

@media (min-width: 768px) {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .servicios {
    display: flex;
    flex-wrap: wrap; /* Permite que se ajusten si no caben en una sola línea */
    justify-content: center; /* Centra los elementos */
    flex-direction: row;
    gap: 2rem; /* Espacio entre los elementos */
  }

  .servicios h2 {
    font-size: 2rem;
    padding: 0.5rem 5rem;
    text-align: center;
    margin-bottom: 0.5rem; /* Reducir espacio abajo */
    background: linear-gradient(to right, #00b9cd, #6484c4);
    border-radius: 35px;
    color: white;
    margin-bottom: 0rem;
    margin-top: 4rem;
  }

  .servicios p {
    text-align: center;
    padding: 2rem 2rem;
    color: black;
    font-size: 2rem;
  }
  .contenedor-tratamientos {
    display: flex;
    flex-direction: row; /* Este ya está bien */
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center; /* Centra los elementos verticalmente */
    flex-wrap: wrap;
    gap: 7rem; /* Esto deja el espacio entre los divs */
  }

  .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; /* Reducir espacio arriba */
    text-align: center;
    padding: 0.5rem 1rem;
    color: black;
  }

  .card-tratamientos img {
    /*estilos de las imagenes*/
    width: 100%;
    max-width: 150px;
    padding: 1rem 1rem;
    margin-top: 0rem;
    transition: transform 2s ease; /* Suaviza la rotación */
  }

  .card-tratamientos img:hover {
    transform: rotateY(180deg); /* Gira 360 grados */
  }

  /*botones de card-tratamientos*/
  .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);
  }
}