@charset "utf-8";
:root {
  --color-negro            : #231F20;
  --color-negro-op         : #231F2029;
  --color-blanco           : #FFF;
  --color-verde-claro      : #67C8C1;
  --color-azul-tempo       : #26327E;
  --color-azul-tempo-op10p : rgba(38, 50, 126, 0.1);
  --color-azul-tempo-op50p : rgba(38, 50, 126, 0.5);

}
.btn-primary {
  --bs-btn-color                 : #FFF;
  --bs-btn-bg                    : #26327E;
  --bs-btn-border-color          : #26327E;
  --bs-btn-hover-color           : #FFF;
  --bs-btn-hover-bg              : #26327E;
  --bs-btn-hover-border-color    : #202A6C;
  --bs-btn-focus-shadow-rgb      : 49, 132, 253;
  --bs-btn-active-color          : #FFF;
  --bs-btn-active-bg             : #26327E;
  --bs-btn-active-border-color   : #202A6C;
  --bs-btn-active-shadow         : inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color        : #FFF;
  --bs-btn-disabled-bg           : #26327E;
  --bs-btn-disabled-border-color : #26327E;
}
.color-azul-tempo-op10p {
  color : var(--color-azul-tempo-op10p);
}
.bg-azul-tempo-op10p {
  background-color : var(--color-azul-tempo-op10p);
}
.border-azul-tempo-op10p {
  border-color : var(--color-azul-tempo-op10p);
}
.color-azul-tempo-op50p {
  color : var(--color-azul-tempo-op50p);
}
.bg-azul-tempo-op50p {
  background-color : var(--color-azul-tempo-op50p);
}
.border-azul-tempo-op50p {
  border-color : var(--color-azul-tempo-op50p);
}
.color-azul-tempo {
  color : var(--color-azul-tempo);
}
.bg-azul-tempo {
  background-color : var(--color-azul-tempo)
}
.border-azul-tempo {
  border-color : var(--color-azul-tempo)
}

.color-verde-claro {
  color : var(--color-verde-claro);
}
.bg-verde-claro {
  background-color : var(--color-verde-claro)
}
.border-verde-claro {
  border-color : var(--color-verde-claro)
}
.color-blanco {
  color : var(--color-blanco);
}
.bg-blanco {
  background-color : var(--color-blanco)
}
.border-blanco {
  border-color : var(--color-blanco)
}
.color-negro {
  color : var(--color-negro);
}
.bg-negro {
  background-color : var(--color-negro)
}
.border-negro {
  border-color : var(--color-negro)
}
.color-negro-op {
  color : var(--color-negro-op);
}
.bg-negro-op {
  background-color : var(--color-negro-op)
}
.border-negro-op {
  border-color : var(--color-negro-op)
}

body, html {
  font-family : "Barlow", sans-serif;
}
.barlow-regular {
  font-family : "Barlow", sans-serif;
  font-weight : 400;
  font-style  : normal;
}

.barlow-regular-italic {
  font-family : "Barlow", sans-serif;
  font-weight : 400;
  font-style  : italic;
}

.barlow-bold {
  font-family : "Barlow", sans-serif;
  font-weight : 700;
  font-style  : normal;
}

.barlow-light {
  font-family : "Barlow", sans-serif;
  font-weight : 300;
  font-style  : normal;
}
textarea {
  resize      : none;
  form-sizing : content;
  min-height  : 1em;
}
.navbar-toggler {
  border : none;
}
.navbar-toggler:focus {
  box-shadow : none !important;
}


.navbar-toggler[aria-expanded=false] {
  transform  : rotate(0);
  transition : .5s;


}

.navbar-toggler[aria-expanded=true] {
  transform  : rotate(-90deg);
  transition : .5s;

}
/*
Al seleccionar un campo de ingreso de texto, o un select, en browser realiza un zoom. (iphone)
http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone 
*/
@media screen and (-webkit-min-device-pixel-ratio : 0) {
  select, textarea, input {
    font-size : 16px !important;
  }

  input[type="button"],
  input[type="submit"] {
    -webkit-appearance : none;

  }
}
.videoWrapper {
  position    : relative;
  padding-top : calc((3 / 4) * 100%);
  height      : 0;
}
.videoWrapper iframe {
  position : absolute;
  top      : 0;
  left     : 0;
  width    : 100%;
  height   : 100%;
}
/*---- aspectRatios ----*/
.aspectRatio43,
.aspectRatio1,
.aspectRatio169,
.aspectRatio168,
.aspectRatio167,
.aspectRatio166,
.aspectRatio165,
.aspectRatio164 {
  position : relative;
}
:is(
  .aspectRatio43,
   .aspectRatio1,
   .aspectRatio169,
   .aspectRatio168,
   .aspectRatio167,
   .aspectRatio166,
   .aspectRatio165,
   .aspectRatio164):before {
  display : block;
  content : " ";
  width   : 100%;

}
.aspectRatio1:before {
  padding-top : 100%;
}
.aspectRatio43:before {
  padding-top : calc((3 / 4) * 100%);
  /*padding-top : 75%;*/
}
.aspectRatio169:before {
  padding-top : calc((9 / 16) * 100%);
}
.aspectRatio168:before {
  padding-top : calc((8 / 16) * 100%);
}
.aspectRatio167:before {
  padding-top : calc((7 / 16) * 100%);
}
.aspectRatio166:before {
  padding-top : calc((6 / 16) * 100%);
}
.aspectRatio165:before {
  padding-top : calc((5 / 16) * 100%);

}
.aspectRatio164:before {
  padding-top : calc((4 / 16) * 100%);
}
.backCover {
  background-position : center;
  background-size     : cover;
  background-repeat   : no-repeat;
}
.backCoverPositionTop {
  background-position : center top !important;
}
.backCoverPositionBottom {
  background-position : center bottom !important;
}
.backCoverPositionCenter {
  background-position : center center !important;
}
.backFixed {
  background-attachment : fixed;
}
@supports (-webkit-overflow-scrolling: touch) {
  .backCover.backFixed {
    background-size : 100% !important;
  }
}
:is(input[type=password],input[type=text]).verificado {
  border     : none;
  box-shadow : 0 0 7px green;
}
:is(input[type=password],input[type=text]).incorrecto {
  border        : 1px solid red;
  border-radius : 2px;
  box-shadow    : 0 0 7px red
}

