/* === ESTILOS GENERALES === */
* {
   transition: all 0.3s ease;
}

body {
   margin: 0;
   padding: 0;
   font-family: Calibri, sans-serif;
}

h1 {
   float: left;
   width: 100%;
   color: #1a202cd0;
   font-size: 40px;
   margin: 0px 0px 40px 0px;
}

h2 {
   color: #1a202cd0;
   font-size: 1.4rem;
}

section {
   float: left;
   width: 70%;
   padding: 30px 15% 30px 15%;
   overflow: hidden;
}

p,
li {
   color: #718096;
   line-height: 1.5rem;
}

form.enviado {
   color: green;
   font-size: 25px;
   text-align: center;
}

@media (max-width: 1500px) {
   section {
      width: 80%;
      padding: 30px 10% 30px 10%;
   }
}

@media (max-width: 1265px) {
   section {
      width: 90%;
      padding: 30px 5% 30px 5%;
   }
}

@media (max-width: 1040px) {
   h1 {
      font-size: 35px;
   }
}

@media (max-width: 710px) {

   p,
   li {
      font-size: 1.125rem;
   }
}


/* === ESTILO SOLUCIONES === */
#soluciones {
   background-color: #FFFFFF;
}

#soluciones h1 {
   text-align: center;
   margin-bottom: 50px;
}

.solucion {
   position: relative;
   float: left;
   width: 28.8%;
   top: 60px;
   opacity: 0;
   height: 200px;
   padding: 0.5% 1.5% 65px 1.5%;
   margin: 0% 2% 2% 0%;
   border-radius: 20px;
}

.solucion:nth-child(3n+1) {
   margin: 0% 0% 1% 0%;
}

.solucion.show {
   top: 0px;
   opacity: 1;
}

.solucion h2 {
   height: 60px;
   color: #1a202cd0;
   text-align: center;
   padding: 70px 0px 0px 0px;
   margin: 0px;
   background-repeat: no-repeat;
   background-position: center top;
   background-size: 60px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
}

.solucion p {
   color: #718096;
   text-align: center;
   margin: 10px 0px 0px 0px;
}

.solucion a {
   position: absolute;
   bottom: 5%;
   width: 90%;
   margin-bottom: 0px;
   padding: 6px 0px 6px 0px;
   text-align: center;
   text-decoration: none;
   color: #1679ab;
   background-color: #fff;
   border-radius: 15px;
}

@media (max-width: 1070px) {
   .solucion {
      height: 220px;
   }
}

@media (max-width: 985px) {
   .solucion {
      width: 45.7%;
      padding: 1.5%;
      height: 220px;
   }

   .solucion:nth-child(3n+1) {
      margin: 0% 2% 2% 0%;
   }

   .solucion:nth-child(2n+1) {
      margin: 0% 0% 2% 0%;
   }

   .solucion a {
      width: 94%;
   }
}

@media (max-width: 710px) {

   .solucion,
   .solucion:nth-child(2n+1),
   .solucion:nth-child(3n+1) {
      width: 97%;
      height: auto;
      padding-bottom: 20px;
      margin: 0% 0% 4% 0%;
   }

   .solucion a {
      width: 96.6%;
   }
}


/* === ESTILO EMPRESAS === */
#empresas {
   background-color: #FFF;
}

#empresas h1 {
   text-align: center;
}

.empresa {
   position: relative;
   float: left;
   width: 13.66%;
   padding-top: 13.66%;
   margin: 1.5%;
   border-radius: 4px;
   top: 60px;
   opacity: 0;
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
}

.empresa.show {
   top: 0px;
   opacity: 1;
}

@media (max-width: 600px) {
   .empresa {
      width: 32.2%;
      padding-top: 20.2%;
      margin: 0%;
   }
}



/* === ESTILO CONTACTO POR WHATSAPP === */
#whatsapp,
#whatsapp-2,
#whatsapp-3,
#whatsapp-4,
#whatsapp-5 {
   background-color: #F4F4F4;
   padding-top: 60px;
   padding-bottom: 60px;
   height: 70px;
}


#whatsapp a,
#whatsapp-2 a,
#whatsapp-3 a,
#whatsapp-4 a,
#whatsapp-5 a {
   position: absolute;
   left: 80%;
   width: 60px;
   height: 64px;
   margin-left: -190px;
   background-color: #54cc61;
   border: solid 4px #FFF;
   border-radius: 100px;
   text-decoration: none;
   line-height: 65px;
   opacity: 0;
   transition: all 0.5s ease-out, transform 0.2s ease-out;
}

#whatsapp a:hover,
#whatsapp-2 a:hover,
#whatsapp-3 a:hover,
#whatsapp-4 a:hover,
#whatsapp-5 a:hover {
   transform: scale(1.1);
   box-shadow: 2px 1px 6px #0000004d;
}

#whatsapp img,
#whatsapp-2 img,
#whatsapp-3 img,
#whatsapp-4 img,
#whatsapp-5 img {
   position: absolute;
   z-index: 1;
   float: left;
   margin: -17px -13px -19px -19px;
   width: 100px;
}

#whatsapp .texto,
#whatsapp-2 .texto,
#whatsapp-3 .texto,
#whatsapp-4 .texto,
#whatsapp-5 .texto {
   color: #FFF;
   position: relative;
   padding-left: 90px;
   line-height: 63px;
   font-size: 25px;
   text-shadow: 1px 1px 3px #000000a1;
   white-space: nowrap;
   left: -100px;
   opacity: 0;
   transition: all 1s ease-in;
}

#whatsapp a.show,
#whatsapp-2 a.show,
#whatsapp-3 a.show,
#whatsapp-4 a.show,
#whatsapp-5 a.show {
   width: 380px;
   left: 50%;
   opacity: 1;
}

