/* importando tipografias */
@font-face {
  font-family: "Gotham";
  src: url("../fonts/Gotham-Light.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "Gotham";
  src: url("../fonts/GothamBook.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Gotham";
  src: url("../fonts/GothamMedium.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Gotham";
  src: url("../fonts/Gotham-Bold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Gotham";
  src: url("../fonts/Gotham-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
}

:root {
  /* Tipography */
  --font-body: "Gotham", Arial, Helvetica, sans-serif;

  /* Colors */
  --color-red: #eb0029;
  --color-white: #ffffff;
  --color-orange: #ff6622;
  --color-yellow: #f7d046;
  --color-green: #6cc04a;
  --color-black: #323e48;
  --color-black02: #2b2b2b;
  --color-gray: #5b6670;
  --color-gray03: #7b868c;
  --color-gray04: #5b6670;
  --color-purple: #8f1657;

  --border-color-banner: #e7e9e9;
  --border-color-navcalc: #ebf0f2;
  --border-color-miles: #d9d9d9;
  --border-color-cards: #e7e9e9;
  --border-color-steps: #a2a9ad;
  --border-color-tab: #ebf0f2;
  --border-color-footer: #cfd2d3;

  --bg-input: #f6f6f6;
  --bg-input02: #0000003b;
  --bg-help: #7b868c;
  --bg-gray: #f0f4f5;
  --bg-gray02: #f1f1f1;
  --bg-gray03: #f4f7f8;
  --bg-shadow: #00000029;
  --bg-shadow-gray: #00000014;
  --bg-gradient-screen: linear-gradient(
    180deg,
    rgba(50, 62, 72, 0) 0%,
    rgba(50, 62, 72, 1) 100%
  );
  --bg-gradient-linear: linear-gradient(
    91deg,
    rgba(212, 2, 31, 1) 0%,
    rgba(254, 71, 73, 1) 100%
  );
}

body {
  font-family: var(--font-body);
  color: var(--color-blue);
  font-size: 0.938rem;
  font-weight: 400;
  overflow-x: hidden;
  margin: 0;
  color: #323e48;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
}

h2 {
  font-weight: 800;
  text-align: center;
  font-size: clamp(1.8rem, 2vw, 2.25rem);
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

p {
  margin: 0;
}

picture {
  display: block;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

.form label {
  margin-bottom: 5px;
}

.form {
  box-sizing: border-box;
}

button {
  outline: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
button:disabled {
  background: #cfd2d3;
  color: #a2a9ad;
  border: none;
  box-shadow: none;
}
input[type="submit"] {
  border: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

input[type="text"],
input[type="number"],
input[type="tel"],
input[type="mail"],
input[type="address"],
input[type="password"],
input[type="date"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  outline: 0;
  border: 0;
  box-sizing: border-box;
  background: none;
  font-family: var(--font-body);
  font-weight: 600;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input:focus {
  border: none;
  outline: 0;
}

/* Clases generales */
.container {
  width: 95%;
  margin: 0 auto;
  max-width: 1024px;
}

.highlight--red {
  color: var(--color-red);
}

.highlight--medium {
  font-weight: 600;
}

.highlight--bold {
  font-weight: 800;
}

.btn {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  padding: 0.938rem 1.875rem;
  width: -moz-fit-content !important;
  width: -webkit-fit-content !important;
  width: fit-content !important;
  box-sizing: border-box;
  font-weight: 600;
  letter-spacing: -0.15px;
  font-family: var(--font-body);
  font-size: 0.938rem;
  background: none;
}

.btn--red {
  background-color: var(--color-red);
  color: var(--color-white);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #e30028;
  transition: all 0.5s ease-in;
}

.btn--outline {
  color: var(--color-red);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--color-red);
  transition: all 0.3s ease-in;
}

.btn--outline-bk {
  background: none;
  color: var(--color-black);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--color-black);
  transition: all 0.3s ease-in;
  text-decoration: none;
}

.btn--outline-red {
  background: none;
  color: var(--color-red);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--color-red);
  transition: all 0.3s ease-in;
}

.link {
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.938rem;
  display: block;
  transition: all 0.3s ease-in;
}

.link--red {
  color: var(--color-red);
  transition: all 0.3s ease-in;
}
.link--black {
  color: var(--color-black);
  transition: all 0.3s ease-in;
}
.open {
  display: flex !important;
  z-index: 10;
}

.custom-check {
  width: 1.125rem;
  height: 1.125rem;
  max-width: 1.125rem;
  max-height: 1.125rem;
  isolation: isolate;
}

.custom-check .checkmark {
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  inset: 0;
  display: block;
  position: relative;
  border: 1px solid #5b6670;
  border-radius: 2px;
  overflow: hidden;
}

.custom-check .checkmark::after {
  content: "";
  width: 100%;
  height: 100%;
  inset: 0;
  position: absolute;
  display: none;
  transition: all 0.2s ease-in;
}

.checkmark::before {
  content: url(../img/icons/icon-done.svg);
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  transform: rotate(40deg);
  opacity: 0;
  transition: all 0.2s ease-in;
}

.custom-check input[type="checkbox"] {
  width: 100%;
  height: 100%;
  inset: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  z-index: 2;
  cursor: pointer;
}

.custom-check input:checked ~ .checkmark::before {
  display: block;
  z-index: 1;
  opacity: 1;
  transition: all 0.3s ease-in;
}

.custom-check input:checked ~ .checkmark::after {
  background-color: var(--color-red);
  display: block;
  transition: all 0.2s ease-in;
}

.custom-check input:checked ~ .checkmark {
  border: 1px solid var(--color-red);
}
/* Cards */
.cards-list .card-list__element {
  width: 100%;
  margin: 0 auto 1.25rem;
  max-width: 317px;
  padding: 1.563rem 1.875rem;
  box-shadow: 0px 2px 10px var(--bg-shadow-gray);
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
}

.card {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0;
  height: 100%;
}

.card-text .card-title {
  font-weight: 600;
  font-size: 0.938rem;
  margin: 0 0 1.25rem;
  display: block;
}

.card-text .text-content {
  text-overflow: ellipsis;
  -moz-line-clamp: 3;
  margin: 0 0 0.938rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: clamp(0.938rem * 3 + 0.3rem);
}

.card-image {
  margin: 0 0 1.25rem;
  overflow: hidden;
  border-radius: 8px;
}

.card-text .date {
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0 0 0.938rem;
}

.card-text .link,
.add .link {
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  margin: 0 0 0 auto;
  padding: 0.938rem;
  align-self: flex-end;
  border-radius: 8px;
}
/* Frame */
.menu-frame {
  width: 100%;
  max-height: 100vh;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
.frame-content {
  width: 100%;
  height: 100vh;
}
/* Menu lateral */
.menu {
  position: sticky;
  top: 0;
  z-index: 10;
}
.menu-content .side-menu {
  box-shadow: 3px 3px 6px var(--bg-shadow);
}
.menu-content.active::after {
  content: "";
  background: rgba(50, 62, 72, 0.7);
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}
.menu .btn-menu {
  display: flex;
  align-items: center;
  padding: 0.625rem 1.25rem;
  gap: 5px;
  gap: 5px;
  cursor: pointer;
  box-sizing: border-box;
}
.btn-menu .profile-picture {
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.btn-menu .profile-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #2b2b2b;
}
.side-menu {
  width: 290px;
  position: fixed;
  top: 0;
  left: -100%;
  height: 100vh;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease, width 0.5s ease, left 0.3s ease;
}
.wrap {
  width: 130px;
}
/* .side-menu.wrap .side-content {
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
} */
.side-menu.wrap .side-content .menu-profile .profile-picture {
  width: 2.625rem;
  margin: 0 auto 30px;
}
.side-menu.wrap .side-content .menu-profile {
  position: relative;
}
.side-menu.wrap .side-content .menu-profile .full {
  width: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
}
.side-menu.wrap .side-content .menu-profile .crop {
  opacity: 1;
  width: 100%;
  position: relative;
}
.side-menu.wrap .side-content .menu-profile .link {
  gap: 0;
}
.side-menu.wrap .side-content .menu-profile .link span {
  width: 0;
  overflow: hidden;
}
.side-menu.wrap .side-content .menu-list .menu-list__option .option-menu {
  padding: 0 1.875rem;
}
.side-menu.wrap .side-content .menu-list .menu-list__option .option-menu span {
  width: 0;
  overflow: hidden;
}
.side-menu.wrap
  .side-content
  .menu-list
  .menu-list__option
  .option-menu
  .option-icon {
  margin: 0;
}
.side-content {
  width: 100%;
  height: 100vh;
  background: var(--color-white);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
}

.side-content > div {
  box-sizing: border-box;
}
.menu .close-icon {
  position: absolute;
  top: 0.875rem;
  right: 1.24rem;
  padding: 0;
  display: none;
}
.menu.show-close .close-icon {
  display: block;
}
.menu-profile {
  padding: 2.188rem 0 1.563rem;
}
.menu-profile .profile-picture {
  width: 68px;
  margin: 0 auto 17px;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.5s ease;
}
.menu-profile .profile-name {
  text-align: center;
  display: block;
  margin: 0;
  font-weight: 600;
  font-size: 1.125rem;
  width: 100%;
  white-space: nowrap;
}
.menu-profile .full {
  width: 100%;
  opacity: 1;
  transition: opacity 0.8s ease;
}
.menu-profile .crop {
  width: 100%;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  transition: all 0.5s ease;
}
.menu-profile .change-image {
  position: absolute;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.menu-profile .profile-picture:hover .change-image {
  opacity: 1;
}
.menu-profile .link .link-icon {
  width: 1.438rem;
}
.change-image .change-content {
  position: relative;
  cursor: pointer;
  background-color: rgba(50, 62, 72, 0.5);
  border-radius: 50px;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.change-image .input-image {
  opacity: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
}
.change-image img {
  width: 1.25rem;
  margin: 0 auto;
}
.menu-profile .link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0.625rem auto 0;
  width: auto;
  padding: 0.688rem 0.938rem;
}
.name-container {
  display: flex;
}
.divider--dash {
  border: none;
  border-top: 1px dashed #cfd2d3;
  background: none;
  width: 90%;
  max-width: 215px;
  margin: 0 auto 1.563rem;
  display: block;
}
.menu-list {
  overflow: auto;
  padding: 0 0.625rem;
}
.menu-list::-webkit-scrollbar {
  width: 3px;
  padding: 0;
  position: absolute;
}
.menu-list::-webkit-scrollbar-thumb {
  background-color: var(--color-gray);
  border-radius: 20px;
}
.menu-list .menu-list__option {
  width: 100%;
  border-radius: 1.25rem;
  overflow: hidden;
  margin: 0 0 0.313rem;
}
.menu-list .menu-list__option:last-child {
  margin: 50px 0 1.25rem;
}
.menu-list__option a,
.submenu-list__option a {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  color: #5b6670;
  font-size: 0.938rem;
  cursor: pointer;
  white-space: nowrap;
}
.menu-list__option a {
  width: auto;
  padding: 0 1.125rem;
}
.option-menu {
  position: relative;
  transition: padding 0.1s ease;
}
.option-menu span {
  display: block;
  width: 100%;
  transition: all ease;
}
.option-menu::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}
.menu-list__option a .option-icon {
  min-width: 3.125rem;
  width: 3.125rem;
  height: 3.125rem;
  margin-left: 0.875rem;
}
.menu-list .active-option {
  color: var(--color-red);
  fill: var(--color-red);
  font-weight: 600;
  background: var(--bg-gray03);
}
.menu-list .active-option .option-arrow {
  rotate: 90deg;
}
.submenu-list {
  position: absolute;
  top: 0;
  left: -100%;
  width: 280px;
  padding: 2.188rem 0.625rem 0;
  opacity: 0;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--color-white);
  height: 100vh;
  box-shadow: 3px 3px 6px var(--bg-shadow);
  transition: left 0.6s ease;
}
.submenu-list.show {
  width: 280px;
  opacity: 1;
  left: 130px;
}
.option-arrow {
  width: 14px;
  margin: 0 2.188rem 0 auto;
  transition: rotate 0.1s ease-in;
}
.submenu-list__option {
  width: 100%;
  transition: all 0.3s ease-in;
}
.submenu-list__option a {
  min-height: 50px;
  border-radius: 50px;
  transition: all 0.3s ease-in;
  font-size: 0.938rem;
  padding: 0 1.125rem;
}
.submenu-list__option a span {
  display: block;
  margin-left: 1.5rem;
  margin-left: 0;
  transition: all 0.3s ease-in;
}
.submenu-list__option .active-option {
  background: var(--bg-gray03);
}
.submenu-list__option .active-option span {
  color: var(--color-red);
  font-weight: 800;
}
.open-sub {
  height: auto;
  transition: all 0.2s ease-in;
}
.rotate-arrow .option-arrow {
  rotate: 90deg;
  transition: rotate 0.1s ease-in;
}
/* Acordion perfil  */
.accordion {
  margin: 3rem auto;
  max-width: 500px;
}
.accordion-option {
  margin: 0 auto 0.6rem;
}
.option-btn {
  width: 100%;
  display: flex;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: #e6e6e6;
  border-radius: 6px;
  border: none;
  outline: 0;
  padding: 1.25rem 1rem;
  font-family: "Gotham";
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0 auto;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}
.option-btn p {
  color: #544f62;
  margin: 0;
  width: 100%;
  text-align: center;
}
.option-btn .arrow {
  position: relative;
  display: flex;
  align-items: center;
  transition: all 0.2s ease-in;
  position: relative;
  width: 15px;
  min-width: 15px;
  height: 15px;
  margin-right: -15px;
}
.option-btn .arrow::before,
.option-btn .arrow::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: #ea2d29;
}
.option-btn .arrow::after {
  width: 3px;
  height: 15px;
  left: calc(50% - 1.5px);
  transition: all 0.3s ease;
}
.option-btn .arrow::before {
  width: 15px;
  height: 3px;
  top: calc(50% - 1.5px);
}
.option-content {
  font-weight: 400;
  font-family: GothamBook;
  font-family: "Gotham";
  padding: 0 1rem;
  display: grid;
  grid-template-rows: 0fr;
  transition: all 500ms ease;
}
.option-content .option-wrapper {
  overflow: hidden;
}
.open-option .option-btn .arrow::after {
  rotate: -90deg;
}
.open-option .option-content {
  padding: 0.6rem 1rem;
  grid-template-rows: 1fr;
}
.input-animation {
  width: 100%;
  max-height: 50px;
  height: 50px;
  display: flex;
  padding: 8px 19px;
  position: relative;
  background-color: var(--bg-input);
  border-bottom: 1px solid #909090;
  box-sizing: border-box;
}
.input-animation label {
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 0;
  padding: 8px 19px;
  align-items: center;
  transition: all 0.3s ease;
  margin: 0;
}
.input-animation input {
  align-self: flex-end;
  height: 100%;
}

.content-name {
  font-size: clamp(0.75rem, 1vw, 0.938rem);
  font-weight: 600;
  transition: all 0.3s ease;
}
.input-animation input:focus {
  outline: none;
}
.input-animation input:focus,
.input-animation input:valid {
  height: 80%;
}

.input-animation input:focus + .label-name,
.input-animation input:valid + .label-name {
  align-items: flex-start;
}

.input-animation input:focus + .label-name span,
.input-animation input:valid + .label-name span {
  margin: -0.313rem 0 0.625rem;
  font-size: 0.75rem;
  font-weight: 300;
}
.input {
  position: relative;
}
.input.select {
  cursor: pointer;
}
.input.select input {
  cursor: pointer;
  caret-color: transparent;
}
.input.select label {
  cursor: pointer;
}
.input .list {
  position: absolute;
  width: 100%;
  display: none;
  top: 103%;
  left: 0;
  background: var(--bg-input);
  z-index: 100;
  box-sizing: border-box;
  border-radius: 0.375rem;
}
.list.open {
  flex-wrap: wrap;
  position: absolute;
}
.list.open .list-option {
  width: 100%;
  padding: 0.625rem 1.188rem;
  font-size: 0.875rem;
}
.list.open .list-option:hover {
  background: var(--color-gray03);
  color: var(--color-white);
}

/* Hero */
.hero {
  background: var(--bg-gradient-linear);
}

.hero-content {
  padding: 1.875rem 0 3.75rem;
  /* padding: 1.875rem 0 0; */
  color: var(--color-white);
  /*  background: url(../img/template/index/hero-image.png);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto 80%; */
}

.hero-content h1 {
  font-weight: 400;
  font-size: clamp(1.6rem, 2vw, 1.875rem);
  margin: 0 auto 1.25rem;
  text-align: center;
  padding: 0 15px;
}

.hero-content .hero-form {
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
}

#noCard {
  font-weight: 600;
  color: #5b6670;
  display: block;
  font-size: clamp(1rem, 2vw, 1.25rem);
  opacity: 0;
}

.hero-content .login {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  background-color: var(--color-white);
  color: var(--color-gray);
  box-shadow: 0px 12px 20px #43000045;
  padding: 1.438rem min(10%, 2.688rem);
}

.login .form-title {
  color: #323e48;
  font-size: clamp(1rem, 2vw, 1.5rem);
  letter-spacing: -0.2px;
  margin: 0 auto 1.563rem;
}

.hero-content .login .client {
  width: 100%;
  margin: 0 0 1.25rem;
  display: flex;
  position: relative;
  box-sizing: border-box;
  justify-content: space-between;
  gap: 0.25rem;
}

.client .tooltip {
  min-width: 1.189rem;
  width: 1.189rem;
  height: auto;
  top: calc(50% - 8.5px);
  cursor: pointer;
}

.login .pass {
  position: relative;
  display: none;
}

.login .pass .showPass {
  position: absolute;
  width: 24px;
  right: 1.25rem;
  top: calc(50% - 8px);
  cursor: pointer;
}

.tooltip .st0-circle {
  fill: #7b868c;
  transition: fill 0.3s ease;
}

.tooltip .st0-qa {
  fill: #fff;
}

.showPass .st0-eye {
  fill: #a2a9ad;
  transition: fill 0.3s ease;
}

.pass .showPass:hover .st0-eye,
.client .tooltip:hover .st0-circle {
  fill: var(--color-red);
  transition: fill 0.3s ease;
}

.hero-content .login .client .input,
.hero-content .login .pass .input {
  width: 100%;
  max-height: 50px;
  padding: 8px 19px;
  background-color: var(--bg-input);
  border-bottom: 1px solid #909090;
  box-sizing: border-box;
}

.hero-content .login .client label,
.hero-content .login .pass label {
  display: flex;
  text-align: left;
  font-size: 0.75rem;
  box-sizing: border-box;
  margin-bottom: 0;
}

.login .client input {
  border: none;
  background-color: transparent;
  appearance: none;
  font-size: 1.1rem;
  font-weight: 600;
  color: #323e48;
}

.login .btn {
  border-radius: 0.313rem;
  margin: 1.563rem auto 1.875rem;
  font-size: 0.938rem;
  padding: 0.813rem 1.188rem;
}

.login .btn--outline- {
  margin: 0.938rem auto 1.875rem;
}

.login p {
  color: #323e48;
  font-size: 0.938rem;
  margin: 0;
}

.hero-content .hero-image {
  width: 100%;
  margin: 0 auto 1.25rem;
}

.hero-image picture {
  margin: 0 auto;
}

.link-log {
  display: none;
  margin-bottom: 1.6rem;
}

/* Modal */
.modal {
  width: 100%;
  height: 100%;
  max-height: 100vh;
  top: 0;
  left: 0;
  justify-content: center;
  background-color: rgba(50, 62, 72, 0.7);
  overflow: auto;
  box-sizing: border-box;
  padding: 40px 0;
  transition: all 0.5s ease-in;
}

.modal-content {
  background-color: var(--color-white);
  border-radius: 12px;
  padding: 3.125rem 1.25rem;
  width: 90%;
  height: auto;
  max-width: 550px;
  box-sizing: border-box;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  position: relative;
}

.modal::-webkit-scrollbar {
  width: 5px;
  padding: 0;
  position: absolute;
}

.modal-content .close-icon {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 15px;
  cursor: pointer;
}

.modal::-webkit-scrollbar-thumb {
  background-color: var(--color-gray);
  border-radius: 20px;
}
#modal-tool {
  z-index: 11;
}

/* Carrusel index */
.carrusel .container > div {
  position: relative;
}
.carrusel .container div > button {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  aspect-ratio: 1/1;
  width: 2.5rem;
  padding: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.carrusel .container div > button::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  aspect-ratio: 1/1;
  width: 2.5rem;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}
.carrusel .container > div button img {
  width: 1.25rem;
}
.carrusel-content {
  margin-bottom: 1.25rem;
}
.carrusel h2 {
  text-align: center;
  font-size: clamp(1.2rem, 2vw, 1.563rem);
  margin: 2.813rem auto 1.875rem;
  color: var(--color-black02);
}
.carrusel-content .tab-menu {
  justify-content: flex-start;
}
.carrusel-content .tab-menu .tab-option {
  font-size: clamp(0.76rem, 2vw, 1.125rem);
}
.carrusel .carrusel-content .tab-body {
  margin-top: 1.25rem;
  position: relative;
}
.carrusel-content .tab-body .tab-content {
  visibility: hidden;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
}
.carrusel-content .tab-body .tab-content.show {
  visibility: initial;
  position: relative;
  z-index: 1;
}
.carrusel .carrusel-content .slick-prev {
  left: 0;
}
.carrusel .carrusel-content .slick-next {
  right: 0;
}
.carrusel .carrusel-content .slick-prev::before,
.carrusel .carrusel-content .slick-next::before {
  content: none;
}
.slider {
  width: 100%;
  max-width: 550px;
  margin: 0 auto;
}

.slider-list {
  width: 100%;
  display: flex;
  align-items: center;
}

.slick-list {
  width: 94%;
  margin: auto;
  overflow: hidden;
}

.slider-list .slider-list__element {
  width: 100%;
  margin: 0 1.125rem;
  display: inline-block;
  overflow: hidden;
  border-radius: 8px;
  /* box-shadow: 0px 0px 6px var(--bg-shadow); */
}

.slider-list__element:last-child {
  position: relative;
}

.slider-list__element:last-child .link {
  position: absolute;
  top: 50%;
  text-align: center;
  display: block;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  padding: 15px;
  border-radius: 8px;
  border: 1px solid rgba(235, 0, 41, 0);
  transition: all 0.3s ease-in;
}

.slider-list__element:last-child .link:hover {
  border: 1px solid rgba(235, 0, 41, 1);
  text-decoration: none;
  transition: all 0.3s ease-in;
}
.slider-list .slider-list__element picture {
  display: flex;
  aspect-ratio: 1/1;
  background: var(--bg-gray);
  padding: 1.875rem;
}
.slider-list .slider-list__element picture img {
  object-fit: contain;
  object-position: center;
}
.carrusel-content .slick-dots {
  bottom: -1.25rem;
  display: flex;
  justify-content: center;
  gap: 0.438rem;
}
.carrusel-content .slick-dots li {
  margin: 0;
  width: 0.625rem;
  height: 0.625rem;
}
.carrusel-content .slick-dots li button {
  padding: 0;
  width: 0.625rem;
  height: 0.625rem;
  display: initial;
}
.carrusel-content .slick-dots li button::before {
  font-size: 0.625rem;
  width: auto;
  height: auto;
  position: relative;
}

/* Pasos */
.steps-content {
  padding: 4.75rem 0;
  counter-reset: count;
}

.steps-content h2 {
  text-align: center;
  font-size: clamp(1.2rem, 2vw, 1.563rem);
  margin: 0 auto 3.75rem;
}

.step-list__element {
  text-align: center;
  margin: 0 auto 8rem;
  position: relative;
}
.step-list__element::before {
  counter-increment: count;
  content: counter(count);
  bottom: 100%;
  display: flex;
  aspect-ratio: 1/1;
  width: 1.813rem;
  background: var(--color-red);
  color: var(--color-white);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.875rem;
}
.step-list__element:nth-child(1):after,
.step-list__element:nth-child(2):after {
  content: "";
  position: absolute;
  top: calc(100% + 1.25rem);
  display: flex;
  aspect-ratio: 1/1;
  width: 1px;
  height: 5rem;
  background: var(--border-color-steps);
  margin: auto;
  left: calc(50% - 1px);
}

.step-list__element > p {
  line-height: 150%;
  color: var(--color-gray03);
  /* text-align: left; */
}

.step-list__element .element-icon {
  width: 50%;
  max-width: 1.375rem;
  margin: 1.875rem auto 1.563rem;
}

/* Promociones */
.proms-content {
  padding: 2.5rem 0;
}

.proms-content h2 {
  font-size: clamp(1.2rem, 2vw, 1.563rem);
  margin-bottom: 1.25rem;
}

.proms-content .btn {
  display: block;
  margin: 3.125rem auto 0;
  text-decoration: none;
}
.proms-list .card-list__element {
  display: flex;
  padding: 0;
  max-width: 450px;
}
.proms-list .card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  color: var(--color-white);
  box-sizing: border-box;
}
.proms-list .card::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--bg-gradient-screen);
  z-index: 0;
  top: 0;
  left: 0;
}
.proms-list .card .card-image {
  width: 100%;
  margin: 0;
  display: flex;
  top: 0;
  left: 0;
}
.proms-list .card .card-image img {
  object-fit: cover;
}
.proms-list .card .card-text {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 1.25rem 1.875rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
}

/* Promociones MSI */
.promsMSI {
  background-color: var(--bg-gray);
}

.promsMSI-content {
  padding: 1.25rem 0;
}

.promsMSI-text {
  text-align: center;
  margin: 0 auto 1.25rem;
}

.promsMSI-text h2 {
  margin-bottom: 1.25rem;
}

.promsMSI-text .btn {
  margin-bottom: 2.875rem;
}

.promsMSI-text .link {
  text-decoration: underline;
}

.promsMSI-image {
  max-width: 430px;
  margin: 0 auto;
}

/* Modal sesion */
#modal-sesion {
  align-items: center;
  text-align: center;
}
#modal-sesion .title {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  margin: 0 auto 1.688rem;
}
#modal-sesion .pass {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 auto 1.875rem;
}
#modal-sesion .field {
  max-width: 450px;
  margin: 0 auto 1.875rem;
}
#modal-sesion .date {
  max-width: 450px;
  margin: 0 auto 1.875rem;
}
#modal-sesion .date .input::after {
  content: url(../img/icons/icon-calendar.svg);
  width: 25px;
  position: absolute;
  right: 0.625rem;
  top: 0.625rem;
}