.mid-articulos .list a span.thumbnail {
  background-size     : cover;
  background-position : center;
  background-repeat   : no-repeat;
  display             : block;
}

.bodymask {
  background-color : #FFF;
  display          : none;
  position         : fixed;
  top              : 0;
  left             : 0;
  z-index          : 1000;
  opacity          : .7;

}
.paginacion span,
.paginacion a {
  color            : #FFF;
  text-decoration  : none;
  margin           : 5px;
  background-color : #658582;
  padding          : 5px 10px;
  transition       : .5s;
}
.paginacion a:hover,
.paginacion span {
  background-color : #FFF !important;
  color            : #658582;
  transition       : .5s;
}
.paginacion span {
  border : 1px solid #658582;
}

.owl-nav {
  position : absolute;
  bottom   : 29px;
  left     : 0;
}

.owl-prev, .owl-next {
  background-color : #333 !important;
}

.owl-dots {
  position : absolute;
  bottom   : 0;
}
#cboxTitle {
  position   : absolute;
  top        : -22px;
  left       : 0;
  color      : #EEE;
  background : #FFF;
  padding    : 0 5px 0 5px;
  font-size  : 14px;
}
#cboxTitle .btnGoFullScreen {
  color : #333;
}
:is(textarea,select,input)[data-validation-engine^="validate[required"] {

}

.hero {
  height     : 40vh;
  min-height : 350px;
  padding    : 0;
  margin     : 0;
}
.mid-html-beneficios .hero {
  height : unset;
}
.mid-portada .hero {
  height     : 115vh;
  min-height : 600px;

}
.navbar {
  background-color : var(--color-negro-op);

}
.navbar-nav a {
  color : var(--color-blanco);
}

.claim {

  width     : 100%;
  padding   : 6rem 1rem;
}
.mid-html-beneficios .claim {
  position  : relative;
  top       : unset;
  left      : unset;
  transform : unset;
  width     : revert;
  padding   : revert;
}

body:not(.portada-init) .claim h1 {
  background-color : #FFFFFFCF;
  display          : inline;
  color            : var(--color-azul-tempo);
  padding-left     : .5em;
  padding-right    : .5em;
}
.mid-portada .claim h2 {
  display          : inline-block;
  margin-bottom    : 1em;
  background-color : #FFFFFFCF;
  color            : var(--color-azul-tempo);
  padding          : 0 .5em 2px .5em;
}
.mid-portada .claim h1 {
  background-color : #00368159;
}
.mid-portada .claim h1 img {

  filter : grayscale(1) invert(1) brightness(150);
}
.t-0 {
  top : 0;
}
.s-0 {
  right : 0;
}
.z-index-1 {
  z-index : 1;
}
.tempo-text {
  color          : var(--color-azul-tempo);
  font-weight    : bold;
  text-transform : uppercase;
}
.tempo-text-normal {
  color       : var(--color-azul-tempo);
  font-weight : bold;

}
.tempo-text.inverted,
.tempo-text-normal.inverted {
  color : var(--color-blanco) !important;
}
.destaque {
  position    : relative;

  border-left : 2.5em solid var(--color-azul-tempo);

}
.destaque h5 {
  background-color : var(--color-azul-tempo);
  color            : var(--color-blanco);
  padding          : .2em .3em;
  position         : absolute;
  top              : 0;
  left             : 0;
  transform-origin : 0 0;
  transform        : rotate(90deg);
}
.destaque p {
}
.cont-facilidades {
}

.cont-facilidades i {
  width     : 2.4rem;
  color     : var(--color-azul-tempo);
  font-size : 2em;
  top       : 13px;
  position  : relative;
}
.cont-facilidades .ms-i {
  margin-left : 2.5rem;
}
#ContFormContacto {

}
#ContFormContacto > div {

}
h4.title {
  background-color : var(--color-azul-tempo);
  color            : var(--color-blanco);
  padding          : .25rem .5rem !important;
}
.navbar-brand.tempo-text,
footer .tempo-text {
  color : var(--color-blanco);
}