#whatsapp a.show .texto,
#whatsapp-2 a.show .texto,
#whatsapp-3 a.show .texto,
#whatsapp-4 a.show .texto,
#whatsapp-5 a.show .texto {
   left: 0px;
   opacity: 1;
}

@media (max-width: 430px) {

   #whatsapp a.show,
   #whatsapp-2 a.show,
   #whatsapp-3 a.show,
   #whatsapp-4 a.show,
   #whatsapp-5 a.show {
      transform: scale(0.8);
      margin-left: -195px;
      box-shadow: 2px 1px 6px #0000004d;
   }

   #whatsapp a:hover,
   #whatsapp-2 a:hover,
   #whatsapp-3 a:hover,
   #whatsapp-4 a:hover,
   #whatsapp-5 a:hover {
      transform: scale(0.8);
   }
}

@media (max-width: 330px) {

   #whatsapp a.show,
   #whatsapp-2 a.show,
   #whatsapp-3 a.show,
   #whatsapp-4 a.show,
   #whatsapp-5 a.show {
      transform: scale(0.8);
      margin-left: -195px;
      box-shadow: 2px 1px 6px #0000004d;
   }
}



/* === ESTILO VALORES === */
#valores {
   background-color: #FFF;
}

#valores h1 {
   text-align: center;
}

.valor {
   position: relative;
   float: left;
   width: 28.4%;
   height: 330px;
   padding: 2%;
   margin: 0% 1% 1% 0%;
   border: solid 1px #ffffff9c;
   border-radius: 20px;
   top: 60px;
   opacity: 0;
}

.valor.show {
   top: 0px;
   opacity: 1;
}

.valor:nth-child(4) {
   margin: 0% 0% 1% 0%;
}

.valor h2 {
   height: 60px;
   padding: 115px 0px 0px 0px;
   margin: 0px;
   background-repeat: no-repeat;
   background-position: center top;
   background-size: 100px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
}

.valor p {
   text-align: center;
   margin: 10px 0px 0px 0px;
}

@media (max-width: 1130px) {
   .valor {
      height: 320px;
   }

   .valor h2 {
      margin-bottom: 20px;
   }
}

@media (max-width: 930px) {
   .valor {
      width: auto;
      height: auto;
      margin: 0% 0% 2% 0%;
   }

   .valor h2 {
      margin-bottom: 0px;
      height: auto;
      display: block;
   }

   .valor p {
      text-align: center;
   }
}



/* === ESTILO NOS APASIONA === */
#apasiona {
   background-size: cover;
   background-image: url("../img/bg-apasiona.jpg");
   background-position: 0px 0px;
   background-repeat: no-repeat;
   padding-top: 100px;
   padding-bottom: 100px;
   transition: all 1s ease;
}

#apasiona h1 {
   position: relative;
   width: 50%;
   margin-left: 50%;
   color: #FFF;
   right: -100px;
   opacity: 0;
   font-size: 50px;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5)
}

#apasiona h2 {
   position: relative;
   width: 50%;
   margin-left: 50%;
   font-size: 35px;
   color: #FFF;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
   right: -100px;
   opacity: 0;
}

#apasiona h1.show,
#apasiona h2.show {
   right: 0px;
   opacity: 1;
}

@media (max-width: 1265px) {
   #apasiona {
      padding: 100px 5% 100px 5%;
   }
}

@media (max-width: 1040px) {
   #apasiona h1 {
      font-size: 40px;
      margin-bottom: 10px;
   }
}

@media (max-width: 950px) {

   #apasiona h2,
   #apasiona h1 {
      width: 100%;
      margin-left: 0%;
      text-align: right;
   }

   #apasiona h2 {
      font-size: 25px;
   }

   #apasiona {
      padding: 50px 5% 50px 5%;
   }
}



/* === ESTILO 3 MANERAS === */
#maneras {
   background-color: #FFF;
}

#maneras h1 {
   text-align: center;
}

.manera {
   position: relative;
   float: left;
   width: 28.4%;
   height: 320px;
   padding: 2%;
   margin: 0% 1% 1% 0%;
   border: solid 1px #ffffff9c;
   border-radius: 20px;
   top: 60px;
   opacity: 0;
}

.manera.show {
   top: 0px;
   opacity: 1;
}

.manera:nth-child(4) {
   margin: 0% 0% 1% 0%;
}

.manera .img {
   position: absolute;

   width: 166px;
   padding-top: 166px;
   margin-left: -83px;

   left: 50%;
   border-radius: 100%;
   box-shadow: 1px 1px 8px #000000d4;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

.manera h2 {
   padding: 190px 0px 10px 0px;
   margin: 0px;
   background-repeat: no-repeat;
   background-position: center top;
   background-size: 100px;
   text-align: center;
}

.manera p {
   text-align: center;
   margin: 10px 0px 0px 0px;
}

@media (max-width: 1130px) {
   .manera {
      height: 320px;
   }
}

@media (max-width: 1000px) {
   .manera {
      width: auto;
      height: auto;
      margin: 0% 0% 2% 0%;
      padding: 20px;
   }

   .manera:nth-child(4) {
      margin: 0% 1% 1% 0%;
   }

   .manera img {
      position: relative;
   }

   .manera h2 {
      position: relative;
      width: 100%;
      margin-top: 20px;
   }
}



/* === ESTILO PREGUNTAS FRECUENTES === */
#faq {
   background-color: #F4F4F4;
}

#faq h1 {
   text-align: center;
   float: none;
   text-shadow: none;
}

#faq * {
   text-align: center;
   position: relative;
   left: -100px;
   opacity: 0;
   transition: all 0.2s ease;

}

#faq .show {
   position: relative;
   left: 0px;
   opacity: 1;
   transition: all 0.2s ease;
}

#faq h2.click {
   float: none;
   cursor: pointer;
}

#faq h2.click:hover {
   color: #1679ab;
}

