.cards-container{ margin:0 auto; display:flex; flex-wrap:wrap; gap: 3rem; padding:1rem; justify-content:center; align-items:stretch;flex-direction:row;}
.card{padding-bottom:2rem; flex: 0 0 250px;  padding:1rem; min-height:420px; border-radius:1rem; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);  transition: all 300ms;display:flex; flex-direction:column;}
.card .icono{ /*height:25%;*/ padding-top:1rem; width:20%; margin:10px auto;}
.card .texto{height:75%; display:flex; flex-direction:column; justify-content:flex-start;}
.card .texto span{margin:10px auto;}
.card .line{ width:45%; margin:10px auto;transition: all 300ms;opacity:0;}
.card a{font-weight:bold; display:block;padding:0.7rem 1.8rem; border-radius:6px;width:fit-content;margin:10px auto; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);  transition: all 300ms;}
.card:hover{box-shadow: 0 8px 12px rgba(0, 0, 0, 0.25), 0 8px 10px rgba(0, 0, 0, 0.22);transform: translateY(-2px);}
.card:hover .line{width:55%;transition: all 500ms; opacity:1;}
.card:hover a{transform: translateY(-1px);}
.card:hover .icono{animation: bounce 0.5s ease-in-out 0s 2 alternate none;} 
.card a:hover{transition: all 500ms;}
.card .button-card-hal{margin-bottom:0;}


@keyframes bounce{
  0% {transform:  scale(1);}
  100% {transform:  scale(1.2);}
}