:root{
    --blanco:255,255,255;
    --gris:43,42,42;
    --celeste:168,194,238;
    --rosa:249,194,235;
    --verde:21,249,74;
    --verdeC:193,250,190;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;}
body{
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
     background: rgba(40,40,40,1);
     font-family: "National Park", sans-serif;
     font-size: 16px;}
html {scroll-behavior: smooth;}

a{color:rgba(var(--blanco),1);}

main{width: 350px;
     background: linear-gradient(to left,rgba(var(--celeste),1),rgba(var(--rosa),1));}

#inicio{width: 100%;
        height: 600px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;}

        .inicio-logo{background: rgba(var(--blanco),1); 
                     background-image: url("../img/circulo.png");
                     background-repeat: no-repeat;
                     background-position: bottom -200px left -270px;
                     width: 100%;
                     display: flex;
                     flex-direction: column;
                     justify-content: flex-start;
                     align-items: center;}

                     .inicio-logo img{width: 100px;
                                      margin-top: 1rem;}

        .inicio-txt{display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: center;
                    background-image: url("../img/circulo.png");
                    background-repeat: no-repeat;
                    background-position:top -100px right -150px;
                    padding-top: 2rem;}
                
        .inicio-txt h1,
        .inicio-txt h2,
        .inicio-txt p{font-weight: lighter;
                      padding-left: 0.3rem;}

        .inicio-txt h1{font-family: "Cal Sans", sans-serif;
                       font-size: 2.5rem;
                       font-weight: bold;
                       line-height: 2rem;
                       letter-spacing: 0.2rem;
                       color:rgba(var(--gris),1);
                       margin-top: 0.5rem;}

        .inicio-txt h2{font-size: 1.2rem;}
        
        .inicio-txt p{ font-size: 1.1rem;
                       line-height: 1.1rem;
                       width: calc(100% - 0.3rem);
                       padding-top: 1.5rem;
                       color:rgba(var(--gris),0.8);}

#diagnostico{background-color: rgba(var(--gris),1);
             background-image: url("../img/circulo.png"), url("../img/circulo.png");
             background-repeat: no-repeat, no-repeat;
             background-position: center  bottom -200px, top -220px center;
             color:rgba(var(--blanco),1);
             height: 730px;
             transition: all ease 0.5s;}


      #diagnostico h1{text-align: center;
                      font-weight: normal;
                      font-size: 1.8rem;
                      line-height: 1.6rem;
                      padding-top: 3rem;
                      text-shadow: 0 0 15px rgba(var(--gris),1);}

      #diagnostico h2{text-align: center;
                      font-weight: normal;
                      width: 80%;
                      font-size: 1.1rem;
                      line-height: 1rem;
                      margin-left: 10%;
                      padding-top: 5rem;
                      text-shadow: 0 0 15px rgba(var(--gris),1);}

      .diagnostico-item{width: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        margin-top: 3rem;}

      .diagnostico-item-card{width: 100%;
                             display: flex;
                             flex-direction: column;
                             justify-content: center;
                             align-items: center;
                             margin: 1rem;}

      .diagnostico-item-card div{font-size: 1.1rem;
                                 font-weight: lighter;
                                 width: 40px;
                                 height: 40px;
                                 border: dotted 2px rgba(var(--blanco),1);
                                 border-radius: 50%;
                                 display: flex;
                                 justify-content: center;
                                 align-items: center;}

      .diagnostico-item-card p{text-align: center;}
                    
.separador{display: flex;
           flex-direction:column;
           align-items: center;
           justify-content: center;
           height: 130px;}

          .separador img{width: 100px;}

           .separador div{width:100%;}

           .separador h1{ font-family: "Cal Sans", sans-serif;
                          font-size: 0.9rem;
                          letter-spacing: 0.1rem;
                          text-align: center;
                          text-transform: uppercase;}

           .separador h2{ font-size: 0.7rem;
                          font-weight: normal;
                          line-height: 0.8rem;
                          letter-spacing: 0.05rem;
                          text-align: center;}

           .separador h2 span{font-weight: normal;}

           .separador-blanco{background-color: rgba(var(--blanco),1);
                             margin-bottom: 2px;}