#faq h2 .flecha {
   float: left;
   /*
   width: 30px;
   height: 30px;
   background-image: url("../img/icono_flecha.svg");
   background-position: center;
   background-repeat: no-repeat;
   background-size: 30px;
   */
}

#faq h2.abierto .flecha {
   transform: rotate(90deg);

}

#faq h2.cerrado .flecha {
   transform: rotate(0deg);
}


#faq p {
   overflow: hidden;
}

#faq p.abierto {
   margin-left: 40px;
   max-height: 500px;
   transition: max-height 1s ease;
}

#faq p.cerrado {
   margin-left: 40px;
   max-height: 0;
   transition: max-height 0.5s ease;
}



/* === ESTILO CONTACTO === */

#respuesta {
   display: none;
   float: right;
   width: 49%;
   color: #FFF;
   font-size: 26px;
   text-align: center;
}

#contacto {
   background-color: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(2px);
   min-height: 388px;
}

.background {
   float: left;
   width: 100%;
   background-image: url("../img/bg-contacto.jpg");
   background-position: center;
   background-size: cover;
}

#contacto h1 {
   color: #FFF;
}

#contacto h2 {
   color: #FFF;
   float: left;
   width: 49%;
   color: #FFF;
   float: left;
   width: 40%;
   font-size: 1.8rem;
   margin-top: 0px;
}

#contacto form {
   float: right;
   width: 49%;
}

#contacto input,
#contacto textarea {
   position: relative;
   width: 100%;
   background-color: #00000017;
   border: solid 1px #fff;
   border-radius: 10px;
   margin-bottom: 15px;
   padding: 10px;
   font-family: Calibri, sans-serif;
   color: #FFF;
   font-size: 16px;
   box-sizing: border-box;
   right: -100px;
   opacity: 0;
}

#contacto input.show,
#contacto textarea.show {
   right: 0px;
   opacity: 1;
}

#contacto input:focus,
#contacto textarea:focus {
   background-color: #00000071;
   border: solid 1px #fff;
   box-shadow: none;
}

#contacto input[type="submit"] {
   cursor: pointer;
}

#contacto input[type="submit"]:hover {

   background-color: rgba(32, 160, 224, 0.8);
}

@media (max-width: 650px) {
   #contacto h2 {
      width: 100%;
      margin-bottom: 30px;
   }

   #contacto form {
      width: 100%;
   }
}

/* === ESTILO PIE === */
footer {
   float: left;
   width: 80%;
   padding: 30px 10% 30px 10%;
   background-color: #2b2b2b;
}

footer img {
   float: left;
   width: 110px;
   opacity: 0.6;
}

footer p {
   float: right;
   color: #FFF;
   margin: 9px 0px 0px 0px;
   padding: 0px;
   opacity: 0.6;
}

@media (max-width: 730px) {
   footer {
      text-align: center;
   }

   footer img {
      float: none;
   }

   footer p {
      float: none;
      margin: 19px 0px 0px 0px;
   }
}

@media (max-width: 1265px) {
   footer {
      width: 90%;
      padding: 30px 5% 30px 5%;
   }
}



/* === ESTILO VIDEO === */
#video {
   margin-top: 130px;
   background-color: #FFFFFF;
}

#video h1 {
   font-size: 3.5rem;
   text-align: center;
   text-shadow: none;
}

#video h2 {
   text-align: center;
   text-shadow: none;
   font-size: 30px;
   color: #00000091;
}

#video .video {
   width: 100%;
   height: 60vh;
   position: relative;
   left: 50%;
   transform: translateX(-50%);
}

@media (max-width: 600px) {
   #video {
      margin-top: 80px;
   }

}

@media (max-width: 900px) {
   #video h1 {
      font-size: 34px;
   }

   #video h2 {
      font-size: 25px;
   }

   #video .video {
      height: 400px;
   }
}

@media (max-width: 750px) {
   #video .video {
      height: 338px;
   }
}

@media (max-width: 650px) {
   #video .video {
      height: 280px;
   }
}

@media (max-width:550px) {
   #video .video {
      height: 225px;
   }
}



/* === ESTILO UNA APP === */
#unaapp {
   background-color: #FFF;
}

#unaapp h1 {
   text-align: center;
}

.una {
   position: relative;
   float: left;
   width: 28.8%;
   top: 60px;
   opacity: 0;
   height: 180px;
   padding: 0.5% 1.5% 65px 1.5%;
   margin: 0% 2% 2% 0%;
   border-radius: 20px;
}

.una:nth-child(3n+1) {
   margin: 0% 0% 1% 0%;
}

.una.show {
   top: 0px;
   opacity: 1;
}


.una h2 {
   height: 60px;
   color: #1a202cd0;
   text-align: center;
   padding: 70px 0px 0px 0px;
   margin: 0px;
   background-repeat: no-repeat;
   background-position: center top;
   background-size: 60px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
}

.una p {
   text-align: center;
   margin: 10px 0px 0px 0px;
}

.una a {
   position: absolute;
   bottom: 5%;
   width: 90%;
   margin-bottom: 0px;
   padding: 6px 0px 6px 0px;
   text-align: center;
   text-decoration: none;
   color: #1679ab;
   background-color: #fff;
   border-radius: 15px;
}


@media (max-width: 985px) {
   .una {
      width: 45.7%;
      padding: 1.5%;
      height: 200px;
   }

   .una:nth-child(3n+1) {
      margin: 0% 2% 2% 0%;
   }

   .una:nth-child(2n+1) {
      margin: 0% 0% 2% 0%;
   }

   .una a {
      width: 94%;
   }
}

@media (max-width: 710px) {

   .una,
   .una:nth-child(2n+1),
   .una:nth-child(3n+1) {
      width: 100%;
      height: auto;
      padding: 20px;
      box-sizing: border-box;
      box-sizing: border-box;
      margin: 0% 0% 4% 0%;
   }

   .una a {
      width: 96.6%;
   }
}