#modal-sesion .date .focus {
  height: 80%;
}

#modal-sesion .date .focus ~ .label-name {
  align-items: flex-start;
}
#modal-sesion .date .focus ~ .label-name span {
  margin: -0.313rem 0 0.625rem;
  font-weight: 400;
  transition: none;
}
#modal-sesion h2 {
  margin: 0 auto 1.24rem;
}

#modal-sesion .field-captcha {
  max-width: 220px;
  margin: 1.563rem auto 0;
}
#modal-sesion .btn {
  margin: 1.25rem auto 2.313rem;
}

#modal-sesion .link {
  display: inline-block;
  margin: 1rem auto 0;
}
.litepicker {
  background: var(--color-white);
  -webkit-box-shadow: 0 0 5px #ddd;
  box-shadow: 0 0 5px #ddd;
}
.litepicker .container__months {
  background: none;
  box-shadow: none;
}
.litepicker .container__months .month-item:last-child .button-previous-month,
.litepicker .container__months .month-item:last-child .button-next-month {
  display: none !important;
  visibility: hidden;
}
.litepicker .container__months .month-item-header div > select {
  background: #ebf0f2;
  border-radius: 3px;
  font-family: var(--font-body);
  font-weight: 600;
  border: 0;
  outline: 0;
  padding: 0.313rem !important;
  color: var(--color-gray);
}
.litepicker .container__months .month-item-weekdays-row > div {
  text-transform: uppercase !important;
}
.litepicker .container__days .day-item {
  display: flex;
  aspect-ratio: 1/1;
  width: 36px;
  height: 36px;
  justify-content: center;
  align-items: center;
  padding: 0;
}
.litepicker .container__days .day-item.is-end-date {
  background: #ebf0f2;
  color: var(--color-black);
}
.litepicker .container__days .day-item:hover {
  box-shadow: inset 0 0 0 1px var(--color-red);
  color: var(--color-red);
}
.litepicker .container__footer {
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 0 0.313rem;
  margin: 0;
  background: none;
  box-shadow: none;
}
.litepicker .container__footer .preview-date-range {
  display: none;
}
.litepicker .container__footer .button-cancel {
  display: none;
}
.litepicker .container__footer .button-apply {
  background-color: var(--color-red);
  color: var(--color-white);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #e30028;
  transition: all 0.5s ease-in;
  font-size: 0.938rem;
  padding: 0.938rem 0.625rem;
  text-align: center;
  width: 110px;
  max-height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.litepicker .container__months .month-item-weekdays-row div {
  font-weight: 800;
  color: var(--color-black);
}
/* Modal detalle promos */
#modal-detail .detail-prom {
  display: none;
}

