/*COLOR: AZUL*/
.fondoAzul{background-color:  #2563EB;}
.fondoAzulHover:hover{background-color: #2563EB; transition:  all .5s ease;}

/*COLOR: CYAN*/
.fondoCyan{background-color:  #06B6D4;}
.fondoInterfazCyanSolida{background:radial-gradient(circle at top,rgba(56, 189, 248, 0.35), transparent 65%), linear-gradient(180deg,rgba(6, 182, 212, 0.85) 0%, rgba(14, 116, 144, 0.85) 45%,rgba(10, 64, 82, 0.85) 75%,rgba(6, 45, 60, 0.85) 100%);box-shadow: inset 0 0 30px rgba(0,0,0,0.45), 0 0 18px rgba(56, 189, 248, 0.25);}
.fondoCyanHover:hover{background-color: #06B6D4; transition:  all .5s ease;}
.fondoInterfazCyanTransparente{box-shadow: 0 0 30px rgba(6, 182, 212, 0.25), inset 0 0 20px rgba(255, 255, 255, 0.03);}

/*COLOR: NARANJA*/
.fondoNaranja{background-color:  #FB923C;}

/*COLOR: AMARILLO*/
.fondoAmarillo{background-color:  #FACC15;}
.fondoAmarilloHover:hover{background-color: #FACC15; transition:  all .5s ease;}

/*COLOR: BLANCO*/
.fondoBlanco{background-color:  #EFFFFF;}
.fondoBlancoHover:hover{background-color: #EFFFFF; transition:  all .5s ease;}

/*COLOR: ROSA*/
.fondoRosa{background-color:  #EC4899;}
.fondoRosaHover:hover{background-color: #EC4899; transition:  all .5s ease;}

/*COLOR: MORADO*/
.fondoMorado{background-color:  #6D28D9;}
.fondoMoradoHover:hover{background-color: #6D28D9; transition:  all .5s ease;}
.fondoMorado1{background: #bf75b2; background: linear-gradient(90deg,rgba(191, 117, 178, 0.9) 0%, rgba(123, 48, 161, 1) 51%, rgba(114, 83, 237, 1) 100%);}
.fondoMorado2{background: #bf75b2; background: linear-gradient(0deg,rgba(191, 117, 178, 0.9) 0%, rgba(123, 48, 161, 1) 51%, rgba(114, 83, 237, 1) 100%);}
.fondoInterfazMoradoSolido {background: radial-gradient(circle at top, rgba(140, 90, 255, 0.25), transparent 65%), linear-gradient(180deg, rgba(13, 6, 26, 0.85) 0%, rgba(43, 15, 77, 0.85) 40%,rgba(14, 7, 22, 0.85) 70%,rgba(17, 11, 43, 0.85) 100%); box-shadow: inset 0 0 30px rgba(0,0,0,0.4);}
.fondoInterfazMoradoTransparente{box-shadow: 0 0 30px rgba(140, 90, 255, 0.25), inset 0 0 20px rgba(255,255,255,0.03);}
.fondoInterfazMoradoHover:hover{transition: filter 0.35s ease, transform 0.35s ease;}
.fondoInterfazMoradoHover:hover{filter: drop-shadow(0 0 10px rgba(111, 76, 255, 0.6)) drop-shadow(0 0 25px rgba(140, 90, 255, 0.35)); transform: translateY(-3px) scale(1.01);}

/*COLOR: ROJO*/
.fondoRojo{background-color:  #EF4444;}
.fondoRojoHover:hover{background-color: #EF4444; transition:  all .5s ease;}

/*COLOR: VERDE*/
.fondoVerdeSucess{background-color:  #22c55e;}
.fondoVerdeSucessHover:hover{background-color: #22c55e; transition:  all .5s ease;}
.fondoVerdeSoft{background-color:  #86EFAC;}
.fondoVerdeSoftHover:hover{background-color: #86EFAC; transition:  all .5s ease;}
.fondoVerdeOscuro{background-color:  #15803d;}
.fondoVerdeOscuroHover:hover{background-color: #15803d; transition:  all .5s ease;}

/*COLOR: ROJO SUAVE*/
.fondoRojoSuave{background-color:  #FCA5A5;}
.fondoRojoSuaveHover:hover{background-color: #FCA5A5; transition:  all .5s ease;}

/*COLOR: ROJO OSCURO*/
.fondoRojoOscuro{background-color:  #991B1B;}
.fondoRojoOscuroHover:hover{background-color: #991B1B; transition:  all .5s ease;}

/*COLOR: GRIS CLARO*/
.fondoGrisClaro{background-color:  #E5E7EB;}
.fondoGrisClaroHover:hover{background-color: #E5E7EB; transition:  all .5s ease;}

/*COLOR: OSCURO*/
.fondoGrisOscuro{background-color:  #374151;}
.fondoGrisOscuroHover:hover{background-color: #374151; transition:  all .5s ease;}

/*COLOR: NEGRO*/
.fondoNegro{background-color:  #333333;}
.fondoNegroHover:hover{background-color: #333333; transition:  all .5s ease;}