/* === ESTILO PRESENCIA === */
#presencia {
   background-size: cover;
   background-image: url("../img/bg-presencia.jpg");
   background-position: 0px 0px;
   background-repeat: no-repeat;
   padding-top: 100px;
   padding-bottom: 100px;
   transition: all 1s ease;
}

#presencia h1 {
   position: relative;
   width: 60%;
   margin-left: 40%;
   color: #FFF;
   right: -100px;
   opacity: 0;
   font-size: 50px;
}

#presencia h2 {
   position: relative;
   width: 60%;
   margin-left: 40%;
   font-size: 35px;
   color: #FFF;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
   right: -100px;
   opacity: 0;
}

#presencia h1.show,
#presencia h2.show {
   right: 0px;
   opacity: 1;
}

@media (max-width: 1265px) {
   #presencia {
      padding: 100px 5% 100px 5%;
   }
}

@media (max-width: 1040px) {
   #presencia h1 {
      font-size: 40px;
      margin-bottom: 10px;
   }
}

@media (max-width: 950px) {

   #presencia h2,
   #presencia h1 {
      width: 100%;
      margin-left: 0%;
      text-align: right;
   }

   #presencia {
      padding: 50px 5% 50px 5%;
   }
}

@media (max-width: 500px) {
   #presencia h1 {
      font-size: 30px;
   }

   #presencia h2 {
      font-size: 25px;
   }
}



/* === ESTILO CONTROL === */
#control {
   background-color: #FFF;
}

#control h1 {
   text-align: center;
}

.ctrl {
   position: relative;
   float: left;
   width: 28.4%;
   height: 290px;
   padding: 2%;
   margin: 0% 1% 1% 0%;
   border: solid 1px #ffffff9c;
   border-radius: 20px;
   top: 60px;
   opacity: 0;
}

.ctrl.show {
   top: 0px;
   opacity: 1;
}

.ctrl:nth-child(4) {
   margin: 0% 0% 1% 0%;
}

.ctrl h2 {
   height: 60px;
   padding: 115px 0px 0px 0px;
   margin: 0px;
   background-repeat: no-repeat;
   background-position: center top;
   background-size: 100px;
   text-align: center;
   display: flex;
   align-items: center;
}

.ctrl p {
   text-align: center;
   margin: 10px 0px 0px 0px;
}

@media (max-width: 1130px) {
   .ctrl {
      height: 320px;
   }

   .ctrl h2 {
      margin-bottom: 20px;
   }
}



@media (max-width: 930px) {
   .ctrl {
      width: 100%;
      height: auto;
      margin: 0% 0% 6% 0%;
      box-sizing: border-box;
   }

   .ctrl h2 {
      margin-bottom: 0px;
      height: auto;
      display: block;
   }

   .ctrl p {
      text-align: center;
   }
}


/* === ESTILO EXCUSAS === */
#excusas {
   background-size: cover;
   background-image: url("../img/bg-excusas.jpg");
   background-position: left;
   background-repeat: no-repeat;
   padding-top: 100px;
   padding-bottom: 100px;
   transition: all 1s ease;
}

#excusas.limpieza {
   background-image: url("../img/bg-limpieza.jpeg");
}

#excusas h1 {
   position: relative;
   width: 50%;
   margin-right: 50%;
   color: #FFF;
   right: 100px;
   opacity: 0;
   font-size: 50px;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

#excusas h2 {
   position: relative;
   width: 50%;
   margin-right: 50%;
   font-size: 35px;
   color: #FFF;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
   right: 100px;
   opacity: 0;
}

#excusas h1.show,
#excusas h2.show {
   right: 0px;
   opacity: 1;
}

@media (max-width: 1265px) {
   #excusas {
      padding: 100px 5% 100px 5%;
   }
}

@media (max-width: 1040px) {
   #excusas h1 {
      font-size: 40px;
      margin-bottom: 10px;
   }
}

@media (max-width: 950px) {

   #excusas h2,
   #excusas h1 {
      width: 100%;
      margin-left: 0%;
      text-align: left;
   }

   #excusas h2 {
      font-size: 24px;
   }

   #excusas {
      padding: 50px 5% 50px 5%;
   }
}



/* === ESTILO SOLICITAR DEMO === */
#solicitar,
#solicitar-2 {
   background-color: #F4F4F4;
   padding-top: 60px;
   padding-bottom: 60px;
   height: 70px;
}


#solicitar a,
#solicitar-2 a {
   position: absolute;
   left: 80%;
   width: 60px;
   height: 64px;
   margin-left: -190px;
   background-color: rgba(32, 160, 224, 0.8);
   border: solid 4px #FFF;
   border-radius: 100px;
   text-decoration: none;
   line-height: 65px;
   opacity: 0;
   transition: all 0.5s ease-out, transform 0.2s ease-out;
}

#solicitar a:hover,
#solicitar-2 a:hover {
   transform: scale(1.1);
   box-shadow: 2px 1px 6px #0000004d;
}

#solicitar .texto,
#solicitar-2 .texto {
   color: #FFF;
   position: relative;
   text-align: center;
   font-weight: bold;
   line-height: 63px;
   font-size: 25px;
   text-shadow: 1px 1px 3px #000000a1;
   white-space: nowrap;
   left: -100px;
   opacity: 0;
   transition: all 1s ease-in;
}

#solicitar a.show,
#solicitar-2 a.show {
   width: 380px;
   left: 50%;
   opacity: 1;
}

#solicitar a.show .texto,
#solicitar-2 a.show .texto {
   left: 0px;
   opacity: 1;
}