#servicios .servicios-categoria:nth-of-type(odd){background-color: rgba(var(--gris),1);
                                                 background-image: url("../img/circulos.png"), url("../img/circulos.png");
                                                 background-repeat: no-repeat, no-repeat;
                                                 background-position: bottom -300px right -300px, top -300px left 150px;
                                                 transition: all ease 0.5s;  
                                                } 

                                                #servicios .servicios-categoria:nth-of-type(odd):hover{background-position: bottom -250px right -250px, top -250px left 200px;}                                                

#servicios .servicios-categoria:nth-of-type(even){background-color: rgba(var(--gris),1);
                                                  background-image: url("../img/circulos.png"), url("../img/circulos.png");
                                                  background-repeat: no-repeat, no-repeat;
                                                  background-position: bottom -300px left -300px, top -300px right 150px;
                                                  transition: all ease 0.5s;  
                                                 }  

                                                 #servicios .servicios-categoria:nth-of-type(even):hover{background-position: bottom -250px left -250px, top -250px right 200px; }         

.servicios-categoria{background-color:rgba(var(--gris),1);
                     margin-bottom: 10px;
                     width: 100%;}

                     .servicios-item{background: rgba(var(--blanco),1);
                                     width: 100%;
                                     height: 420px;
                                     display: flex;
                                     flex-direction: column;}

                     .servicios-item h1{font-weight: lighter;
                                        display: flex;
                                        flex-direction: column;
                                        align-items: flex-start;
                                        justify-content: center;
                                        margin: 2rem 0.5rem;
                                        padding-left: 1rem;
                                        background: url("../img/linea.png") no-repeat;
                                        background-position: left top;}

                                        .servicios-item h1 span:first-child{font-size: 2rem;
                                                                            line-height: 1.5rem;}
                               
                                        .servicios-item h1 span:last-child{font-size: 1.1rem;}

                     .servicios-item h3{font-size: 1rem;
                                       font-weight: lighter;
                                       display: flex;
                                       flex-direction: column;
                                       margin: 0 1.8rem;}

                               .servicios-item h3 span{background-image: url("../img/circulo_v.png");
                                                        background-repeat: no-repeat;
                                                        background-position: left center;
                                                        background-size: 15px auto;
                                                        padding-left: 1.2rem;}

                     .servicios-item h6{font-size: 1rem;
                                        font-weight: lighter;
                                        text-align: center;
                                        padding-top: 15px;
                                        color: rgba(var(--gris),0.8);}

                     .servicios-item p{font-size: 1.1rem;
                                       font-weight: lighter;
                                       text-align: left;
                                       line-height: 1.2rem;
                                       margin:0 0.5rem 2rem 0.5rem;}

                     .servicios-item-aling-01,
                     .servicios-item-aling-02{display: flex;
                                              flex-direction: row;
                                              align-items:flex-start;}
                               
                        .servicios-item-aling-01{justify-content: flex-start;}
                        .servicios-item-aling-02{justify-content: flex-end;}

#procesos{color:rgba(var(--blanco),1);
          background-color: rgba(var(--gris),1);
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          height:1000px;}

          .procesos-item{display: flex;
                         flex-direction: column;
                         align-items: center;
                         justify-content: flex-start;
                         width: 100%;
                         height: 250px;}

          .procesos-item h2{font-size: 0.9rem;
                            font-weight: normal;
                            width: 40px;
                            height: 40px;
                            border: dotted 2px rgba(var(--blanco),1);
                            border-radius: 50%;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            margin-top: 2rem;}

          .procesos-item h1{font-size: 1.3rem;
                            font-weight: normal;
                            letter-spacing: 0.05rem;
                            margin-top: 2rem;}
                          
          .procesos-item p{font-size: 1rem;
                            font-weight: lighter;
                            line-height: 1rem;
                            text-align: center;
                            padding: 1rem;}

