@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&family=Noto+Sans+Gothic&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Raleway:ital,wght@0,100..900;1,100..900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
@import url(font.css);

:root {
  --bg-color-black: #1E1E1E;
  --bg-color-white: #FFFFFF;
  --bg-color-green: #D0FF00;
  --bg-color-green-2: #80971a;
  --ghotam: 'Gotham';
}

/*Estilos generales*/
.d-none {
  display: none;
}

body {
  margin: 0;
  padding: 0;
  /* height: calc(100vh - 5.625rem); */
  background-color: #000;

}
*{
  box-sizing: border-box;
}


main {
  overflow: hidden;
}

hr,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

a:link,
a:visited,
a:hover,
a:active {
  color:white;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}


input,
textarea {
  border: none;
  outline: 0;
}

/*Estilos generales*/

section{
  width: 100%;
  height: 100%;
  /* margin-top: 6rem; */
  padding-block: 4rem;

}
.splide{
  .splide__track{
    width: 100%;
    height: 100%;
    .splide__list{
      width: 100%;
      height: 100%;
      .splide__slide{
        
      }
    }
  }
}
/*Fin estilos generales*/
.text-center {
  text-align: center;
}

/********* wpfc7 *******/
.wpcf7-spinner {
  display: none;
}

span.wpcf7-not-valid-tip {
  color: var(--bg-color-red, red);
  font-family: sans-serif;
  font-size: 0.8rem;
  line-height: 0.8rem;
  /* 116.667% */
  padding-left: 1rem;
  margin-top: 0.5rem;
}

.wpcf7-response-output {
  display: none;
}/*# sourceMappingURL=app.css.map */

h1{
  color: red;
}
.none{
  display: none;
}

