@charset "ISO-8859-1";
/* CSS Document */

@font-face {
    font-family: 'Bold';
   src: url('fonts/Factura-Sans/FacturaSans-Bold.otf');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Light';
    src: url('fonts/Factura-Sans/FacturaSans-Light.otf');
    font-weight: normal;
    font-style: normal;
}

 
html {
  min-height: 100%;
}
body {
    /* width: 100%; */
    padding:0px;
    margin:0px;
    font-family:"Light","roboto";
    color: #000;
    font-size: 15px;
}

body {/* height: 100%; */}

form, p, h1, h2, h3, h4 
{ margin:0; padding:0; }

.ul 
{ padding:0; margin:0; }

.ul li 
{ list-style-position:outside; margin-left:16px; }

a img, table 
{ border:none; }

.nobr 
{ white-space:nowrap; }

.hiddenInfo 
{ display:none!important; visibility:hidden; position:absolute; }

a 
{ color: #697a94; text-decoration:none; font-family: 'Light', "roboto"; font-weight:100; }

textarea, .entrada 
{ resize:none; font-family:"Light", "roboto"; font-size:15px; }
* { outline:none; cursor:default; font-weight: normal; }

a, a img { cursor:pointer; }

strong { font-weight: normal; font-family:"Bold", "roboto";!important; }

header, section, footer, aside, nav, article, figure { display: block; }

header { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 10000; background-color: #fff; }

header .int { position: relative; margin: auto; width: 100%; max-width: 1000px; height: 100%; padding-top: .1px; }

#main {/* padding-top: .1px; */}

#home { width: 100%; }

.heroHome .int {background-image: url('img/backgrounds/heroBannerHome2.png');background-position: 50%;background-size: cover;width: 100%;max-width: 1400px;margin: auto;position: relative;overflow: hidden;}

.heroHome .int p { color: #fff; position: absolute; text-shadow:0 0 14px #000; }

.heroHome .int p span {display: block;font-family: 'Bold';}

.menuHome ul, .menuHome li { margin: 0; padding: 0; list-style-type: none; list-style-position: outside; }

.menuHome ul {display: block;width: 100%;max-width: 1000px;margin: auto;overflow: hidden;text-align: center;font-size: 0;}

.menuHome li { display: inline-block; vertical-align: top; cursor: pointer; }

.menuHome li div, .iconoEspecial div {margin: auto;/* padding: 10px; */margin-bottom: 18px;background-image: url('img/backgrounds/sombra.png');background-size: 100% auto;background-repeat: no-repeat;background-position: center bottom;cursor: pointer;}

.menuHome li div img, .iconoEspecial div img { width: 100%; position: relative; cursor: pointer; }


.menuHome li p, .iconoEspecial p {color: #05C3DD;font-family: 'Bold';cursor: pointer;}

.menuHome li span, .iconoEspecial span { color: #697a94; font-family: 'Light'; opacity: 1; cursor: pointer; padding-top: 0!important; }

.iconoEspecial {width: 35%;margin: auto;text-align: center;float: right;margin-top: 30vh;}

.contenidoInterior { display: none; }

.mostrarContenido {display: block;box-sizing: border-box;}

footer .int ul, footer .int li { list-style-type: none; list-style-position: outside; margin: 0; padding: 0; }

.contenidoInterior .fondo { position: absolute; left: 0; right: 0; width: 100%; height: 1px; background-image: url('img/backgrounds/interiores.jpg'); background-position: center top; background-repeat: repeat-x; }

.contenidoInterior .int { width: 100%; max-width: 1000px; margin: auto; position: relative; overflow: hidden; }

.contenidoInterior .bloques { position: relative; z-index: 3; }

.contenidoInterior .telefonos { }

.contenidoInterior h2 { color: #05C3DD; font-family: 'Light'; }

.contenidoInterior h2 span { display: block; color: #697a94; font-family: 'Bold'; font-size: .5em; }

.contenidoInterior p span { display: block; font-size: .8em; padding-top: 20px; }

.conoceMas { display: block; text-align: center; border: solid 2px #697a94; padding: 11px 0; width: 164px; font-size: 16px; line-height: 16px; color: #697a94; cursor: pointer; text-transform: uppercase; border-radius: 7px; }

.conoceMas:hover { background-color: #697a94; color: #fff; }

.telefonos {background-image: url('img/misc/computadora.png');background-size: contain;background-repeat: no-repeat;background-position: center;padding: 0;float: right;}

.telefonos .corte {width: 50.2vh;position: relative;overflow: hidden;margin: 9.5vh auto 28.7%;}

.telefonos .corte ul { display: block; width: 300%; list-style-position: outside; list-style-type: none; margin: 0; padding: 0; }

.telefonos .corte ul li { display: block; width: 33.33%; position: relative; float: left; list-style-position: outside; list-style-type: none; margin: 0; padding: 0; }

.telefonos .corte ul li img { display: block; width: 100%; }

.telefonos .corte div {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  min-height: 1px;
  -moz-box-shadow: inset -3px 3px 10px rgba(105,122,148,0.4);
  -webkit-box-shadow: inset -3px 3px 10px rgba(105,122,148,0.4);
  -ms-box-shadow: inset -3px 3px 10px rgba(105,122,148,0.4);
  -o-box-shadow: inset -3px 3px 10px rgba(105,122,148,0.4);
  box-shadow: inset 0px 0px 2vw rgba(105,122,148,0.4);
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.16+0,0.16+31,0.06+32,0.02+100 */
  background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.16) 31%, rgba(255,255,255,0.06) 32%, rgba(255,255,255,0.02) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0.16) 0%,rgba(255,255,255,0.16) 31%,rgba(255,255,255,0.06) 32%,rgba(255,255,255,0.02) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  rgba(255,255,255,0.16) 0%,rgba(255,255,255,0.16) 31%,rgba(255,255,255,0.06) 32%,rgba(255,255,255,0.02) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#29ffffff', endColorstr='#05ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.bolita {display: block;list-style-type: none;list-style-position: outside;text-align: center;margin: 0;padding: 0;width: 100%;position: absolute;z-index: 4;top: 60vh;}

.bolita li {display: inline-block;list-style-type: none;list-style-position: outside;margin: 10px 3px 0;padding: 0;width: 12px;height: 12px;border: solid 2px #a2d9ef;cursor: pointer;border-radius: 40px;}

.bolita .actual, .bolita li:hover { background-color: #a2d9ef; cursor: pointer; }

.bolita li:hover { background-color: #fff; background-image: url('../img/botones/bolita.png'); background-repeat: no-repeat; background-position: center; }

.bolita .actual { cursor: default!important; background-color: #a2d9ef!important; background-image: none!important; }

.telefonos ul { margin-left: 0%;
  -moz-transition:all ease-out .8s;
  -webkit-transition:all ease-out .8s;
  -ms-transition:all ease-out .8s;
  -o-transition:all ease-out .8s;
  transition:all ease-out .8s;
}

.paso1 .telefonos ul { margin-left: 0%; }

.paso2 .telefonos ul { margin-left: -100%; }

.paso3 .telefonos ul { margin-left: -200%; }

.interiorAbierto #regresar { display: block; width: 24px; height: 100%; background-repeat: no-repeat; background-position: center; background-image: url('img/botones/regresar.png'); background-size: 100% auto; position: absolute; right: 20px; top: 0; }



.copy { 
    -moz-transition:opacity ease-out 2.8s;
    -webkit-transition:opacity ease-out 2.8s;
    -ms-transition:opacity ease-out 2.8s;
    -o-transition:opacity ease-out 2.8s;
    transition:opacity ease-out 2.8s;
  }

.flechas { position: absolute; width: 100%; top: 208px; z-index: 20; }

.flechas div { cursor: pointer; width: 28px; height: 46px; position: absolute; }

.flechas .izquierda { background-image: url('img/botones/flechaLeft.png'); left: 0; }

.flechas .derecha { background-image: url('img/botones/flechaRight.png'); right: 0; }

/* Desktop y tablet horizontal */
/*------------------------------------------------------------------------*/
                                /*tablet*/
/*------------------------------------------------------------------------*/
@media screen and (min-width: 801px) {
  header {height: 80px;}
  body {padding-top: 100px;}
  
  header a img {margin: 36px 0 0 40px;width: 280px;}

  .iconoEspecial { display: none; }

  #home {/* position: fixed; */z-index: 500;background-color: #fff; /**ATENCION**/}
  #home p.legal{ margin: 20px auto 0; }
  .heroHome .int {height: 31vh;}
  .heroHome .int p {font-size: 24px;line-height: 0.9;top: 30%;left: 40px;}
  .heroHome .int p span { font-size: 44px; }
  .menuHome li {width: 16.6666667%;}
  .menuHome li div {width: 80px;margin: 20px auto;height: 100px;}
  .menuHome li div img {top: 0px;opacity: 1;}

  .menuHome li:hover div { background-size: 60% auto; }
  .menuHome li:hover div img { top:-10px; }
  
  .menuHome li p {font-size: 16px;height: 20px;line-height: 24px;}
  .menuHome li span { font-size: 12px; display: block; padding: 0 10px; padding-top: 5px; }

  
  #interiores {
    background-image: url('img/backgrounds/interiores.jpg');
    background-position: 50%;
    background-size: cover;
    height: 0;
    overflow: hidden;
  }
  #interiores .int{
    display: flex;
    flex-direction: row-reverse;
  }
  #interiores p.legal{ margin:auto; }
  .bloques {align-items: center;display: flex;font-size: 16px;height: 60vh;width: 50%;}
  .bloques .bloqueInterior {padding-left: 15%;padding-right: 10%;}
  .contenidoInterior h2 {font-size: 32px;margin-bottom: 4vh;}
  .contenidoInterior p {margin-bottom: 4vh;}
  .bloques .bloqueInterior strong { white-space: nowrap; }
  .conoceMas {margin-bottom: 4vh;}
  .descargala p { margin-bottom: 10px; } 
  .descargala a { width: 141px!important; background-size: 100% auto; background-repeat: no-repeat; }
  .telefonos {height: 64vh;margin-top: 4vh;width: 50%;}
  .copy { height:0; opacity: 0; overflow: hidden; }

  .paso1 .copy1, .paso2 .copy2, .paso3 .copy3 { height: auto; opacity: 1; }

  .bloques b { display: none; }
  .estrellas { display: none; }
  #regresar { display: none!important; }

  /*Abrieron un interior*/
  body, header, #home,
  .heroHome .int,
  .menuHome ul,
  .menuHome li span,
  .menuHome li div,
  .menuHome li div img,
  .interiorAbierto .menuHome li p,
  #home p.legal,
  .contenidoInterior .fondo {
    -moz-transition: all ease-out 0.25s;
    -webkit-transition: all ease-out 0.25s;
    -ms-transition: all ease-out 0.25s;
    -o-transition: all ease-out 0.25s;
    transition: all ease-out 0.25s;
  }
  
  .interiorAbierto{ padding-top: 0;}
  .interiorAbierto header {transform: translateY(-100%);}
  .interiorAbierto .heroHome .int { height: 0; }
  .interiorAbierto #home p.legal{ height: 0; margin: 0; overflow: hidden;}
  .interiorAbierto #interiores { margin-top: 0; height: 60vh; overflow: visible; }
  .interiorAbierto .menuHome ul { max-width: 800px; }
  .interiorAbierto .menuHome li p { opacity: 0; }
  .interiorAbierto .menuHome li span { font-size: 1px; opacity: 0; }
  .interiorAbierto .menuHome li div {opacity: .5;width: 50px;margin: 30px auto 0;height: 60px;}
  .interiorAbierto .menuHome li.actual:hover div img { top: 0px; }
  .interiorAbierto .menuHome .actual div {background-image: none;height: 70px;margin: 15px auto 0;opacity: 1;width: 70px;}
  .interiorAbierto .menuHome .actual p { opacity: 1; }*/

  /*.interiorAbierto header {transform: translateY(-100%);}
  .interiorAbierto #home{ height: 120px;} 
  .interiorAbierto .heroHome .int,.interiorAbierto #main #home p.legal { height: 0; overflow: hidden; opacity: 0;}
  .interiorAbierto #interiores { height: 60vh; overflow: visible; }
  .interiorAbierto { padding-top:.1px; }
  

  
  .interiorAbierto .contenidoInterior .fondo { height: 440px; }
  /*.interiorAbierto footer { position: relative; }*/
    
    
   
}
/*------------------------------------------------------------------------*/
                            /*desktop*/
/*------------------------------------------------------------------------*/
@media screen and (min-width: 1000px) {
  header {/* height: 120px; */}
  body {/* padding-top: 120px; */}
  header .int {/* background-image: url('../img/backgrounds/headerDesktop.png'); *//* background-repeat: no-repeat; *//* background-position: left top; *//* max-width: 1034px; */}
  header a img {/* margin: 45px 0 0 40px; *//* width: 287px; */}

  .iconoEspecial { display: none; }

 


  .menuHome li div, .menuHome li div img {
  }

  .menuHome li p {}
  .menuHome li span {font-size: 12px;}

  #interiores {/* padding-top: 120px; *//* padding-bottom: 30px; */}

  .bloques {/* width: 50%; *//* padding-top: 90px; *//* font-size: 16px; *//* height: 60vh; *//* padding-bottom: 80px; */}
  .bloques .bloqueInterior {/* padding-left: 65px; *//* padding-right: 30px; */}
  .contenidoInterior h2 {/* font-size: 35px; *//* margin-bottom: 40px; */}
  .contenidoInterior p {/* margin-bottom: 30px; */}
  .bloques .bloqueInterior strong { white-space: nowrap; }
  .conoceMas {/* margin-bottom: 30px; */}
  .telefonos {/*width: 34%;*//* margin-right: 4%; */}
  .telefonos {/* width: 28%; */}
  .copy { height:0; opacity: 0; overflow: hidden; }

  .paso1 .copy1, .paso2 .copy2, .paso3 .copy3 { height: auto; opacity: 1; }


  
}



/*Emergencia, muy muy chaparro
@media screen and (min-width: 702px) and (max-height: 800px) {
  .heroHome .int { height: 250px; }
    
}
@media screen and (min-width: 702px) and (max-height: 721px) {
  .heroHome .int { height: 200px; margin-bottom: 10px; }
  .heroHome .int p { font-size: 24px; line-height: 35px; top: 25%; left: 40px; }
  .heroHome .int p span { font-size: 44px; }
    footer .int p { position: absolute; top: -60px; color: black; font-size: 15px; text-align: left; margin: 0 40px;}
    footer .int p a {color: #074e99; text-decoration: underline; font-family: 'Bold';}
    
}
*/
/* Celular y tablet vertical */

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

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

@media screen and (max-width: 801px) {
  html { max-height: 100%; }
  header { height: 61px; }
  body { padding-top: 61px; width:790px;}
  header .int { background-image: url('img/backgrounds/headerMobile.png'); background-repeat: no-repeat; background-position: top; background-size: 100% 7px; }
  header a img { margin: 25px 0 0 10px; width: 187px; }

  .heroHome .int { height: 110px; background-size: 100% auto;padding-top:40px; }
  .heroHome .int p { font-size: 24px; line-height: 35px; top: 25%; left: 40px; }
  .heroHome .int p span { font-size: 44px; }

  .menuHome ul { padding: 20px 0;}
  .menuHome li { width: 30%; margin-bottom: 24px; }
  .menuHome li div { width: 80px; }

  .menuHome li p { font-size: 12px; }
  .menuHome li span { font-size: 10px; }

 

  .menuHome li span { display: block; min-height: 35px; }

  .versionandroid .iphone { display: none!important; }
  .versioniphone .android { display: none!important; }

  html,body,#main { overflow-x:hidden; }
  #interiores { position: absolute; top: 0; margin-left: 100%; width: 100%; background-color: #fff; z-index: 9; margin-top: 60px; 
    background-image: url('img/backgrounds/mobileLinea.png'); background-position: bottom; background-repeat: repeat-x;
    -moz-transition:margin-left ease-out .4s;
    -webkit-transition:margin-left ease-out .4s;
    -ms-transition:margin-left ease-out .4s;
    -o-transition:margin-left ease-out .4s;
    transition:margin-left ease-out .4s;
  }
  .contenidoInterior { padding: 0 10px; width: 100%; }
  .interiorAbierto .contenidoInterior { width: 100%; }
  .contenidoInterior .fondo { height: 191px; }
  .interiorAbierto #main {overflow: hidden; }
  .interiorAbierto #interiores { margin-left: 0; }
  .telefonos {background-size: cover;height: 50vw;width: 60vw;float: left;}
  .telefonos .corte{width: 49vw;margin: 3.0vw auto;}
  .bolita { display: none; }
  .bloques {clear: both; padding: 0 22px; }
  .bloqueInterior h2 { font-size: 30px; padding-bottom: 20px; }
  .bloqueInterior h2 span { margin-top: 16px; }
  .copy { padding-bottom: 20px; color: #697a94; }
  .conoceMas { margin: auto; margin-top: 40px; }
  .iconoEspecial {margin-top: 15vw;}
  .iconoEspecial div{width: 80%; }
  .flechas {display: none; }
  html { overflow-x:hidden; position: fixed; }
  body, html, #home, #interiores { height: 100%; }
  body { padding-top: 0!important; }
  #main { height: auto; } 
  * { overflow-x: hidden!important; }
  #interiores { margin-top: 0; background-image: none!important; }
  .heroHome, #interiores article { margin-top: 61px; }
  #interiores article { margin-bottom: 20px; }

}

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

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

@media screen and (max-width: 759px) {

  html { max-height: 100%; }
  header { height: 61px; }
  body { padding-top: 61px; width: 739px;}
  header .int { background-image: url('img/backgrounds/headerMobile.png'); background-repeat: no-repeat; background-position: top; background-size: 100% 7px; }
  header a img { margin: 25px 0 0 10px; width: 187px; }

  .heroHome .int { height: 104px; background-size: cover; background-position: right; }
  .heroHome .int p { font-size: 17px; line-height: 21px; top: 45%; left: 40px; }
  .heroHome .int p span { font-size: 30px; }
  .menuHome li { width: 30%; margin-bottom: 24px; }
  .menuHome li div { width: 80px; }

  .menuHome li p { font-size: 12px; }
  .menuHome li span { font-size: 10px; }
  .versionandroid .iphone { display: none!important; }
  .versioniphone .android { display: none!important; }

  html,body,#main { overflow-x:hidden; }
  #interiores { position: absolute; top: 0; margin-left: 100%; width: 100%; background-color: #fff; z-index: 9; 
    -moz-transition:margin-left ease-out .4s;
    -webkit-transition:margin-left ease-out .4s;
    -ms-transition:margin-left ease-out .4s;
    -o-transition:margin-left ease-out .4s;
    transition:margin-left ease-out .4s;

  }

  .contenidoInterior { padding: 0 10px; width: 100%; }
  .interiorAbierto .contenidoInterior { width: 100%; }
  .contenidoInterior .fondo { height: 191px; }
  .interiorAbierto #main {overflow: hidden; }
  .interiorAbierto #interiores { margin-left: 0; }
  .telefonos {/* width: 50%; *//* float: left; */}
  .bolita { display: none; }
  .bloques {clear: both; padding: 0 22px; }
  .bloqueInterior h2 { font-size: 30px; padding-bottom: 20px; }
  .bloqueInterior h2 span { margin-top: 16px; }
  .copy { padding-bottom: 20px; color: #636363; }
  .conoceMas { margin: auto; margin-top: 40px; }
  .iconoEspecial {/* margin-top: 200px; */}

 }

p.legal{
  font-size: 12px;
  margin: 20px 5%;
  max-width: 480px;
  text-align: center;
}
p.legal a{
  color: #074e99
}

@media screen and (max-width: 699px) {

  html { max-height: 100%; }
  header { height: 61px; }
  body { padding-top: 61px; width: 689px;}
     .heroHome .int { height: 60px; background-size: cover; background-position: right; }

}

@media screen and (max-width: 599px) {

  html { max-height: 100%; }
  header { height: 61px; }
  body { padding-top: 61px; width: 559px;}
     .heroHome .int { height: 60px; background-size: cover; background-position: right; }

}

@media screen and (max-width: 499px) {

  html { max-height: 100%; }
  header { height: 61px; }
  body { padding-top: 61px; width: 489px;}
     .heroHome .int { height: 40px; background-size: cover; background-position: right; }

}


@media screen and (max-width: 389px) {

  html { max-height: 100%; }
  header { height: 61px; }
  body { padding-top: 61px; width: 369px;}
     .heroHome .int { height: 40px; background-size: cover; background-position: right; }

}

@media (min-width: 320px) and (max-width: 370px) {


 html { max-height: 100%; }
  header { height: 61px; }
  body { padding-top: 61px; width: 319px;}
     .heroHome .int { height: 40px; background-size: cover; background-position: right; }
    
  
    
   
}

@media (min-width: 370px) and (max-width: 414px) {


 html { max-height: 100%; }
  header { height: 61px; }
  body { padding-top: 61px; width: 410px;}
     .heroHome .int { height: 40px; background-size: cover; background-position: right; }
    
  
    
   
}
@media screen and (max-width: 289px) {

  html { max-height: 100%; }
  header { height: 61px; }
  body { padding-top: 61px; width: 269px;}
     .heroHome .int { height: 40px; background-size: cover; background-position: right; }

}

@media screen and (max-width: 119px) {

  html { max-height: 100%; }
  header { height: 61px; }
  body { padding-top: 61px; width: 109px;}
     .heroHome .int { height: 40px; background-size: cover; background-position: right; }

}

@media screen and (max-width: 79px) {

  html { max-height: 100%; }
  header { height: 61px; }
  body { padding-top: 61px; width: 69px;}
     .heroHome .int { height: 40px; background-size: cover; background-position: right; }

}