#modal-detail .modal-content,
#modal-achiev .modal-content {
  padding: 2.188rem 3.125rem;
  max-width: 540px;
}

#modal-detail .detail-image {
  overflow: hidden;
  border-radius: 8px;
  margin: 0 auto 1.563rem;
  max-height: 180px;
  overflow: hidden;
  display: flex;
}

.detail-image img {
  object-fit: cover;
  object-position: center;
}

#modal-detail .detail-text,
#modal-achiev .detail-text {
  text-align: left;
}
.detail-text {
  color: #323e48;
}

.detail-text .detail-title,
#modal-achiev .detail-text .detail-title {
  display: block;
  text-align: center;
  font-weight: 800;
  margin: 0 auto 1.875rem;
  font-size: 1.125rem;
}
#modal-promtar .detail-text .detail-title {
  text-align: left;
  margin-bottom: 2.5rem;
}
#modal-promtar .terms-list .term-list__element::before {
  background: var(--color-black);
  width: 0.438rem;
  display: flex;
  aspect-ratio: 1/1;
  min-width: 0.438rem;
  height: 0.438rem;
}

.detail-text .date,
#modal-achiev .detail-text .date {
  font-weight: 600;
  display: block;
  margin: 0 0 1.25rem;
}

.detail-text .desc {
  margin: 0 auto 1.563rem;
}

.detail-text .terms {
  margin: 0 0 10px;
  display: block;
}

.terms-list .term-list__element {
  margin: 0 auto 0.938rem;
  display: flex;
}

.terms-list .term-list__element::before {
  content: "";
  width: 10px;
  min-width: 10px;
  height: 10px;
  margin-top: 3px;
  display: inline-block;
  margin-right: 10px;
  background-color: #ffa400;
  border-radius: 50%;
}
/* Modal activar promocion */
#modal-activate {
  text-align: center;
}
#modal-activate picture {
  margin: 0 auto 40px;
  width: 80%;
  max-width: 3.75rem;
}
#modal-activate p {
  margin: 40px auto 50px;
  font-size: clamp(1rem, 2vw, 1.125rem);
  font-weight: 600;
}
#modal-activate .modal-actions .btn:first-child {
  margin-right: 1.25rem;
}
/* Modal para confirmar la activacion */
#modal-success {
  text-align: center;
}
#modal-success picture {
  margin: 0 auto 40px;
  width: 80%;
  max-width: 3.75rem;
}
#modal-success h4 {
  margin: 40px auto 23px;
  font-size: clamp(1rem, 2vw, 1.125rem);
  font-weight: 600;
}
#modal-success p {
  margin-bottom: 64px;
}
#modal-success .modal-actions .btn:first-child {
  margin-right: 1.25rem;
}

/* Modal MSI */
#modal-msi .modal-content {
  max-width: 1111px;
  width: 95%;
  padding: 3.125rem 2.125rem;
}

#modal-msi h2 {
  font-size: clamp(1rem, 2vw, 1.25rem);
  margin: 0 auto 2.813rem;
}

.filter-icon {
  fill: #5b6670;
}

#modal-msi .filter {
  cursor: pointer;
}

#modal-msi .results {
  display: flex;
  flex-wrap: wrap;
  max-width: 605px;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0 auto 3.438rem;
}

.results .bar {
  width: 100%;
  display: flex;
  gap: 1rem;
  align-items: center;
}

#modal-msi .results .filter-tags {
  width: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.filter-bar {
  display: none;
  gap: 12px;
  width: 100%;
}

.filter-tags .tag {
  display: flex;
  width: auto;
  gap: 5px;
}

.filter-tags .tag,
.clear--outline {
  font-size: 12px;
  font-weight: 600;
  background-color: rgba(208, 213, 214, 0.3);
  border-radius: 4px;
  padding: 8px;
  color: #5b6670;
  cursor: pointer;
}

.tag .delete {
  width: 9px;
}

.clear--outline {
  order: 9;
  background: none;
  margin-right: 0;
  color: var(--color-red);
  box-shadow: inset 0 0 0 1px var(--color-red);
}

.search {
  position: relative;
  max-width: 549px;
  width: 96%;
}

.search input[type="text"] {
  background-color: #f6f6f6;
  padding: 1rem 1.25rem;
  border-radius: 6px;
  color: #323e48;
}

.search input[type="text"]::placeholder {
  color: var(--color-black);
}

.search .search-icon {
  width: 1.063rem;
  position: absolute;
  right: 1.25rem;
  top: calc(50% - 0.625rem);
}

.filter:hover .filter-btn {
  background-color: #f4f7f8;
  transition: all 0.3s ease-in;
}

#modal-msi .msi {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.filter {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 6px;
}

.filter .filter-btn {
  width: 100%;
  height: 40px;
  padding: 0;
  cursor: pointer;
  border-radius: 6px;
  position: relative;
}

.filter .filter-btn::after {
  content: "Filter";
  background-image: url(../img/icons/icon-globo.svg);
  background-position: center 5px;
  background-repeat: no-repeat;
  background-size: 100%;
  color: #5b6670;
  font-size: 13px;
  width: 46px;
  height: 47px;
  position: absolute;
  top: 0;
  transform: translateY(-102%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

.filter-btn:hover::after {
  opacity: 1;
  transition: opacity 0.3s ease-in;
}

.filter:hover .filter-btn {
  background-color: #f4f7f8;
  transition: all 0.3s ease-in;
}

.filter .filter-list {
  position: absolute;
  top: 40px;
  left: 0;
  background-color: var(--color-white);
  border: 1px solid #d0d2d3;
  box-sizing: border-box;
  padding: 1.25rem 0.938rem;
  width: 20vw;
  min-width: 250px;
  max-width: 308px;
  border-radius: 4px;
  cursor: default;
  display: none;
  overflow: hidden;
  transition: all 0.3s ease;
  transform: translateX(-90%);
}

.filter-open .filter-list {
  display: block !important;
  animation: showUp 0.3s ease;
}

.filter-open .filter-btn .filter-icon {
  fill: var(--color-red);
}

.filter-list .list-title {
  display: block;
  padding: 1.438rem 1rem 0.938rem;
}

.filter-list .filter-list__element {
  padding: 0.938rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.938rem;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}

.filter-list__element label {
  margin: 0;
}

.filter-list__element:hover {
  background-color: var(--bg-gray);
  transition: all 0.3s ease-in;
}

.group-msi {
  width: 100%;
}

.msi-title {
  display: block;
  font-weight: 600;
  margin: 0 auto 1.563rem;
  text-align: left;
  color: #2b2b2b;
  font-size: 1.125rem;
  width: 100%;
}

.info-title {
  display: block;
}

.msi .msi-list {
  width: 100%;
  margin: 0 auto 2rem;
}

.msi-list .msi-list__element {
  width: 100%;
  margin: 0 auto 1.563rem;
  box-shadow: 0px 0px 6px var(--bg-shadow);
  border-radius: 8px;
  background-color: #fcfcfc;
  overflow: hidden;
}

.msi-list__element .msi-logo {
  background-color: var(--color-white);
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.msi-list__element .msi-logo img {
  max-width: 138px;
}

.msi-list__element .msi-info {
  width: 100%;
  padding: 1.25rem 0.625rem;
  text-align: center;
  box-sizing: border-box;
  color: #323e48;
}

/* Modal de tarjetas */

#modal-cards .modal-content {
  max-width: 812px;
  padding: 2.5rem 1.5rem;
  transition: all 0.3s ease-in;
}
#modal-cards .modal-content .tab-menu .active-tab::after {
  width: 100%;
}

#modal-cards .modal-content h2 {
  margin: 0 auto 2.75rem;
  color: #2b2b2b;
  font-size: clamp(1.1rem, 2vw, 1.25rem);
}
#modal-cards .modal-content .tab-list {
  gap: 5px;
  padding: 15px 0;
  align-items: stretch;
}
#modal-cards .modal-content .tab-list .tab-list__element {
  display: flex;
  align-items: center;
  aspect-ratio: 1/1;
  padding: 12px;
  background: #f0f4f5;
  box-sizing: border-box;
  margin: 0;
  border-radius: 8px;
}
#modal-cards .modal-content .tab-list .tab-list__element picture {
  display: flex;
  aspect-ratio: 1/1;
  align-items: center;
  justify-content: center;
}
#modal-cards .modal-content .tab-list .tab-list__element picture img {
  object-fit: contain;
  object-position: center;
  max-width: 100%;
  max-height: 100%;
}

.tab-menu {
  display: flex;
  position: relative;
  justify-content: center;
}

.tab-menu::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #cfd2d3;
  bottom: 0;
  left: 0;
}

.menu-option,
.carrusel-content .tab-option {
  padding: 0.813rem 0.938rem;
  position: relative;
  cursor: pointer;
  font-size: clamp(1rem, 2vw, 1.125rem);
  text-align: center;
  color: #323e48;
  position: relative;
  transition: color 0.3s ease-in;
}

.menu-option::after,
.carrusel-content .tab-option::after {
  content: "";
  width: 0;
  height: 3px;
  left: 0;
  bottom: 0;
  background-color: var(--color-red);
  position: absolute;
  z-index: 1;
  transition: width 0.3s ease-in;
}
.carrusel-content .tab-option::after {
  top: 94%;
}

.menu-option:hover,
.carrusel-content .tab-option:hover {
  color: var(--color-red);
  transition: color 0.3s ease-in;
}
.tab-list-content {
  display: none;
}
.tab-list {
  padding: 2.938rem 0 0;
  flex-wrap: wrap;
  gap: 1.66rem;
  justify-content: center;
  display: flex;
}
.tab-list--vertical {
  padding: 1.66rem 0 0;
}
.tab-list--vertical .tab-list__element img {
  width: 63.2%;
  margin: 0 auto;
}
.tab-list .tab-list__element {
  width: 100%;
  display: inline-block;
  max-width: 158px;
}
.active-tab {
  position: relative;
  color: var(--color-red);
  font-weight: 600;
  transition: all 0.3s ease-in;
}
.tab-option::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--color-red);
  transition: width 0.3s ease;
}
.tab-option.active-tab::after {
  width: 100%;
}
.tab-option.active-tab {
  position: relative;
  color: var(--color-red);
  font-weight: 600;
  transition: all 0.3s ease-in;
}
.tab-option.active-tab::after {
  content: "";
  width: 100%;
  background: var(--color-red);
  bottom: 0;
  height: 3px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
}

.active-content {
  display: block;
}

.active-tab::before {
  width: 100%;
  transition: width 0.3s ease-in;
}

.close {
  display: none;
}

.open {
  display: flex !important;
  position: fixed;
}

.hide {
  opacity: 0;
  overflow: hidden;
  height: 0 !important;
  animation: hide 0.1s ease;
  padding: 0 !important;
  margin: 0 !important;
}
.show-left {
  left: 0;
  opacity: 1;
}
.transition-show--left {
  animation: showLeft 0.5s ease;
}

