@charset "utf-8";
:root {
  --color-gris-fondo    : #F5F5F5;
  --color-celeste       : #00AAD3;
  --color-azul          : #005177;
  --color-blanco        : #FFF;
  --color-amarillo      : #E8B100;
  --color-gris-oscuro   : #808080;
  --color-gris          : #808080;
  --color-naranja       : #E76B23;
  --color-rojo          : #BC4500;
  --bs-body-font-family : 'Montserrat', sans-serif;
  --color-gris-light    : #E9E9E9;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-weight : 600;
}
#blog .border-bottom {
  border-bottom : 1px solid var(--color-azul) !important;
}
#blog .border-top {
  border-top : 1px solid var(--color-azul) !important;
}
.color-gris {
  color : var(--color-gris);
}
.bg-gris {
  background-color : var(--color-gris);
}
.border-gris {
  border-color : var(--color-gris);
}
.color-rojo {
  color : var(--color-rojo);
}
.bg-rojo {
  background-color : var(--color-rojo);
}
.border-rojo {
  border-color : var(--color-rojo);
}
.color-gris-light {
  color : var(--color-gris-light);
}
.bg-gris-light {
  background-color : var(--color-gris-light);
}
.border-gris-light {
  border-color : var(--color-gris-light);
}
.color-gris-fondo {
  color : var(--color-gris-fondo);
}
.bg-gris-fondo {
  background-color : var(--color-gris-fondo);
}
.border-gris-fondo {
  border-color : var(--color-gris-fondo);
}
.color-gris-oscuro {
  color : var(--color-gris-oscuro);
}
.bg-gris-oscuro {
  background-color : var(--color-gris-oscuro);
}
.border-gris-oscuro {
  border-color : var(--color-gris-oscuro);
}
.color-naranja {
  color : var(--color-naranja);
}
.bg-naranja {
  background-color : var(--color-naranja);
}
.border-naranja {
  border-color : var(--color-naranja) !important;
}
.color-amarillo {
  color : var(--color-amarillo);
}
.bg-amarillo {
  background-color : var(--color-amarillo);
}
.border-amarillo {
  border-color : var(--color-amarillo);
}
.color-blanco {
  color : var(--color-blanco);
}
.bg-blanco {
  background-color : var(--color-blanco);
}
.border-blanco {
  border-color : var(--color-blanco);
}
.color-azul {
  color : var(--color-azul);
}
.bg-azul {
  background-color : var(--color-azul);
}
.border-azul {
  border-color : var(--color-azul);
}
.color-celeste {
  color : var(--color-celeste);
}
.bg-celeste {
  background-color : var(--color-celeste);
}
.border-celeste {
  border-color : var(--color-celeste);
}
body, html {
  background-color : var(--color-gris-fondo);
  color            : var(--color-azul);
}
textarea {
  resize      : none;
  form-sizing : content;
  min-height  : 1em;
}
/*
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;
  /* 16:9 */
  padding-bottom : 56.25%;
  /* 4:3 */
  /*padding-bottom : 75%; */
  padding-top    : 0;
  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;
}
: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"] {
  background-color : #FFE8E8;
}

.absolute-centered {
  top       : 50%;
  position  : absolute;
  transform : translateY(-50%);
  left      : 0
}
.vertical-centered-withtop {
  transform : translateY(-50%);
  top       : 50%;
}
.btn-clickeable-href {
  cursor : pointer;
}
.btn-clickeable-href:hover .cont-icono-categoria {

}
.cont-icono-categoria {

}

.box-home-seguro .col-5 {
  background-repeat   : no-repeat;
  background-position : left center;
  background-size     : contain;
}
.box-home-seguro {
  background-color : var(--color-blanco);
  padding          : 16px 15px;
  border-radius    : 3em;
  box-shadow       : 0 4px 5px #CCC;

  font-size        : 12px;
}
.negative-margin-home-boxes {
  margin-top : -51px;
  position   : relative;
  z-index    : 2;
}
.persona-img {
  margin-top : -53px;
  /* margin-bottom: 14px; */
}
#resenias > .row > .col-12.col-md-4 {
  margin-bottom : 78px !important;
}