#beneficios{background-color: rgba(var(--blanco),1);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            height: 1000px;}

            .beneficios-item{width: 100%;
                             height: 250px;
                             display: flex;
                             flex-direction: column;
                             align-items: center;
                             justify-content: flex-start;
                             border-right: dashed 2px rgba(var(--gris),0.1);
                             transition: all ease 0.5s;}

                             .beneficios-item:hover{background:linear-gradient(to bottom,rgba(var(--verdeC),0),rgba(var(--verdeC),0.3));}

            .beneficios-item h2{color:rgba(var(--verde),1);
                                border: solid 2px rgba(var(--verdeC),1);
                                font-size: 0.9rem;
                                height: 40px;
                                width: 40px;
                                border-radius: 50%;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                margin-top: 2rem;}

            .beneficios-item h1{font-size: 1.2rem;
                                font-weight: normal;
                                margin-top: 1.5rem;
                                color:rgba(var(--gris),0.6);}

            .beneficios-item p{font-size: 1rem;
                               font-weight: normal;
                               line-height: 1rem;
                               width: 85%;
                               min-height: 50%;
                               padding-top: 2rem;
                               text-align: center;
                               border-bottom: solid 2px rgba(var(--verdeC),1);
                               color:rgba(var(--gris),0.6);}

#contacto{height: 800px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
          background-image: url("../img/circulo.png"), url("../img/circulo.png"), url("../img/circulo.png");
          background-repeat: no-repeat, no-repeat, no-repeat;
          background-position: left -200px center, top -200px center, right -100px bottom;}

          .contacto h1{font-family: "Cal Sans", sans-serif;
                       font-size: 2rem;
                       text-align: center;
                       line-height: 1.8rem;
                       letter-spacing: 0.1rem;
                       margin-top: 4rem;}

          .contacto h2{display: flex;
                       flex-direction: column;
                       text-align: center;
                       font-size: 1rem;
                       font-weight: normal;
                       line-height: 1rem;
                       margin-top: 1.5rem;
                       width: 80%;
                       color: rgba(var(--gris),0.6);}

          .contacto form{display: flex;
                         flex-direction: column;
                         align-items: center;
                         width:100%;
                         margin-top: 2rem;}

form input,
form input:active,
form input:focus{height: 40px;
                 width: 90%;
                 color: rgba(var(--blanco),1);
                 background-color: rgba(var(--blanco),0.1);
                 border: solid 2px rgba(var(--blanco),1);
                 border-radius: 20px;
                 margin-bottom: 8px;
                 text-align: center;
                 font-size: 1rem;
                 outline: none;}

form textarea,
form textarea:active,
form textarea:focus{height: 200px;
                    width: 90%;
                    color: rgba(var(--blanco),1);
                    background-color: rgba(var(--blanco),0.1);
                    border: solid 2px rgba(var(--blanco),1);
                    border-radius: 20px;
                    margin-bottom: 8px;
                    text-align: left;
                    font-size: 1rem;
                    padding: 0.5rem;
                    outline: none;} 

              form input::placeholder,
              form textarea::placeholder{color:rgba(var(--blanco),1);}

.enviar{background: linear-gradient(to left,rgba(var(--celeste),1),rgba(var(--rosa),1));
        transition: all ease 0.5s;}

        .enviar:hover{background: linear-gradient(to left,rgba(var(--celeste),1),rgba(var(--verdeC),1));}

footer{display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 350px;
        background-color: black;
        background-image: url("../img/circulos.png"), url("../img/circulos.png");
        background-repeat: no-repeat, no-repeat;
        background-size: 200px auto, 200px auto;
        background-position: left -100px top, right -100px bottom;}

        footer img{width: 100px;
                   margin-top: 1rem;
                   opacity: 0.3;}

        footer h3{display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  font-size: 0.5rem;
                  font-weight: normal;
                  line-height: 0.5rem;
                  color:rgba(var(--blanco),0.3);
                  margin-bottom: 1rem;}

                                