/* Home-dashboard */
.sliderHero {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  background: #f2f6f7;
  position: relative;
}
.sliderHero-text {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 2rem;
  color: var(--color-black);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: 1.25rem 0;
}
.sliderHero-text > div {
  margin: 0 auto 5vw;
}
.sliderHero-image picture {
  width: 100%;
  margin: auto;
  display: flex;
}
.sliderHero-text h1 {
  margin: 0 auto 0.313rem;
  font-weight: 800;
  font-size: clamp(1.5rem, 4.5vw, 1.875rem);
}
.sliderHero-text p {
  margin: 0 auto 0.813rem;
  font-size: clamp(1rem, 4.5vw, 1.125rem);
}
.sliderHero-text .btn {
  display: block;
  margin: 0.625rem auto 0;
}

.sliderHero-list__element .sliderHero-image {
  height: 54%;
  padding: 0.938rem 0 1.75rem;
  background-color: var(--color-red);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.sliderHero-text .percentage {
  font-size: 1.563rem;
}
.sliderHero-text .date {
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--color-gray03);
}

.gradient,
.gradient-50 {
  position: relative;
}

.gradient:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 75px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(
    360deg,
    rgba(235, 0, 41, 1) 60%,
    rgba(235, 0, 41, 0) 100%
  );
}
.gradient-50:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 50;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(
    360deg,
    rgba(235, 0, 41, 1) 0%,
    rgba(235, 0, 41, 0) 100%
  );
}

.dashboard-light .views .view {
  max-width: 450px;
  display: flex;
  flex-direction: column;
}
.dashboard-light .views-panels {
  max-width: 1120px;
  margin: 0 auto;
}
.dashboard-light .views .view .view-body {
  overflow: initial;
  max-height: initial;
  /* margin-top: auto; */
}
.dashboard-light .views .view .view-body .arrow {
  display: none;
}
.dashboard-light .views .viewCards-list {
  gap: 0;
}
.dashboard-light .views .viewCard-list__element {
  width: 100%;
  padding: 0;
}
.dashboard-light .viewCard-list__element .element-image {
  box-sizing: border-box;
  margin: 0;
}
.dashboard-light .viewCard-list__element .element-text {
  padding: 2rem 0;
  position: absolute;
  width: 100%;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--color-white);
  background: rgba(0, 0, 0, 0.6);
  padding: 0;
  box-sizing: border-box;
}
.dashboard-light .view .view-body .progress {
  padding: 0;
}
.light-content {
  width: 100%;
  text-align: center;
}
.light-content picture {
  width: 100%;
  max-width: 115px;
  margin: 0 auto 1.25rem;
}
.dashboard-light .view-achievments .achievment {
  width: 100%;
  min-height: initial;
}
@media screen and (min-width: 614px) {
  /* .dashboard-light .views .view {
    max-width: 680px;
  } */
  .dashboard-light .view .viewCard-list__element .element-image {
    width: 100%;
  }
  .dashboard-light .view .viewCard-list__element .element-text {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .dashboard-light .view .viewCards-list {
    display: block;
  }
  .dashboard-light .view .viewCard-list__element {
    width: 100% !important;
  }
  .dashboard-light .views-panels {
    display: block;
  }
  .dashboard-light .view-progress,
  .dashboard-light .view-achievments {
    width: 100%;
    margin: 0 auto 1.25rem;
    min-height: initial;
  }
}
@media screen and (min-width: 1240px) {
  .dashboard-light .views-panels {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .dashboard-light .views .view {
    max-width: initial;
    margin: 0;
  }
  .dashboard-light .view-promFit,
  .dashboard-light .view-promCards,
  .dashboard-light .view-progress,
  .dashboard-light .view-achievments {
    width: calc(50% - 0.313rem);
    margin: 0 auto 1.25rem;
  }
}
/* Seccion de vistas */
.views-content {
  padding: 1.875rem 0;
}

.views-menu {
  padding: 2.375rem 0;
  margin: auto;
  display: flex;
  position: relative;
}

.views-menu .arrowad {
  position: sticky;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.views-menu .arrowad-left {
  left: 0;
}

.views-menu .arrowad-right {
  right: 0;
}

.views-menu .arrowad-left::after,
.views-menu .arrowad-right::after {
  content: url(../img/icons/arrow-left.svg);
  display: block;
  height: auto;
  width: 30px;
  height: 30px;
}

.views-menu .arrowad-right::after {
  content: url(../img/icons/arrow-right.svg);
}

.btn-config {
  position: absolute;
  right: -1px;
  box-sizing: border-box;
  background: var(--color-white);
  top: 0;
  padding: 0;
  width: 30px;
  transition: all 0.3s ease-in;
}

.btn-config::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
}

.btn-config img {
  width: 20px;
  margin: 0 auto;
}

.view {
  padding: 1rem 2.188rem;
  border-radius: 0.5rem;
  width: 100%;
  margin: 0 auto 1.25rem;
  box-sizing: border-box;
  position: relative;
  border: 1px solid var(--border-color-banner);
  max-width: 680px;
}

.view .div {
  box-sizing: border-box;
}

.view .view-head {
  padding: 0 0 1.625rem;
}

.view-head h3 {
  display: block;
  font-weight: 700;
  color: #323e48;
  font-size: clamp(0.938rem, 2vw, 1.125rem);
  margin: 0 1.25rem 1.25rem 0;
}

.view-head .link {
  display: inline-block;
  margin-left: auto;
  text-decoration: underline;
}

.view .view-body {
  max-height: 390px;
  overflow: auto;
}

.view-body::-webkit-scrollbar,
.scroll-slider .box-list::-webkit-scrollbar {
  width: 4px;
  padding: 0;
  position: absolute;
}

.view-body::-webkit-scrollbar-thumb,
.scroll-slider .box-list::-webkit-scrollbar-thumb {
  background-color: #d0d2d3;
  border-radius: 5px;
}

.viewCard-list__element {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  flex-direction: column;
  background-color: var(--bg-gray03);
  overflow: hidden;
  margin: 0 0 0.938rem;
  width: 98%;
  color: #323e48;
  box-sizing: border-box;
  position: relative;
  padding: 2px;
  cursor: pointer;
}
.viewCard-list__element.action::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  z-index: 1;
}

.scroll-slider .viewCard-list__element::after {
  display: none;
}

.viewCard-list__element:last-child {
  margin-bottom: 0;
}

.viewCard-list__element .element-image {
  width: 100%;
  display: flex;
  position: relative;
  isolation: isolate;
  border-radius: 0.5rem;
  overflow: hidden;
  justify-content: center;
  margin: 0 0 1.25rem;
}
.viewCard-list__element .element-image img {
  object-fit: cover;
  object-position: center;
}

.element-image .image-title {
  font-size: 1.125rem;
  font-weight: 700;
  position: absolute;
  width: 100%;
  bottom: 0.688rem;
  left: 0;
  color: var(--color-white);
  text-align: center;
  z-index: 2;
}

.viewCard-list__element .element-text {
  width: 85%;
  line-height: 95%;
  box-sizing: border-box;
  text-align: center;
}

.element-text .element-cards img {
  display: inline-block;
  max-width: 25px;
  margin: 0;
}

.element-text .element-title {
  font-weight: 700;
  margin: 0 0 0.625rem;
  display: block;
  color: var(--color-black);
  font-size: 0.938rem;
}

.element-text .small-date {
  font-size: 0.75rem;
  display: block;
  margin: 0.375rem 0 0;
  font-weight: 600;
  color: var(--color-gray);
}
.viewCard-list__element .element-action {
  padding: 1.25rem 0;
  cursor: pointer;
  border-top: 1px solid var(--border-color-navcalc);
  margin-top: auto;
  min-width: 75px;
}

.viewCard-list__element .element-action .icon {
  margin: 0 auto 0.375rem;
  display: flex;
  aspect-ratio: 1/1;
  width: 1.25rem;
  background: url(../img/icons/icon-prom-inactive.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.viewCard-list__element .element-action a {
  color: var(--border-color-steps);
  font-weight: 600;
  text-align: center;
  width: 100%;
  display: block;
  font-size: 0.75rem;
  cursor: pointer;
}
.viewCard-list__element.active .element-action .icon {
  background: url(../img/icons/icon-prom-active.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.viewCard-list__element.active .element-action a {
  color: var(--color-green);
}
.viewCard-list__element .element-action a::after {
  content: "Activar promoción";
  display: block;
}
.viewCard-list__element.active .element-action a::after {
  content: "Promoción activa";
  display: block;
}
.view .prom-slider {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  overflow: inherit;
}

.dots {
  padding: 1.25rem 0;
  display: flex;
  width: 100%;
  justify-content: center;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ddd;
  margin-right: 5px;
  cursor: pointer;
}

.active-dot {
  background-color: var(--color-red);
}

.dots-slider {
  display: flex;
  justify-content: center;
  padding: 1.25rem 0;
}

.view .prom-slider .arrow-left,
.view .prom-slider .arrow-right {
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
}

.view .prom-slider .arrow-left {
  left: 0.2rem;
  top: calc(50% - 12px);
}

.view .prom-slider .arrow-right {
  right: 0.2rem;
  top: calc(50% - 12px);
}

.prom-slider .disabled {
  cursor: default;
  opacity: 0.4;
}

.view .prom-slider .arrow-left::after,
.view .prom-slider .arrow-right::after {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.view .prom-slider > .arrow-left::after {
  content: url(../img/icons/arrow-left.svg);
}
.view .prom-slider > .arrow-right::after {
  content: url(../img/icons/arrow-right.svg);
}

.view .prom-slider .viewCards-list {
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 15px;
}
.view .prom-slider .viewCard-list__element .element-image {
  overflow: visible;
}
.viewCards-list::-webkit-scrollbar,
.viewCards-list::-webkit-scrollbar-thumb {
  height: 0;
  opacity: 0;
}

.prom-slider .viewCard-list__element {
  min-width: 100%;
  scroll-snap-align: center;
  padding: 0;
  box-sizing: border-box;
  flex-direction: column;
  margin: 0;
}

.prom-slider .viewCard-list__element .element-image {
  margin: 0;
}
.prom-slider .viewCard-list__element .element-image img {
  max-width: initial;
}

.scroll-slider {
  margin: 0 auto;
  position: relative;
}
.scroll-slider .element-image {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.scroll-slider .element-image img {
  width: 100%;
}

.scroll-slider .element-text {
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 1.125rem 1rem;
}
.scroll-slider .element-text .text-title p{
  font-size: clamp(0.863rem, 2vw, 1rem);
}
.scroll-slider .element-text .box-list {
  width: 100%;
  height: 85%;
  max-width: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.scroll-slider .viewCard-list__element:last-child {
  margin-bottom: 1.25rem;
}
.prom-slider .scroll-slider .viewCard-list__element:last-child {
  margin-bottom: 0;
}
.element-text .text-box {
  width: 98%;
  border-bottom: 1px solid var(--border-color-navcalc);
  margin: 0;
  padding: 0.625rem 0.313rem;
  box-sizing: border-box;
}

.element-text .text-box:last-child {
  border-bottom: none;
}

.element-text .text-box > p {
  background-color: var(--bg-gray03);
  width: 100%;
  border-radius: 4px;
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  font-size: 14px;
}

.add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.add h4 {
  width: calc(100% - 4rem);
  /* text-align: center; */
  align-self: flex-start;
  margin: 0 2rem 1.25rem;
  position: absolute;
  padding: 0 0 0.625rem;
  top: calc(0.625rem * 2);
  left: 0;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border-color-navcalc);
}

.add .link {
  display: block;
  margin: 0;
  align-self: center;
}

.progress {
  padding: 1.438rem 1.563rem;
  box-sizing: border-box;
  background: var(--color-white);
  color: #323e48;
}

.active-progress {
  display: block;
}
.progress-tab .tab-menu {
  position: relative;
  margin-bottom: 0.625rem;
}
.progress-tab .tab-menu::after {
  content: "";
  width: 100% !important;
  height: 3px !important;
  background: var(--border-color-navcalc);
  position: absolute;
  left: 0;
  bottom: 0;
}
.progress-tab .tab-option,
.achiev-tab .tab-option {
  max-width: 96px;
  padding: 0.25rem 0.5rem 0.625rem;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  opacity: 0.7;
}

.tab-option::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.3s ease-in;
}
.progress-tab .tab-option::after {
  content: "";
  width: 0;
  height: 3px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--color-red);
  transition: width 0.3s ease;
}
.progress-tab .tab-option.active-tab::after {
  width: 100%;
}

.tab-menu {
  border: 0;
}

.progress-tab .tab-menu::after,
.achiev-tab .tab-menu::after {
  width: 0;
  height: 0;
}

.progress-tab .active-tab {
  color: #323e48;
  background-color: var(--color-white);
  border-radius: 5px 5px 0 0;
  opacity: 1;
}
.progress-tab .tab-option img {
  max-width: 60px;
  margin: 0 auto 5px;
}
.progress-tab .tab-option span {
  font-size: 0.7rem;
  text-align: center;
  display: block;
}

.progress .progress-head {
  border-bottom: 1px solid var(--bg-gray);
  padding-bottom: 0.625rem;
}

.progress-head h3 {
  font-weight: 700;
  font-size: 0.938rem;
  margin-bottom: 0.5rem;
}
.progress-head .period {
  font-weight: 400;
  line-height: 100%;
  font-size: 0.75rem;
}

.progress .progress-body {
  padding: 1.188rem 0;
}

.progress-body p {
  font-size: 0.75rem;
}

.progress-body > p:first-child {
  margin: 0 0 0.938rem;
}

.progress-bar {
  width: 100%;
  display: block;
  position: relative;
  padding: 6px 16px;
  border-radius: 5px;
  margin: 0 0 0.875rem;
  isolation: isolate;
  background-color: #dcdfdf;
  box-sizing: border-box;
  box-shadow: 0px 0px 8px var(--bg-shadow);
}

.progress .progress-bar::before,
.progress .progress-bar > div {
  border-radius: 5px 0 0 5px;
  transition: all 0.3s ease;
}

.progress .progress-tab .progress-bar > p,
.progress .progress-tab .progress-bar .progress-percent {
  font-size: clamp(0.8rem, 1vw, 0.9rem);
}

.progress-bar > p {
  text-align: right;
  color: #544f62;
  font-weight: 600;
  margin: 0;
}

.progress-bar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 84%;
  height: 100%;
  border-radius: 5px;
  background-color: var(--color-green);
  box-shadow: 0px 2px 8px #6cc04a57;
  z-index: -1;
}

.progress-bar > div {
  top: -20px;
  left: 0;
  position: absolute;
  text-align: right;
  width: 84%;
  color: var(--color-green);
  font-weight: 600;
  font-size: 0.75rem;
}

.progress-body .progress-date {
  margin-bottom: 0.313rem;
}
.prog66::before,
.prog66 > div {
  width: 66%;
}
.tab-icon {
  max-width: 60px;
  max-height: 60px;
  margin: 0 auto 6px;
  position: relative;
  isolation: isolate;
}

.tab-icon::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  z-index: -1;
}
.achiev-tab .tab-menu {
  position: relative;
  margin-bottom: 0.625rem;
}
.achiev-tab .tab-menu::after {
  content: "";
  width: 100%;
  height: 3px;
  background: var(--border-color-navcalc);
  position: absolute;
  left: 0;
  bottom: 0;
}

.achiev-tab .tab-option:hover {
  font-weight: 600;
}
.achiev-tab .tab-option:hover .tab-icon::after {
  background: var(--color-white);
}

.tab-icon .st0 {
  fill: #5b6670;
  transition: all 0.3s ease-in;
}

.achiev-tab .tab-menu .tab-option {
  text-align: center;
  font-size: 0.65rem;
  color: #323e48;
  padding: 0.625rem 0;
  max-width: none;
  width: 100%;
  letter-spacing: -0.13px;
  opacity: 1;
  font-size: 0.813rem;
}

.active-tab .st0 {
  fill: var(--color-red);
}

.achiev-tab .tab-menu .active-tab {
  color: var(--color-red);
  background-color: var(--color-white);
  border-radius: 5px 5px 0 0;
  overflow: initial;
}

.achievment {
  display: none;
  flex-direction: column;
  background-color: var(--color-white);
  text-align: center;
  color: #323e48;
  min-height: 232px;
  box-sizing: border-box;
}
.view-achievments .achievment {
  max-height: 250px;
  overflow: auto;
}
.view-achievments .view-body {
  overflow: hidden;
}
.view-achievments .achievment::-webkit-scrollbar {
  width: 0.313rem;
  height: 2px;
  padding: 0;
  background: var(--bg-gray02);
}
.view-achievments .achievment::-webkit-scrollbar-thumb {
  background-color: #cfd2d3;
}
.achievment > p br {
  display: none;
}

.achievment .achiev-title {
  font-weight: 700;
  margin-bottom: 1.563rem;
}

.achievment .btn {
  margin: 1.25rem auto 0;
}
.achiev-col {
  width: 98%;
  box-sizing: border-box;
  border: 1px solid var(--border-color-banner);
  padding: 0.625rem 0.75rem;
  margin-bottom: 1.25rem;
}
.achiev-col > span {
  margin-bottom: 23px;
  display: block;
}
.achiev-col .col-subheader {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 0.625rem;
  margin-bottom: 30px;
}
.achiev-col .col-subheader picture {
  max-width: 2.688rem;
  width: 30%;
}
.achiev-col .col-subheader > div p:last-child {
  color: var(--color-red);
  font-size: 0.838rem;
}
.achiev-col .col-subheader > div p:last-child span {
  font-size: 1.25rem;
}
.achiev-col .col-list {
  text-align: left;
}
.achiev-col .col-list .col-list__element {
  display: flex;
  align-items: center;
  background: var(--bg-gray);
  border-radius: 0.24rem;
  overflow: hidden;
  margin-bottom: 0.625rem;
}
.col-list__element .number {
  display: flex;
  aspect-ratio: 1/1;
  min-width: 30px;
  width: 30px;
  justify-content: center;
  align-items: center;
  background: var(--color-gray);
  font-weight: 800;
  color: var(--color-white);
}
.col-list__element p {
  padding: 0 0.625rem;
  display: flex;
  font-size: 0.75rem;
}
.achiev-complete .col-list__element .number {
  background: var(--color-green);
}
.achiev-complete .col-subheader > div p:last-child {
  color: var(--color-green);
  font-size: 0.838rem;
}
.view-refers .view-body {
  text-align: center;
}
.view-refers .view-body picture {
  width: 80%;
  max-width: 250px;
  margin: 0 auto 1.25rem;
}
.view-refers .view-body h3 {
  text-align: center;
  margin: 0 auto 1.25rem;
}
.view-refers .view-body h3 br {
  display: none;
}

/* Modal accesos rapidos */
#modal-access .modal-content {
  max-width: 590px;
  padding: 2.125rem;
}

.content-access {
  color: #2b2b2b;
}

.content-access h1 {
  font-size: 1.25rem;
  text-align: center;
}

.content-access h1,
.content-access > p {
  margin: 0 auto 1.875rem;
}

.content-access .form fieldset {
  border: 0;
  padding: 0;
  margin: 0 auto 1.563rem;
}

.content-access legend {
  display: block;
  width: 100%;
  font-weight: 600;
  margin: 0 auto 5px;
}

.access-list {
  column-count: 1;
}

.access-list__option {
  display: flex;
  gap: 10px;
  padding: 0.938rem 1rem;
  width: 100%;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.3s ease-in;
  box-sizing: border-box;
  color: #323e48;
  align-items: center;
}

.access-list__option label {
  font-size: 0.875rem;
  margin: 0;
}

.btn-section {
  margin: 0;
  text-align: center;
}

.btn-section .acept {
  min-width: 120.55px;
}

/* modal promos tarjetas home */

.detail-text .btn {
  margin: 1.25rem auto;
  display: block;
}
.legals {
  text-align: center;
}

.legals .link {
  display: inline-block;
}

#modal-promtar .detail-image {
  display: flex;
  margin: 0 auto 1.563rem;
  aspect-ratio: 436/187;
}

#modal-promtar .detail-image img {
  max-width: 200px;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
}