.contenedor{
  width: min(80%, 1350px);
  margin-inline: auto;
}
.flex-row{
  display: flex;
  justify-content: center;
  align-items: center;

}
.flex-col{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}
/*Estilos header*/
header{
  background-color: black;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10;
  .contenedor{
   
    justify-content: space-between;
    gap: 1rem;
    .logo-header{
      img{
        max-width: 200px;
      object-fit: contain;
      }
    }
    nav{
      padding-block: 1rem;
      padding-inline: 6rem;
      background-color: #191a1a;
      border: 2px solid #262b29;
      border-radius: 66px;
      ul{
        display: flex;
        justify-content: center;
        gap: 3rem;
        li{
          display: flex;
         height: 100%;
         width: 100%;
         position: relative;
          a{
            color: white;
            font-family: "Poppins", sans-serif;
            font-size: 16px;
            line-height: 18px;
            font-weight: 600;
            padding: 10px 15px;
            border-radius: 20px;
            transition: color 0.3s ease-in-out;
            &:hover{
              color: #9FD323;
            }
            &.contacto{
              background-color: #9FD323;
              &:hover{
                color: black;
              }
             
            }
            &.servicios{
              &:hover{
                .sub-menu{
                  display: flex;
                }
              }
            }

          
          }
        }
        .sub-menu{
          width: fit-content;

          background-color: red;
          display: none;
          flex-direction: column;
          gap: .5rem;
          position: absolute;
          top: 120%;
          left: 0;
          border-radius: 10px;
          &.active{
            display: flex;
          }
        }
      }
    }
    .links-paises{
      gap: 1rem;
      width: fit-content;
      .pais{
       
        img{
          width: 100%;
          height: 100%;
          max-width: 40px;
          object-fit: contain;
        }
      }

    }
  }
}
/*Fin header*/
/*Página de inicio*/
.section-hero{
  margin-top: 4rem;
  background-size: cover;
  background-position: center;
  background-repeat:  no-repeat;
  position: relative;

  height: 100%;


  &::before{
    content: '';
    background-color: rgba(30, 30, 30, .5);
    position: absolute;
    z-index: -1;
    height: 100%;
    width: 100%;
  }
  .contenedor{
    min-height: 45rem;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    .left{
      align-items: start;
      justify-content: center;
      gap: 3rem;
      flex: 1;
      h1{
        color: white;
    
        max-width: 70%;
        
          font-size: 64px;
          line-height: 64px;
        font-family: var(--ghotam);
          font-weight: bold;
          span{
            color: var(--bg-color-green) !important;
          
        } 


      }
      .box-services{
        gap: 1rem;
        .stat-box{
          padding: 1rem;
          max-width: 146px;
          height: 171px;
          border-radius: 10px;
          justify-content: space-between;
          h2{
            color: white;
            font-size: 36px;
          font-family: var(--ghotam);
          }
          .small-text, p{
            color: white;
            font-size: 16px;
          font-family: var(--ghotam);
          }
          p{
            font-size: 20px;
            line-height: normal;
          }
          &:hover{
            border: 1px solid #D0FF00;
          }
        }
      
      }

    }
    .rigth{
  
      display: flex;
      justify-content: center;
      position: relative;
      .arrow-green{
        display: flex;
            width: fit-content;
            position: absolute;
            right:2%;
      }
      #svg{
        pointer-events: all;
        width: 498px;
        height: 440px;
        position: relative;
       
       
        #textContent{
          height: 100%;
          pointer-events: all;
          width: 420px;
          height: 440px;
         #content{
          color: white;
          font-family: sans-serif;
          height: 80%;
          width: 100%;
          display: flex
      ;
          flex-direction: column;
          justify-content: center;
          padding-inline-start: 2rem;
            h2{
              text-align: start;
             font-family: var(--ghotam);
            font-size: 30px;
            line-height: 35px;
            font-weight: bold;
            width: 100%;
            }
            p{
             font-family: var(--ghotam);
              font-size: 20px;
              line-height: 25px;
              font-weight: 500;
            }
          
         }
        }
       
       
      }
      .btn {
        color: #000;
      font-family: var(--ghotam);
        width: fit-content;
        font-size: 18px;
        font-weight: 600;
        background: linear-gradient(to left, rgba(255, 255, 255, 0.1) 10%, #999999 62%);
        padding: 10px 15px;
        border-radius: 30px;
        position: absolute;
        bottom: 16rem;
        right: 8rem;
        width: 250px;

        transition: all 0.3s ease-in-out;
        pointer-events: auto;
        z-index: 20;
        a{
          width: 100%;
          display: flex;
          .texto-enlace{
            width: 100%;
            display: flex;
          }
        }
        &:hover{
          background-color: #9FD323;
        }
      }
   
    }
  }

}
#image-carousel{
  position: relative;
  /* padding-block: 1rem; */
  z-index: 1;
  background-color: rgba(40, 40, 40, .5);
  border-radius: 0 0 15px 15px;
  .splide__track{
    border-bottom: 2px solid rgba(170, 220, 50, .6);
    padding-block: 1rem;
    border-radius: 20px;
    .splide__list{
      .splide__slide{
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    
  }


}

.nosotros{
  background-color: #000;
  .contenedor{
    gap: 2rem;
    .left{
      flex: .7;
      h2{
        color: white;
      font-family: var(--ghotam);
        font-size: 59px;
        font-weight: 900;
        line-height: 60px;
     
      }
    
    }
    .rigth{
      flex: 1;
      .cards{
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        place-items: center;
        gap: 1rem;
        .card{
          padding: 1rem;
          min-height: 202px;
          max-width: 250px;
          border-radius: 10px;
       
          background: linear-gradient(
        to bottom, 
        #333F31 0%, 
        #4A6646 28%, 
        #7EA12B 68%, 
        #A8D115 89%, 
        #D0FF00 100%
    );
          p{
            color: white;
          font-family: var(--ghotam);
            font-size: 21px;
            font-weight: 700;
            line-height: 25px;
            text-align: center;
          }
        }
      }
    }
  }

}
.empresas{
  gap: 2.5rem;
  .fondo-linea{
    height: 2rem;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .contenedor{
    h2{
    font-family: var(--ghotam);
      font-size: 48px;
      line-height: 50px;
      font-weight: 800;
      color: white;
      padding-block-end: 3rem;
      text-align: center;
      strong{
        color: #7EA12B;
      }
    }
    
    #carousel-empresas{
      .splide__track{
        background-color: #333F31;
        border-radius: 20px;
        position: relative;
        border-top: 3px solid rgba(170, 220, 50, 0.6); /* Verde translúcido */
        
      
      
        .splide__list{
          .splide__slide{
            display: flex;
            justify-content: center;
            align-items: center;
            img{
              max-width: 115px;
              object-fit: fit;
            }
          }
        }
      }
    }
  }
}
.quienes-somos {
  .contenedor {
      gap: 2rem;
      .top{
              
        h2 {
          color: white;
        font-family: var(--ghotam);
          font-size: 48px;
          font-weight: bold;
      }
      }
      .bottom{
        gap: 2rem;
        .left {
          flex: 1;
          gap: 1rem;
      
          
          .images {
              gap: 1rem;
          }
      }
      
      .right {
          flex: 1;
          gap: 2rem;
          
          p {
              color: white;
            font-family: var(--ghotam);
              font-size: 24px;
              line-height: 25px;
              font-weight: 800;
              
              strong {
                  color: var(--bg-color-green);
              }
          }
          
          .cards-soluciones {
            width: 100%;
            height: 100%;
            gap: 2rem;
              h3 {
                font-family: var(--ghotam);
                  font-size: 12px;
                  line-height: 13px;
                  font-weight: bold;
                  color: white;
                  text-align: start;
                  width: 100%;
              }
              .boxs-soluciones{
                display: grid;
                grid-template-columns: repeat(4,1fr);
                width: 100%;
                .box{
                  gap: 1rem;
                  justify-content: space-between;
                  .image{
                    max-width: 60px;
                    max-block-size: 75px;
                    img{
                      object-fit: contain;
                      height: 100%;
                      width: 100%;
                    }
                   } 
                   h3{
                    color: #9FD323;
                  font-family: var(--ghotam);
                    font-size: 15px;
                    line-height: 15px;
                    text-align: center;
    
                   }
                }
              
              }
          }
      }
      }
      
    
  }
}



.nuestros-servicios{
  .contenedor{
    gap: 4rem;
    h2{
      color: white;
    font-family: var(--ghotam);
                font-size: 23px;
                line-height: 25px;
                font-weight: bold;
      text-align: center;
      strong{
        color:#BFF747;
      }
    }
    .grid-servicios {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 1fr 1fr;
      gap: 3rem;
      width: 100%;
    
      .card-servicio {
        min-height: 271px;
        padding: 1rem;
        gap: 1rem;
        box-shadow: 0 0 10px 2px rgba(173, 255, 47, 0.5);
        border-radius: 20px;
        position: relative; /* Para alinear los textos */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        overflow: hidden;
    
        .textos {
          position: relative;
          width: 100%;
          height: 40px; /* Altura fija para evitar saltos */
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
    
          h3,
          p {
            position: absolute;
            transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
          }
    
          h3 {
          font-family: var(--ghotam);
            font-size: 25px;
            line-height: 25px;
            color: white;
            opacity: 1;
            visibility: visible;
          }
    
          p {
            color: white;
          font-family: var(--ghotam);
            font-size: 22px;
            text-align: center;
            opacity: 0;
            visibility: hidden;
          }
        }
    
        .image img {
          transition: all 0.6s ease-in-out;
        }
    
        &:hover {
          box-shadow: 0 0 25px 5px rgba(173, 255, 47, 0.8);
    
          .image img {
            filter: brightness(0) invert(1);
            transform: translateY(-30px);
          }
    
          .textos {
            h3 {
              opacity: 0;
              visibility: hidden;
            }
    
            p {
              opacity: 1;
              visibility: visible;
            }
          }
        }
      }
    }
    
    
  }

}
.proyectos{
  display: none;
  .contenedor{
    gap: 3rem;
    h2 {
      color: white;
    font-family: var(--ghotam);
      font-size: 48px;
      font-weight: bold;
  }
    .grid-proyectos{
      display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows:  1fr 1fr;
    gap: 1rem;


    .proyecto{
      padding: 1rem;
      border-radius: 10px;
      /* background-color: white; */
        img{
          height: 100%;
            border-radius: 10px;
          width: 100%;
          object-fit: cover;
        }  
      }
    }
  }
}
.reviews{
  .contenedor{
    gap: 2rem;
    h2{
      color: white;
      font-size: 36px;
      line-height: 40px;
      font-family: var(--ghotam);
    }
    #carousel-reviews{
      .splide__track{
        .splide__list{
          .splide__slide{
            display: flex;
            justify-content: center;
            align-items: center;
            .review{
              width: fit-content;
              max-width: 500px;
              padding: 1rem;
              background-color: white;
              border-radius: 20px;
              gap: 1rem;
              .image-logo{
                
                img{

                }
                
              }
              .comentario{
                align-items: start;
                gap: .3rem;
                p{
                  font-family: var(--ghotam);
                  font-size: 16px;
                  line-height: 20px;
                }
                h3{
                  font-family: var(--ghotam);
                  font-size: 20px;
                  line-height: 25px;
                }
                h4{
                  font-family: var(--ghotam);
                  line-height: 18px;
                  line-height: 20px;
                }
              }
            }
          }
        }
      }
      .splide__pagination{
        margin-bottom: -2rem;
      }
    }
    
  }
}
.citas{
  gap: 3rem;
  .textos{
    gap: 1rem;
    width: 80%;
    margin: auto;
    h2{
      color: white;
      font-family: var(--ghotam);
      font-size: 36px;
      line-height: 40px;
      text-align: center;
    }
    p{
      color: white;
      font-family: var(--ghotam);
      text-align: center;
  
    }
  }

  .contenedor{
      gap: 2rem;
      .cita{
        border-radius: 20px;
        /* background-color: #384e65; */
        /* background-color: rgba(255, 255, 255, .9); */
        background-color: rgb(139 233 49 / 90%);
        padding: 1rem;
        flex: 1;
        transition: all 0.3s ease-in-out;
        position: relative;
        &::after{
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-image: url(../../images/trama-opt.png);
          background-size: 150%;
          background-position: center;
          background-repeat: no-repeat;
          opacity: .025;
          position: absolute;
          z-index: 0;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;

        }
        &::before{
          content: '';
          background-color: transparent;
         box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 0;
          border-radius: 20px;
    
        }
        .textos{
          width: 50%;
          position: relative;
          align-items: start;
          z-index: 2;
          gap: 1rem;
          h3,p{
            color: black;
            font-family: var(--ghotam);
            text-align: start;
          }
          h3{
            font-size: 24px;
            line-height: 30px;
            font-weight: 600;
          }
          .boton{
            /* background-color:#9FD323 ; */
            background-color: white;
            color: black;
            font-family: var(--ghotam);
            width: fit-content;
            padding: 5px 10px;
            border-radius: 5px;
            font-weight: 600;
            cursor:pointer;
          }
       
        }
        .box-image{
          width: 50%;
          position: relative;
          z-index: 2;
          img{
            width: 100%;
            max-width: 304px;
            max-height: 304px;
            transform: translate(10%, 35%) scale(1.3);
                    object-fit: contain;
                    
          }
        }
     
      }
  }
  .sidebar{
    position: fixed;
    top: 0;
    right: -100%;
    width: 40%;
    height: 100%;
    background: #f9f9f9;
    box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2);
    background-color: #788b27;
    transition: right 0.3s ease-in-out;
    z-index: 1000;
    
    .sidebar-content{
      height: 100%;
      padding: 20px;
      position: relative;
      .close-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
      }
      .sidebar-form{
        .wpcf7 {
          .wpcf7-form{
            display: flex;
            flex-direction: column;
            gap: 1rem;
            h3{
              font-family: "Plus Jakarta Sans", sans-serif;
              font-size: 32px;
              line-height: 35px;
              color: white;
              font-weight: bold;
              
            }
            .item-form{
              p{
                position: relative;
                width: 100%;
                span{
                  display: flex;
                  width: 100%;
                  input,select{
                    width: 100%;
                    padding: 1rem;
                    border-radius: 20px;
                    font-family: "Plus Jakarta Sans", sans-serif;
                    font-size: 14px;
                    line-height: 15px;
                  }
                }
                .wpcf7-submit {
                  border-radius: 50%;
                  width: 40px;
                  height: 40px;
                  color: transparent;
                  background-image: url(../../images/button.png);
                  background-size: cover;
                  background-position: center;
                  background-repeat: no-repeat;
                  cursor: pointer;
                  position: absolute;
                  top: 4px;
                  right: 2%;
  
                }
              }
             
            }
            .btn{
            
              width: fit-content;
              p{
                width: 100%;
              }
            
            }
          }
        }
      }
    }
    &.show-sidebar {
      right: 0;
    }
  }
}
/*Fin página de inicio*/

