#formatos-repertorio {
  --formatos-wine: #1b050d;
  --formatos-wine-deep: #09050b;
  --formatos-ivory: #f2e4d0;
  --formatos-coral: #f14a36;
  --formatos-jade: #51ce8b;
  --formatos-gold: #e5a42d;
  --formatos-blue: #134ac8;
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  height: 100svh;
  min-width: 320px;
  min-height: 100svh;
  place-items: stretch;
  overflow: hidden;
  color: var(--formatos-ivory);
  background:
    radial-gradient(circle at 50% 42%, rgba(40, 7, 18, .62), transparent 52%),
    var(--formatos-wine-deep);
  font-family: Arial, "Segoe UI", sans-serif;
  color-scheme: dark;
  scroll-margin-top: 0;
}

#formatos-repertorio,
#formatos-repertorio *,
#formatos-repertorio *::before,
#formatos-repertorio *::after {
  box-sizing: border-box;
}

#formatos-repertorio .formatos-repertorio__artboard {
  position: relative;
  isolation: isolate;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  container-type: inline-size;
  background: var(--formatos-wine-deep);
}

#formatos-repertorio .formatos-repertorio__backdrop,
#formatos-repertorio .formatos-repertorio__backdrop img,
#formatos-repertorio .formatos-repertorio__mobile-continuation,
#formatos-repertorio .formatos-repertorio__mobile-continuation img,
#formatos-repertorio .formatos-repertorio__mobile-continuation-veil,
#formatos-repertorio .formatos-repertorio__wash,
#formatos-repertorio .formatos-repertorio__qa-reference {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#formatos-repertorio .formatos-repertorio__backdrop {
  z-index: 0;
}

#formatos-repertorio .formatos-repertorio__backdrop img {
  object-fit: cover;
  object-position: 50% 50%;
}

#formatos-repertorio .formatos-repertorio__mobile-continuation,
#formatos-repertorio .formatos-repertorio__mobile-continuation-veil {
  display: none;
}

#formatos-repertorio .formatos-repertorio__wash {
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 14% 28%, rgba(7, 3, 9, .13), transparent 30%),
    radial-gradient(ellipse at 87% 56%, rgba(7, 3, 9, .18), transparent 29%),
    linear-gradient(180deg, rgba(6, 3, 8, .04), transparent 60%, rgba(6, 3, 8, .12));
}

#formatos-repertorio .formatos-repertorio__headline,
#formatos-repertorio .formatos-repertorio__group,
#formatos-repertorio .formatos-repertorio__together {
  position: absolute;
  z-index: 3;
  margin: 0;
  text-shadow: 0 .09em .32em rgba(3, 2, 5, .58);
}

#formatos-repertorio h2,
#formatos-repertorio h3,
#formatos-repertorio p,
#formatos-repertorio ul {
  margin: 0;
}

#formatos-repertorio ul {
  padding: 0;
  list-style: none;
}

#formatos-repertorio .formatos-repertorio__headline {
  top: 2.4%;
  left: 9.35%;
  width: 35%;
}

#formatos-repertorio .formatos-repertorio__headline h2 {
  width: 180%;
  color: var(--formatos-ivory);
  font-family: "Oswald", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(92px, 12.15cqw, 206px);
  font-weight: 610;
  letter-spacing: -.055em;
  line-height: .87;
  text-transform: uppercase;
  transform: scaleX(.5);
  transform-origin: left top;
}

#formatos-repertorio .formatos-repertorio__headline span,
#formatos-repertorio .formatos-repertorio__group h3 span,
#formatos-repertorio .formatos-repertorio__together h3 span {
  display: block;
}

#formatos-repertorio .formatos-repertorio__group h3,
#formatos-repertorio .formatos-repertorio__together h3 {
  font-family: "Oswald", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: .9;
  text-transform: uppercase;
}

#formatos-repertorio .formatos-repertorio__group li,
#formatos-repertorio .formatos-repertorio__together p {
  font-family: "Arial Narrow", "Aptos Narrow", "Segoe UI", Arial, sans-serif;
  font-weight: 650;
}

#formatos-repertorio .formatos-repertorio__presence {
  top: 39.4%;
  left: 24.35%;
  width: 15.5%;
}

#formatos-repertorio .formatos-repertorio__presence h3 {
  width: 133%;
  color: var(--formatos-jade);
  font-size: clamp(34px, 3.15cqw, 54px);
  transform: scaleX(.75);
  transform-origin: left top;
}

#formatos-repertorio .formatos-repertorio__presence ul {
  max-width: 94%;
  margin-top: clamp(10px, .82cqw, 16px);
  color: var(--formatos-ivory);
  font-size: clamp(15px, 1.32cqw, 23px);
  line-height: 1.38;
}

#formatos-repertorio .formatos-repertorio__presence li,
#formatos-repertorio .formatos-repertorio__formation li {
  display: inline;
}