/* Logros y retos */
.achievments .title {
  margin: 1.5rem 0 1.875rem;
  font-size: clamp(1.2rem, 2vw, 1.563rem);
}
.achievment-menu {
  width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  justify-content: flex-start;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 1.25rem 0.625rem 0 0;
}
.achievment-menu::-webkit-scrollbar {
  height: 0;
  padding: 0;
}
.achievment-menu::-webkit-scrollbar-thumb {
  background-color: #cfd2d3;
}
.achievment-menu::after {
  display: none;
}
.achievment-menu .tab-option {
  display: flex;
  gap: 1.063rem;
  align-items: flex-start;
  width: 100%;
  min-width: 260px;
  border-radius: 0.625rem 0.625rem 0 0;
  border: 1px solid var(--border-color-tab);
  padding: 1.25rem;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.3s ease;
  scroll-snap-align: center;
  position: relative;
}
.achievment-menu .tab-option:hover {
  margin-top: -0.625rem;
}
.achievment-menu .tab-option .tab-text p {
  color: var(--color-black);
  font-size: clamp(0.938rem, 2vw, 1.125rem);
}
.achievment-menu .tab-option .tab-text span {
  color: var(--color-gray03);
  font-weight: 400;
  font-size: clamp(0.838rem, 2vw, 1rem);
}
.achievment-menu .tab-option .tab-text span span {
  font-weight: 800;
}
.achievment-menu .tab-option.active-tab {
  border-bottom: 1px solid var(--color-white);
}
.achievment-menu .tab-option.active-tab:hover {
  margin-top: 0;
}
.achievment-menu .tab-option::before,
.achievment-menu .tab-option::after {
  content: none;
}
.achievment-menu .tab-option .tab-icon {
  width: 1.688rem;
  display: flex;
  margin: 0;
}
.achievment-menu .tab-option .tab-icon img {
  object-fit: contain;
  object-position: center;
}
.achievment-menu .tab-option.block::after {
  position: absolute;
  background: none;
  content: url(../img/icons/logros-retos/block.svg);
  width: 1.438rem;
  left: 80%;
  top: 1.5rem;
}
.achievment-content {
  border: 1px solid var(--border-color-tab);
  border-top: none;
  width: 100%;
  padding: 1.25rem;
  box-sizing: border-box;
  border-radius: 0 0 0.5rem 0.5rem;
}
.indicator {
  display: flex;
  align-items: center;
  gap: 0.313rem;
  border-radius: 0.5rem;
  background: var(--bg-gray03);
  padding: 0.188rem 0.313rem;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  min-width: 5rem;
  margin: 0 0 0.813rem;
}
.indicator .indicator-icon {
  width: 1.875rem;
}
.indicator .indicator-text {
  font-size: 1rem;
  color: var(--color-gray03);
}
.achievments-col .row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: min(10%, 1.625rem);
  margin: 0 0 1.25rem;
}
.achiev-col .row:last-child {
  margin: 0;
}
.achievments .achievments-progress {
  position: relative;
}
.achievments .achievments-progress::before {
  content: "";
  position: absolute;
  width: 2px;
  background: var(--color-yellow);
  height: 100%;
  top: 50%;
  left: calc(48px / 2);
  z-index: -1;
}
.achievments .achievments-progress:last-child:before {
  content: none;
}
.achievments-col .achievments-progress .progress-icon {
  width: min(20%, 3rem);
  min-width: 48px;
  display: flex;
  position: relative;
}
.achievments-col .achievments-progress .progress-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-white);
  opacity: 0.5;
  z-index: 2;
}
.achievments-col .achievments-progress .progress-icon img {
  object-position: center;
}
.achievments-col .achievments-progress .achievment-card {
  width: 100%;
}
.achievment-card {
  border-radius: 0.5rem;
  padding: 0.375rem;
  max-width: 350px;
  margin: 0 auto;
  border: 1px solid var(--border-color-tab);
}
.achievment-card .card-icon {
  width: 100%;
  background: var(--bg-gray03);
  border-radius: 0.5rem;
  overflow: hidden;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 0.625rem 0;
  box-sizing: border-box;
  position: relative;
}
.achievment-card .card-icon::after {
  content: "";
  width: 100%;
  min-height: 80px;
  display: flex;
  background: url(../img/icons/logros-retos/gift-close.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80px;
}
.achievment-card .card-icon::before {
  content: "";
  width: 100%;
  height: 100%;
  display: flex;
  background: #fcfcfc url(../img/icons/logros-retos/block.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px;
  opacity: 0.9;
  position: absolute;
  inset: 0;
  z-index: 3;
}
.achievments-progress.complete .achievment-card .card-icon::after {
  background: url(../img/icons/logros-retos/gift-open.svg);
  background-size: 80px;
  background-repeat: no-repeat;
  background-position: center;
}
.achievments-progress.complete .achievment-card .card-icon::before {
  content: none;
}
.achievments-progress.outdate .achievment-card .card-icon::before {
  background: #fcfcfc;
}
.achievment-card .card-icon img {
  object-position: center;
  object-fit: contain;
}
.achievment-card .card-text {
  padding: 1.25rem 0;
}
.achievment-card .card-text .subtitle {
  font-weight: 800;
  color: var(--color-black);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 1.25rem;
}
.tag-status {
  display: flex;
  align-items: center;
  gap: 0.313rem;
  background: var(--bg-gray03);
  padding: 0.375rem;
  border-radius: 0.5rem;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  font-size: 0.75rem;
}
.tag-status::before {
  content: url(../img/icons/logros-retos/prom-inactive.svg);
  display: inline-block;
  min-width: 0.938rem;
  width: 0.938rem;
  height: 0.938rem;
}
.tag-status::after {
  content: "No activo";
  display: inline-block;
  display: block;
  font-weight: 600;
  color: var(--border-color-steps);
}
.achievment-card .card-text .title {
  font-weight: 800;
  margin: 0 0 1.25rem;
}
.achievment-card .card-text .col-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.313rem;
  margin: 1.25rem 0 0;
}
.achievments-progress .achievment-card .card-actions a {
  padding: 0.938rem 1rem;
}
.achievments-progress.complete {
  position: relative;
}
.achievments-progress.complete .progress-icon::after {
  opacity: 0;
}
.complete .tag-status::before {
  content: url(../img/icons/logros-retos/prom-active.svg);
}
.complete .tag-status::after {
  content: "Logrado";
  color: var(--color-green);
}
.achievments-progress.complete .achievment-card .card-actions a {
  display: none;
}
.current .tag-status::before {
  content: url(../img/icons/logros-retos/promo-progress.svg);
}
.current .tag-status::after {
  content: "En curso";
  color: var(--color-orange);
}
.achievments-progress.current .achievment-card .card-actions button {
  display: none;
}
.achievments-progress.current .achievment-card .card-icon::before {
  background: none;
}
.outdate .tag-status::before {
  content: url(../img/icons/logros-retos/prom-outdate.svg);
}
.outdate .tag-status::after {
  content: "Vencido";
  color: var(--color-red);
}
.achievments-progress .achievment-card .card-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 1.25rem;
}
.achievments-progress.outdate .achievment-card .card-actions button {
  pointer-events: none;
}
.achievments-progress .progress-icon::before {
  content: "";
  inset: 5%;
  position: absolute;
  border: 2px dashed var(--color-yellow);
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 1;
}
.block-content {
  text-align: center;
  padding: 1.75rem 0 3.313rem;
  background: #fcfcfc;
}
.block-content .block-icon {
  width: 30px;
  margin: 0 auto 23px;
}
.block-content p {
  margin: 0 auto 30px;
}
.block-content p:last-child {
  margin: 0 auto;
}
@media screen and (min-width: 714px) {
  .achievments-progress .achievment-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1.688rem;
    max-width: none;
  }
  .achievments-progress .achievment-card .card-icon {
    width: 35%;
    max-width: 130px;
  }
  .achievments-progress .achievment-card .card-icon img {
    width: 70%;
    max-width: 90px;
    margin: 0 auto;
  }
  .achievments-progress .achievment-card .card-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    padding: 0 1.25rem 0 0;
    margin: 0 0 0 auto;
  }
  .achievments-progress .achievment-card .card-actions a {
    white-space: nowrap;
  }
}
@media screen and (min-width: 1024px) {
  .achievment-menu {
    padding: 1.25rem 0 0;
  }
  .achievments-progress .achievment-card .card-text {
    width: 50%;
  }
  .achievments-progress .achievment-card .card-actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 0.313rem;
  }
}

