@charset "UTF-8";
/*Estilos para la Fila -> tiene creada una fila específica con la clase GridBanner y el tipo GridBanner para el formatter box*/
.GridBanner div:has(> .Banner[data-tipo-formatter=Box]) {
  --gap: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

/*----------------*/
.Banner > div {
  position: relative;
}
.Banner .imagen img {
  width: 100%;
  height: auto;
}
.Banner[data-tipo-formatter=general] .info {
  position: absolute;
  bottom: 0;
  left: 0;
  padding-right: 20px;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  row-gap: 3px;
  width: 100%;
}
@media (max-width: 899px) {
  .Banner[data-tipo-formatter=general] .info {
    padding-right: 0;
  }
}
.Banner[data-tipo-formatter=general] .titulo {
  padding: 4px 16px;
  color: white;
  width: fit-content;
  position: relative;
  z-index: 0;
  font-size: 30px;
  font-weight: 200;
  background-color: rgba(15, 57, 102, 0.8);
}
@media (max-width: 899px) {
  .Banner[data-tipo-formatter=general] .titulo {
    text-align: right;
    width: 100%;
    font-size: 24px;
    padding: 10px 30px 18px 30px;
  }
}
@media (max-width: 600px) {
  .Banner[data-tipo-formatter=general] .titulo {
    font-size: 22px;
    padding: 6px 20px 10px 20px;
  }
}
.Banner[data-tipo-formatter=general] .descripcion {
  padding: 10px 16px 10px 24px;
  position: relative;
  z-index: 0;
  font-size: 15px;
  font-weight: 200;
  line-height: 1.42857143;
  color: #333;
  background-color: rgba(255, 255, 255, 0.9);
}
.Banner[data-tipo-formatter=general] .descripcion p strong {
  font-weight: bold;
}
.Banner[data-tipo-formatter=general] .descripcion a {
  text-decoration: none;
  color: #0c3c6c;
  font-weight: bold;
}
@media (max-width: 899px) {
  .Banner[data-tipo-formatter=general] .descripcion {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    font-size: 0;
  }
}
.Banner[data-tipo-formatter=Box] {
  position: relative;
  width: 100%;
  max-width: 33%;
}
@media (max-width: 899px) {
  .Banner[data-tipo-formatter=Box] {
    max-width: 50%;
  }
}
@media (max-width: 600px) {
  .Banner[data-tipo-formatter=Box] {
    max-width: unset;
  }
}
.Banner[data-tipo-formatter=Box]:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(-45deg, rgba(15, 57, 102, 0.8), #FFFFFF, rgba(15, 57, 102, 0.8)) repeat scroll 0 0 #000000;
  opacity: 0.3;
  top: 0;
  left: 0;
}
.Banner[data-tipo-formatter=Box]:has(a):hover:after {
  background: linear-gradient(-45deg, rgba(15, 57, 102, 0.8), rgba(15, 57, 102, 0.8), rgba(15, 57, 102, 0.8)) repeat scroll 0 0 #000000;
  opacity: 0.3;
  height: 100%;
}
.Banner[data-tipo-formatter=Box] .titulo {
  background-color: rgba(15, 57, 102, 0.95);
  bottom: 20px;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 200;
  padding: 5px 10px;
  position: absolute;
  width: 90%;
}
.Banner[data-tipo-formatter=Box] .imagen {
  height: 160px;
  background-image: var(--bgImageBannerBox);
  background-repeat: no-repeat;
  background-size: cover;
}
.Banner[data-tipo-formatter=Box] .imagen img {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  font-size: 0;
}

/*# sourceMappingURL=Banner.css.map */