.mensaje-loading{width: 100%;
                 height: 50px;
                 display: flex;
                 flex-direction: row;
                 align-items: center;
                 justify-content: center;
                 border-top: solid 4px rgba(var(--verde),0.5);
                 transition: all ease 0.5s;
                 position: fixed;
                 z-index: 100;
                 bottom: 0;
                 left: 0;
                 background: rgba(var(--verdeC),1);
                 display: none;
                 } 

                .loading-spinner { width: 24px;
                                   height: 24px;
                                   fill: rgba(var(--gris),0.5);
                                   animation: spin 2s linear infinite;}
                                   

                .mensaje-loading p{ font-size: 1rem;
                                    font-weight: normal;
                                    text-align: center;
                                    color:rgba(var(--gris),0.5);
                                    line-height: 1rem;}

.call{color:rgba(var(--blanco),1);
      background: linear-gradient(to right,rgba(var(--celeste),1),rgba(var(--rosa),1));
      border: solid 1px rgba(var(--blanco),1);
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      height: 30px;
      border-radius: 14px;
      transition: all ease 0.5s;
      margin-top: 5rem;
      margin-left: 3rem;}

      .call svg{transform: rotate(270deg);
                fill: rgba(var(--rosa),1);
                background: rgba(var(--blanco),1);
                border-radius: 50%;
                margin-top: 4px;
                margin-left: 2px;
                transition: all ease 0.2s;}

      .call h6{font-size: 1rem;
               font-weight: lighter;
               padding-left: 1rem;
               padding-right: 2rem;
               line-height: 0.8rem;
               color: rgba(var(--blanco),1);}

.call-servicio{margin-right: 1rem;
               margin-left: 1rem;
               margin-top: 2rem;}

               .call-servicio h6{padding-top: 0;}


@media (min-width: 540px){

main{width: 540px;}

#inicio{height: 400px;}

        .inicio-txt h1,
        .inicio-txt h2,
        .inicio-txt p{padding-left: 0.5rem;}

.servicios-item{width: 400px;}

#procesos{flex-direction: row;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: flex-start;
          height:600px;}

          .procesos-item{width: 270px;
                         height: 300px;
                         border: solid 1px rgba(var(--blanco),0.1);}

          .procesos-item h1{font-size: 1.1rem;}

#beneficios{flex-direction: row;
            flex-wrap: wrap;
            height: 600px;}   
            
            .beneficios-item{width: 270px;
                             height: 300px;}

#contacto{height: 700px;}
          
          .contacto h1{font-size: 1.5rem;}

          .contacto h2{font-size: 1rem;
                       margin-top: 0.5rem;
                       width: 90%;}

.call{margin-top: 2rem;
      margin-left: 10rem;}

footer{width: 540px;}}

@media (min-width: 768px){

main{width: 768px;}

#inicio{height: 350px;
        flex-direction: row;}

        .inicio-logo{width: 200px;
                     height: 100%;}

                     .inicio-logo img{width: 100px;
                                      margin-top: 1rem;
                                      margin-left: 0.2rem;
                                      margin-right: 0.2rem;}

#diagnostico{background-image: url("../img/circulo.png"), url("../img/circulo.png"),url("../img/circulo.png");
             background-repeat: no-repeat, no-repeat, no-repeat;
             background-position: left -200px  bottom -200px, top -220px center, right -200px bottom -200px;
             height: 450px;
             transition: all ease 0.5s;}
             
             #diagnostico:hover{background-position: left -180px bottom -180px, top -240px center, right -180px bottom -180px;}

             .diagnostico-item{width: 100%;
                               flex-direction: row;
                               margin-top: 4rem;}

             #diagnostico h2{text-align: center;
                             width: 60%;
                             margin-left: 20%;
                             padding-top: 3rem;}
             
             .separador{flex-direction:row;}

                        .separador div{width:450px;
                                       margin-left: 1rem;}

                        .separador h1{font-size: 1.1rem;
                                      letter-spacing: 0.1rem;
                                      text-align: left;}

                        .separador h2{text-align: left;}