.separator::after {
  margin        : 2em auto;
  content       : " ";
  display       : block;
  text-align    : center;
  height        : 1px;
  width         : 75%;
  border-bottom : 1px solid var(--color-azul-tempo-op50p);

}
.hero-cover {
  background-image : linear-gradient(
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.3) 31%
  ),
  linear-gradient(
    rgba(52, 63, 147, .1),
    rgba(52, 63, 147, .1)
  );
}

.mid-html-beneficios .hero-cover {
  background-image : none;
  background-color : rgba(1, 2, 30, 0.57);
}
:is(.mid-html-ubicacion,.mid-portada,.mid-html-unidades,.mid-html-proyectos) .hero-cover {
  background-image : linear-gradient(rgba(38, 50, 126, .3), rgba(38, 50, 126, 0) 31%), linear-gradient(rgba(28, 37, 92, .1), rgba(28, 37, 92, .1));
}
.detalle-ubicacion .fixed-height {
  height      : 3em;
  line-height : 3em;
  font-size   : 1.2em;
}
.detalle-ubicacion i {

  color : var(--color-azul-tempo);
}
.contacto-init .backCoverPositionCenter,
.contacto-init .backCoverPositionCenter > div {
  height : 100%;
}
.contacto-init #ContFormContacto h4 {
  /*margin-top : 4em;*/
}
.html-beneficios .claim .container {
  margin-top : 18rem;
}
/*media querys*/
.ContFormContacto-back {
  background-position : top right;
}
@media (min-width : 576px) {
  /*-- sm --*/
  .aspectRatio-sm-none:before {
    display     : none !important;
    padding-top : 0 !important;
  }

  .hero {
    height     : 40vh;
    min-height : 350px;
    padding    : 0;
    margin     : 0;
  }

  .mid-html-ubicacion .hero {
    height : 50vh;
  }

  .mid-html-beneficios .hero {
    height : unset;
  }

  .mid-portada .hero {
    height     : 89vh;
    min-height : 600px;

  }

}
@media (min-width : 768px) {

  .html-beneficios .claim .container {
    margin-top : 0rem;
  }

  .videoWrapper {

    padding-top : calc((9 / 16) * 100%);

  }

  /*-- md --*/
  .separator::after {

    width : 50%;


  }

  .aspectRatio-md-none:before {
    display     : none !important;
    padding-top : 0 !important;
  }

  .claim h1 {
    max-width : 690px;
    display   : block;
    margin    : 0 auto;
  }
}
@media (min-width : 992px) {
  .claim h1 {

  }

  .aspectRatio-lg-none:before {
    display     : none !important;
    padding-top : 0 !important;
  }

  .navbar {
    background-color : transparent;

  }

  :not.mid-html-ubicacion

) .navbar-nav a {
  color : var(--color-negro);
}
}
@media (min-width : 1200px) {
  .videoWrapper {

    padding-top : calc((6 / 16) * 100%);

  }

  .aspectRatio-xl-none:before {
    display     : none !important;
    padding-top : 0 !important;
  }
}
@media (min-width : 1400px) {
  .videoWrapper {

    padding-top : calc((4 / 16) * 100%);

  }

  .aspectRatio-xxl-none:before {
    display     : none !important;
    padding-top : 0 !important;
  }
}

.cont-whatsapp {
  bottom : 2em;
  right  : 2em;
}
.btnWhatsapp {
  background-color : #41C451;
  border-radius    : 227px;
  box-shadow       : 0 0 3px white;
  text-decoration  : none;
  transition       : .5s;
  font-size        : 27px;
  color            : #FFF !important;
  text-align       : center;
  display          : block;
  height           : 50px;
  width            : 50px;
  line-height      : 47px;
}
.btn-light:hover,
.btn-light:focus,
.btn-light:visited,
.btn-light:active,
.btn-light.active {
  transition       : .5s;
  background-color : var(--color-azul-tempo) !important;
  color            : var(--color-blanco) !important;
}
.btn {
  transition : .5s;
}
.btn:hover {
  border-color : var(--bs-btn-hover-color);
  transition   : .5s;
}

/* 10/06/2024 Piden agregar el formulario en horizontal, al lado del logo de tempo, al entrar. */

.mid-portada .ContFormContacto-back {
  background-image : none !important;
  background-color : rgba(255, 255, 255, 0.2);
  height           : auto !important;
  padding          : 0 !important;
}
.mid-portada .ContFormContacto-back .offset-1.offset-md-6.offset-xl-7.col-10.col-md-6 {

  width   : 100%;
  padding : 1em !important;
  margin  : 0 !important;
}
.mid-portada #ContFormContacto {
  height : auto !important;
}

.mid-portada .ContFormContacto-back > .row.my-xl-5,
.mid-portada .row.mb-3.mt-5,
.mid-portada .row.mb-3.mt-5 .col-12.bg-azul-tempo.mt-5 {
  margin : 0 !important;
}