/* Modal logros y retos */
#modal-achiev .modal-content {
  padding: 0;
}
#modal-achiev .modal-content .content-achiev {
  display: block;
  overflow: hidden;
  border-radius: 0.75rem;
}
.content-achiev .achiev-header {
  background: var(--bg-gray03);
  text-align: center;
  padding: 1.25rem 0;
}
.content-achiev .achiev-header .header-title {
  font-weight: 800;
  margin: 0 auto 0.625rem;
  font-size: 1.125rem;
}
.content-achiev .achiev-header > span {
  color: var(--color-gray03);
  margin: 0 auto 0.625rem;
  font-size: 1rem;
}
.content-achiev .achiev-header .header-image {
  width: 70%;
  max-width: 100px;
  margin: 0 auto 1.25rem;
}
.content-achiev .tag-status {
  background: var(--color-white);
  font-size: 0.75rem !important;
}
.content-achiev .achiev-body {
  padding: 1.688rem 3.125rem 3.313rem;
  font-size: 0.938rem;
}
.content-achiev .achiev-body .body-title {
  font-weight: 800;
  margin: 0 0 1.875rem;
}
.content-achiev .achiev-body .body-subtitle {
  font-weight: 600;
  margin: 0 0 1.125rem;
}
.content-achiev .achiev-body .body-desc {
  margin: 0 0 1.875rem;
}
.content-achiev .achiev-body .body-desc:last-child {
  margin: 0;
}
.content-achiev.outdate .achiev-header .header-image {
  position: relative;
}
.content-achiev.outdate .achiev-header .header-image {
  opacity: 0.3;
}
.activate-prom {
  padding: 2.188rem 0;
  text-align: center;
}
.activate-prom picture {
  width: 3.75rem;
  margin: 1.125rem auto;
}
.activate-prom .activate-title {
  margin: 1.125rem auto;
  font-size: 1.125rem;
}
.activate-prom .activate-desc {
  margin: 0 auto 3.125rem;
  font-size: 0.938rem;
}
/*  */
.achievment-tab .active-tab {
  font-weight: 400;
  color: #323e48;
}

@keyframes dash {
  from {
    stroke-dashoffset: 502;
  }
}

/* Mis tarjetas */
.myCards h1 {
  font-size: 1.563rem;
  margin: 2.188rem 0 2.188rem;
}

.myCard-content {
  margin: 0 auto 4rem;
}

.myCard-content h2 {
  font-size: 1.25rem;
  margin: 2.813rem 0 3.125rem;
  text-align: left;
}

.myCard-content .tab-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.myCard-content .tab-menu .arrow {
  width: 20px;
  min-width: 20px;
  margin-bottom: 2rem;
  cursor: pointer;
}

.tab-menu .options-list {
  width: 100%;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  overflow: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.myCard-content .tab-content {
  display: none;
}

.myCard-content .tab-menu .tab-option {
  padding: 0 0.625rem 1.625rem;
  width: 120px;
  min-width: 120px;
  max-height: 89px;
  cursor: pointer;
  position: relative;
  opacity: 0.5;
  box-sizing: border-box;
  scroll-snap-align: center;
  display: flex;
  justify-content: center;
}
.myCard-content .tab-menu .disabled {
  cursor: default;
}
.myCard-content .tab-menu .active-tab {
  opacity: 1;
}
.myCard-list .card-list__element {
  margin: 0 auto 2.188rem;
  border-radius: 8px;
  overflow: hidden;
  max-width: 320px;
  box-shadow: 0 3px 6px var(--bg-shadow);
  transition: all 0.3s ease-in;
}

.myCard-list .element-image {
  display: flex;
  background-color: #f4f7f8;
  aspect-ratio: 320/190;
  justify-content: center;
  border-radius: 8px 0 0 8px;
  overflow: hidden;
  transition: all 0.3s ease-in;
}

.myCard-list .element-image img {
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.myCard-list .element-text {
  padding: 0.938rem;
  font-size: clamp(0.823rem, 1vw, 0.938rem);
  box-sizing: border-box;
}

.myCard-list .element-text a {
  margin: 5px 0 0 auto;
  box-sizing: border-box;
  padding: 0.938rem;
  display: block;
  font-size: 0.938rem;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  white-space: nowrap;
  width: 91px;
  min-width: 91px;
  text-align: center;
}

.myCard-list .element-text h3 {
  font-size: 0.938rem;
  margin: 0 0 1.875rem;
}

.myCard-content .show {
  display: block;
  animation: showLeft 0.3s ease-in;
}

/* Modal mis tarjetas */
#modal-myCard .modal-content {
  max-width: 630px;
  padding: 0;
}

#modal-myCard .myCard-image {
  width: 100%;
  overflow: hidden;
  border-radius: 0.5rem 0.5rem 0 0;
  aspect-ratio: 630/220;
  display: flex;
}
#modal-myCard .myCard-image img {
  object-fit: cover;
  object-position: top;
}

#modal-myCard .title {
  font-size: 1.125rem;
  margin: 0 0 1.875rem;
}
#modal-myCard .myCard-text {
  padding: 1.25rem min(10%, 3.75rem) 1.875rem;
}
#modal-myCard .myCard-text p {
  margin: 0 0 1.25rem;
  line-height: 160%;
  letter-spacing: -0.15px;
}

#modal-myCard .myCard-text .subtitle {
  font-weight: 600;
  margin: 0;
}

#modal-myCard .myCard-text .text-list {
  margin: 0 0 1.25rem;
}

.asteric-marker li {
  display: flex;
  gap: 5px;
}

.asteric-marker li::before {
  content: "*";
  display: block;
  font-size: 15px;
}

.content-myCard {
  display: none;
}

/* Pantalla referidos */
.ref-content h1 {
  font-size: 1.25rem;
  text-align: center;
  margin-top: 3.125rem;
}

.ref-stitle {
  display: none;
  font-weight: 400;
}
.ref-content .steps-list {
  margin: 3.125rem auto 6.25rem;
  text-align: center;
  display: flex;
  max-width: 420px;
  position: relative;
  justify-content: center;
}

.ref-content .step-list__element {
  font-size: 0.813rem;
  z-index: 1;
  width: 100%;
  margin: 0;
}
.ref-content .step-list__element::after,
.ref-content .step-list__element::before {
  display: none;
}
.ref-content .step-list__element:nth-child(1)::after,
.ref-content .step-list__element:nth-child(2)::before {
  display: none;
}
.ref-content .steps-list .divider {
  width: 55%;
  height: 3px;
  top: 0.938rem;
  left: auto;
  right: auto;
  background: #a2a9ad;
  position: absolute;
}

.ref-content .steps-list .divider--red {
  width: 0;
  background-color: var(--color-red);
  left: 22.5%;
  transition: width 0.3s ease-in;
}
.width30 {
  width: 30%;
}
.ref-content .step-number {
  position: relative;
  color: var(--color-white);
  width: 1.875rem;
  min-width: 1.875rem;
  aspect-ratio: 1/1;
  display: flex;
  margin: 0 auto 0.438rem;
  align-items: center;
  justify-content: center;
  font-size: 0.938rem;
  font-weight: 700;
  line-height: 100%;
  background-color: var(--color-white);
  isolation: isolate;
}
.ref-content .step-number::before {
  content: "";
  position: absolute;
  background-color: #a2a9ad;
  width: 100%;
  height: 100%;
  border-radius: 60%;
  top: 0;
  left: 0;
  z-index: -1;
  box-shadow: inset 0 0 0 2px #a2a9ad, inset 0 0 0 5px var(--color-white);
}
.ref-content .content-actions {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  margin: 1.25rem 0;
}
.ref-content .btn--red {
  margin: 0;
  display: block;
}

.ref-content p {
  text-align: center;
}

.ref-content p br {
  display: none;
}

.ref-content p a {
  display: inline-block;
}
.ref-content .ref-image {
  margin: 2.5rem auto 2.813rem;
  max-width: 200px;
}
.activate-content {
  max-width: 800px;
  margin: 0 auto;
  height: 0;
  overflow: hidden;
}
.activate-content h2 {
  margin: 0 auto 2.813rem;
}
.activate-content .number-card {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  margin: 0 auto 1.25rem;
}
.activate-content p {
  margin: 0 auto 6.875rem;
}
.activate-content .success-image img {
  width: 60px;
  margin: 0 auto;
}
.active-number::before {
  background: var(--color-red) !important;
  box-shadow: inset 0 0 0 2px var(--color-red),
    inset 0 0 0 5px var(--color-white) !important;
  transition: all 0.5s ease-in;
}
.active-number ~ p {
  font-weight: 400;
  color: var(--color-black);
}
#step2 {
  height: 0;
  overflow: hidden;
}
.activate-content.show {
  height: auto !important;
}
#step4 h2 {
  margin-bottom: 1.563rem;
}
.link-personal {
  background: #f6f6f6;
  padding: 0.625rem 1.25rem;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 2px solid #cfd2d3;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  cursor: pointer;
}
.link-actions {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-bottom: 5px;
}
.link-actions .link-act {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  position: relative;
}
.link-act img {
  max-height: 21px;
}
.action-copy {
  position: relative;
}
.action-copy::after {
  content: "Vinculo copiado";
  width: 8rem;
  height: 3rem;
  background-image: url(../img/icons/icon-globo-bigger.svg);
  background-position: center 6px;
  background-repeat: no-repeat;
  background-size: 90%;
  color: #5b6670;
  font-size: 13px;
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in;
  opacity: 0;
}
.appear::after {
  opacity: 1;
}
.dissapear::before {
  opacity: 0 !important;
}
.share-list {
  position: absolute;
  background-color: var(--color-white);
  border: 1px solid #d0d2d3;
  box-sizing: border-box;
  padding: 1.25rem 0.938rem;
  width: 260px;
  bottom: 0;
  transform: translateY(100%);
  z-index: 3;
  border-radius: 8px;
  right: 0;
  display: none;
  transition: all 0.3s ease-in;
}
.share-list > p {
  text-align: left;
  font-weight: 700;
  margin-bottom: 0.938rem;
}
.share-list .share-list__element {
  padding: 0.875rem 0.563rem;
  text-align: left;
  transition: all 0.3s ease-in;
}
.share-list__element a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #323e48;
  font-size: 0.875rem;
}
.share-list__element a img {
  width: 1.25rem;
}
.share-list__element:hover {
  background-color: #f4f7f8;
  transition: all 0.3s ease-in;
}
.link-personal .link-title {
  font-size: 0.75rem;
  margin-bottom: 5px;
  font-weight: 300;
}

