@charset "utf-8";
:root {
  --white                                : #F7F7F7;
  --body-bg                              : #F7F7F7;
  --persona-header-bg                    : #302696;
  --persona-link-pill-border-color       : rgba(173, 169, 230, 0.75);
  --persona-link-pill-border-color-hover : rgba(173, 169, 230, 0.75);
  --persona-link-pill-color              : #ADA9E6;
  --persona-link-pill-color-hover        : #F7F7F7;
  --persona-header-color                 : #FFF;
  --link-color                           : #302696;
  --bs-body-font-size                    : 16px;
  --title-color                          : #302696;
  --color-bg-footer                      : #004F9F;
  --color-footer                         : #F7F7F7;
  --color-a-footer                       : #F7F7F7;
}

a {
  color : var(--link-color);
}

body {
  background-color : var(--body-bg);
  font-family      : "Montserrat", sans-serif;
}

.persona-header {
  background-color : var(--persona-header-bg);
  color            : var(--white);
}

.persona-link-pill {
  color        : var(--white);
  border-color : var(--white) !important;
  transition   : .5s;
}

.persona-link-pill:hover {
  background-color : var(--white);
  color            : var(--title-color);
  transition       : .5s;
}

textarea {
  resize      : none;
  form-sizing : content;
  min-height  : 1em;
}

/** ajustes solo para ios **/
@supports (-webkit-overflow-scrolling: touch) {
  /*
    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 
  */
  select, textarea, input {
    font-size : 16px !important;
  }

  /** reseteo apariencia de botones ios **/
  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;
}

.w-1 {width : 1px;}

.min-height-100-view-port {min-height : 100vh;}

.min-width-100-view-port {min-width : 100vw;}

@media (min-width : 576px) {
  /*--sm--*/
  .aspectRatio-sm-none:before {
    display     : none !important;
    padding-top : 0 !important;
  }
}

@media (min-width : 768px) {
  /*--md--*/
  .aspectRatio-md-none:before {
    display     : none !important;
    padding-top : 0 !important;
  }
}

@media (min-width : 992px) {
  /*--lg--*/
  .aspectRatio-lg-none:before {
    display     : none !important;
    padding-top : 0 !important;
  }
}

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

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

.montserrat-thin {
  font-family : "Montserrat", sans-serif;
  font-weight : 100;
  font-style  : normal;
}

.montserrat-extralight {
  font-family : "Montserrat", sans-serif;
  font-weight : 200;
  font-style  : normal;
}

.montserrat-light {
  font-family : "Montserrat", sans-serif;
  font-weight : 300;
  font-style  : normal;
}

.montserrat-regular {
  font-family : "Montserrat", sans-serif;
  font-weight : 400;
  font-style  : normal;
}

.montserrat-medium {
  font-family : "Montserrat", sans-serif;
  font-weight : 500;
  font-style  : normal;
}

.montserrat-semibold {
  font-family : "Montserrat", sans-serif;
  font-weight : 600;
  font-style  : normal;
}

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

.montserrat-extrabold {
  font-family : "Montserrat", sans-serif;
  font-weight : 800;
  font-style  : normal;
}

.montserrat-black {
  font-family : "Montserrat", sans-serif;
  font-weight : 900;
  font-style  : normal;
}

.montserrat-thin-italic {
  font-family : "Montserrat", sans-serif;
  font-weight : 100;
  font-style  : italic;
}

.montserrat-extralight-italic {
  font-family : "Montserrat", sans-serif;
  font-weight : 200;
  font-style  : italic;
}

.montserrat-light-italic {
  font-family : "Montserrat", sans-serif;
  font-weight : 300;
  font-style  : italic;
}

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

.montserrat-medium-italic {
  font-family : "Montserrat", sans-serif;
  font-weight : 500;
  font-style  : italic;
}

.montserrat-semibold-italic {
  font-family : "Montserrat", sans-serif;
  font-weight : 600;
  font-style  : italic;
}

.montserrat-bold-italic {
  font-family : "Montserrat", sans-serif;
  font-weight : 700;
  font-style  : italic;
}

.montserrat-extrabold-italic {
  font-family : "Montserrat", sans-serif;
  font-weight : 800;
  font-style  : italic;
}

.montserrat-black-italic {
  font-family : "Montserrat", sans-serif;
  font-weight : 900;
  font-style  : italic;
}

.btnDownloadVcard {
  --bs-btn-bg           : var(--title-color);
  --bs-btn-color        : #FFF;
  --bs-btn-border-color : var(--title-color);
}

.btnDownloadVcard:hover {
  --bs-btn-hover-color        : var(--title-color);
  --bs-btn-hover-bg           : #FFF;
  --bs-btn-hover-border-color : var(--title-color);
}

.btnShare {
  --bs-btn-bg           : #FFF;
  --bs-btn-color        : var(--title-color);
  --bs-btn-border-color : var(--title-color);
}

.btnShare:hover {
  --bs-btn-hover-color        : #FFF;
  --bs-btn-hover-bg           : var(--title-color);
  --bs-btn-hover-border-color : var(--title-color);
}

.title-color {
  color : var(--title-color);
}

footer {
  color            : var(--color-footer);
  background-color : var(--color-bg-footer);
}

footer a {
  color : var(--color-a-footer);
}

.logo-footer {
  max-height: calc(1em + 7px);
  top: -6px;
  position: relative;
}
.logo-partner{
  max-height:3em;
}