/* Tarjetas de página Requisitos - Visa Gold */

.card {
  background-color: #13192b;
  border: 0;
  border-radius: 0;
  color: #ffffff;
  height: 386px;
  margin: 0 auto;
  transition: 300ms ease;
  width: 480px;
}

.card__two {
  background-color: #8093c8;
  width: 100%;
}

.card__two img {
  margin: 0 auto;
  width: 36px;
}

.card-body {
  display: flex;
  flex-direction: column;
  font-family: 'IBMPlexSans-Regular', sans-serif;
  font-size: 20px;
  justify-content: center;
  margin: 0 auto;
  text-align: center;
}

.card .card-body p {
  margin: 0 auto;
  width: 62%;
}

/* Transition tarjeta Tipos de Inversion en Página Requisitos - Visa Gold */

/* .card:hover .number {
  opacity: 0;
  transition: opacity 1s ease;
} */

/* .info__hidden {
  opacity: 0;
} */

.number::before {
  bottom: -110px;
  color: #2c354f;
  font-family: 'JuliusSansOne-Regular', sans-serif;
  font-size: 16rem;
  position: absolute;
}

.number__one::before {
  content: '1';
  right: 0;
}

.number__two::before {
  content: '2';
  right: -18px;
}

.number__three::before {
  content: '3';
  right: -24px;
}

/* Tarjetas de página La Firma */

.card.card__valores {
  height: 217px;
}

.card.card__valores:hover {
  background-color: #404e93;
}

.card.card__valores .card-body p:first-of-type {
  transform: translateY(40px);
  width: 100%;
}

.card.card__valores .card-body p:last-of-type {
  transform: translateY(40px);
  width: 75%;
}

.card.card__valores .card-body .animated__text {
  opacity: 0; /* Inicialmente, oculta el segundo párrafo */
}

.card.card__valores .card-body:hover .animated__text {
  opacity: 1; /* Muestra el segundo párrafo al hacer hover en card-body */
  transition: 0.8s ease; /* Agrega una transición suave */
  transform: translateY(0);
}

.card.card__valores .card-body:hover p:first-of-type {
  transform: translateY(0);
  transition: 0.8s ease; /* Agrega una transición suave */
}

@media only screen and (max-width: 1284px) {
  .card {
    width: 100%;
  }

  .card__two {
    width: 97%;
  }
}

@media only screen and (max-width: 992px) {
  .card.card__valores .card-body .animated__text {
    opacity: 1; /* Muestra el segundo párrafo al hacer hover en card-body */
    transition: 0.8s ease; /* Agrega una transición suave */
    transform: translateY(0);
  }

  .card.card__valores .card-body p:first-of-type {
    transform: translateY(0);
    transition: 0.8s ease; /* Agrega una transición suave */
  }
  .card.card__valores .card-body p:last-of-type {
    transform: translateY(0);
    width: 75%;
  }
}

@media only screen and (max-width: 768px) {
  .card__two {
    width: 94%;
  }
}