/* ==========================================================================
   Propio de Terminos y condiciones: la ilustracion del hero.
   La base compartida esta en legal.css.
   ========================================================================== */

.legal-page .legal-doc {
  position: relative;
  justify-self: center;
  width: min(232px, 100%);
  aspect-ratio: 232 / 272;
}
.legal-page .legal-doc__sheet {
  position: absolute;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 10px;
}
.legal-page .legal-doc__sheet--back {
  inset: 0 34px 44px 0;
  background: rgb(255 255 255 / 3%);
}
.legal-page .legal-doc__sheet--mid {
  inset: 16px 16px 24px 16px;
  background: rgb(255 255 255 / 5%);
}
.legal-page .legal-doc__sheet--front {
  inset: 34px 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 16px;
  border-color: rgb(255 255 255 / 55%);
  background: #fff;
  box-shadow: 0 18px 40px rgb(3 8 18 / 45%);
}
.legal-page .legal-doc__heading {
  font-size: .8125rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--legal-ink);
  margin-bottom: 4px;
}
.legal-page .legal-doc__line {
  display: block;
  height: 4px;
  border-radius: 3px;
  background: #e2e4ec;
}
.legal-page .legal-doc__line--short { width: 62%; }
.legal-page .legal-doc__sign {
  width: 76px;
  height: auto;
  margin-top: auto;
  color: var(--legal-purple);
}
.legal-page .legal-doc__check {
  position: absolute;
  right: -12px;
  bottom: 26px;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--legal-purple);
  color: #fff;
  box-shadow: 0 10px 24px rgb(113 55 232 / 40%);
}
.legal-page .legal-doc__check svg { width: 26px; height: 26px; }

.legal-page .legal-doc__tags {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}
.legal-page .legal-doc__tags li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 9px;
  background: rgb(255 255 255 / 4%);
  font-size: .75rem;
  line-height: 1.3;
  color: #dfe5f0;
}
.legal-page .legal-doc__tags b {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--legal-purple);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
}