/*Página de nosotros*/
.nosotros-main{
  margin-top: 6rem;
  .contenedor{
    justify-content: space-between;
    gap: 2rem;
     .lema{
      width: 100%;
      gap: 5rem;
      padding-block: 4rem;
      .left{
        display: flex;
        flex: 1;
        h2{
        font-family: var(--ghotam);
          font-size: 59px;
          
          color: white;
          strong{
            color: #A0D134;
          }
        }
      }
      .right{
        flex: 1;
        display: flex;
        color: white;
        align-items: start;
        gap: 1rem;
        padding: 1rem;
        background: linear-gradient(180deg, #282d1f -4%, rgba(0, 0, 0, 1) 46%);
        border-radius: 20px;
        p{
        font-family: var(--ghotam);
          font-size: 18px;
          line-height: 25px;
          color: #FFFFFF;
          img{
           
          }
        }

      }
      &:nth-child(even){
        flex-direction: row-reverse;
      }
     }
  }
}
.nuestro-equipo{
  .contenedor{
    gap: 5rem;
    .textos{
      gap: 1rem;
      h2,p{
        color: white;
        text-align: center;
    font-family: var(--ghotam);
      font-size: 56px;
      line-height: 60px;
      }
      p{
        font-size: 16px;
        line-height: 20px;
      }
    }

  }
}
#equipo{

  .splide__track{
    .splide__list{
      .splide__slide{
        display: flex;
        justify-content: center;
     
        .board{
          border-radius: 10px;
          width: 100%;
          max-width: 400px;
          height: 100%;
          position: relative;  
          .box-image{
            width: 100%;
            height: 100%;
            
            img{
              max-width: 100%;
              width: 100%;
              max-height: 500px;
              object-fit: cover;
              border-radius: 20px;
        
            
  
            }
          } 
        
         
        }
        .info{
          width: 100%;
          gap: .5rem;
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          padding-block: 1rem;
          background-color: rgba(0, 0, 0, .8);
          border-radius: 0 0 10px 10px;
          transition:all 0.3s ease-in-out;
          
          h3,p{
            color: white;
            text-align: center;
          font-family: var(--ghotam);
            transition:all 0.3s ease-in-out;
            font-size: 20px;
            line-height: 20px;
          }
          p{
            font-size: 18px;
            line-height: 25px;
          }
        }
        &:hover{
          .board{
         
          }
          .info{
            background-color: white;
            h3,p{
              color: black;
            }
          }
        }
      }
    }
   
  }
  .splide__pagination{
    bottom: -3rem;
  }
}
/*Fin página nosotros*/
/*Políticas y privacidad*/
.politicas-privacidad{
  margin-top: 6rem;

  .contenedor{
    h1, h2,p,a{
      color: white;
    font-family: var(--ghotam);
      padding-bottom: 1rem;
    }
    h1{
      font-size: 56px;
    }
    h2{
      font-size: 48px;
    }
    a{
      color: blue;
    }
    }
}
/*Fin*/