#formatos-repertorio .formatos-repertorio__presence li:not(:last-child)::after,
#formatos-repertorio .formatos-repertorio__formation li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: .28em;
  aspect-ratio: 1;
  margin: 0 .28em .13em;
  border-radius: 50%;
  background: var(--formatos-coral);
  box-shadow: 0 0 .35em rgba(241, 74, 54, .35);
}

#formatos-repertorio .formatos-repertorio__formation {
  top: 5.6%;
  left: 74.2%;
  width: 22.4%;
}

#formatos-repertorio .formatos-repertorio__formation h3 {
  width: 128%;
  color: var(--formatos-jade);
  font-size: clamp(32px, 2.75cqw, 48px);
  transform: scaleX(.78);
  transform-origin: left top;
}

#formatos-repertorio .formatos-repertorio__formation ul {
  margin-top: clamp(7px, .58cqw, 11px);
  color: var(--formatos-ivory);
  font-size: clamp(14px, 1.15cqw, 21px);
  line-height: 1.35;
  white-space: nowrap;
}

#formatos-repertorio .formatos-repertorio__repertoire {
  top: 43.3%;
  left: 73.9%;
  width: 24%;
}

#formatos-repertorio .formatos-repertorio__repertoire h3 {
  width: 130%;
  color: var(--formatos-gold);
  font-size: clamp(39px, 3.25cqw, 57px);
  transform: scaleX(.77);
  transform-origin: left top;
}

#formatos-repertorio .formatos-repertorio__repertoire ul {
  display: grid;
  gap: clamp(4px, .34cqw, 7px);
  margin-top: clamp(9px, .72cqw, 14px);
  color: var(--formatos-ivory);
  font-size: clamp(14px, 1.18cqw, 21px);
  line-height: 1.3;
}

#formatos-repertorio .formatos-repertorio__repertoire li {
  position: relative;
  padding-left: 1em;
}

#formatos-repertorio .formatos-repertorio__repertoire li::before {
  content: "";
  position: absolute;
  top: .5em;
  left: 0;
  width: .34em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--formatos-coral);
  box-shadow: 0 0 .35em rgba(241, 74, 54, .35);
}

#formatos-repertorio .formatos-repertorio__together {
  top: 65.2%;
  left: 60.5%;
  width: 36.3%;
}

#formatos-repertorio .formatos-repertorio__together h3 {
  color: var(--formatos-coral);
  font-size: clamp(51px, 4.55cqw, 78px);
  line-height: .96;
}

#formatos-repertorio .formatos-repertorio__together p {
  margin-top: clamp(19px, 1.5cqw, 27px);
  padding-left: 7.2%;
  color: #f0ad32;
  font-size: clamp(15px, 1.34cqw, 23px);
  font-style: italic;
  letter-spacing: -.015em;
  line-height: 1.28;
  text-align: center;
}

#formatos-repertorio .formatos-repertorio__qa-reference {
  z-index: 10;
  display: none;
  object-fit: fill;
  pointer-events: none;
}

#formatos-repertorio .formatos-repertorio__artboard[data-formatos-compare="overlay"] .formatos-repertorio__qa-reference {
  display: block;
  opacity: .5;
}

#formatos-repertorio .formatos-repertorio__artboard[data-formatos-compare="difference"] .formatos-repertorio__qa-reference {
  display: block;
  opacity: 1;
  mix-blend-mode: difference;
}

