.contenedor-servicios {
  /*background: linear-gradient(71deg, #080509, #1a171c, #080509);*/
  color: #fff;
  z-index: 3; /* El contenido debe estar por encima de las partículas */
  position: relative; /* Para asegurarnos de que se apile por encima de las partículas */
  padding: 20px; /* Agrega padding para que el contenido sea visible */
  min-height: 200px; /* Asegúrate de que haya altura suficiente para mostrar el contenido */
}
.cards-container {
  /*background-color:  rgb(50, 50, 50);*/
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px;
}

.cards-container__title {
  text-align: center;
  font-size: 50px;
}

.card {
  width: 280px;
  height: 400px;
  perspective: 1000px;
  margin-bottom: 20px;
}

/* Animación de aparición desde la izquierda (para el título) */
@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animación de aparición desde abajo (para las tarjetas) */
@keyframes fade-in-sequence {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ocultar antes de la animación */
.cards-container__title {
  opacity: 0;
  transform: translateX(-50px);
}

.card {
  opacity: 0;
  transform: translateY(50px);
}

/* Clase que se agregará con JavaScript */
.show-title {
  animation: slide-in-left 0.8s ease-out forwards;
}

.show-card {
  animation: fade-in-sequence 0.8s ease-out forwards;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

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

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
}

.card-front {
  background: linear-gradient(71deg, rgb(50,50,50), #1a171c, rgb(50,50,50));
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.card img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.service-title {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 40px;
  font-style: normal;
  text-align: end;
  font-size: 24px;
  font-weight: bold;
  color: #FFF; 
}

.card-back {
  background: linear-gradient(135deg, #c8a060, #f4dba3, #c8a060);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  transform: rotateY(180deg);
  padding: 20px;
  text-align: center;
}

.sub-title {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 40px;
  font-style: normal;
  font-size: 24px; /* Tamaño de texto más pequeño que el título */
  color: rgb(50, 50, 50); /* Un color gris oscuro */
  text-align: center; /* Centrado del subtítulo */
}

.service-description {
  font-size: 18px;
  color: rgb(60, 30, 0);
  font-weight: bold;
  line-height: 1.5;
}

.btn-cotizar {
  background: linear-gradient(71deg, #080509, #1a171c, #080509);
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-cotizar:hover {
  background-color:  rgb(50, 50, 50);
}

/* Responsividad */
@media (max-width: 768px) {
  .card {
    width: 200px;
    height: 300px;
  }

  .service-title {
    font-size: 18px;
  }

  .sub-title {
    font-size: 16px;
  }

  .service-description {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .cards-container__title {
    text-align: center;
    font-size: 30px;
  }
}