.datos-info{
    margin-top: 25px;
    width: 100%;
    background: linear-gradient(
        180deg, 
        rgba(247, 253, 229, 1) ,        /* Verde claro completamente opaco */
        rgba(194, 252, 234, 0.6377) , /* Turquesa con un 63.77% de opacidad */
        rgba(162, 251, 236, 0.425) ,   /* Cian con un 42.5% de opacidad */
        rgba(86, 247, 230, 0.2544) ,  /* Turquesa con un 25.44% de opacidad */
        rgba(221, 253, 232, 0.49) ,      /* Verde claro con un 49% de opacidad */
        rgba(254, 221, 253, 0.81) ,      /* Lila claro con un 81% de opacidad */
        rgba(229, 249, 173, 0)          /* Amarillo completamente transparente */
      );
}

.datos-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    text-align: center;
}


.datos-container div:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../../img/datos-info/circulo-rosa.png);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    height: 300px;
    width: 100%;
    max-width: 300px;
}

.datos-container div:nth-child(1) a {
    color: #D81CF7;
    border: 2px solid rgba(224, 34, 102, 0.84);
    background-color: #F1FAB6;
  


}

.datos-container div:nth-child(2) a{
    color: #1456FF;
    border: 2px solid #780EFF;
    background-color: #F1FAB6;
 
}

.datos-container div:nth-child(3) a{ 
    color: rgba(231, 14, 92, 0.84);
    border: 2px solid #1FAF38;
    background-color: #F1FAB6;
   
}

.datos-container div a:hover{
    scale: 1.1;
    opacity: 0.7;
}

.datos-container div:nth-child(2) {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../../img/datos-info/circulo-morado.png);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    height: 300px;
    width: 100%;
    max-width: 300px;
    
    
}

.datos-container div:nth-child(3) {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../../img/datos-info/circulo-verde.png);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    height: 300px;
    width: 100%;
    max-width: 300px;
  
    
}

.datos-container div a{
    text-decoration: none;
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
    cursor: pointer;
    padding: 13px;
    border-radius: 15px;
}

@media screen and (min-width: 768px){
    .datos-container{
        flex-direction: row;
    }
}