.btnCta1.btn {
  background-color : var(--color-celeste);
  color            : var(--color-blanco);
  text-align       : center;
  border-radius    : 2em;
  padding          : .3em 1.2em;
  box-shadow       : 0px 4px 6px 0px rgba(151, 148, 148, 0.20);
  transition       : .5s;
  border           : 2px solid var(--color-celeste);
}
.btnCta1.btn:hover {
  box-shadow       : 0px 4px 6px 0px rgba(151, 148, 148, 0.20);
  background-color : var(--color-azul);
  color            : var(--color-blanco);
  transition       : .5s;
  border           : 2px solid var(--color-azul);
}
.btnCta2.btn {
  background-color : var(--color-azul);
  color            : var(--color-blanco);
  text-align       : center;
  border-radius    : 2em;
  padding          : .3em 1.2em;
  box-shadow       : 0px 4px 6px 0px rgba(151, 148, 148, 0.20);
  transition       : .5s;
  border           : 2px solid var(--color-azul);
}
.btnCta2.btn:hover {
  box-shadow       : 0px 4px 6px 0px rgba(151, 148, 148, 0.20);
  background-color : var(--color-blanco);
  color            : var(--color-azul);
  transition       : .5s;
  border           : 2px solid var(--color-blanco);
}
.btnCta3.btn {
  background-color : var(--color-azul);
  color            : var(--color-blanco);
  text-align       : center;
  border-radius    : 2em;
  padding          : .3em 1.2em;
  box-shadow       : 0px 4px 6px 0px rgba(151, 148, 148, 0.20);
  transition       : .5s;
  border           : 2px solid var(--color-azul);
}
.btnCta3.btn:hover {
  box-shadow       : 0px 4px 6px 0px rgba(151, 148, 148, 0.20);
  background-color : var(--color-celeste);
  color            : var(--color-blanco);
  transition       : .5s;
  border           : 2px solid var(--color-celeste);
}


.btnCta4.btn {
  background-color : var(--color-blanco);
  color            : var(--color-azul);
  text-align       : center;
  border-radius    : 2em;
  padding          : .3em 1.2em;
  box-shadow       : 0px 4px 6px 0px rgba(151, 148, 148, 0.20);
  transition       : .5s;
  border           : 2px solid var(--color-azul);
}
.btnCta4.btn:hover {
  box-shadow       : 0px 4px 6px 0px rgba(151, 148, 148, 0.20);
  background-color : var(--color-blanco);
  color            : var(--color-celeste);
  transition       : .5s;
  border           : 2px solid var(--color-celeste);
}


.btnCta5.btn {
  background-color : var(--color-celeste);
  color            : var(--color-blanco);
  text-align       : center;
  border-radius    : 2em;
  padding          : .3em 1.2em;
  box-shadow       : 0px 4px 6px 0px rgba(151, 148, 148, 0.20);
  transition       : .5s;
  border           : 2px solid var(--color-celeste);
}
.btnCta5.btn:hover {
  box-shadow       : 0px 4px 6px 0px rgba(151, 148, 148, 0.20);
  background-color : var(--color-blanco);
  color            : var(--color-celeste);
  transition       : .5s;
  border           : 2px solid var(--color-blanco);
}
.btnCta6.btn {
  background-color : var(--color-blanco);
  color            : var(--color-azul);
  text-align       : center;
  border-radius    : 2em;
  padding          : .3em 1.2em;
  box-shadow       : 0px 4px 6px 0px rgba(151, 148, 148, 0.20);
  transition       : .5s;
  border           : 2px solid var(--color-azul);
}
.btnCta6.btn:hover {
  box-shadow       : 0px 4px 6px 0px rgba(151, 148, 148, 0.20);
  background-color : var(--color-blanco);
  color            : var(--color-amarillo);
  transition       : .5s;
  border           : 2px solid var(--color-amarillo);
}
.btnGris.btn {
  background-color : var(--color-gris);
  color            : var(--color-blanco);
  text-align       : center;
  border-radius    : 2em;
  font-size        : 1.1em;
  padding          : .3em 1.2em;
  box-shadow       : 0px 4px 6px 0px rgba(151, 148, 148, 0.20);
  transition       : .5s;
  border           : 2px solid var(--color-gris);
}
.btnGris.btn:hover {
  box-shadow       : 0px 4px 6px 0px rgba(151, 148, 148, 0.20);
  background-color : var(--color-blanco);
  color            : var(--color-gris);
  transition       : .5s;
  border           : 2px solid var(--color-blanco);
}
.icon-centered {
  bottom : -2em !important;
}
.el-mas-elegido {
  position         : absolute;
  top              : -11px;
  left             : 50%;
  transform        : translateX(-50%);
  background-color : var(--color-gris-light);
  border           : 1px solid var(--color-naranja);
  border-radius    : 14px;
  padding          : 0 1em;
  font-size        : .8rem;
}
ul.list-with-checks > li {
  list-style-type : none;
}