#servicios .servicios-categoria:nth-of-type(odd):hover{background-position: bottom -250px right -250px, top -250px left 200px;}
#servicios .servicios-categoria:nth-of-type(even):hover{background-position: bottom -250px left -250px, top -250px right 200px; }

#procesos{justify-content: center;
          align-items: center;
          height: 640px;}                        
                        
                        .procesos-item{width: 300px;
                                       height: 300px;
                                       margin: 10px;}
                        
                        .procesos-item:hover{background: linear-gradient(to bottom,rgba(var(--blanco),0.0),rgba(var(--blanco),0.04));}

#beneficios{flex-direction: row;
            align-items: center;
            justify-content: center;
            height: 640px;}

            .beneficios-item{width: 300px;
                             height: 300px;
                             border: dashed 2px rgba(var(--gris),0.1);
                             margin: 10px;
                             transition: all ease 0.5s;}

                             .beneficios-item:hover{background:linear-gradient(to bottom,rgba(var(--verdeC),0),rgba(var(--verdeC),0.3));}


#contacto{height: 700px;
          background-image: url("../img/circulo.png"), url("../img/circulo.png"), url("../img/circulo.png");
          background-repeat: no-repeat, no-repeat, no-repeat;
          background-position: left -200px center, top -200px center, right -100px bottom;}

          .contacto h1{font-size: 2.4rem;
                       line-height: 2.2rem;
                       margin-top: 4rem;}

          .contacto h2{font-size: 1.4rem;}

          .contacto form{width: 600px;
                         margin-top: 2rem;}

footer{width: 768px;}

          footer h3{font-size: 0.9rem;
                    line-height: 0.8rem;}}

@media (min-width: 1024px){

main{width: 1024px;}

#inicio{width: 100%;
        height: 450px;}

        .inicio-logo{width: 450px;}

                     .inicio-logo img{width: 116px;
                                      margin-top: 2rem;}

                     .inicio-txt h1,
                     .inicio-txt h2,
                     .inicio-txt p{ padding-left: 2rem;}

        .inicio-txt h1{font-size: 2.5rem;
                       line-height: 2rem;
                       letter-spacing: 0.2rem;}

        .inicio-txt h2{font-size: 1.5rem;
                       margin-top: 3rem;}
        
        .inicio-txt p{ font-size: 1.1rem;
                       line-height: 1.1rem;
                       width: 60%;
                       padding-top: 1rem;} 
                       
.call-inicio{margin-left: 50%;
             margin-top: 5rem;}

.procesos-item{width: 400px;
               height: 300px;
               margin: 10px;}

               .procesos-item:hover{background: linear-gradient(to bottom,rgba(var(--blanco),0.0),rgba(var(--blanco),0.04));}

.beneficios-item{width: 400px;
                 height: 300px;}

                .beneficios-item:hover{background:linear-gradient(to bottom,rgba(var(--verdeC),0),rgba(var(--verdeC),0.3));}

footer{width: 1024px;}}