.link-personal .link-url {
  font-weight: 600;
  font-size: 0.938rem;
}
.refer-tab .tab-menu {
  margin: 0 auto 1.563rem;
}
.refer-tab .tab-option {
  padding: 0.813rem 1.875rem;
  font-weight: 600;
  font-size: 1.125rem;
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.refer-tab .tab-option::after {
  width: 0;
  height: 3px;
  left: 0;
  top: auto;
  bottom: 0;
}
.refer-tab .active-tab::after {
  width: 100%;
  background: var(--color-red);
  height: 3px;
  bottom: 0;
  top: auto;
}
.refer-tab .noRefer-image {
  width: 85px;
  height: 85px;
  padding: 1rem;
  margin: 0 auto;
}
#step4 {
  margin: 2rem auto;
}
.refer-tab .tab-content {
  display: none;
}
.refer-tab .show {
  display: block;
}
.refer-tab .tab-content p {
  font-size: 1rem;
}
.refer-tab .tab-content .title {
  font-size: 1rem;
  text-align: left;
  margin: 0 0 10px;
}
.detail-table {
  width: 100%;
  border-collapse: collapse;
}
.table {
  overflow: auto;
  width: 100%;
  padding-bottom: 1.563rem;
}
.table::-webkit-scrollbar {
  height: 7px;
  padding: 0;
}
.table::-webkit-scrollbar-thumb {
  background-color: #cfd2d3;
}
.detail-table thead {
  background: #e7e9e9;
}
.detail-table tbody {
  border: 1px solid #e7e9e9;
}
.detail-table tbody tr {
  min-height: 55px;
}
.detail-table thead td,
.detail-table tbody td {
  padding: 1.188rem 0.938rem;
  min-width: 140px;
}
.detail-table thead td .arrow-down {
  width: auto;
  height: 11px;
  display: inline-block;
  margin-top: 2px;
  margin-left: 5px;
}
.tab-result {
  margin: 1rem 0;
  display: flex;
  align-items: center;
}
.tab-result span {
  display: block;
  margin-left: auto;
}
.refer-slider {
  max-width: 800px;
  margin: 0 auto 4.188rem;
}
.refer-slider .slick-prev {
  left: 0;
}
.refer-slider .slick-next {
  right: 0;
}
.refer-slider .slick-list {
  box-sizing: border-box;
  padding: 0 0.625rem !important;
}
.refer-slider .slick-list .slick-track {
  width: 100% !important;
  display: flex;
  box-sizing: border-box;
  padding: 2rem 0;
  gap: 2%;
}
.refer-slider .slick-dots {
  bottom: 0;
  display: flex;
  gap: 0.625rem;
  justify-content: center;
}
.refer-slider .slick-dots li {
  margin: 0;
  width: auto;
  height: auto;
}
.refer-slider .slick-dots li button {
  width: 0.625rem;
  display: flex;
  aspect-ratio: 1/1;
  padding: 0;
  margin: 0;
}
.refer-slider .slick-dots li button::before {
  width: 0.625rem;
  display: flex;
  aspect-ratio: 1/1;
  font-size: 0.625rem !important;
}
.refer-slider .slider-list__element {
  border-radius: 0.313rem;
  box-shadow: 0 3px 6px var(--bg-shadow);
  padding: 1.625rem 1.25rem;
  box-sizing: border-box;
  width: 100%;
  min-width: 98%;
}
.refer-slider .slider-list__element picture {
  width: 100%;
  max-width: 180px;
  margin: 1.25rem auto 1.875rem;
}
/* Modal referidos */
#step3 .modal-content {
  align-self: center;
}
.content-refer .refer-image {
  width: 6rem;
  height: 6rem;
  padding: 1.125rem;
  box-sizing: border-box;
  margin: 0 auto 0.625rem;
}

.content-refer {
  text-align: center;
}
.content-refer > p {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 auto 2.188rem;
}
.refer-btns .btn:first-child {
  margin: 0 10px 1.25rem;
}
.desktop {
  display: none !important;
}
.hidden {
  display: none;
}
.active-ac {
  display: flex;
}
.show {
  display: block;
}
.showUp {
  animation: showUp 0.3s ease-in;
}
.showDown {
  animation: showDown 0.3s ease-in;
}
.sticky {
  position: sticky;
  top: 0;
}
.car {
  background: #f1f2f2;
  min-height: 100vh;
}
.carProm {
  position: relative;
}
.carProm-v2 {
  position: relative;
  padding: 1rem 0;
  max-width: 300px;
  margin: 0 auto;
}
.carProm-v2 .carProm-text {
  margin: 0 auto 2rem;
}
.carProm-text .text-title {
  font-weight: 800;
  color: #544f62;
  margin-bottom: 0.938rem;
  font-size: clamp(1.5rem, 1.5vw, 1.8rem);
}
.carProm-text > p {
  color: #6d6e71;
  margin-bottom: 1.25rem;
}
.carProm-text .btn--link {
  padding: 0;
  color: #e81d2d;
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  font-weight: 800;
}
.carProm-text .btn--link::after {
  content: url(../img/icons/circle-arrow-right.svg);
  display: inline-block;
  margin-left: 10px;
  width: 15px;
  height: 15px;
}
.carProm-v2 .carProm-list {
  width: 100%;
  max-width: 1180px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 auto;
  gap: 0;
  padding: 0;
}
.carProm-v2 .carProm-list .slick-list {
  order: 0;
  width: 100%;
  margin: 0 0 1.25rem -10px;
  max-width: none;
}

.carProm-v2 .carProm-list .slick-prev {
  order: 1;
  background-color: var(--color-red);
}
.carProm-v2 .carProm-list .slick-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}
.carProm-v2 .carProm-list .slick-arrow::after {
  width: 40px;
  height: 40px;
  display: block;
}
.carProm-v2 .carProm-list .slick-prev::after {
  content: url(../img/icons/arrow-left-white.svg);
}
.carProm-v2 .carProm-list .slick-next::after {
  content: url(../img/icons/arrow-right-white.svg);
}
.carProm-v2 .carProm-list .slick-prev img,
.carProm-v2 .carProm-list .slick-next img {
  display: none;
}
.carProm-v2 .carProm-list .slick-next {
  order: 2;
  background-color: var(--color-red);
}
.carProm-v2 .carProm-list .slick-dots {
  order: 4;
  width: auto;
  position: inherit;
  bottom: 0;
  display: flex;
  gap: 6px;
  margin: 0 0 0 1.25rem;
}
.carProm-v2 .carProm-list .slick-dots li button {
  padding: 0;
  width: auto;
  height: auto;
}
.carProm-v2 .carProm-list .slick-dots li {
  margin: 0;
  width: auto;
  height: 30px;
  display: flex;
  align-items: center;
}
.carProm-v2 .carProm-list .slick-dots li button::before {
  background: var(--color-red);
  opacity: 0.2;
}
.carProm-v2 .carProm-list .slick-dots .slick-active button::before {
  opacity: 1;
}
.carProm-list {
  width: 100%;
  max-width: 1180px;
  padding: 1rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin: 0 auto;
  gap: 1.25rem;
}
.carProm-list .carProm-list__card {
  margin: 0 10px;
  transition: width 0.3s ease;
}
.carProm-v2 .carProm-list__card .card-content {
  width: 100%;
  box-sizing: border-box;
  max-width: 300px;
  margin: 0 auto;
  border-radius: 10px;
  background: var(--color-white);
  box-shadow: 0px 0px 10px var(--bg-shadow);
  overflow: hidden;
}
.carProm-list__card .card-content {
  width: 100%;
  box-sizing: border-box;
  max-width: 300px;
  margin: 15px auto;
  border-radius: 10px;
  background: var(--color-white);
  box-shadow: 0px 0px 10px var(--bg-shadow);
}
.card-content .card-image {
  margin: 0;
  padding: 0.938rem 0.938rem 0.625rem;
  border-radius: 0;
  background: #f1f2f2;
}
.carProm-v2 .card-content .card-image {
  margin: 0;
  padding: 0.938rem 0.938rem 0.625rem;
  border-radius: 0;
  background: none;
}
.card-content .card-image .image-content {
  border-radius: 10px;
  overflow: hidden;
  margin: 0 auto 0.938rem;
}
.card-content .card-text {
  margin: 0;
  padding: 0.625rem 0.938rem 1.25rem;
  font-weight: 300;
  color: #6d6e71;
}
.carProm-v2 .card-content .card-text {
  margin: 0;
  padding: 0.625rem 0.938rem 0;
  font-weight: 300;
  color: #6d6e71;
  font-size: 0.763rem;
}
.card-text .text-wrapper {
  margin: 0 0 1.25rem;
}
.card-text .btn--icon {
  font-weight: 800;
  margin: 0 0 0 auto;
  display: block;
  border-radius: 0;
  padding: 0.313rem 0.938rem;
}
.carProm-v2 .card-content .btn--icon {
  font-weight: 800;
  display: block;
  width: 100% !important;
  border-radius: 0 0 10px 10px;
  padding: 0.313rem 0.938rem;
}
.card-content .card-image .card-title {
  color: var(--color-purple);
}
/* A tu medida */
.custom .myCard-list .element-text {
  padding: 1.625rem 1.25rem;
}
@media screen and (min-width: 420px) {
  .tab-list {
    max-width: 390px;
    margin: 0 auto;
    justify-content: space-between;
    gap: 8%;
  }
  .tab-list--vertical {
    padding: 0;
  }
  .tab-list .tab-list__element {
    width: 46%;
    max-width: none;
    margin: 0 0 8%;
  }
}

@media screen and (min-width: 540px) {
  .msi-title {
    max-width: 320px;
  }

  .msi-list .msi-list__element {
    width: 100%;
    display: flex;
    max-width: 320px;
    align-items: center;
  }

  .msi-list .msi-list__element .msi-logo {
    width: 45%;
  }

  .msi-list__element .msi-info {
    text-align: left;
    width: 55%;
  }

  .access-list {
    display: flex;
    flex-wrap: wrap;
  }

  .access-list .access-list__option {
    width: 50%;
    margin: 0;
  }

  .view .view-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
  }

  .view .view-head h3 {
    margin: 0;
  }

  .myCard-list .card-list__element {
    display: flex;
    width: 100%;
    max-width: 500px;
    transition: all 0.3s ease-in;
    /* margin: 0; */
  }

  .myCard-list .element-image {
    width: 30%;
    transition: all 0.3s ease-in;
    aspect-ratio: 170/245;
    border-radius: 8px 0 0 8px;
    max-width: 170px;
  }

  .myCard-list .element-text {
    width: 70%;
    padding: 1.625rem 1.25rem;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .myCard-list .element-text a {
    margin: auto 0 0 auto;
  }
  .ref-content p br {
    display: block;
  }
}
@media screen and (min-width: 614px) {
  .viewCard-list__element {
    width: 98%;
    gap: 1.25rem;
    margin: 0 0 0.625rem;
    flex-direction: row;
    gap: min(5%, 1.125rem);
  }
  .viewCard-list__element .element-image {
    width: 45%;
    margin: 0;
    border-radius: 0.5rem 0 0 0.5rem;
  }
  .viewCard-list__element .element-text {
    text-align: left;
  }
  .viewCard-list__element .element-action {
    margin: 0;
    border-top: none;
    border-left: 1px solid var(--border-color-navcalc);
    padding: 0 0.625rem 0;
  }
  .prom-slider .viewCard-list__element {
    flex-direction: row;
  }
  .prom-slider .viewCard-list__element .element-image {
    width: 20%;
    height: 100%;
  }
  .prom-slider .viewCard-list__element .element-image {
    width: 25%;
    height: 100%;
  }
}
@media screen and (min-width: 690px) {
  .carProm-v2 .carProm-list .carProm-list__card {
    margin: 0;
  }
  .carProm-v2 {
    max-width: 650px;
    display: flex;
    gap: 2em;
    max-width: none;
  }
  .carProm-v2 .carProm-text .text-title {
    font-size: clamp(1.2rem, 1.5vw, 1.6rem);
  }
  .carProm-v2 .carProm-text {
    width: 35%;
    min-width: 200px;
    margin: 0;
  }
  .carProm-v2 .carProm-slider {
    width: 65%;
  }
  .carProm-v2 .carProm-list .carProm-list__card {
    margin: 0 10px;
  }
  .viewCard-list__element .element-action {
    padding: 0 1.25rem 0;
  }
  .active-ac {
    flex-direction: row;
    gap: 0.313rem;
  }
  .achiev-cont .achiev-col {
    width: 50%;
    margin: 0;
  }
  .view-achievments .achievment {
    max-height: initial;
  }
}
@media screen and (min-width: 714px) {
  .dashboard .hero {
    display: flex;
    background: none;
  }
  .sliderHero {
    flex-direction: row;
    width: 100%;
    height: auto;
    justify-content: space-between;
  }
  .sliderHero .sliderHero-text {
    width: 60%;
    padding: 0 10%;
    height: 100%;
    justify-content: center;
    min-height: initial;
    order: 1;
  }
  .sliderHero .sliderHero-text > div{
    margin: 0;
  }

  .sliderHero .sliderHero-image {
    width: 100%;
    order: 2;
    height: 100%;
  }
  .sliderHero .sliderHero-image picture {
    height: 100%;
  }
  .sliderHero .sliderHero-image picture img {
    object-fit: cover;
    object-position: center;
  }
  .sliderHero-text h1 {
    font-size: clamp(1.5rem, 2vw, 1.875rem);
  }
  .sliderHero-text p {
    font-size: clamp(1rem, 2vw, 1.125rem);
  }
}
@media screen and (min-width: 768px) {
  .menu-list__option a:hover {
    background-color: var(--bg-gray03);
  }
  .carrusel-content .slider {
    max-width: initial;
  }
  .steps .steps-list {
    display: flex;
    justify-content: center;
    max-width: 750px;
    margin: 0 auto;
  }

  .step-list__element {
    width: 100%;
    margin: 0;
  }
  .step-list__element:nth-child(1):after,
  .step-list__element:nth-child(2):after {
    content: "";
    position: absolute;
    top: calc(1.813rem / 2);
    display: flex;
    aspect-ratio: 1/1;
    width: 8rem;
    height: 1px;
    left: 75%;
  }
  .promsMSI-content {
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
  }

  .promsMSI-text {
    text-align: left;
    width: 55%;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    margin: 0 0 0 auto;
  }

  .promsMSI-text h2 {
    text-align: left;
    font-size: 1.75rem;
  }

  .promsMSI-image {
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    margin: 0 10% 0 0;
    z-index: -1;
  }

  .promsMSI-image picture {
    margin: 0;
  }

  #modal-msi .msi {
    max-width: 710px;
  }

  .msi .msi-title {
    max-width: none;
  }

  .msi-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
  }

  .msi-list .msi-list__element {
    width: 48%;
    margin: 0;
  }

  #modal-cards .modal-content {
    padding: 2.5rem 3.125rem;
  }

  .tab-menu {
    justify-content: flex-start;
  }

  .tab-list {
    max-width: none;
    margin: 0 auto;
    justify-content: flex-start;
    gap: 3.7%;
  }

  .tab-list .tab-list__element {
    width: 24.4%;
    max-width: none;
    margin: 0 0 3.7%;
  }

  .views-content {
    margin: 0 auto;
  }

  .adMenu .btn:hover {
    box-shadow: inset 0 0 0 100px var(--color-red);
    color: var(--color-white);
    transition: all 0.4s ease-in;
  }

  .view {
    padding: 1.875rem 2.188rem;
  }
  .view .prom-slider .arrow-left,
  .view .prom-slider .arrow-right {
    display: block;
  }

  .achievment-card {
    display: flex;
    max-width: 990px;
    margin: 0 0 1.625rem;
  }

  .achievment-card .achievment-percent {
    width: 35%;
  }

  .achievment-card .achievment-tab {
    width: 65%;
  }

  .achievment-tab .tab-content {
    padding: 0;
  }

  .myCard-list .element-text .link:hover {
    box-shadow: inset 0 0 0 1px var(--color-red);
    text-decoration: none;
    border-radius: 5px;
    transition: box-shadow 0.3s ease-in;
  }

  .btn-config {
    position: relative;
    min-width: 30px;
    right: 0;
    margin-left: 10px;
    transition: all 0.3s ease-in;
  }

  .link-act:hover {
    background: #f4f7f8;
    transition: all 0.3s ease-in;
  }

  .action-copy,
  .action-share {
    position: relative;
  }

  .action-share:hover:before,
  .action-copy:hover:before {
    content: "Copiar";
    width: 3.75rem;
    height: 3rem;
    background-image: url(../img/icons/icon-globo.svg);
    background-position: center 2px;
    background-repeat: no-repeat;
    background-size: 90%;
    color: #5b6670;
    font-size: 13px;
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in;
  }
  .action-share:hover:before {
    content: "Compartir";
    width: 5rem;
    background-image: url(../img/icons/icon-globo-big.svg);
    background-size: 100% 3rem;
  }
  .action-copy:focus::before {
    display: none;
  }

  .link-content {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .link-content .link-actions {
    width: auto;
    order: 2;
  }

  .link-content .link-personal {
    width: 100%;
  }
  .tab-result span {
    display: block;
    margin-left: min(20%, 100px);
  }
  .myCard-content .tab-menu .tab-option {
    width: 180px;
    min-width: 180px;
    max-height: 127px;
  }
  .carProm-v2 .carProm-text {
    width: 37%;
  }
  .carProm-v2 .carProm-slider {
    width: 63%;
  }
}

