@charset "UTF-8";

.siguenos {position: fixed; top: 290px; right: -43px; width: 45px; z-index: 1000000;}

body { margin:0 auto; padding:0; background-color:#ffffff; font-size:12px; font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 100%; }

body.ind { margin:0 auto; padding:0; background-color:#d9ebf5; font-size:12px; font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 100%; }

.creamos { background-color: #4269ff; width: 90%; padding:0.1% .5%; margin: 20px auto 20px; color: #fff; text-align: center;}
.recuerdas { background-color: #2e99fe; width: 100%; padding: 2% 0; margin: -3px auto 0; color: #fff; text-align: center; }
.recuerdas p{ font-size: 1.5em; color: #fff; }
.problema { width:90%; margin: 0 auto;}

.btnmas { width: 100px; padding:10px; background-color: #fc403d; margin: 20px auto; color: #fff; border-radius: 40px; font-size:1.8em; font-family: 'Roboto Condensed', sans-serif;  text-decoration: none; font-weight: bold; }

.descarga { font-size:2em; font-family: 'Roboto Condensed', sans-serif;  text-decoration: none; font-weight: bold; color: #fff;  text-align: center; padding:10px 20px; background-color: #fc403d; margin: 20px auto; border-radius: 40px;border: 2px solid white;}

.mas-ind { color: #fff; font-size: 1.8em; font-family: 'Roboto Condensed', sans-serif;  text-decoration: none; font-weight: bold; text-align: center; }
.btnmas-ind { width: 100px; padding:10px; background-color: #fc403d; margin: 20px 0 0 0 ;  border-radius: 40px;  }

.floatle { margin: 0 20px 20px 0; float: left; width: 600px;}

/*----------------------------------BOTON WHATASAPP*/
.whatsapp-button {
    display: inline-flex; /* Para alinear el icono y el texto */
    align-items: center; /* Centrar verticalmente */
    background-color: #25D366; /* Color verde de WhatsApp */
    color: white;
    padding: 15px 30px;
    border-radius: 50px; /* Bordes redondeados para un estilo de botón */
    text-decoration: none; /* Quitar el subrayado del enlace */
    font-weight: bold;
    font-size: 1.6em;
    transition: background-color 0.3s ease; /* Transición suave al pasar el ratón */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para darle profundidad */
}

.whatsapp-button:hover {
    background-color: #1DA851; /* Un verde un poco más oscuro al pasar el ratón */
}

.whatsapp-button img {
    width: 30px; /* Tamaño del icono */
    height: 30px;
    margin-right: 10px; /* Espacio entre el icono y el texto */
}


/* Estilos para el botón flotante */
.whatsapp-float {
    position: fixed; /* Hace que el botón se quede fijo en la pantalla */
    width: 60px;
    height: 60px;
    bottom: 40px; /* Distancia desde abajo */
    right: 40px; /* Distancia desde la derecha */
    background-color: #25D366; /* Color verde de WhatsApp */
    color: #FFF;
    border-radius: 50px; /* Forma redonda */
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none; /* Quitar subrayado */
    transition: background-color 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #1DA851; /* Un verde un poco más oscuro al pasar el ratón */
}

/* Si usas Font Awesome, el icono ya está dentro */
.whatsapp-float i {
    color: white;
}

/* Si usas una imagen en lugar de Font Awesome */
/* .whatsapp-float img {
    width: 30px;
    height: 30px;
} */


/*----------------------------------NAV MENUS*/

.top-contacto { width:98%; height: 37px; background-color: #0097a7; margin: 0 auto; text-align: right; color: #fff; font-size: 1em; font-weight: bold; line-height: 35px; padding-right: 2%;}

.link-top { color:#fff; text-decoration: none; cursor: pointer;}

header {width:100%; height:90px; background-color:#fff; }

header.index {width:100%; height:80px; background-color:#ffffff; }


.selected-tag {color:#0097a7; text-decoration:none;}
.in-active-tag { color:#4b5b66; text-decoration:none;}

nav.menu-desktop { display: flex; justify-content: space-between;  margin: 0 auto; width: 100%;}
nav.menu-desktop a {  font-size: 1.0em; font-weight:bold; margin: 0 6px; text-transform: uppercase;}
nav.menu-desktop a:hover { color: #0097a7; }
.menu-desktop {  margin: 37px 20px 0 0; }


.logo { width: 120px; margin: 13px 0 0 20px; display: inline-block;}
.logo-index { width: 140px; margin: 13px 0 0 20px; display: inline-block;}

.mobile-header { display:none;}
.mobile-header-index { display:none;}


/*----------------------------------banner*/
.banner { display: block;}
.banner-mobile { display: none;}

.main {display: flex; margin: 20px auto 0; width:90%; align-items: center;align-self: flex-end; justify-content: center;}
.main-img { width: 40%; align-items: center; }
.main-txt { width:500px; margin: 0 0 0 30px; align-self: center;}

/*----------------------------------secciones*/
.general-promesa { width: 90%; margin: -3px auto 0; background-color: #f4f0e3; padding:30px 5% 40px; border-radius:50px 50px 0 0; }

.general-blanco { width: 90%; margin: 0 auto 0; background-color: #ffffff; padding:30px 5% 30px;}

.general { width: 90%; margin: -3px auto 0; background-color: #f4f0e3; padding:40px 5%;  }


.generalb { width: 90%; margin: 30px auto 20px; background-color: #ffffff; padding:10px 5%;  }

.caso-produccion { width: 90%; margin: -3px auto 0; background-color: #f4f0e3; padding:10px 5% 30px;  }

/*----------------------------------index*/
.hueso {width: 100%; padding: 2% 0 4%; margin: -4px auto 0; color: #fff; text-align: center; background-color:#f4f0e3;
}

.resalta-creamos { width: 80%; z-index: 1000; margin: -30px auto 0; padding: 20px 0; text-align: center; font-size: 1.5em; font-weight: bold; color: #fff; background-color: #fb1b84; border-radius: 50px; position: relative;}

.gradient { width: 90%; margin: -33px auto 0; padding: 5%; 
background: #d9ebf5; z-index: 0;
background: -moz-linear-gradient(top, #d9ebf5 0%, #ffffff 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #d9ebf5), color-stop(100%, #ffffff));
background: -webkit-linear-gradient(top, #d9ebf5 0%, #ffffff 100%);
background: -o-linear-gradient(top, #d9ebf5 0%, #ffffff 100%);
background: -ms-linear-gradient(top, #d9ebf5 0%, #ffffff 100%);
background: linear-gradient(to bottom, #d9ebf5 0%, #ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9ebf5', endColorstr='#ffffff', GradientType=0 );}

.cada-servicio{display: flex; justify-content: center; align-content: center; align-items: center; text-align: center; margin: 0 auto;}

.servicio-img-hid { display: none;}
.servicio-img-show { width:40%; margin: 10px 10px 20px;}
.servicio-img { width:40%; margin: 10px 10px 20px;}
.servicio-txt { width:40%; text-align: left; margin: 10px 10px 20px;}


/*----------------------------------sabías que*/
.sabias-title { width:90%; margin: 0px auto 0;}

.sabias-emp {display: flex; justify-content: center; align-items: center; margin: 0px auto 0; width: 100%;}
.sabias-emp-left { width:40%; border-radius: 20px; background-color:#fb1b84; color:#fff; font-size: 1.7em; font-weight: bold; padding: 20px;  }
.sabias-emp-right { width:40%; color:#1d3a44; font-size: 1.7em; font-weight: bold; padding: 20px; margin: 0 0 0 0px;  }
.porcentajes {display: flex; justify-content: center;  margin: 0px auto 0; width: 90%;}
.sabias-box {width:30%; border-radius: 20px; background-color:#fb1b84; color:#fff;padding: 20px; text-align: center; margin: 30px 15px; vertical-align: top;  }
.porc-num { color:#ffffff; font-size: 5em; font-weight: bold; font-family: 'Roboto Condensed', sans-serif; }


ul.sab {
  list-style: none; /* Remove default bullets */
}

ul.sab li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #fb1b84; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */ 
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}


/*----------------------------------paquetes*/
.paquetes-title { width:90%; margin: 0px auto 0;}

.paquetes-emp {display: flex; justify-content: center; align-items: center; margin: 0px auto 0; width: 100%;}
.paquetes-emp-left { width:40%; border-radius: 20px; background-color:#fb1b84; color:#fff; font-size: 1.7em; font-weight: bold; padding: 20px;  }
.paquetes-emp-right { width:40%; color:#1d3a44; font-size: 1.7em; font-weight: bold; padding: 20px; margin: 0 0 0 0px;  }
.porcentajes {display: flex; justify-content: center;  margin: 0px auto 0; width: 90%;}
.paquetes-box {width:30%; border-radius: 20px; background-color:#f4f0e3; color:#fff;padding: 20px; text-align: center; margin: 30px 15px; vertical-align: top;  }
.porc-num { color:#ffffff; font-size: 5em; font-weight: bold; font-family: 'Roboto Condensed', sans-serif; }


ul.sab {
  list-style: none; /* Remove default bullets */
}

ul.sab li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #fb1b84; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */ 
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}


/*----------------------------------soluciones*/

.boxes{ width:100%; margin: 0 auto 0px; display: flex; flex-wrap: wrap; justify-content: center;}

.soluciones-box{background-color: #ffffff; border-radius: 15px; padding: 20px 5px; width:320px; height: 300px; margin:15px 10px 10px;  vertical-align: top; display: flex; flex-direction: column; justify-content: center; align-items: center; }

.soluciones-4{background-color: #ffffff; border-radius: 15px; padding: 20px 5px; width:450px; height: 250px; margin:15px 10px 10px;  vertical-align: top; display: flex; flex-direction: column; justify-content: center; align-items: center; }

.soluciones-5{
    background-color: #ffffff;
    border-radius: 15px;
    padding: 20px 5px;
    width: 420px;
    height: 440px;
    margin: 15px 10px 10px;
    vertical-align: bottom;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.produccion-flex {background-color: #ffffff; border-radius: 15px; padding: 30px 20px 15px; width:380px; height: auto; margin:15px 10px 10px;  vertical-align: top; text-align: center;}

.img-sol { width:180px; margin: 5px 3px; display: inline-block;}

.icon-sol { vertical-align: middle; text-align: left;}

.soluciones-produccion {background-color: #ffffff; border-radius: 15px; padding: 30px 5px 0px; width:450px; height: auto; margin:15px 10px 10px;  vertical-align: top; display: flex; flex-direction: column; justify-content: center; align-items: center; }

ul.solu {
  list-style: none; font-size: 1.3em; text-align: left; /* Remove default bullets */
}

ul.solu li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #fb1b84; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */ 
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}


/*----------------------------------herramientas*/
.herramientas-title { width:90%; margin: 0px auto 0; background-color: #f4f0e3; padding:30px 5% 10px;  }

.herrimg { width: 90px; margin: 0 auto 15px; vertical-align: top;}

/*----------------------------------comencemos*/
.comencemos { width: 94%; margin: 0px auto 0; padding:30px 3%; text-align: center; background-image:url("../img/back-comencemos.png"); background-position: center; }
.title-comencemos { font-size:3em; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; color: #fff;}


.sabermas { padding:10px; background-color: #fc403d; margin: 0 0 0 30px; color: #fff; font-size: 1.8em; font-family: 'Roboto Condensed', sans-serif; border-radius: 40px; text-decoration: none; font-weight: bold; }


/*----------------------------------casos*/
.casos-title { width:90%; margin: 20px auto 0; padding:10px 5% 5px;  }

.casos {display: flex; justify-content: center; align-items: center; margin: 20px auto 40px; width: 100%;}
.casos-img { width: 38%;}
.casos-txt { width:48%; margin: 0 0 0 30px;}

.division { width:100%; height: 10px; margin: 0 auto; background-color: #e9ae28;}


/*----------------------------------alianzas*/
.alianzas-title { width:90%; margin: 20px auto 0; padding:10px 5% 5px;  }

.alianzas { margin: 10px auto 30px; width: 90%; text-align: center;}

.logo-alianza { width:130px; margin:30px 10px; display:inline-block;}


/*--------------------------Call to action*/
.contacto { width: 94%; margin: 0px auto 0; padding:30px 3%; text-align: center; background-image:url("../img/back-contacto.png"); background-position: center; }

.btn-contacto { width: 200px; text-align: center; padding:20px; background-color: #fc403d; margin: 20px auto; border-radius: 40px;border: 2px solid white; }
.fnt-cnt {font-size:2em; font-family: 'Roboto Condensed', sans-serif;  text-decoration: none; font-weight: bold; color: #fff;}
.title-contacta {font-size:3.5em; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; color: #fff;}


/*--------------------------boton paquetes*/
.btn-paquetes { width: 150px; text-align: center; padding:10px; background-color: #fc403d; margin: 10px auto; border-radius: 40px;border: 2px solid white; }
.fnt-paquetes {font-size:1.5em; font-family: 'Roboto Condensed', sans-serif;  text-decoration: none; font-weight: bold; color: #fff;}



/*--------------------------CONTACTO FORM*/

.contacto-main { width: 90%; margin: -3px auto 0; background-color: #f4f0e3; padding:60px 5%; border-radius:50px 50px 0 0; display:flex; align-content: center; align-items: center; justify-content: center; }

.contacto-left{ width:50%; margin: 0; text-align: left; }
.contacto-right { width: 40%; margin: 0 0 0 30px; background-color:#fb1b84; padding:50px 0; text-align: center;}

.mainselection {
    overflow:hidden;
    width:90%;
    margin:0 auto 20px;
    background: url("../img/arrow.png") no-repeat #fff 100% 0px;
}
select {font-size:1em; color:#1d3a44; font-family: 'Montserrat', sans-serif; 
	padding-left: 10px; 
    border:0;
    background:transparent;
    height:55px;
    width:100%;
    -webkit-appearance: none;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #1d3a44;
  opacity: 1; /* Firefox */
}

.campo {width:90%; height:55px; margin:0 0 20px 0; padding-left:10px; box-sizing: border-box; border:0; font-size:1em; color:#1d3a44; font-family: 'Montserrat', sans-serif; }

.campo-mensaje {width:90%; margin:0; padding:20px 0 0 10px; box-sizing: border-box; border:0; font-size:1em; color:#1d3a44; font-family: 'Montserrat', sans-serif; }

.btn-send  { padding:10px 20px;  background-color: #cd201f; margin: 20px auto 0; color: #fff; font-size: 1.8em; font-family: 'Roboto Condensed', sans-serif; border-radius: 40px; text-decoration: none; font-weight: bold; border: none;}

.cuenta {  margin: 0 ; text-align: left;}
.icon { vertical-align:middle; margin: 0 10px 0 0;}

/*----------------------------------recursos*/
.recursos { width: 90%; display: flex; flex-direction: column;  margin: 0px auto 0px; background-image: url("../img/back-recursos.png"); background-position: center; background-color: #eebd29; padding:30px 5%;}

.recursos-title { width:100%; margin: 0px auto 0;  }
.recursos-bloque { width:100%; margin: 0px auto 0; display: flex; justify-content: center; align-items: center; }

.recursos-txt { width:65%; font-size: 1.3em;}
.recursos-img { width: 250px; margin: 0 0 0 10px;}

/*----------------------------------FOOTER*/

.mapa { width:100%; background-color: #0097a7; margin: 0 auto; font-size: 1em; display: flex; justify-content: center; padding: 40px 0;}
.mapa-block { width:20%;  margin:0 20px; text-align: left; color: #fff; font-size: 1em;}
a.map {color: #fff; text-decoration: none; font-size: 1em; line-height: 20px;}
a.map:hover { text-decoration: underline;}

.icon-redes { width: 30px; margin: 0px 10px 0 0;}

footer { width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; color: #1d3a44; font-size: 1.4em; background-color: #ffffff;}


/*----------------------------------gracias*/
.gracias { width:100%; display: block; padding: 10% 0%;  
  text-align: center; 
}

/*----------------------------------nosotros*/

.como-right{ width:100%; display:inline-block; margin:30px auto 0; text-align: center;}

.contenedor { width:100%; margin:0 auto 0px ;  display:flex; align-content: center;  align-items: center; }

.numeros{ width:60px; vertical-align:middle; display:inline-block; margin:0 auto;}
#numericon { display:block;}

.texto-hacemos{ width:90%; text-align:left;  margin:0 0 0 10px;  display:block;}

.metricas { display: block; width: 100%; margin: 0 auto 0px; text-align: center;}
.metrica-item { width: 159px; padding: 20px 10px; font-size: 1.5em; font-weight: normal; margin: 15px 5px; text-align: center; display: inline-block; background-color:#fff; box-shadow: 0px 5px #cccac2; border-radius: 5px; vertical-align: text-top; min-height: 145px;  }
.met-img { margin-bottom:5px;}

/*----------------------------------------*/

.footfix { position: fixed; bottom: 0;}


/*----------------------------------fonts*/

h1 {font-size: 3.1em; margin:0; font-family: 'Roboto Condensed', sans-serif; color: #1d3a44;  }
h1.titles {color: #fb1b84; font-size: 4em; margin: 0; font-family: 'Roboto Condensed', sans-serif; }
h2 {font-size: 2.2em; font-family: 'Roboto Condensed', sans-serif; color: #1d3a44;}
h2.promesa {font-size: 3em; font-family: 'Roboto Condensed', sans-serif; color: #1d3a44;}
h3 {font-size: 2em; font-family: 'Roboto Condensed', sans-serif; color: #1d3a44; margin: 0;}
h4 {font-size:4em; font-family: 'Roboto Condensed', sans-serif; color: #0097a7; margin: 0;}
h5 { font-size: 2em; font-weight: normal; color:#1d3a44; margin: 0; }
h6 { padding:5px 10px; background-color: #fb1b84; color: #ffffff; font-size: 2em; font-family: 'Roboto Condensed', sans-serif; max-width: 380px; margin: 0 0 20px 0;}
p {
    font-size: 1.6em;
    font-weight: normal;
    margin: 10px 0;
}


.outline { border:solid white 2px; margin: 25px auto 15px;}
.nine { width:90%;}
.left { text-align: left;}
.center {text-align: center; margin: 0 auto;}
.justify {text-align: justify;}

.white { color:#ffffff;}
.black { color: #000;}
.grey { color:#1d3a44;}
.blue { color: #0097a7; }
.pink {
    color: #fb1b84;
    text-align: center;
}
.privacy {color: #1d3a44; text-decoration: underline;}

.novta { width:90%;}
.ochta { width:80%;}

/*-=================== MEDIA QUERY 1===================-*/

@media only screen and (max-width:1165px) {
.main {display: flex;  margin: 20px auto 0; width:90%;}
.main-img { width: 40%; margin: 0;}
.main-txt { width:500px; margin: 0 0 0 30px; }
	
.soluciones-box{width:250px; height: 330px; margin:15px 10px 10px; padding: 20px 10px;}

.soluciones-4{ width:350px; height: 250px; margin:15px 10px 10px; }

.soluciones-produccion {width:350px; margin:15px 10px 10px;  }
.produccion-flex {width:40%;  flex-direction: column-reverse;}

.img-sol { width:45%;}
	
}

@media only screen and (max-width:1135px) {
.main-img { align-self: flex-end;}
.main-txt { align-self: flex-end;}
	
.floatle { margin: 0 20px 20px 0; float: left; width: 50%;}
	
.menu-desktop { display: none;}
	
.mobile-header { display: block; text-align: center; position: absolute; top:77px; right: 20px; width: 100%; z-index: 100; padding: 0px 0; margin:0;  }


/* hiding the checkbox */
.nav-toggle { display: none; }

/* STYLING/POSITIONING THE HAMBURGER MENU */
.nav-toggle-label { position: absolute; top: 0; right:0; margin-right:0px; height: 100%; display: flex; align-items:center;}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after { display: block; background: #0097a7; height: 4px; width: 30px; border-radius: 2px; position: relative; transition: all .5s ease-in-out; }

.nav-toggle-label span::before,
.nav-toggle-label span::after { content: ''; position: absolute;}
.nav-toggle-label span::before { bottom: 10px;}
.nav-toggle-label span::after { top: 10px;}

#nav-toggle:checked ~ .nav-toggle-label span { background-color:transparent; /* setting it to the same background as header so it "disappears" */}

/* transforming the before and after span into an X */
#nav-toggle:checked ~ .nav-toggle-label span::before { transform: rotate(45deg); bottom: 0; background: #0097a7;}

#nav-toggle:checked ~ .nav-toggle-label span::after { transform: rotate(-45deg); top: 0; background: #0097a7;}

#menu-mobile { position: absolute;  background-color:#0097a7;  top:45px; left: 20px; width: 100%; transform: scale(1, 0); transition: transform .4s ease-in-out; display:block; z-index:0; text-align:left; /*transform-origin: top; */}
#menu-mobile ul { list-style: none; }
#menu-mobile li {padding: 15px 0px; }
#menu-mobile a {text-decoration: none;  font-size: 18px; text-transform: uppercase; opacity: 0; transition: opacity .15s ease-in-out; color: #fff;}
#nav-toggle:checked + #menu-mobile {transform: scale(1, 1);}
#nav-toggle:checked ~ #menu-mobile a { opacity: 1; transition: opacity .25s ease-in-out .35s;}

.resalta-creamos { width: 90%; z-index: 1000; margin: -20px auto 0; padding: 20px 0; text-align: center; font-size: 1.5em; font-weight: bold; color: #fff; background-color: #fb1b84; border-radius: 30px; position: relative;}
	
.soluciones-box{width:240px; height: 350px; margin:15px 10px 10px; padding: 20px 10px;}

.produccion-flex {width:90%;  flex-direction: column-reverse;}

.img-sol { width:30%;}
}


@media only screen and (max-width:850px) {
.main {flex-direction: column-reverse; }
.main-img { width: 60%; margin: 0 auto 0px;}
.main-txt { width:90%; margin: 0 auto; text-align: center;}

.herramientas { width: 100%; display: block; text-align: center; margin: 0px auto 0px;background-color: #f4f0e3; padding-bottom: 30px;}
.herr01 { width:90%; margin: 20px auto; display: inline-block; text-align: center;}
	
.btnmas { width: 100px; padding:5px 10px; margin: 3px auto 0;  font-size: 1.5em;  }

.contacto { width: 94%; display:inline-block; padding: 30px 3% 30px;}
	
.sabias-emp {display: block; margin: 0px auto 0; width: 100%;}
.sabias-emp-left { width:80%; border-radius: 20px; background-color:#fb1b84; color:#fff; font-size: 1.7em; font-weight: bold; padding: 20px; margin:20px auto;  }
.sabias-emp-right { width:80%; color:#1d3a44; font-size: 1.7em; font-weight: bold; padding: 0px; margin: 0 auto;  }
	
	
	
 .resalta-creamos { width: 85%; z-index: 1000; margin: -10px auto 0; padding: 20px 5px; text-align: center; font-size: 1.5em; font-weight: bold; color: #fff; background-color: #fb1b84; border-radius: 10px; position: relative;}

.gradient { width: 90%; margin: 0px auto 0; padding: 5%; 
background: #d9ebf5; z-index: 0; background: -moz-linear-gradient(top, #d9ebf5 0%, #ffffff 100%);}

.soluciones-box{width:300px; height: 320px; margin:15px 10px 10px; padding: 20px 10px;}

.contacto-main { width: 90%; margin: -3px auto 0; background-color: #f4f0e3; padding:60px 5%; border-radius:50px 50px 0 0; display:block;  }

.contacto-left{ width:100%; margin: 0; text-align: center; }
.contacto-right { width: 100%; margin:30px auto 0; background-color:#fb1b84; padding:50px 0; text-align: center;}
}


@media only screen and (max-width:750px) {
.floatle { margin: 0 auto 30px; float:auto; width: 100%; display: block;}
	
.general-promesa { margin: -5px auto 0;}
	
.banner { display: none;}
.banner-mobile { display: block; margin: 0px auto 0; background-color: #fff;}
	
.central-img { margin:30px auto; width:80%;}

.comencemos { width:94%; padding:30px 3%; display : block; margin: 0px auto; }
.comencemosimg { display: none;}
.ponte { width:90%; color: #fff; margin: 0 auto; text-align: left; }
.sabermas { padding:10px; background-color: #fc403d; margin: 20px 0 20px 30px; color: #fff; font-size: 1.8em; font-family: 'Roboto Condensed', sans-serif; border-radius: 40px; text-decoration: none; font-weight: bold; display:inline-block; }
		
.porcentajes {display: block; margin: 0px auto 0; width: 90%;}
.sabias-box {width:92%; border-radius: 20px; background-color:#fb1b84; color:#fff;padding: 20px; text-align: center; margin: 30px 15px;  margin: 30px auto 30px;  }
.paquetes-box {width:92%; border-radius: 20px; background-color:#f4f0e3; color:#fff;padding: 20px; text-align: center; margin: 30px 15px;  margin: 30px auto 30px;  }

h6 { padding:5px 10px; background-color: #fb1b84; color: #ffffff; font-size: 2em; font-family: 'Roboto Condensed', sans-serif; max-width: 100%; margin: 0 0 20px 0; text-align: center;}

.casos {display: block; margin: 20px auto 40px; width: 90%;}
.casos-img { width:80%; margin: 0 auto;}
.casos-txt { width:100%; margin: 30px auto;}


.cada-servicio{display: block;  margin: 0px auto 50px; }
.servicio-img-hid { display: block; width: 70%; margin: 10px auto 20px;}
.servicio-img-show { display: none;}
.servicio-img { width:70%; margin: 10px auto 20px;}
.servicio-txt { width:100%; text-align: left; margin: 0px auto 20px;}	

.soluciones-produccion {width:100%;  }
.produccion-flex {width:100%;  flex-direction: column-reverse;}
.img-sol { width:30%;}
	
}


@media only screen and (max-width:670px) {
.siguenos {position: fixed; top: 200px; right: -43px; width: 40px; z-index: 1000000;}
	
.logo { width: 120px; margin: 13px 0 0 15px; display: inline-block;}
	
.main-img { width: 80%; margin: 0 auto 0px;}
	
.mapa { width:100%; background-color: #0097a7; margin: 0 auto; font-size: 1em; display: block; padding: 20px 0;}
.mapa-block { width:90%;  margin:10px auto 10px;}

.icon-redes { width: 30px; margin: 0px 10px 0 0;}
	
.logo-alianza { width:30%; margin:25px 10px; display:inline-block;}
	

.recursos-bloque { width:100%; margin: 15px auto 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }

.recursos-txt { width:100%; font-size: 1.3em; margin: 0 auto}
.recursos-img { width: 300px; margin: 30px auto 0px;}


}



@media only screen and (max-width:400px) {
.metrica-item { width: 135px; padding: 20px 5px; display: inline-block; margin:10px; min-height: 145px; vertical-align: text-top;}

.soluciones-box{width:90%;  }
}