/*?Fontface*/
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -o-font-smoothing: antialiased;
}
@font-face {
  font-family: "Bradford";
  src: url("../fonts/BradfordLL-Light.woff") format("woff"),
    url("../fonts/BradfordLL-Light.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "BradfordItalic";
  src: url("../fonts/BradfordLL-LightItalic.woff") format("woff"),
    url("../fonts/BradfordLL-LightItalic.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Matter";
  src: url("../fonts/Matter-Regular.woff") format("woff"),
    url("../fonts/Matter-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "MatterMedium";
  src: url("../fonts/Matter-Medium.woff") format("woff"),
    url("../fonts/Matter-Medium.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "MatterLight";
  src: url("../fonts/Matter-Light.woff") format("woff"),
    url("../fonts/Matter-Light.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Stein";
  src: url("../fonts/SteinskriftValle-Regular.woff") format("woff"),
    url("../fonts/SteinskriftValle-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
.red {
  color: var(--red);
}
.blue {
  color: var(--blue);
}
.green {
  color: var(--green);
}
.green-s {
  color: var(--geen-secondary);
}

/*Titulos*/
.titulo-principal {
  font-size: var(--4fs);
  line-height: var(--4lh);
  text-align: center;
  color: var(--blue);
  font-family: "Stein", serif;
  font-weight: 100;
}

h2 {
  color: var(--blue);
  font-size: var(--4fs);
  line-height: var(--4lh);
  font-family: "Stein";
  font-weight: 100;
}

h3 {
  font-size: var(--1fs);
  line-height: var(--1lh);
  color: var(--dark);
  font-family: "stein";
  font-weight: 100;
}

a {
  cursor: pointer;
  text-decoration: none;
  font-weight: 100;
  font-family: "MatterLight", sans-serif;
}

p,
.labels-container span,
label,
input,
select {
  font-size: var(--1fs);
  color: var(--dark);
  line-height: var(--1lh);
  font-family: "MatterLight", sans-serif;
  font-weight: lighter;
  font-weight: 100;
}

.descripcion {
  font-size: 1.2rem;
  line-height: 1.6rem;
}

.alerta-yellow p {
  font-family: "Matter";
}

input {
  font-family: "Matter", sans-serif;
}

.data-user-row p {
  font-size: var(--2fs);
  line-height: var(--2lh);
  color: var(--dark);
  font-family: "Stein", serif;
  text-transform: uppercase;
}

.error-msg p {
  text-align: center;
  color: var(--red);
  font-size: var(--1fs);
  line-height: var(--1lh);
  margin-top: 8px;
}

.btn {
  font-family: "MatterLight", sans-serif;
  font-weight: 100;
  font-size: var(--4fs);
}

.back a {
  color: var(--blue) !important;
  text-decoration: none;
  font-family: "Matter", sans-serif;
  font-size: var(--1fs);
  line-height: var(--1fs);
  transition: all ease-in 0.3s;
}

/*Encabezado*/
.encabezado-wrapper p {
  color: var(--blue);
  text-transform: uppercase;
  font-family: "Stein", sans-serif;
  font-size: var(--2fs);
  line-height: var(--2lh);
  font-weight: 100;
}

/*Tablero Opciones de pago*/
.opciones-wrapper .flex h3,
.historial-wrapper h3 {
  font-size: var(--1fs);
  line-height: var(--1lh);
  color: var(--dark);
}
.opciones-wrapper .flex:first-child h3,
.historial-wrapper h3 {
  font-family: "Stein";
}
.opciones-wrapper .flex:last-child h3 {
  font-family: "MatterLight";
}
.opciones-wrapper h4,
.importe-pagar h4 {
  font-family: "Matter", sans-serif;
  font-weight: 100;
  font-size: var(--4fs);
  line-height: var(--4lh);
  position: relative;
}
.historial-btn {
  font-size: var(--2fs);
  line-height: var(--2fs);
  font-family: "Matter", sans-serif;
  color: var(--dark);
  cursor: pointer;
}
.ahorras {
  color: var(--green) !important;
}
.opciones-wrapper p {
  font-size: var(--1fs);
  line-height: var(--1lh);
  font-family: "MatterMedium"; /*Esta es medium*/
  font-weight: 100;
}

#proximo-pago h4 {
  color: var(--dark);
}
#adeudo h4 {
  color: var(--red);
}
#liquidar h4 {
  color: var(--green);
}

/*parcial pago*/
.parcial-link {
  color: var(--gray);
  font-size: var(--1fs);
  line-height: var(--1lh);
  text-decoration: underline;
  margin-top: 8px;
}

/*Aviso wrapper*/
.aviso-wrapper h2 {
  margin: 20px 0px;
}
.aviso-wrapper span {
  color: var(--blue);
  font-weight: bolder;
}

/*Respuesta*/
.aviso-respuesta h2 {
  font-size: var(--4fs);
  line-height: var(--4lh);
  font-family: "Stein";
}

.fallido h2 {
  color: var(--red) !important;
}
.exitoso h2 {
  color: var(--blue) !important;
}

/*Confirmacion*/
.confirmacion-wrapper h2 {
  font-size: var(--4fs);
  line-height: var(--4lh);
  color: var(--blue);
  font-family: "Stein";
  margin-bottom: 20px;
}
.confirmacion-wrapper h4 {
  font-size: var(--4fs);
  line-height: var(--4lh);
  color: var(--dark);
  font-family: "Matter";
  margin-bottom: 20px;
}

.confirmacion-wrapper h5 {
  font-size: var(--1fs);
  line-height: var(--1lh);
  font-family: "Stein";
  margin-bottom: 20px;
}
.f-titulo {
  color: var(--blue) !important;
  margin-top: 20px !important;
}
.l-titulo {
  color: var(--dark) !important;
}
.back a:hover {
  color: var(--vivid-blue) !important;
}
.confirmacion-btn {
  font-size: var(--4fs);
  font-family: "Matter", sans-serif;
}
.bold {
  font-family: "MatterMedium" !important;
}

/*Footer*/
.footer-section p {
  font-size: var(--1fs);
  line-height: var(--1lh);
  text-align: center;
}

/*Historial*/
.info-row p {
  font-family: "Matter" !important;
}

:root {
  --1fs: 1rem;
  --1lh: 137%;

  --2fs: 1.05rem;
  --2lh: 135%;

  --3fs: 1.12rem;
  --3lh: 133%;

  --4fs: 1.24rem;
  --4lh: 130%;
}

/*confirmacion*/
.consultar-lista {
  color: var(--blue);
  font-family: "MatterMedium" !important;
  color: var(--blue-high);
  font-weight: 500;
}

b {
  font-family: "MatterMedium" !important;
  font-weight: 500 !important;
}