@media (min-width: 1300px){

main{width: 1300px;}

#inicio{height: 500px;}

        .inicio-logo{
                     background-position: bottom -200px left -200px;
                     width: 450px;
                     }

                     .inicio-logo img{width: 116px;
                                      margin-top: 2rem;}

        
        .inicio-txt h1,
        .inicio-txt h2,
        .inicio-txt p{ padding-left: 3rem;}

        .inicio-txt h1{font-size: 3rem;
                       line-height: 2.5rem;
                       letter-spacing: 0.2rem;
                       }

        .inicio-txt h2{font-size: 1.5rem;}
        
        .inicio-txt p{ font-size: 1.1rem;
                       line-height: 1.1rem;
                       width: 60%;
                       padding-top: 1rem;}
                    
#diagnostico{height: 500px;
             transition: all ease 0.5s;}

             #diagnostico:hover{background-position: left -180px bottom -180px, top -240px center, right -180px bottom -180px;}

             #diagnostico h1{text-align: center;
                             font-weight: normal;
                             padding-top: 3rem;
                             text-shadow: 0 0 15px rgba(var(--gris),1);}
            
             #diagnostico h2{text-align: center;
                             font-weight: normal;
                             width: 60%;
                             margin-left: 20%;
                             padding-top: 5rem;
                             text-shadow: 0 0 15px rgba(var(--gris),1);}
            
            .diagnostico-item{width: 100%;
                              display: flex;
                              flex-direction: row;
                              align-items: flex-start;
                              justify-content: center;
                              margin-top: 3rem;}

            .diagnostico-item-card{width: 300px;
                                   display: flex;
                                   flex-direction: column;
                                   justify-content: center;
                                   align-items: center;
                                   margin: 1rem;}
            
            .diagnostico-item-card div{font-size: 1.1rem;
                                       font-weight: lighter;
                                       width: 40px;
                                       height: 40px;
                                       border: dotted 2px rgba(var(--blanco),1);
                                       border-radius: 50%;
                                       display: flex;
                                       justify-content: center;
                                       align-items: center;}

            .diagnostico-item-card p{text-align: center;}

.separador{display: flex;
           flex-direction:row;
           align-items: center;
           justify-content: center;
           height: 130px;}

           .separador img{width: 120px;}

           .separador div{width: 650px;
                          margin-left: 2rem;}

           .separador h1{ text-transform: none;
                          font-size: 2rem;
                          letter-spacing: 0.1rem;
                          text-align: left;
                          width: 100%;}

           .separador h2{ font-size: 0.9rem;
                          font-weight: normal;
                          line-height: 0.8rem;
                          letter-spacing: 0.05rem;}

           .separador h2 span{font-weight: normal;}
           
           .separador-blanco{background-color: rgba(var(--blanco),1);
                             margin-bottom: 2px;}

#servicios .servicios-categoria:nth-of-type(odd){background-color: rgba(var(--gris),1);
                                                 background-image: url("../img/circulos.png"), url("../img/circulos.png");
                                                 background-repeat: no-repeat, no-repeat;
                                                 background-position: bottom -300px right -300px, top -300px left 150px;
                                                 transition: all ease 0.5s;  
                                                } 

                                                #servicios .servicios-categoria:nth-of-type(odd):hover{background-position: bottom -250px right -250px, top -250px left 200px;}                                                

#servicios .servicios-categoria:nth-of-type(even){background-color: rgba(var(--gris),1);
                                                  background-image: url("../img/circulos.png"), url("../img/circulos.png");
                                                  background-repeat: no-repeat, no-repeat;
                                                  background-position: bottom -300px left -300px, top -300px right 150px;
                                                  transition: all ease 0.5s;  
                                                 }  

                                                 #servicios .servicios-categoria:nth-of-type(even):hover{background-position: bottom -250px left -250px, top -250px right 200px; }         

