:root {
  --font-family: 'Graphik';
  --fsz-1: 16px;
  --fsz-2: 14px;
  --fsz-3: 18px;
  --fsz-4: 11px;
  --fsz-5: 46px;
  --fsz-6: 40px;
  --fsz-7: 24px;
  --fsz-8: 60px;
  --fsz-9: 30px;

  --h-header-1: 70px;
  --h-header-2: 70px;
  --h-box-1: 90px;

  --w-logo-1: 150px;
  --w-logo-2: 209px;

  --color-1: #0f1941;
  --color-2: #ffb511;
  --color-3: #2175d9;
  --color-4: #e7e7ec;
  --color-5: #e74536;
  --color-6: #f7f5f0;
  --color-7: #00D6FF;
  --color-8: #6F758D;
  --color-9: #257156;
  --color-10: #9FA3B3;
  --white: #ffffff;
  --inactive: #808080;
}

@font-face {
  font-family: 'Graphik';
  src: url("/assets/assets/fonts/graphik/graphik-regular-web.woff"),
    url("/assets/assets/fonts/graphik/graphik-regular-web.woff/graphik-regular-web.woff.woff"),
    url("/assets/assets/fonts/graphik/graphik-regular-web.woff/graphik-regular-web.woff2");
}

body {
  background-color: var(--color-1);
  font-family: var(--font-family);
  font-size: var(--fsz-3);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
}

.header-sticky {
  padding-top: var(--h-header-1);
}

.menu {
  display: flex;
  align-items: center;
  margin-left: 28px;
}

.close {
  color: var(--white);
  width: 30px;
  margin-top: 12px;
  margin-right: 15px;
}

.close svg {
  fill: var(--white);
  width: 30px;
}

.main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.main__home {
  padding-top: 25px;
  padding-bottom: 25px;
}

.main__image {
  padding-top: 0px;
  padding-bottom: 0px;
  width: 100%;
}