.navbar .container {

}
.navbar .container a {
  color : var(--color-blanco) !important;
}
#navbarSupportedContent,
.dropdown-menu {
  text-align       : center;
  background-color : var(--color-azul);
  border           : none;
}
.navbar-toggler {
  border       : none;
  margin-right : 53px
}
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline    : none;
  box-shadow : none;

}
.btnShoppingCartHeader {
  top       : 5px;
  font-size : 1.6em;
  position:relative;
}
.float-num-cart {
  font-size: 12px;
  position: absolute;
  top: -9px;
  right: -10px;
  background-color: var(--color-celeste);
  border-radius: 200px;
  text-align: center;
  color: var(--color-blanco);
  width: 1.2rem;
  height: 1.2rem;
  font-style: inherit;
  box-shadow: 0 0 8px #fff;
}
h3 {
  font-size : 1.25em !important;
}
h2 {
  font-size : 1.5em !important;
}
h1 {
  font-size : 1.75em !important;
}
.verticalCentered {
  top       : 50%;
  transform : translateY(-50%);
  position  : relative;
}
.form-control:is(input,select,textarea) {
  border        : 1px solid var(--color-azul) !important;
  border-radius : 5px !important;
}
.form-group label {
  font-weight : bold;
}
.btn-danger {
  border-radius : 2em;
  padding       : .3em 1.2em;
}
.open-pregunta {
  margin-bottom : 1em;
  cursor        : pointer;
}
.w-1 {
  width : 1px;
}
.ajs-button.btn.btn-success {
  background-color : var(--color-azul);
}
/*----RESPONSIVE----*/

@media (min-width : 576px) {
  .hero {
    font-size : 1.1em !important;
  }

  .aspectRatio-sm-none:before {
    display     : none !important;
    padding-top : 0 !important;
  }
}
@media (min-width : 768px) {
  .hero {
    font-size : 1.1em !important;
  }

  #navbarSupportedContent, .dropdown-menu {

    background-color : var(--color-gris-fondo);
    color            : var(--color-azul);
    border           : none;
    text-align       : left !important;
  }

  #navbarSupportedContent a:not(.btn) {
    color : var(--color-azul) !important;
  }

  .hero .aspectRatio43:before {
    padding-top : calc((4 / 16) * 100%);
  }

  .mid-portada .hero .aspectRatio43:before {
    padding-top : calc((6 / 16) * 100%) !important;
  }


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

  .negative-margin-home-boxes {
    margin-top : -93px;
    position   : relative;
    z-index    : 2;
  }
}
@media (min-width : 992px) {
  .hero {
    font-size : 1.1em !important;
  }

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

}
@media (min-width : 1200px) {
  .hero {
    font-size : 1.1em !important;
  }

  .col-xl-25 {
    flex  : 0 0 auto;
    width : 20%;
  }

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

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


.whatsapp {
  position         : fixed;
  width            : 60px;
  height           : 60px;
  bottom           : 40px;
  right            : 40px;
  background-color : #25D366;
  color            : #FFF;
  border-radius    : 50px;
  text-align       : center;
  font-size        : 30px;
  z-index          : 100;
}

.whatsapp-icon {
  margin-top : 13px;
}