@media (max-width: 1099px) and (orientation: portrait) {
  #formatos-repertorio {
    display: block;
    height: auto;
    min-height: 0;
    overflow: clip;
    background: var(--formatos-wine-deep);
  }

  #formatos-repertorio .formatos-repertorio__artboard {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    padding: 110svh 0 clamp(72px, 15vw, 150px);
    overflow: hidden;
    background:
      radial-gradient(circle at 82% 2%, rgba(19, 74, 200, .17), transparent 24%),
      linear-gradient(180deg, #15050d 0, #09050b 100%);
  }

  #formatos-repertorio .formatos-repertorio__backdrop {
    bottom: auto;
    height: 100svh;
  }

  #formatos-repertorio .formatos-repertorio__backdrop img {
    object-fit: cover;
    object-position: 50% 18%;
    filter: saturate(.98) contrast(1.025) brightness(.88);
  }

  #formatos-repertorio .formatos-repertorio__mobile-continuation,
  #formatos-repertorio .formatos-repertorio__mobile-continuation-veil {
    display: block;
    top: 94svh;
    bottom: 0;
    height: auto;
  }

  #formatos-repertorio .formatos-repertorio__mobile-continuation {
    z-index: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12svh, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 12svh, #000 100%);
  }

  #formatos-repertorio .formatos-repertorio__mobile-continuation img {
    object-fit: cover;
    object-position: 50% 0;
    filter: saturate(.96) contrast(1.04) brightness(.78);
  }

  #formatos-repertorio .formatos-repertorio__mobile-continuation-veil {
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(9, 5, 11, .02) 0, rgba(9, 5, 11, .18) 21%, rgba(9, 5, 11, .06) 52%, rgba(9, 5, 11, .2) 100%),
      linear-gradient(90deg, rgba(9, 5, 11, .16), transparent 62%);
  }

  #formatos-repertorio .formatos-repertorio__wash {
    bottom: auto;
    height: 113svh;
    background:
      linear-gradient(105deg, rgba(7, 3, 9, .22) 0 48%, transparent 68%),
      linear-gradient(180deg, rgba(6, 3, 8, .02) 55%, rgba(9, 5, 11, .24) 82%, rgba(9, 5, 11, .38) 100%);
  }

  #formatos-repertorio .formatos-repertorio__headline {
    top: max(24px, 3.2svh);
    left: 6vw;
    width: 58vw;
  }

  #formatos-repertorio .formatos-repertorio__headline h2 {
    width: 126%;
    font-size: clamp(62px, 17.5vw, 118px);
    line-height: .83;
    transform: scaleX(.79);
  }

  #formatos-repertorio .formatos-repertorio__presence {
    top: 54svh;
    left: 6vw;
    width: min(57vw, 430px);
  }

  #formatos-repertorio .formatos-repertorio__presence h3 {
    width: auto;
    font-size: clamp(34px, 8.7vw, 62px);
    transform: none;
  }

  #formatos-repertorio .formatos-repertorio__presence ul {
    max-width: 100%;
    margin-top: 12px;
    font-size: clamp(15px, 3.8vw, 25px);
    line-height: 1.42;
  }

  #formatos-repertorio .formatos-repertorio__formation {
    top: 84svh;
    right: 6vw;
    left: auto;
    width: min(47vw, 360px);
    text-align: right;
  }

  #formatos-repertorio .formatos-repertorio__formation h3 {
    width: auto;
    font-size: clamp(31px, 7.7vw, 54px);
    transform: none;
  }

  #formatos-repertorio .formatos-repertorio__formation ul {
    margin-top: 9px;
    font-size: clamp(14px, 3.55vw, 23px);
    white-space: normal;
  }

  #formatos-repertorio .formatos-repertorio__repertoire,
  #formatos-repertorio .formatos-repertorio__together {
    position: relative;
    inset: auto;
    z-index: 3;
    width: auto;
    margin-right: 7vw;
    margin-left: 7vw;
  }

  #formatos-repertorio .formatos-repertorio__repertoire {
    padding-top: clamp(16px, 4vw, 38px);
  }

  #formatos-repertorio .formatos-repertorio__repertoire::before {
    content: "";
    display: block;
    width: min(36vw, 260px);
    height: 2px;
    margin-bottom: clamp(22px, 5vw, 46px);
    background: linear-gradient(90deg, var(--formatos-coral), var(--formatos-gold), transparent);
  }

  #formatos-repertorio .formatos-repertorio__repertoire h3 {
    width: auto;
    font-size: clamp(46px, 11vw, 76px);
    transform: none;
  }

  #formatos-repertorio .formatos-repertorio__repertoire ul {
    gap: clamp(9px, 2vw, 18px);
    margin-top: clamp(18px, 4vw, 34px);
    font-size: clamp(17px, 4.15vw, 28px);
    line-height: 1.34;
  }

  #formatos-repertorio .formatos-repertorio__together {
    margin-top: clamp(76px, 18vw, 160px);
    padding-top: clamp(34px, 7vw, 64px);
    border-top: 1px solid rgba(229, 164, 45, .48);
  }

  #formatos-repertorio .formatos-repertorio__together::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -24vw;
    bottom: -24vw;
    width: 78vw;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(241, 74, 54, .14), transparent 68%);
    pointer-events: none;
  }

  #formatos-repertorio .formatos-repertorio__together h3 {
    font-size: clamp(52px, 12.8vw, 88px);
    line-height: .86;
  }

  #formatos-repertorio .formatos-repertorio__together p {
    margin-top: clamp(20px, 4.6vw, 42px);
    padding-left: 0;
    font-size: clamp(17px, 4.2vw, 28px);
    line-height: 1.42;
    text-align: left;
  }

  #formatos-repertorio .formatos-repertorio__qa-reference {
    display: none !important;
  }
}

@media (max-width: 380px) and (orientation: portrait) {
  #formatos-repertorio .formatos-repertorio__presence {
    top: 56svh;
    width: 61vw;
  }

  #formatos-repertorio .formatos-repertorio__formation {
    top: 86svh;
    width: 51vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  #formatos-repertorio *,
  #formatos-repertorio *::before,
  #formatos-repertorio *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}