.tarjeta {
  background-image: url(../media/fondoAllAgentes.png);

  background-size: cover;
  width: 268px;
  height: 480px;
  border-radius: 15px;
  transition: 300ms;
  box-shadow: 0px 10px 15px black;
  & .agenteImg {
    z-index: 3;
    filter: drop-shadow(1px 1px 20px #ff4654);
    transition: 300ms;
  }
  & h6 {
    z-index: 4;
    text-align: center;
    font-size: 40px;
    transition: 600ms;
  }
  &:hover {
    scale: 1.13;
    box-shadow: 0px 5px 20px black;
  }
  &:hover h6 {
    scale: 1.2;
    translate: 0px 110px;
    text-shadow: 5px 2px 7px black;
  }
  &:hover .fondoBlanco {
    scale: 1.2;
    opacity: 1;
    filter: drop-shadow(1px 20px 8px #000000);
    animation: fondoAnimado 4s linear both;
    animation-iteration-count: infinite;
    animation-delay: 400ms;
  }
  &:hover .agenteImg {
    scale: 1.4;
    translate: 0px 40px;
  }
}
@keyframes fondoAnimado {
  0% {
    transform: rotate(0turn);
  }
  25% {
    transform: rotate(-0.01turn);
  }
  75% {
    transform: rotate(0.01turn);
  }
  100% {
    transform: rotate (0turn);
  }
}
.fondoBlanco {
  height: 400px;
  opacity: 0.3;
  transition: 300ms;
}
.btnGuardar svg {
  height: 50px;
  width: 50px;
  color: white;
}
.btnGuardar {
  width: 80px;
  height: 70px;
  backdrop-filter: blur(5px);
  background-color: rgba(0, 0, 0, 0.384);
  &:hover {
    scale: 1.02;
    box-shadow: 0px 5px 10px black;
  }
}
.fondoTransparante {
  background-color: #ff465657;
  backdrop-filter: blur(8px);
}