.main__calculator {
  background-color: var(--white);
  flex-grow: 1;
  width: 100%;
  padding-top: 25px;
  padding-bottom: 50px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

[class*="title--"] {
  margin: 0;
  line-height: 1;
  color: var(--color-1);
}
.altura_tabla_home {
  height: 200px;
}
.altura_tabla_header {
  height: 100px;
}
.title--0 {
  font-size: var(--fsz-5);
}

.title--0-calc {
  font-size: var(--fsz-9);
}

.title--1 {
  font-size: var(--fsz-7);
}

.title--2 {
  margin-top: 35px;
  margin-bottom: 35px;
}

.title--2-h2 {
  margin-top: 35px;
  margin-bottom: 35px;
  font-size: var(--fsz-9);
}
.title--3 {
  margin-bottom: 40px;
  font-size: 1.25rem;
  position: relative;
  color: var(--color-9);
}

.title--3::before {
  content: "";
  background-image: url("../assets/img/step_done.svg");
  background-size: cover;
  width: 45px;
  height: 45px;
  position: absolute;
  top: -55px;
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
}

.main__calculator label {
  font-size: var(--fsz-3);
  display: block;
  margin-bottom: 5px;
}

.highlighted {
  color: var(--color-2);
}

.highlighted__cyan {
  color: var(--color-7);
}

.highlighted__blue {
  color: var(--color-3);
}

.highlighted__normal {
  color: var(--white);
}

.main-footer {
  padding-bottom: 25px;
}

.main-footer__link {
  display: flex;
  flex-direction: column;
  line-height: 3;
  position: relative;
  opacity: 0.5;
  font-size: 16px;
}

.main-footer__link::before {
  content: "";
  height: 1px;
  width: 100%;
  background-color: var(--white);
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  opacity: 0.1;
}

.main-footer__link:hover {
  opacity: 1;
}

.box {
  padding-top: 200px;
  padding-bottom: 200px;
  margin: auto;
  width: 80%;
  font-size: 1rem;
}

.box__gray {
  background-color: var(--color-4);
  height: var(--h-box-1);
  border-radius: 45px;
  display: flex;
}

.box__fill {
  width: calc(100% - 50px);
  height: 15px;
  background-color: var(--color-1);
  margin: 10px auto;
  border-radius: 8px;
  align-self: flex-end;
  margin-bottom: 25px;
  position: relative;
}

.box__fill::before {
  content: "";
  width: 100%;
  height: 20px;
  position: absolute;
  top: -30px;
  background-image: url("../assets/img/rango.png");
  background-repeat: repeat-x;
}

.box__indicator {
  background-color: var(--color-7);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 15px;
  height: 15px;
  transition: all 1.5s ease-out;
}

.box__indicator::before,
.box__indicator::after {
  transform: rotate(27deg);
  border-radius: 3px;
  content: "\A";
  border-style: solid;
  border-width: 6px 11px 7px 0px;
  border-color: transparent var(--color-7) transparent transparent;
  position: absolute;
  top: -16px;
  left: 0%;
}

.box__indicator::after {
  transform: rotate(90deg);
  border-color: transparent var(--color-7) transparent transparent;
  top: auto;
  bottom: -14px;
  left: 1px;
}

.box__top__indicator__min,
.box__top__indicator__max,
.box__bottom__indicator__min,
.box__bottom__indicator__max,
.box__indicator__user {
  position: absolute;
  bottom: -150px;
  transform: translateX(-3.5em);
  min-width: 7em;
  text-align: center;
  transition: all 1.5s ease-out;
  padding: 10px 0px;
}

.box__top__indicator__min::before,
.box__top__indicator__max::before,
.box__bottom__indicator__min::before,
.box__bottom__indicator__max::before,
.box__indicator__user::before {
  content: "";
  height: 60px;
  width: 1px;
  position: absolute;
  bottom: 100%;
  left: 0;
  background-color: var(--color-7);
  transform: translateX(3.5em);
}

.box__top__indicator__min {
  bottom: 110px!important;
  left: 30%;
}

.box__top__indicator__max {
  left: 80%;
  bottom: 230px;
}

.box__indicator__user {
  bottom: 180px;
}

.box__bottom__indicator__max {
  top: 173px;
  left: 70%;
}

.box__bottom__indicator__max::before,
.box__top__indicator__max::before {
  height: 150px;
}

.box__indicator__user::before,
.box__top__indicator__min::before,
.box__top__indicator__max::before {
  bottom: -60px;
}

.box__indicator__user::before {
  height: 130px;
  bottom: -130px;
}

.box__top__indicator__max::before {
  height: 180px;
  bottom: -180px;
}

.box__indicator__item {
  font-size: var(--fsz-3);
  font-weight: 500;
  letter-spacing: -0.8px;
  width: max-content;
}

.box__indicator__item:first-child {
  line-height: 1em;
  color: #808080;
  font-weight: 300;
  margin: auto;
  display: block;
}

.progressbar {
  position: relative;
  display: flex;
  justify-content: space-between;
  counter-reset: step;
  width: 250px;
  margin: 0 auto 45px;
}
.progress {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  width: 100%;
  background-color: #dcdcdc;
  z-index: -1;
}

.progress {
  background-color: var(--color-2);
  width: 0%;
  transition: 0.3s;
}

.progress-step {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("/assets/assets/img/step_inactive.svg");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
}

.progress-step:first-child {
  opacity: 1;
}

.progress-step::after {
  content: attr(data-title);
  position: absolute;
  top: 100%;
  margin-left: 0px;
  text-align: center;
  color: var(--color-8);
  width: 80px;
  font-family: "Graphik", "Tahoma", "Helvetica", "sans-serif";
  font-size: 1rem;
}

.progress-step-active {
  background-image: url("../assets/img/step_current.svg");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
}

.progress-step-active::after {
  content: attr(data-title);
  position: absolute;
  top: 100%;
  margin-left: 0px;
  text-align: center;
  color: var(--color-3);
  width: 80px;
  font-family: "Graphik", "Tahoma", "Helvetica", "sans-serif";
  font-size: 1rem;
}

.progress-step-done {
  background-image: url("../assets/img/step_done.svg");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
}

.progress-step-done::after {
  content: attr(data-title);
  position: absolute;
  top: 100%;
  margin-left: 0px;
  text-align: center;
  color: var(--color-9);
  width: 80px;
  font-family: "Graphik", "Tahoma", "Helvetica", "sans-serif";
  font-size: 1rem;
}

.form-step {
  display: none;
  transform-origin: top;
  animation: animate 0.5s;
}

.form-step-active {
  display: block;
}

.input-group {
  margin: 2rem 0;
}

@keyframes animate {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.form-step:last-child {
  background-color: var(--white);
  position: relative;
  padding-top: 100px;
}

/***** FIN MULTI STEP ****/

/***** MEDIA QUERIES ****/

@media screen and (min-width: 768px) {
  .header-sticky {
    padding-top: var(--h-header-2);
  }

  .main-footer {
    padding-top: 25px;
  }

  .main-footer__link {
    display: inline-block;
  }

  .main-footer__link::before {
    content: "";
    height: 20px;
    width: 1px;
    background-color: var(--white);
    position: absolute;
    top: 6px;
    left: -15px;
    opacity: 1;
  }

  .main-footer__link {
    margin-left: 25px;
    font-size: var(--fsz-4);
  }

  .main-footer__link:first-child {
    margin-left: 0;
  }

  .main-footer__link:first-child::before {
    display: none;
  }

  .altura_tabla_home {
    height: 200px;
  }

  .altura_tabla_header {
    height: 100px;
  }

  .title--0 {
    font-size: var(--fsz-8);
  }

  .title--0-calc {
    font-size: var(--fsz-6);
  }

  .title--1 {
    font-size: var(--fsz-9);
  }

  .progressbar {
    width: 500px;
  }

  .cargando_1 {
    font-size: var(--fsz-5);
  }

  .fa-spin {
    -webkit-animation: fa-spin 2s linear infinite;
    animation: fa-spin 2s linear infinite;
  }

  @-webkit-keyframes fa-spin {
    0% {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(1turn);
    }
  }

  @keyframes fa-spin {
    0% {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(1turn);
    }
  }

  .fa-spinner:before {
    content: "\f110";
  }

  .fa-2x {
    font-size: 2em;
  }

  .fa-1x {
    font-size: 1, 8em;
  }
}

@media (max-width:300px) {
  .progressbar {
    max-width: 100%;
  }
  .relevate-img {
    width: 100% !important;
  }
}

.texto-t-y-c {
  font-size: 16px;
}

/* Inicio estilos accordion */
.accordion-button {
  color: #fff;
  background-color: var(--color-1);
  border-bottom: 1px solid var(--color-10);
  padding: 1rem 0.25rem;
  font-size: 18px;
  line-height: 30px;
}

.accordion-item {
  background-color: var(--color-1);
  border: none;
}

.accordion-button:not(.collapsed) {
  color: var(--color-7);
  background-color: var(--color-1);
  box-shadow: none;
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform .2s ease-in-out;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300D6FF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(-180deg);
}

.accordion-button:focus {
  z-index: 3;
  border-color: var(--color-10);
  outline: 0;
  /* box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25); */
  box-shadow: none;
}

.accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

/* Fin estilos accordion */

.mat-step-text-label {
  text-overflow: clip !important;
  overflow: visible !important;
  font-size: 12px !important;
}

.mat-stepper-label-position-bottom .mat-horizontal-stepper-header {
  padding: calc((var(--mat-stepper-header-height) - 24px) / 2) 0px !important;
}

.mat-step-header {
  min-width: 33% !important;
}