.servicios-categoria{background-color:rgba(var(--gris),1);
                     margin-bottom: 10px;
                     width: 100%;}

            .servicios-item{background: rgba(var(--blanco),1);
                            width: 480px;
                            height: 400px;
                            display: flex;
                            flex-direction: column;
                            }

            .servicios-item h1{font-weight: lighter;
                               display: flex;
                               flex-direction: column;
                               align-items: flex-start;
                               justify-content: center;
                               margin: 2rem 2rem;
                               padding-left: 1rem;
                               background: url("../img/linea.png") no-repeat;
                               background-position: left top;}

                               .servicios-item h1 span:first-child{font-size: 2rem;
                                                                   line-height: 1.5rem;}
                               
                               .servicios-item h1 span:last-child{font-size: 1.1rem;}

            .servicios-item h3{font-size: 1rem;
                               font-weight: lighter;
                               display: flex;
                               flex-direction: column;
                               margin: 0 1.8rem;}

                               .servicios-item h3 span{background-image: url("../img/circulo_v.png");
                                                        background-repeat: no-repeat;
                                                        background-position: left center;
                                                        background-size: 15px auto;
                                                        padding-left: 1.2rem;}

            .servicios-item h6{font-size: 1rem;
                               font-weight: lighter;
                               text-align: center;
                               padding-top: 15px;
                               color: rgba(var(--gris),0.8);}

            .servicios-item p{font-size: 1.1rem;
                              font-weight: lighter;
                              text-align: left;
                              line-height: 1.2rem;
                              margin:0 3rem 2rem 3rem;}
           
.servicios-item-aling-01,
.servicios-item-aling-02{display: flex;
                         flex-direction: row;
                         align-items:flex-start;}
                               
                        .servicios-item-aling-01{justify-content: flex-start;}
                        .servicios-item-aling-02{justify-content: flex-end;}

#procesos{color:rgba(var(--blanco),1);
          background-color: rgba(var(--gris),1);
          background-image: url("../img/circulos.png"), url("../img/circulos.png");
          background-repeat: no-repeat, no-repeat;
          background-size: 298px auto, 298px auto;
          background-position: left -149px bottom -149px, right -149px bottom -149px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: flex-start;
          height: 400px;}

          .procesos-item{display: flex;
                         flex-direction: column;
                         align-items: center;
                         justify-content: flex-start;
                         width: 300px;
                         height: 400px;
                         margin: 0px;}

                         .procesos-item:hover{background: linear-gradient(to bottom,rgba(var(--blanco),0.0),rgba(var(--blanco),0.04));}

          .procesos-item h2{font-size: 0.9rem;
                            font-weight: normal;
                            width: 40px;
                            height: 40px;
                            border: dotted 2px rgba(var(--blanco),1);
                            border-radius: 50%;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            margin-top: 3rem;}

          .procesos-item h1{font-size: 1.3rem;
                            font-weight: normal;
                            letter-spacing: 0.05rem;
                            margin-top: 2rem;}
                          
          .procesos-item p{font-size: 1rem;
                            font-weight: lighter;
                            line-height: 1rem;
                            text-align: center;
                            padding: 1rem;}

#beneficios{background-color: rgba(var(--blanco),1);
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: flex-start;
            height: 400px;}

            .beneficios-item{width: 25%;
                             height: 100%;
                             display: flex;
                             flex-direction: column;
                             align-items: center;
                             justify-content: flex-start;
                             border:none;
                             border-right: dashed 2px rgba(var(--gris),0.1);
                             margin: 0px;
                             transition: all ease 0.5s;}

                             .beneficios-item:hover{background:linear-gradient(to bottom,rgba(var(--verdeC),0),rgba(var(--verdeC),0.3));}

            .beneficios-item h2{color:rgba(var(--verde),1);
                                border: solid 2px rgba(var(--verdeC),1);
                                font-size: 0.9rem;
                                height: 40px;
                                width: 40px;
                                border-radius: 50%;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                margin-top: 2rem;}

            .beneficios-item h1{font-size: 1.2rem;
                                font-weight: normal;
                                margin-top: 1.5rem;
                                color:rgba(var(--gris),0.6);}

            .beneficios-item p{font-size: 1rem;
                               font-weight: normal;
                               line-height: 1rem;
                               width: 85%;
                               min-height: 50%;
                               padding-top: 2rem;
                               text-align: center;
                               border-bottom: solid 2px rgba(var(--verdeC),1);
                               color:rgba(var(--gris),0.6);}

