/* Estilos base para tarjetas */
.tarjetas-container {
  margin: 0 auto;
  display: flex;
  justify-content: center; /* Centra horizontalmente las tarjetas */
  flex-wrap: wrap; /* Permite que las tarjetas se envuelvan en múltiples líneas */
}

.tarjeta {
  width: 400px;
  height: 640px;
  margin: 50px 25px 20px 25px; /* Ajusta los márgenes de las tarjetas */
  filter: drop-shadow(0px 0px 8px #ffffff2f);
  background-color: #141414;
  color: white;
}

.tarjeta:hover {
  transition: all 1s;
  transform: translate(0px, -20px);
  filter: drop-shadow(0px 0px 9px #ffffffb9);
}

h1 {
  color: white;
}

h2 {
  padding-top: 20px;
  text-align: center;
}

li {
list-style: none;
  height: 20px;
}

p {
  white-space: nowrap;
}

.img-container img {
  filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0.151));
  width: 200px;
  margin-top: 50px;
}

.txt-container-premium,
.txt-container-admin,
.txt-container-adminvip {
  margin: 40px;
}

.enviar-comprobante-container {
  text-align: center; /* Centra horizontalmente el contenido del contenedor */
  margin-top: 20px; /* Ajusta el margen superior del contenedor */
}

button {
  font-size: 17px;
  color: white;
  cursor: pointer;
  border-radius: 6px;
  background-color: #0496cfda;
  padding: 7px 20px 7px 20px;
  margin: 40px 0 20px 0; /* Ajusta el margen superior del botón */
}

.txt-container-premium h1,
.txt-container-admin h1,
.txt-container-adminvip h1 {
  filter: drop-shadow(0px 1px 7.4px #ffffff80);
  margin-bottom: 20px;
  text-align: center;
  font-size: 38px;
}

.txt-container-premium h1 {
  color: yellow;
}

.txt-container-admin h1 {
  color: orange;
}

.txt-container-adminvip h1 {
  color: green;
}

.txt-container-admin h2,
.txt-container-premium h2 {
  margin-top: 20px;
}

/* Estilos para pantallas más pequeñas */
@media screen and (max-width: 768px) {
  .tarjeta {
    width: 90%; /* La tarjeta ocupa todo el ancho disponible */
    height: 550px;
    margin: 20px auto; /* Centra las tarjetas horizontalmente */
  }
  h2 {
    padding-top: 5px;
    text-align: center;
  }
  .img-container img {
    filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0.151));
    width: 150px;
    margin-top: 20px;
  }
}