@media (max-width: 430px) {

   #solicitar a.show,
   #solicitar-2 a.show {
      transform: scale(0.8);
      margin-left: -195px;
      box-shadow: 2px 1px 6px #0000004d;
   }

   #solicitar a:hover,
   #solicitar-2 a:hover {
      transform: scale(0.8);
   }
}

@media (max-width: 330px) {

   #solicitar a.show,
   #solicitar-2 a.show {
      transform: scale(0.8);
      margin-left: -195px;
      box-shadow: 2px 1px 6px #0000004d;
   }
}



/* === ESTILO FÁCIL === */
#facil {
   background-size: cover;
   background-image: url("../img/bg-facil.jpg");
   background-position: 0px 0px;
   background-repeat: no-repeat;
   padding-top: 100px;
   padding-bottom: 100px;
   transition: all 1s ease;
}

#facil h1 {
   position: relative;
   width: 50%;
   margin-left: 50%;
   color: #FFF;
   right: -100px;
   opacity: 0;
   font-size: 50px;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5)
}

#facil h2 {
   position: relative;
   width: 50%;
   margin-left: 50%;
   font-size: 35px;
   color: #FFF;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
   right: -100px;
   opacity: 0;
}

#facil h1.show,
#facil h2.show {
   right: 0px;
   opacity: 1;
}

@media (max-width: 1265px) {
   #facil {
      padding: 100px 5% 100px 5%;
   }
}

@media (max-width: 1040px) {
   #facil h1 {
      font-size: 40px;
      margin-bottom: 10px;
   }
}

@media (max-width: 950px) {

   #facil h2,
   #facil h1 {
      width: 100%;
      margin-left: 0%;
      text-align: right;
   }

   #facil h2 {
      font-size: 25px;
   }

   #facil {
      padding: 50px 5% 50px 5%;
   }
}



/* === ESTILO SOLICITAR DEMO === */
#solicitar-demo {
   /* background-color: rgba(0, 0, 0, 0.7); 
   backdrop-filter: blur(2px); */
   background-color: #FFFFFF;
   padding-top: 200px;
}

.background {
   float: left;
   width: 100%;
   background-image: url("../img/bg-contacto.jpg");
   background-position: center;
   background-size: cover;
}

#solicitar-demo .cont {
   float: left;
   width: 49%;
}

#solicitar-demo h2 {
   float: left;
   font-size: 1.8rem;
   margin-top: 0px;
}

#solicitar-demo h3 {
   float: left;
   width: 100%;
   font-size: 1.3rem;
   margin-top: 0px;
   font-weight: normal;
}

#solicitar-demo p {
   float: left;
   font-size: 1.3rem;
   margin-top: 0px;
}

#solicitar-demo form {
   float: right;
   width: 49%;
}

#solicitar-demo input,
#solicitar-demo textarea {
   position: relative;
   width: 100%;
   background-color: #00000017;
   border: solid 1px #9e9e9e;
   border-radius: 10px;
   margin-bottom: 15px;
   padding: 10px;
   font-family: Calibri, sans-serif;
   color: #000;
   font-size: 16px;
   box-sizing: border-box;
   right: -100px;
   opacity: 0;
}

#solicitar-demo input.show,
#solicitar-demo textarea.show {
   right: 0px;
   opacity: 1;
}

#solicitar-demo input:focus,
#solicitar-demo textarea:focus {
   border: solid 1px #9e9e9e;
   box-shadow: none;
}



#solicitar-demo input[type="submit"] {
   cursor: pointer;
}

#solicitar-demo input[type="submit"]:hover {

   background-color: rgba(32, 160, 224, 0.8);
}

@media (max-width: 1269px) {
   #solicitar-demo {
      padding-top: 150px;
   }
}

@media (max-width: 900px) {

   #solicitar-demo h2,
   #solicitar-demo h3,
   #solicitar-demo .cont {
      width: 100%;
      margin-bottom: 30px;
   }

   #solicitar-demo form {
      width: 100%;
   }
}

@media (max-width: 600px) {
   #solicitar-demo {
      padding-top: 90px;
   }
}

/* === ESTILO DEL SLIDER === */
.slider {
   position: relative;
   overflow: hidden;
   height: 100vh;
   padding-top: 0px;
   padding-bottom: 0px;
}

.next {
   position: absolute;
   opacity: 0.8;
   top: 50%;
   right: 3px;
   transform: translateY(-50%);
   width: 50px;
   height: 50px;
   background-image: url("../img/arrow_right.svg");
   background-size: 80%;
   background-position: center;
   background-repeat: no-repeat;
   border-radius: 50%;
   cursor: pointer;
   z-index: 100;
}

.next:hover,
.prev:hover {
   background-color: rgba(32, 160, 224, 0.5);
   opacity: 1;
}

.prev {
   position: absolute;
   opacity: 0.5;
   top: 50%;
   left: 3px;
   transform: translateY(-50%);
   width: 50px;
   height: 50px;
   background-image: url("../img/arrow_left.svg");
   background-size: 80%;
   background-position: center;
   background-repeat: no-repeat;
   border-radius: 50%;
   cursor: pointer;
   z-index: 100;
}


.slide {
   position: absolute;
   background-size: cover;
   background-position: right bottom;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   transition: all 1s ease;
   opacity: 0;
}

.slide.show {
   opacity: 1;
}

.slide .filter {
   position: absolute;
   z-index: 1;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(1px);
}

.slide .slide-content {
   position: relative;
   width: 50%;
   left: 15%;
   transform: translate(0px, -50%);
   color: #fff;
   text-align: left;
   transition: all 1s ease;
   top: 80%;
   opacity: 0;
}

.slide.show .slide-content.index {
   top: 50% !important;
   opacity: 1;
}

.slide.show .slide-content {
   top: 40%;
   opacity: 1;
}

.slide video {
   position: absolute;
   object-fit: cover;
   width: 100%;
   height: 100vh;
}