#contacto{height: 800px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
          background-image: url("../img/circulo.png"), url("../img/circulo.png"), url("../img/circulo.png");
          background-repeat: no-repeat, no-repeat, no-repeat;
          background-position: left -200px center, top -200px center, right -100px bottom;}

          .contacto h1{font-family: "Cal Sans", sans-serif;
                       font-size: 2.5rem;
                       text-align: center;
                       line-height: 2.3rem;
                       letter-spacing: 0.1rem;
                       margin-top: 6rem;}

          .contacto h2{display: flex;
                       flex-direction: column;
                       text-align: center;
                       font-size: 1.3rem;
                       font-weight: normal;
                       line-height: 1.1rem;
                       margin-top: 1.5rem;
                       color: rgba(var(--gris),0.6);}

          .contacto form{display: flex;
                         flex-direction: column;
                         align-items: center;
                         width: 600px;
                         margin-top: 2rem;}

form input,
form input:active,
form input:focus{height: 40px;
                 width: 500px;
                 color: rgba(var(--blanco),1);
                 background-color: rgba(var(--blanco),0.1);
                 border: solid 2px rgba(var(--blanco),1);
                 border-radius: 20px;
                 margin-bottom: 8px;
                 text-align: center;
                 font-size: 1rem;
                 outline: none;}

form textarea,
form textarea:active,
form textarea:focus{height: 200px;
                    width: 500px;
                    color: rgba(var(--blanco),1);
                    background-color: rgba(var(--blanco),0.1);
                    border: solid 2px rgba(var(--blanco),1);
                    border-radius: 20px;
                    margin-bottom: 8px;
                    text-align: left;
                    font-size: 1rem;
                    padding: 0.5rem;
                    outline: none;} 

              form input::placeholder,
              form textarea::placeholder{color:rgba(var(--blanco),1);}

.enviar{background: linear-gradient(to left,rgba(var(--celeste),1),rgba(var(--rosa),1));
        transition: all ease 0.5s;}

        .enviar:hover{background: linear-gradient(to left,rgba(var(--celeste),1),rgba(var(--verdeC),1));}

footer{display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 1300px;
        background-color: black;
        background-image: url("../img/circulos.png"), url("../img/circulos.png");
        background-repeat: no-repeat, no-repeat;
        background-position: left -200px top, right -200px bottom;}

        footer img{width: 100px;
                   margin-top: 1rem;
                   opacity: 0.3;}

        footer h3{display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  font-size: 0.8rem;
                  font-weight: normal;
                  line-height: 0.7rem;
                  color:rgba(var(--blanco),0.3);
                  margin-bottom: 1rem;}

.call{color:rgba(var(--blanco),1);
      background: linear-gradient(to right,rgba(var(--celeste),1),rgba(var(--rosa),1));
      border: solid 1px rgba(var(--blanco),1);
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      height: 30px;
      border-radius: 14px;
      transition: all ease 0.5s;}

      .call svg{transform: rotate(270deg);
                fill: rgba(var(--rosa),1);
                background: rgba(var(--blanco),1);
                border-radius: 50%;
                margin-top: 4px;
                margin-left: 2px;
                transition: all ease 0.2s;}

      .call h6{font-size: 1rem;
               font-weight: lighter;
               padding-left: 1rem;
               padding-right: 2rem;
               line-height: 0.8rem;
               color: rgba(var(--blanco),1);}

.call:hover{background: linear-gradient(to left,rgba(var(--celeste),1),rgba(var(--verdeC),1));}

      .call:hover svg{fill:rgba(var(--verdeC),1);}

      .call:hover h6{text-shadow: 0 0 10px rgba(var(--gris),1);}

.call-inicio{margin-left: 50%;
             margin-top: 5rem;}

.call-servicio{margin-right: 1rem;
               margin-left: 40%;
               margin-top: 3rem;}

.call-servicio h6{padding-top: 0;}



}

@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
 }