/*Estilos para blog*/
#blog{
  margin-top: 4rem;
  .contenedor{
    .grid-articles {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
      gap: 1.5rem;
      padding: 2rem 1rem;
     
    
      .article {
        padding: 1rem;
        background-color: #393030;
        width: 100%;
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: inherit;
        border-radius: 10px;
        transition: transform 0.3s ease-in-out;
    
        &:hover {
          transform: scale(1.05); 
        }
    
        .box-image {
          position: relative;
          width: 100%;
          overflow: hidden;
          border-radius: 8px;
    
          img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 8px;
          }
    
          .categories {
            position: absolute;
            left: 1rem;
            top: 1rem;
            background: #D1FF04;
           font-family: var(--ghotam);
            font-weight: 600;
            color: black;
            font-size: 15px;
            line-height: 18px;
            padding: 5px 10px;
            border-radius: 5px;
    
            .category {
              display: inline-block;
              margin-right: 5px;
            }
          }
        }
    
        .info-article {
          margin-top: 1rem;
          text-align: center;
    
          .title {
            font-size: 18px;
            line-height: 25px;
            font-weight: 500;
            display: block;
        
            color: white;
           font-family: var(--ghotam);
          }
    
          p {
            font-size: 1rem;
            color: white;
            
          }
        }
        &:hover{
          background-color: white;
          /* background-color: #D0FF00; */
          .categories{
            background-color: #000;
            .category{
              color: white;
            }
           
          }
          .info-article{
            .title{
              color: #000;
            }
          }
        }
      }
    }
    .pagination{
      padding-block: 1rem;

      gap: 1rem;
      .page-numbers{
        width: 35px;
        height: 35px;
        /* border-radius: 12px 0px; */
        border-radius: 50%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
       font-family: var(--ghotam);
        font-size: 15px;
        line-height: 18px;
        font-weight: 500;
        color: white;
        background-color: white;
        color: black;
        &.current{
          background-color: #7EA12B;
          color: white;
          font-weight: 600;
        }
        &.dots{
          
          
        }
        &.next,
        &.prev{
          svg{
            circle{
              fill: white;
            }
            path{
              fill: #000;
            }
          }
        }
        &.prev{
          svg{
            transform: rotate(180deg);
          }
        }
      }
      
    }
    
   
    @media (max-width: 768px) {
      .grid-articles {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
      }
    
      .box-image img {
        height: 180px; 
      }
    }
  }
}
#blog-post{
  margin-top: 4rem;
  height: 100%;
  width: 100%;
  .contenedor{
    gap: 3rem;
    .hero-blog-post{
      width: 100%;
      min-height: 25rem;
      background-image: url(../../images/banner-post.webp);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 20px;
      gap: 1rem;
      .categories{
        color: white;
        .category{
          padding: 10px 15px;
          border-radius: 20px;
          /*font-family: var(--ghotam); */
          font-family: var(--ghotam);
          background-image: linear-gradient(135deg, 
          #5CA638 0%, 
          #DFDA55 100%);
        }
      }
      h1{
        color: white;
       font-family: var(--ghotam);
        font-size: 48px;
        line-height: 50px;
        text-align: center;
      }
      .meta-info{
        .date{
          color: white;
         font-family: var(--ghotam);
          font-size: 16px;
          line-height: 20px;
          gap: 1rem;
          font-weight: 600;
          svg{
            fill: #5CA638;
            width: 30px;
            height: 30px;
        
          }
        }
      }
    }
    .content-post{
      display: flex;
      gap: 4rem;
      p, h3, h2,strong,span, b{
        color: white;
       font-family: var(--ghotam);
      }
      p,h2{
        margin-bottom: 1rem;
      }
      h2{
        font-size: 32px;
        line-height: 34px;
      }
      a{
        span{
          font-weight: 600 !important;
          &:hover{
            color: #86BD51;
          }

        }
        
     
      }
      ul{
        display: flex;
        flex-direction: column;
        gap: .7rem;
        margin-bottom: 1rem;
        li{
          margin-left: 2rem;
          list-style: disc;
          &::marker{
            color: white;
          }

        }
      }
      .left{
        width: 70%;
      }
      .right{
        width: 30%;
        .top{
          gap: 1rem;
          padding: 1rem;
          border-radius: 10px;
          background-image: linear-gradient(135deg, 
          #5CA638 0%, 
          #DFDA55 100%);
          .recent-post{
            align-items: start;
            .title-post{
              &:hover{
                color: white;
              }
            }
            .date{
              &:hover{
                color: white;
              }
            }
          }
          .recents-post{
            align-items: start;
            gap: 1rem;
            .post-category{
               gap: 1rem;
               .image-post{
                a{
                  display: flex;

                  img{
                    max-width: 100px;
                    max-height: 100px;
                    border-radius: 10px;
                  }
                }
               }
               .info{
                a{
                  .title-post{
                    &:hover{
                      color: white;
                    }
                  } 
                
                }
               }
            }
          }

        }
      
      }
    }


  }
}
/*Fin*/
/*Página de contacto*/
.banner-contacto{
  margin-top: 6rem;
  height: 420px;
  .contenedor{
      
    height: 100%;
    background-size: cover;
    background-position: center;
      background-repeat: no-repeat;
    border-radius: 20px;
    h1{
      color: white;
      font-family: var(--ghotam);
      font-size: 56px;
      line-height: 60px;h1{
        color: white;
        font-family: var(--ghotam);
        font-family: 56px;
        line-height: 60px;
        text-align: center;
      }
    
    }
  }
}
.page-contacto{
  .contenedor{
    gap: 3rem;
    
    .grid-informacion-contacto{
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      place-items: center;
      gap: 1rem;
      .card-informacion{
        width: 100%;
        border-radius: 20px;
        padding: 1rem;
        background-color: white;
        min-height: 200px;
     
        .svg{
          img{
            max-width: 30px;
    max-height: 30px;
    object-fit: contain;
          }
        }
        .bottom{
          gap: 1rem;
          h3,p{
            text-align: center;
            font-family: var(--ghotam);
          }
          h3{
            color: #80971a;
          }
          p{
            font-weight: 600;
          }
        }
      }
    }
    .formulario-contacto{
      width: 100%;

      background-color: white;
      border-radius: 20px;
      .wpcf7{
        padding-block: 2rem;
        .wpcf7-form{
          display: flex;
          flex-direction: column;
          gap:1rem;

          .textos{
            display: flex;
            flex-direction: column;
            gap: .5rem;
            h2,p{
              font-family: var(--ghotam);
            
              b{
                color: #80971a;
              }
            }
            h2{
              color: #80971a;
              font-size: 36px;
              line-height: 40px;
            }
          }
          .form-items{
            width: 100%;
            p{
              width: 100%;
              display: flex;
              gap: 1rem;
              span{
                display: flex;
                width: 100%;
                &.wpcf7-form-control-wrap{
               
                  .wpcf7-form-control{
                    flex-direction: column;
                    .wpcf7-list-item{
                     label{
                      display: flex;
                      gap: .5rem;
                      .wpcf7-list-item-label{
                        font-family: var(--ghotam);
                      }
                     }
                    }
                  }
                }
                input{
                  padding: 1rem;
                  border-radius: 10px;
                  border: 2px solid #000;
                  font-family: var(--ghotam);
                  &::placeholder{
                    font-family: var(--ghotam);
                  }
                }
                textarea{
                  width: 100%;
                  padding:1rem;
                  border-radius: 10px;
                  font-family: var(--ghotam);
                  border: 2px solid #000;
                  &::placeholder{
                    font-family: var(--ghotam);
                  }
                }
              }
            }
          }
          .btn{
            p{
              display: flex;
              justify-content: center;
              align-items: center;
              .wpcf7-submit{
                padding: 1rem;
                border-radius: 10px;
                font-family: var(--ghotam);
                font-weight: 600;
                background-color: #9FD323;;
                color: white;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
    .map{
      width: 100%;
      background-color: white;
    }
  }
}
/*Fin estilos página contacto*/
/*Estilos diseño web*/


@keyframes effect {
  0% {
      transform: rotate(0deg);
  }

  100% {
      transform: rotate(360deg);
  }
}
.hero-servicio{
  margin-top: 6rem;
  min-height: calc(100vh - 106px);
.contenedor{
  .textos{
    width: 50%;
    align-items: start;
    gap: 1rem;
    h1{
      color: white;
      font-family: var(--ghotam);
      font-size: 65px;
      line-height: 65px;
      font-weight: 400;
      strong{
        font-weight: 800;
      }
    }
    p{
      color: white;
      font-family: var(--ghotam);
      font-size: 20px;
      line-height: 24px;

    }
    .btn-link{
      padding: 10px 15px;
      width: fit-content;
      gap: .5rem;
      color: #000;
      font-family: var(--ghotam);
      font-size: 19.2px;
      line-height: 23px;
      font-weight: 600;
      background-color: #e5ff50;
      svg{
        transition: all 0.3s ease-in-out;
      }
      &:hover{
        svg{
          transform: translateX(5px);
        }
      }
    }
  }
#mockups{
    width: 50%;
    .splide__track{
      .splide__list{
        .splide__slide{
          display: flex;
          align-items: center;
          justify-content: center;
          img{
            max-height: 350px;
            max-width: 350px;
            object-position: center;
          object-fit: contain;          }
        }
      }
    }
  }
}


#text {
  height: 70px;
  width: 70px;
  /* position: relative; */
  position: absolute;
  cursor: pointer;
  left: 50%;
  bottom:10%;
  transform: translate(-50%, -50%);
  margin: auto;
  animation: effect 8s linear infinite;
  
  span {
    position: absolute;
    left: 50%;
    transform-origin: 0px 35px;
    /* Ajustado para el tamaño reducido */
    transform-style: flat;
    font-family: var(--ghotam);
    text-transform: uppercase;
    font-weight: 900;
    font-size: 8px;
    /* Tamaño del texto reducido */
    color: #fff;
  }
}


}
.informacion-servicio{
  min-height: 100vh;
  background: white;
  background-image: url('../../images/fondo-servicios.png');
  background-size: cover;
  background-position: center;
  padding-bottom: 6.75rem;
  overflow: hidden;
  .contenedor{
    gap: 3rem;
    .row{
      margin-bottom: 50px;
      min-height: 60vh;
      gap: 3rem;
      .textos{
        width: 50%;
        gap: 1rem;
        align-items: start;
        h2{
          font-family: var(--ghotam);
          font-size: 43.2px;
          line-height: 48px;
          font-weight: bolder;

        }
        p{
          font-family: var(--ghotam);
          font-size: 20px;
          line-height: 24px;
        }
        .btn-link{
          padding: 10px 15px;
          color: black;
          font-weight: 600;
          gap: .5rem;
          background-color: #e5ff50;
          font-family: var(--ghotam);
          font-size: 19.2px;
          line-height: 23px;
          font-weight: 600;
          svg{
            transition: all 0.3s ease-in-out;
          }
          &:hover{
            svg{
              transform: translateX(5px);
            }
          }
        }
      }
      .box-image{
        width: 50%;
        img{
          max-height: 350px;
          -o-object-fit: contain;
          object-fit: contain;
        }
      }
      
      &:nth-child(even){
        flex-direction: row-reverse;
        .textos{
          align-items: end;
          h2,p{
            text-align: end;
          }
        }
      }
    }
  }
}
.ofertas{
  background-color:#e5ff50;
  .contenedor{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    h2{
      font-family: var(--ghotam);
      font-size: 43.2px;
      line-height: 48px;
      font-weight: bolder;
    }
    ul{
      
      gap: .7rem;
      
      column-count: 3;
      li{
        font-size: 1.2rem;
      list-style: disc;
      margin-left: 40px;
      font-weight: 600;
      font-family: var(--ghotam);
      }
    }
  }
}
/*Fin estilos diseño web*/
/*Footer*/
footer{
  padding-block: 4rem;
  /* background: linear-gradient(90deg, #4AA12B 50%, #090909 90%, #1A1A1A 100%); */
  background-image: url(../../images/bg-angular.png);
  background-image: cover;
  background-position: center;
  background-repeat: no-repeat;

  .contenedor{
    gap: 2rem;
    .top{
      justify-content: space-between;
      gap: 2rem;
      .left{
        flex: .5;
        gap: 2rem;
        .logo-footer{
          img{
            object-fit: contain;
            max-width: 200px;
          }
        }
        .parrafo{
          p{
            /* color: white; */
            color: #B4B4B4;
          font-family: var(--ghotam);
            font-size: 14px;
            line-height: 190%;
            font-weight: 600;
          }
        } 
        .nuestras-redes{
          color: white;
          font-family: "Plus Jakarta Sans", sans-serif;
          font-size: 16px;
          line-height: 16px;
          font-weight: 600;
          gap: .5rem;
          width: 100%;
          justify-content: start;
          .redes{
            gap: .5rem;
          }
        }

      }
      .right{
        flex: 1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        .menu,
        .servicios,
        .contactanos{
          display: flex;
          flex-direction: column;
          gap: 1rem;
        

        
          h3{
            color: white;
            font-family: "Plus Jakarta Sans", sans-serif;
            font-size: 18px;
            line-height: 32px;
            font-weight: 600;
            position: relative;

            &::before{
              content: '';
              position: absolute;
              height: 1.5px;
              border-radius: 1px;
              width: 10%;
              bottom: 0;
              left: 0;
              background-color: #86BD51;
            }
            &:after{
              content: '';
              position: absolute;
              border-radius: 1px;
              height: 1.5px;
              width: 20%;
              bottom: 0;
              left: 15%;
              background-color: white;
             
            }
          }
          .enlaces-footer{
            display: flex;
            flex-direction: column;
            gap: .5rem;
            li{
              display: flex;
              gap: .5rem;
              align-items: center;
              a{
                color: white;
               font-family: var(--ghotam);
                font-size: 16px;
                line-height: 28px;
                color: #d9d9d9;
                display: flex;
                gap: .5rem;
                transition: color 0.3s ease-in-out;
          
              }
              svg{
              
                transition: fill 0.3s ease-in-out;
              }
              &:hover{
                a{
                  color: #9FD323;
                  font-weight: 900;
                }
                svg{
                  path{
                    fill: #9FD323;
                  }
                }
              }
            
           
            }
          }
          .certificados{
            justify-content: space-between;
            width: 100%;
          }
        }
   
 
    

      }
    }
    hr{
      width: 100%;
    }
    .bottom{
      justify-content: space-between;
      width: 100%;
      .left{
        p{
          color: white;
        font-family: var(--ghotam);
          font-size: 17px;
          line-height: 27px;
        }
      }
      .right{
        gap: 2rem;
        a{
          color: white;
        font-family: var(--ghotam);
          font-size: 17px;
          line-height: 27px;
        }
      }

    }
  }
}
/*Fin estilos footer*/