.slide iframe {
   position: relative;
   width: 1000px;
   height: 562.5px;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   box-shadow: 0px 0px 20px #000;
   border-radius: 15px;
}

.slide h1 {
   font-size: 3.5rem;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
   color: #FFF;
}

.slide h2 {
   color: #FFF;
   font-size: 2rem;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}


.slide a.play {
   color: #FFF;
   background-color: rgba(32, 160, 224, 0.8);
   border: solid 4px #FFF;
   border-radius: 100px;
   text-decoration: none;
   line-height: 65px;
   background-image: url(../img/icono_play.svg);
   background-size: 50px;
   background-position: 4px center;
   background-repeat: no-repeat;
   padding-top: 5px;
   padding-bottom: 5px;
   padding-right: 15px;
   padding-left: 50px;
   transition: all 0.5s ease-out, transform 0.2s ease-out;
}

.slide a.play:hover {
   transform: scale(1.1);
   box-shadow: 2px 1px 6px #0000004d;
}

.slide a.play .texto {
   color: #FFF;
   text-align: center;
   font-weight: bold;
   line-height: 63px;
   font-size: 25px;
   text-shadow: 1px 1px 3px #000000a1;
   white-space: nowrap;
   transition: all 1s ease-in;
}

#hover-video {
   position: fixed;
   z-index: -99999;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #000000c2;
   opacity: 0;
   transition: all 0.5s ease-in;
}

#hover-video.ver {
   z-index: 99999;
   opacity: 1;
}


#hover-video iframe {
   width: 60%;
   height: 60%;
   transition: all 1s ease-in;
}

@media (max-width: 1500px) {
   .slide .slide-content {
      left: 10%;
   }
}

@media (max-width: 1150px) {
   .slide .slide-content {
      width: 60%;
   }
}

@media (max-width: 1265px) {
   .slide .slide-content {
      left: 5%;
   }
}

@media (max-width: 1200px) {
   .slide iframe {
      width: 900px;
      height: 506.25px;
   }
}

@media (max-width: 1100px) {
   .slide iframe {
      width: 800px;
      height: 450px;
   }
}

@media (max-width: 1000px) {
   .slide iframe {
      width: 700px;
      height: 393.75px;
   }

   .slide .slide-content {
      width: 90%;
      left: 5%;
   }

   .slide h1,
   .slide h2 {
      width: 90%;
   }

   .next,
   .prev {
      top: auto;
      bottom: 0px;
   }
}

@media (max-width: 750px) {
   .slide iframe {
      width: 600px;
      height: 337.5px;
   }
}

@media (max-width: 650px) {
   .slide {
      background-position: 50% bottom;
   }

   .slide iframe {
      width: 500px;
      height: 281.25px;
   }
}

@media (max-width:550px) {
   .slide iframe {
      width: 400px;
      height: 225px;
   }

   .slide h1 {
      font-size: 2.5rem;
      margin-bottom: 10px;
   }
}

@media (max-width:450px) {
   .slide h1 {
      font-size: 2.5rem;
   }
}


/* === ESTILO DEL ENCABEZADO === */
.logo-container {
   position: fixed;
   left: 3%;
   top: 0px;
   height: 80px;
   overflow: hidden;
   z-index: 1000;
   background-color: #FFF;
   padding: 20px;
   box-sizing: border-box;
}

.logo-container .logo {
   height: 80px;
   z-index: 999;
   position: relative;
}

.logo-container.open .logo {
   height: 55px !important;
}

@media (max-width: 600px) {
   .logo-container {
      background-color: transparent;
      box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
      padding-top: 0px;
      height: 50px !important;
      padding: 10px !important;
   }

   .logo {
      height: 55px !important;
   }

   .menu {
      background-color: rgba(255, 255, 255, 1) !important;
      max-height: 62px !important;
   }

   .menu-icon {
      top: 14px !important;
   }

   .bar {
      background-color: #000 !important;
      box-shadow: none !important;
   }
}

@media (max-width: 1120px) {}

@media (max-width: 410px) {
   .logo {
      max-width: 280px;
   }
}

@media (max-width: 370px) {
   .logo {
      max-width: 210px;
   }
}

@media (max-width: 280px) {
   .logo {
      max-width: 180px;
   }
}



