/*trabajossssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss webbbbbbbbbbbbbbbbbbbbb*/
#diseñografico{ width: 100%;
            background: #fff;
            position: relative;
            padding: 30px 20px 50px 20px}

/*nubeeeeeeeeeeeeeee*/
.diseñografico-nube{ width: 100%;
                 background: url(../img/planes/nubes.png);
                 background-position: center center;
                 position: absolute;
                 top: -100px;
                 left: 0;
                 height: 100px;}


/*diseño graficooooooooooooooooooooooooooooooooooo*/

/*tituloooooooo*/
.diseñografico-titulo{ width: 100%;
				   margin: 0px 0px 30px 0px;
				   text-align: center;}

.diseñografico-titulo h1{ font-family: Raleway;
					  font-weight: 500;
					  font-size: 30px;
					  color:#222;
					  margin: 0px 0px 20px 0px;
					  }

.diseñografico-titulo h1 span{ background: #247dff;
						   position: relative;
						   font-weight: 700;
						   color: #fff;
						   border-radius: 50px;
						   padding: 5px 20px 5px 20px;
						   display: inline-block;}
/*mascota en titulooo*/
.diseñografico-titulo h1 span img{ position: absolute;
						       top:-115px;
						       left: 50%;
						       transform: translateX(-50%);
						       width: 100%;
						       max-width: 120px;}


.diseñografico-titulo p{  width: 60%;
					  font-family: Raleway;
					  text-align: justify;
					  font-weight: 300;
					  font-size: 14px;
					  color:#222;
					  margin: 0 auto;}

/* trabajosssssss */
.diseñografico-trabajos{ display: grid;
					 grid-gap: 20px;
					 grid-template-columns: repeat(3,1fr);
					 margin: 0px 0px 0px 0px}

.diseñografico-trabajos-item{ text-align: center;
                              margin: 0px 0px 30px 0px;
                              position: relative;}

.diseñografico-trabajos-item img{ width: 100%;
							      max-width: 300px;
							      border-radius: 7px;
							      transition: 0.2s}

.diseñografico-trabajos-item h1{ font-family: Raleway;
							     font-size: 17px;
							     color: #247dff;
							     margin: 10px 0px 0px 0px; }

.diseñografico-trabajos-item:hover img{}

/*botonnnnnnnnnn*/
.diseñografico-trabajos-item a{ text-decoration: none; }

.diseñografico-trabajos-item-btn{ width: 150px;
						          height: 40px;
						          background: linear-gradient(45deg,#D42DFA,#5047FF,#4769FF);
						          background-size: 300% 300%;
						          text-align: center;
						          margin: 10px  auto 0px auto;
						          border-radius: 8px;
						          animation: degrade 4s ease-in-out infinite}

.diseñografico-trabajos-item-btn p{ font-family: Raleway;
								    font-size: 15px;
								    color: #fff;
								    line-height: 40px;
								    margin: 0 }

.diseñografico-trabajos-item-btn:hover{ background: linear-gradient(45deg,#8D00E0,#8D00E0,#8D00E0)}

@keyframes degrade{

0%{background-position: 0 50%;}

50%{background-position: 100% 50%;}

100%{background-position: 0 50%;}

}