@media screen and (min-width: 890px) {
  .cards-list {
    display: flex;
    justify-content: center;
    gap: 1.563rem;
  }

  .cards-list .card-list__element {
    margin: 0;
  }

  .view {
    width: 100%;
  }

  .achievment > p br {
    display: initial;
  }

  .myCard-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
  }

  .myCard-list .card-list__element {
    width: calc(50.5% - 1.25rem);
    margin: 0;
    max-width: none;
  }
  .carProm-v2 {
    gap: 3rem;
  }
  .carProm-v2 .carProm-text {
    width: 23%;
  }
  .carProm-v2 .carProm-slider {
    width: 77%;
  }
}
@media screen and (min-width: 1024px) {
  .link--black:hover {
    color: var(--color-red);
  }
  .hero-content .container {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
  }
  .hero-content h1 br {
    display: block;
  }
  .hero-content .hero-form,
  .hero-content .hero-image {
    margin: 0;
  }
  .hero-content .hero-image {
    order: 2;
  }

  .hero-content .hero-form {
    padding: 0;
  }
  .hero-form .login {
    transform: none;
  }
  .container {
    max-width: 1240px;
  }
  .step-list__element .step-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0.625rem;
  }
  .step-list__element .step-content .element-icon {
    margin: 0;
  }
  .step-list__element .step-content p {
    text-align: left;
  }
  .menu-frame {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    flex-direction: row;
  }
  .col-right {
    width: 100%;
  }
  .col-right div,
  .col-right section {
    box-sizing: border-box;
  }
  .side-menu .close-btn {
    display: none;
  }
  .side-content {
    width: 100%;
    padding: 0 0 1.25rem;
  }
  .side-menu {
    position: sticky;
    width: 290px;
    opacity: 1 !important;
    background: none;
    transition: width 0.5s ease, right 0.3s ease;
  }
  .wrap {
    width: 130px;
    transition: width 0.5s ease;
  }
  .menu .menu-content {
    height: 100%;
    background: var(--color-white);
  }
  .change-image img {
    width: 20px;
  }
  .menu-profile .profile-picture:hover .change-image .change-content {
    background-color: rgba(50, 62, 72, 0.5);
    animation: showCenter 0.3s ease-in;
  }
  .menu-profile .link:hover {
    box-shadow: inset 0 0 0 1px var(--color-red);
    transition: all 0.3s ease-in;
    border-radius: 6px;
    text-decoration: none;
  }
  .link:hover {
    text-decoration: underline;
    transition: all 0.3s ease-in;
  }

  .btn--red:hover {
    background-color: #b3001e;
    transition: all 0.5s ease-in;
  }
  .btn--outline-bk:hover {
    box-shadow: inset 0 0 0 1px var(--color-red);
    color: var(--color-red);
    transition: all 0.3s ease-in;
  }

  .mobile-menu {
    display: none;
  }

  .navbar-logo picture {
    width: 280px;
  }

  .navbar-menu {
    display: block;
    position: inherit;
    margin: 0 0 0 auto;
  }

  .navbar-menu .navbar-list {
    display: flex;
    gap: 15px;
    margin: 0 30px 0 0;
  }

  .icons-list__element:nth-child(1),
  .icons-list__element:nth-child(2),
  .icons-list__element:nth-child(4) {
    display: block;
  }

  .modal-content {
    max-width: 600px;
  }

  .card-text .link:hover,
  .add .link:hover {
    box-shadow: inset 0 0 0 1px var(--color-red);
    text-decoration: none;
    transition: all 0.3s ease-in;
  }

  #modal-msi .msi {
    max-width: none;
  }

  .msi-list .msi-list__element {
    width: 31.5%;
    max-width: none;
  }

  .filter .filter-list {
    left: -1rem;
    transform: translateX(0);
    transition: all 0.3s ease;
  }

  .access-list__option:hover {
    background-color: var(--bg-gray);
    transition: all 0.3s ease-in;
  }
  .desktop {
    display: flex !important;
  }
  .mobile {
    display: none !important;
  }
  .car .container {
    max-width: 1480px;
  }
  .submenu-list.show {
    min-width: 270px;
    left: 100%;
    opacity: 1;
  }
  .submenu-list__option a:hover {
    background: var(--bg-gray03);
  }
  .submenu-list__option a span {
    margin-left: 1.5rem;
  }
  .submenu-list__option a:hover span {
    font-weight: 800;
  }
  .view {
    max-width: none;
  }
  .views-panels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
  }
  .viewCards-list {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.625rem;
  }
  .viewCard-list__element {
    margin: 0;
  }
  .view .prom-slider .viewCard-list__element {
    width: 45%;
    min-width: 45%;
  }
  .viewCard-list__element .element-text {
    padding: 0.625rem 0;
  }
  .viewCard-list__element .element-action {
    padding: 0 0.938rem 0;
  }
  .view-progress,
  .view-achievments {
    width: calc(50% - 0.313rem);
    margin: 0;
  }
  .view-refers .view-body {
    display: flex;
    align-items: center;
    gap: 1.875rem;
    text-align: left;
  }
  .view-refers .view-body picture {
    max-width: 120px;
    margin: 0;
  }
  .view-refers .view-body h3 {
    margin: 0;
    width: 40%;
    text-align: left;
  }
  .view-refers .view-body h3 br {
    display: initial;
  }
  .view-refers .view-body .btn {
    margin-left: auto;
  }
}

@media screen and (min-width: 1240px) {
  .view-promCards,
  .view-promFit {
    width: 100%;
  }

  .sliderHero-list__element .sliderHero-image picture {
    max-width: 550px;
  }
  .view {
    max-width: initial;
  }
}
/* Formulario de registro */
.register {
  margin: 1.563rem 0;
}
.register .title {
  margin: 0 0 1.875rem;
}
.register .form .field {
  margin: 0 0 1.875rem;
}
.register .form .field-tooltip {
  display: flex;
  gap: 0.625rem;
  align-items: center;
}
.register .form .field-tooltip .tooltip {
  position: relative;
  width: 1.188rem;
  height: 1.188rem;
  cursor: help;
}
.register .form .field-tooltip .tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 50%;
  border-style: solid;
  border-width: 0 0.625rem 0.625rem 0;
  border-color: transparent var(--border-color-banner) transparent transparent;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in;
}
.register .form .field-tooltip .tooltip .tooltip-text {
  position: absolute;
  min-width: 200px;
  right: 50%;
  bottom: 150%;
  display: block;
  background: var(--border-color-banner);
  padding: 0.625rem 0.938rem;
  border-radius: 0.688rem 0.688rem 0 0.688rem;
  font-size: 0.813rem;
  color: var(--color-gray);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in;
}
.register .form .field-tooltip .tooltip:hover::after,
.register .form .field-tooltip .tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}
.register .form .field-tooltip .tooltip:hover .st0-circle {
  fill: var(--color-black);
}
.field-captcha {
  display: flex;
  align-items: center;
  padding: 0.625rem 0.313rem;
  border-radius: 0.313rem;
  border: 2px solid var(--border-color-banner);
  gap: 0.625rem;
  font-size: 0.7rem;
  max-width: 200px;
  box-sizing: border-box;
  width: 100%;
  margin: 1.25rem auto;
  background: #f9f9f9;
}
.field-captcha p {
  margin: 0;
  letter-spacing: -0.05em;
}
.field-captcha .icon {
  width: 2.375rem;
  margin-left: auto;
}
.register .legend a {
  color: var(--color-red);
}
.register .legend a:visited {
  color: var(--color-red);
}
.register .actions {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
}
.register .btn {
  width: 90% !important;
  max-width: 150px;
}
@media screen and (min-width: 514px) {
  .register .actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
}
.input-check {
  position: relative;
  display: flex;
  aspect-ratio: 1/1;
  width: 1rem;
}
.input-check input[type="checkbox"] {
  cursor: pointer;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
}
.option-icon {
  display: flex;
  aspect-ratio: 1/1;
}
/* Modal contrasena */

#modal-pass .modal-content {
  align-self: center;
  padding: 1.25rem 1.25rem 3.125rem;
  text-align: center;
}
#modal-pass .pass-content .content-icon {
  width: 96px;
  margin: 0 auto 1.25rem;
}
#modal-pass .pass-content .title {
  font-size: clamp(1rem, 2vw, 1.25rem);
  margin: 0 auto 1.25rem;
}
#modal-pass .pass-content p {
  font-size: 1rem;
  max-width: 370px;
  margin: 0 auto 2.5rem;
}
#modal-pass .pass-content .form {
  max-width: 370px;
  margin: 0 auto;
}
#modal-pass .pass-content .form .field {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  margin: 0 auto 1.25rem;
}
#modal-pass .pass-content .form .form-actions {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  justify-content: center;
}
#modal-pass .pass-content .form .form-actions input {
  min-width: 130px;
}
.open-all:hover {
  background: #f4f7f8;
  border-radius: 6px;
}
.open-all .tooltip {
  position: absolute;
  opacity: 0;
  bottom: 130%;
  background: #f4f7f8;
  padding: 10px;
  border-radius: 5px;
  box-sizing: border-box;
  color: #5B6670;
}
.open-all .tooltip::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #f4f7f8;
  top: 100%;
  right: calc(50% - 8px);
}
.open-all:hover .tooltip {
  opacity: 1;
}
@media screen and (min-width: 768px) {
  .register .form {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
  }
  .register .form .field {
    width: 48%;
  }
  .register .form .field-tooltip .tooltip .tooltip-text {
    left: 50%;
    right: 0;
    z-index: 2;
    border-radius: 0.688rem 0.688rem 0.688rem 0;
  }
  .register .form .field-tooltip .tooltip::after {
    left: 50%;
    right: 0;
    border-width: 0.625rem 0.625rem 0 0;
    border-color: var(--border-color-banner) transparent transparent transparent;
  }
}
@media only screen and (max-device-width: 714px) {
  .modal-content {
    margin: 2rem 0 2rem;
  }
}
/* Estilos Home */
@keyframes showUp {
  from {
    opacity: 0;
    margin-top: 20px;
  }

  to {
    opacity: 1;
    margin-top: 0;
  }
}
@keyframes showDown {
  from {
    opacity: 1;
    margin-top: 0;
  }

  to {
    opacity: 0;
    margin-top: 20px;
  }
}

@keyframes showLeft {
  from {
    opacity: 0;
    transform: translateX(-25px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes showCenter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes hide {
  from {
    opacity: 1;
    margin-top: 0;
    padding: 8px 19px;
  }

  to {
    opacity: 0;
    margin-top: 20px;
    padding: 0;
  }
}