/* ===  ESTILO DEL MENÚ === */
.menu {
   position: fixed;
   width: 100%;
   top: 0;
   z-index: 999;
   background-color: rgba(255, 255, 255, 0);
   box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

.menu ul {
   list-style: none;
   margin: 0px 2% 0px 0px;
   padding: 0;
   display: flex;
   justify-content: right;
}

.menu.open {
   background-color: #fff !important;
   height: 100vh !important;
}

.menu.open ul {
   display: block;
   padding: 60px 0px 0px 0px;
}

.menu.open li {
   width: 100%;
   border-top: solid 1px #ccc;
}

.menu.open li a {
   padding: 20px 15px 20px 15px !important;
   color: #464646 !important;
   text-shadow: none !important;
}

.menu li {
   margin: 0;
}

.menu a {
   display: block;
   padding: 50px 15px 20px 15px;
   color: #fff;
   text-decoration: none;
   text-align: center;
   letter-spacing: 1px;
   font-size: 18px;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}


.menu.negro a {
   color: #000;
   text-shadow: none;
}

.menu.negro a span {
   color: #FFF;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.menu a span {
   background-color: rgba(32, 160, 224, 0.8);
   padding: 10px;
   border-radius: 20px;
   box-shadow: 2px 2px 3px #0000008a;
}

.menu a.gris span {
   color: #ffffff;
   text-shadow: none;
}

.menu a.gris {
   color: #202020;
   text-shadow: none;
}

.menu a:hover,
.menu.open a:hover {
   color: #fff !important;
   background-color: rgba(32, 160, 224, 0.8);
}

.menu a:hover span,
.menu.open a:hover span {
   background-color: rgba(32, 160, 224, 0);
   padding: 10px;
   border-radius: 20px;
   box-shadow: 2px 2px 3px #00000000;
}

.menu-icon {
   display: none;
   width: 30px;
   height: 30px;
   position: fixed;
   cursor: pointer;
   right: 20px;
   top: 50px;
}

.menu-icon.menu-open {
   top: 14px !important;
}

.bar {
   width: 100%;
   height: 4px;
   background-color: #FFF;
   position: absolute;
   box-shadow: 1px 1px 6px rgb(0 0 0 / 90%);
   border-radius: 10px;
}

.bar.gris {
   background-color: #000;
   box-shadow: none;
}

.bar:nth-child(2) {
   top: 50%;
   transform: translateY(-50%);
}

.bar:nth-child(3) {
   top: calc(100% - 4px);
}

.menu-open .bar:nth-child(1) {
   background-color: #000;
   box-shadow: none;
   transform: translateY(14px) rotate(45deg);
}

.menu-open .bar:nth-child(2) {
   opacity: 0;
}

.menu-open .bar:nth-child(3) {
   background-color: #000;
   box-shadow: none;
   transform: translateY(-12px) rotate(-45deg);
}

@media (max-width: 1060px) {
   .menu-icon {
      display: block;
   }

   .menu ul {
      display: none;
      flex-direction: column;
      align-items: center;
      background-color: #fff;
      margin: 0px;
   }
}



/* ===  ESTILO DE RELOJES === */
#relojes {
   padding-top: 60px;
   padding-bottom: 60px;
}

#relojes h1 {
   text-align: center;
}

#relojes h1.separador {
   border-top: #CCC solid 1px;
   padding: 40px 0px 0px 0px;
}

#relojes .reloj {
   position: relative;
   float: left;
   width: 100%;
   padding-bottom: 50px;
   margin-bottom: 50px;
}

#relojes #siete {
   padding-bottom: 0px;
   margin-bottom: 0px;
}

#relojes .reloj h2 {
   position: absolute;
   right: 0px;
   width: 65%;
}

#relojes .reloj .cont {
   float: left;
   width: 33.333%;
   position: relative;
   top: 100px;
   opacity: 0;
}

#relojes .reloj .cont.show {
   top: 0px;
   opacity: 1;
}

#relojes .reloj .cont.margin {
   margin-top: 45px;
   width: 31.333%;
   margin-left: 2%;
}

#relojes .reloj .cont .img {
   width: 100%;
   height: 440px;
   background-position: center top;
   background-repeat: no-repeat;
   background-size: contain;
}

#relojes .reloj button {
   background-color: rgba(32, 160, 224, 0.8);
   border: none;
   color: #FFF;
   padding: 10px;
   border-radius: 20px;
   position: absolute;
   bottom: 50px;
   right: 0px;
   cursor: pointer;
}

@media (max-width: 750px) {
   #relojes .reloj .cont {
      width: 100%;
      margin-top: 50px;
   }

   #relojes .reloj .cont .img {
      height: 300px;
   }

   #relojes .reloj .cont.margin {
      width: 46%;
      margin: 1% 2% 0% 2%;
   }

   #relojes .reloj button {
      bottom: 0px;
   }
}

@media (max-width: 650px) {

   #relojes .reloj .cont.margin {
      width: 100%;
      margin: 0%;
   }
}



/* === ESTILO INTEGRA === */
#integra {
   background-size: cover;
   background-image: url("../img/bg-integra.jpg");
   background-position: 0px 0px;
   background-repeat: no-repeat;
   padding-top: 100px;
   padding-bottom: 100px;
   transition: all 1s ease;
}

#integra h1 {
   position: relative;
   width: 100%;
   text-align: center;
   margin-left: 0%;
   color: #FFF;
   font-size: 50px;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

#integra h1.show {
   right: 0px;
   opacity: 1;
}

@media (max-width: 1265px) {
   #integra {
      padding: 100px 5% 100px 5%;
   }
}

@media (max-width: 1040px) {
   #integra h1 {
      font-size: 40px;
      margin-bottom: 10px;
   }
}

@media (max-width: 950px) {
   #integra h1 {
      width: 100%;
      margin-left: 0%;
      text-align: right;
   }

   #integra {
      padding: 50px 5% 50px 5%;
   }
}



/* === ESTILO OVERLAY === */
#overlay {
   position: fixed;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.8);
   top: 0;
   left: 0;
   z-index: 999999;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.5s ease, visibility 0.5s;
}

#overlay.show {
   opacity: 1;
   visibility: visible;
   transition: opacity 0.5s ease, visibility 0.5s;
}


.ficha {
   background-color: #FFF;
   position: fixed;
   top: 50%;
   left: 50%;
   z-index: 9999999;
   margin-left: -25%;
   margin-top: -15%;
   width: 60%;
   height: 60%;
   padding: 35px 15px 15px 15px;
   border-radius: 10px;
   box-sizing: border-box;
   overflow: hidden;
   box-shadow: 0px 0px 20px #000000a1;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.5s ease, visibility 0.5s;
}

.ficha.show {
   opacity: 1;
   visibility: visible;
   transition: opacity 0.5s ease, visibility 0.5s;
}

.ficha .tit {
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   background-color: rgba(32, 160, 224, 0.8);
   padding: 15px;
   border-radius: 10px 10px 0px 0px;
   color: #ffffff;
}

.ficha .tit .x {
   position: absolute;
   right: 16px;
   top: 16px;
   font-size: 20px;
   font-family: sans-serif;
   cursor: pointer;
}

.ficha h3 {
   color: #202020;
   font-size: 25px;
   margin-bottom: 10px;
}

.ficha .scroll {
   height: 83%;
   overflow: auto;
}


.ficha table {
   width: 100%;
   border-collapse: collapse;
   margin: 20px auto;
}

.ficha table,
th,
td {
   border: 1px solid #e0e0e0;
}

.ficha th,
td {
   padding: 10px;
   text-align: left;
}

.ficha th {
   background-color: #f2f2f2;
}

.ficha tr:nth-child(even) {
   background-color: #f2f2f2;
}

.ficha tr:nth-child(odd) {
   background-color: #ffffff;
}

/* === ESTILO CONOCER MÁS === */
#conocer {
   background-color: #FFF;
   padding-top: 40px;
   padding-bottom: 40px;
}

#conocer h1 {
   text-align: center;
   color: #718096;
   margin-bottom: 15px;
   font-size: 28px;
}

#conocer h2 {
   text-align: center;
   color: #A0AEC0;
   margin-bottom: 30px;
   font-size: 18px;
}

#conocer a {
   position: relative;
   display: block;
   width: 300px;
   height: 50px;
   margin: 0 auto;
   background-color: #E2E8F0;
   border: solid 2px #CBD5E0;
   border-radius: 100px;
   text-decoration: none;
   line-height: 50px;
   transition: all 0.3s ease-out;
}

#conocer a:hover {
   background-color: #CBD5E0;
   border-color: #A0AEC0;
}

#conocer .texto {
   color: #4A5568;
   text-align: center;
   font-weight: normal;
   font-size: 18px;
   text-shadow: none;
}

@media (max-width: 430px) {
   #conocer a {
      transform: scale(0.9);
      margin-left: -5px;
   }

   #conocer a:hover {
      transform: scale(0.9);
   }
}


/* Inserción CSS BOT Ventas */
.titulo-container {
   display: flex;
   flex-direction: column;
   gap: .5rem;
   text-align: center;
}


.subtitulo {
   font-size: 20px;
   color: #6d6d6d;
}



.solicitar-cotizacion p,
.solicitar-cotizacion h3,
.solicitar-cotizacion h2,
.solicitar-cotizacion h1 {
   margin: 0;
}


.solicitar-cotizacion {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   width: 100%;
   height: 100%;
   min-height: max-content;
   gap: 1.5rem;
   position: relative;
   padding-top: 4rem;
   min-height: 100vh;
}

.titulo-container {
   display: flex;
   flex-direction: column;
   gap: .5rem;
   text-align: center;
   padding: 0 1rem;
}

.metodos-section {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   gap: 1rem;
   overflow: visible;
}

.card-bot {
   display: flex;
   gap: .5rem;
   flex-direction: column;
   border-radius: 16px;
   padding: 1rem 1rem;
   width: 350px;
   background: #2690ce;
   color: white;
   height: fit-content;
   position: relative;
}

.card-bot h2,
.card-bot p {
   color: white;
}

.card-bot:hover {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.card-info {
   width: 80%;
   display: flex;
   flex-direction: column;
   gap: .25rem;
}

.bot-phone {
   position: absolute;
   top: -450px;
   left: -20px;
   z-index: 100;
}

.card-form {
   box-sizing: border-box;
   display: flex;
   justify-content: center;
   background-color: white;
   border-radius: 16px;
   padding: 1rem 0rem 1rem 0rem;
   width: 375px;
   border: 1px solid #dbdbdb;
   cursor: pointer;
   min-height: 155px;
}

.card-form:hover {
   background: #f8f8f8;
}

.card-form:active {
   background: #ececec;
}


.card-form-info {
   width: 75%;
   display: flex;
   flex-direction: column;
   gap: .35rem;
}

.chevron-right-container {
   display: flex;
   align-items: end;
   padding: 0rem 0rem .25rem .75rem;
}


.loader {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background-color: white;
   width: fit-content;
   height: fit-content;
   border-radius: 100%;
   padding: .6rem;
   position: absolute;
   top: 75px;
   left: 305px;
}

.spinner {
   border: 4px solid rgba(0, 0, 0, 0.1);
   width: 30px;
   height: 30px;
   border-radius: 50%;
   border-left-color: #2690ce;
   animation: spin 1s linear infinite;
}

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

   100% {
      transform: rotate(360deg);
   }
}

.recomendado {
   font-size: 14px;
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   width: fit-content;
   padding: .25rem .75rem;
   color: white;
   border-radius: 24px;
   background-color: #ff8c15;
   top: -10px;
   right: 15px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   z-index: 0;
}


@media (max-width: 600px) {
   .solicitar-cotizacion {
      padding-top: 7rem;
   }


   .card-bot {
      width: 300px;
   }

   .subtitulo {
      font-size: 16px;
   }

   .card-bot h2,
   .card-form h2 {
      font-size: 20px;
   }

   .card-bot p,
   .card-form p {
      font-size: 14px;
   }

   .bot-phone {
      position: absolute;
      top: -450px;
      left: -60px;
   }

   .card-form {
      max-width: 332px;
      padding: 1rem .5rem .5rem .5rem;
   }

   .loader {
      left: 265px;
      bottom: 20px;
   }

   .chevron-right-container {
      display: flex;
      align-items: end;
      padding: 0rem 0rem 1rem .75rem;
   }

}

@media (max-width: 365px) {
   .loader {
      left: 230px;
      top: 95px;
   }

   .bot-phone {
      top: -425px;
      left: -100px;
   }
}

@media (max-width: 340px) {
   .card-info {
      width: 70%;
   }

   .loader {
      left: 210px;
      top: 120px;
   }

   .bot-phone {
      top: -405px;
      left: -130px;
   }
}

@media (max-width: 307px) {
   .card-info {
      width: 75%;
   }

   .loader {
      left: 192px;
      top: 120px;
   }

}


.lines {
   position: absolute;
   bottom: 0;
   width: 100%;
   z-index: -2;
}