/* ============================================
   QUOTES — Section 4 (Horizontal Scroll) & Section 6 (Lyrics Intermission)
   ============================================ */

/* ---- SECTION 4: Quote + Media Split (Horizontal Collage) ---- */
.quote-split {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: #2c34b5;
}

.quote-split::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 30% 90%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 52%),
    radial-gradient(80% 70% at 75% 10%, rgba(77, 101, 255, 0.24) 0%, rgba(77, 101, 255, 0) 56%),
    linear-gradient(180deg, rgba(46, 54, 192, 0.34) 0%, rgba(42, 49, 175, 0.42) 100%);
}

.quote-split__bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.quote-split__bg-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.76;
  filter: saturate(1.08) contrast(1.08);
}

.quote-split__bg-clouds {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.quote-split__bg-cloud {
  position: absolute;
  object-fit: contain;
  opacity: 0.9;
  mix-blend-mode: screen;
  will-change: transform;
}

.quote-split__bg-cloud--left {
  left: 0vw;
  bottom: 2vh;
  width: clamp(1080px, 86vw, 1680px);
}

.quote-split__bg-cloud--right {
  right: -12vw;
  bottom: 1vh;
  width: clamp(860px, 70vw, 1380px);
}

.quote-split__clouds {
  position: absolute;
  left: 0;
  bottom: -2vh;
  width: 280vw;
  height: 44vh;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
  display: none;
}

.quote-split__clouds img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  opacity: 0.66;
}

.quote-split__strip {
  position: relative;
  z-index: 3;
  width: 236vw;
  height: 100svh;
  will-change: transform;
}

.quote-split__video {
  position: absolute;
  left: 1.5vw;
  top: 4vh;
  width: 42.5vw;
  height: 90vh;
  overflow: hidden;
}

.quote-split__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.15) contrast(1.05);
}

.quote-split__quote {
  position: absolute;
  font-family: var(--font-primary);
  font-size: clamp(0.78rem, 0.6rem + 0.35vw, 1rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.65;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  max-width: 30vw;
}

.quote-split__quote--1 {
  font-family: var(--font-primary);
  left: 51.5vw;
  top: 26vh;
}

.quote-split__quote--2 {
  left: 174vw;
  top: 21vh;
  max-width: 36vw;
  letter-spacing: 0.015em;
}

.quote-split__card {
  position: absolute;
  overflow: hidden;
}

.quote-split__card img,
.quote-split__card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.quote-split__card--concert {
  left: 157vw;
  top: 21vh;
  width: 13.5vw;
  height: 34vh;
}

.quote-split__card--gif {
  left: 152vw;
  top: 13vh;
  width: 9.5vw;
  height: auto;
  overflow: visible;
}

.quote-split__card--gif img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.quote-split__card--stamp-img {
  left: 193vw;
  top: 31vh;
  width: 29vw;
  height: 69vh;
}

.quote-split__card--stamp-img img,
.quote-split__card--stamp-img video {
  object-fit: contain; /* imagen completa visible, sin recortes */
  object-position: center center;
}

.quote-split__card--final {
  left: 88vw;
  top: 7vh;
  width: 21.5vw;
  height: 34vh;
  z-index: 4;
}

.quote-split__lyrics {
  position: absolute;
  left: 70vw;
  bottom: 27vh;
  width: 165vw;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.quote-split__lyrics-line {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: clamp(3.6rem, 1.75rem + 5.15vw, 7.9rem);
  font-weight: 700;
  font-style: normal;
  font-synthesis: none;
  color: #f6f7ff;
  line-height: 0.96;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: block;
  white-space: nowrap;
  transform: scaleX(0.53);
  transform-origin: left;
}

.quote-split__lyrics-line span {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 700;
  font-style: normal;
  font-synthesis: none;
}

.quote-split__lyrics--faded {
  color: rgba(28, 32, 122, 0.88);
}

.quote-split__lyrics-reveal {
  --quote-reveal: 0%;
  display: inline-block;
  color: transparent;
  background-image: linear-gradient(
    90deg,
    #f6f7ff 0%,
    #f6f7ff var(--quote-reveal),
    rgba(28, 32, 122, 0.88) var(--quote-reveal),
    rgba(28, 32, 122, 0.88) 100%
  );
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}

.quote-split__stamp {
  position: absolute;
  left: 95vw;
  top: 8vh;
  width: 64px;
  height: 64px;
  display: block;
  z-index: 8;
}

.quote-split__stamp-star {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.quote-split__stamp-ring {
  width: 100%;
  height: 100%;
  will-change: transform;
}

.quote-split__stamp-ring svg {
  width: 100%;
  height: 100%;
}

.quote-split__stamp-ring text {
  font-family: var(--font-primary);
  font-size: 8px;
  font-weight: 700;
  fill: #f7f9ff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.quote-split__deco {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  will-change: transform;
}

.quote-split__deco img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.quote-split__deco--metaball {
  width: clamp(132px, 11.5vw, 196px);
  left: 38.5vw;
  bottom: 18vh;
  z-index: 7;
}

.quote-split__deco--silueta1 {
  width: clamp(184px, 15.5vw, 300px);
  top: 22vh;
  left: 200vw;
}

.quote-split__deco--silueta2 {
  width: clamp(236px, 22.5vw, 390px);
  bottom: 5vh;
  left: 94vw;
}

.quote-split__deco--texto {
  width: clamp(130px, 11vw, 210px);
  top: 58vh;
  left: 2vw;
  opacity: 0.9;
}

.quote-split__deco--extra {
  width: clamp(152px, 12vw, 214px);
  top: 7vh;
  left: 198vw;
}

.quote-split__sparkle {
  position: absolute;
  pointer-events: none;
  z-index: 7;
  will-change: transform;
  width: clamp(22px, 2.1vw, 34px);
  height: clamp(22px, 2.1vw, 34px);
  object-fit: contain;
}

.quote-split__sparkle--1 {
  left: 208vw;
  top: 38vh;
  width: clamp(54px, 4.6vw, 78px);
  height: clamp(54px, 4.6vw, 78px);
}

.quote-split__sparkle--2 {
  left: 154vw;
  top: 35vh;
  opacity: 0.001;
}

.quote-split__sparkle--3 {
  left: 108vw;
  top: 17vh;
  opacity: 0.001;
}

.quote-split__sparkle--4 {
  left: 118vw;
  bottom: 9vh;
  width: clamp(58px, 5vw, 88px);
  height: clamp(58px, 5vw, 88px);
}

.quote-split__sparkle--quote {
  left: 51vw;
  top: 18.5vh;
  width: clamp(60px, 4.3vw, 82px);
  height: clamp(60px, 4.3vw, 82px);
}

@media (min-width: 1600px) and (max-width: 1799px) and (min-aspect-ratio: 16/10) {
  .quote-split__strip {
    width: 228vw;
  }

  .quote-split__lyrics {
    left: 68vw;
  }

  .quote-split__quote--2 {
    left: 171vw;
  }

  .quote-split__card--gif {
    left: 149vw;
  }

  .quote-split__card--concert {
    left: 154vw;
  }

  .quote-split__card--stamp-img {
    left: 189vw;
    top: 30vh;
  }

  .quote-split__card--final {
    left: 86vw;
  }

  .quote-split__deco--silueta1 {
    left: 196vw;
    top: 23vh;
  }

  .quote-split__sparkle--1 {
    left: 209vw;
  }

  .quote-split__sparkle--4 {
    left: 115vw;
  }
}

@media (min-width: 1800px) and (min-aspect-ratio: 16/10) {
  .quote-split__strip {
    width: 222vw;
  }

  .quote-split__lyrics {
    left: 66vw;
  }

  .quote-split__quote--2 {
    left: 168vw;
  }

  .quote-split__card--gif {
    left: 146vw;
  }

  .quote-split__card--concert {
    left: 151vw;
  }

  .quote-split__card--stamp-img {
    left: 185vw;
    top: 29vh;
  }

  .quote-split__card--final {
    left: 84vw;
  }

  .quote-split__deco--silueta1 {
    left: 191vw;
    top: 23vh;
  }

  .quote-split__sparkle--1 {
    left: 204vw;
  }

  .quote-split__sparkle--4 {
    left: 112vw;
  }
}

@media (max-width: 768px) {
  .quote-split {
    height: 100svh;
    min-height: 100svh;
    margin-top: -1px;
    padding: 0;
    overflow: hidden;
    background:
      linear-gradient(
        180deg,
        #15226e 0%,
        #2430a2 18%,
        #2c34b5 100%
      );
  }

  .quote-split__deco {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .quote-split__sparkle {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .quote-split::before {
    background:
      linear-gradient(180deg, rgba(21, 34, 110, 0.92) 0%, rgba(44, 52, 181, 0) 18%),
      radial-gradient(120% 90% at 30% 90%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 52%),
      radial-gradient(80% 70% at 75% 10%, rgba(77, 101, 255, 0.24) 0%, rgba(77, 101, 255, 0) 56%),
      linear-gradient(180deg, rgba(46, 54, 192, 0.34) 0%, rgba(42, 49, 175, 0.42) 100%);
  }

  .quote-split__strip {
    width: 430vw;
    height: 100svh;
    margin: 0;
    padding: 0;
    display: block;
  }

  .quote-split__video {
    position: absolute;
    left: 3vw;
    top: 10svh;
    width: 78vw;
    height: 72svh;
    border-radius: 1.25rem;
  }

  .quote-split__quote {
    max-width: 58vw;
    margin: 0;
    font-size: 0.66rem;
    line-height: 1.5;
  }

  .quote-split__quote--1 {
    left: 88vw;
    top: 18svh;
  }

  .quote-split__lyrics {
    left: 122vw;
    bottom: 22svh;
    width: 250vw;
    margin: 0;
  }

  .quote-split__lyrics-line {
    font-size: clamp(2.8rem, 12vw, 5rem);
    white-space: nowrap;
    transform: scaleX(0.62);
    line-height: 0.92;
  }

  .quote-split__stamp {
    left: 214vw;
    top: 11svh;
    width: 58px;
    height: 58px;
    margin: 0;
  }

  .quote-split__card--gif {
    left: 288vw;
    top: 18svh;
    width: 22vw;
  }

  .quote-split__card--concert {
    left: 304vw;
    top: 24svh;
    width: 36vw;
    height: 26svh;
    border-radius: 1rem;
  }

  .quote-split__card--stamp-img {
    left: 348vw;
    top: 24svh;
    width: 72vw;
    height: 52svh;
  }

  .quote-split__card--final {
    left: 226vw;
    top: 12svh;
    width: 44vw;
    height: 28svh;
    border-radius: 1rem;
    z-index: 4;
  }

  .quote-split__quote--2 {
    left: 336vw;
    top: 14svh;
    max-width: 62vw;
    letter-spacing: 0.015em;
  }

  .quote-split__deco--metaball {
    display: block;
    width: 28vw;
    left: 94vw;
    bottom: 36svh;
  }

  .quote-split__deco--silueta1 {
    display: block;
    width: 36vw;
    left: 390vw;
    top: 18svh;
  }

  .quote-split__deco--silueta2 {
    display: block;
    width: 46vw;
    left: 232vw;
    bottom: 8svh;
  }

  .quote-split__deco--texto {
    display: none;
  }

  .quote-split__sparkle--quote {
    display: block;
    left: 114vw;
    top: 20svh;
    width: 14vw;
    height: 14vw;
  }

  .quote-split__sparkle--1 {
    display: block;
    left: 398vw;
    top: 34svh;
    width: 16vw;
    height: 16vw;
  }

  .quote-split__sparkle--4 {
    display: block;
    left: 254vw;
    bottom: 14svh;
    width: 15vw;
    height: 15vw;
  }

  .quote-split__bg-cloud--left {
    left: -12vw;
    bottom: 11svh;
    width: 40vw;
    opacity: 0.55;
  }

  .quote-split__bg-cloud--right {
    right: -16vw;
    bottom: 8svh;
    width: 44vw;
    opacity: 0.5;
  }

  .quote-split__card {
    position: absolute;
    overflow: hidden;
    border-radius: 1rem;
  }

  .quote-split__card--gif,
  .quote-split__card--gif img {
    border-radius: 0;
  }

  .quote-split__sparkle--2,
  .quote-split__sparkle--3 {
    display: none;
  }
}


/* ---- SECTION 6: Quotes / Lyrics Intermission ---- */
.quotes-intermission {
  position: relative;
  overflow: hidden;
}

.quotes-intermission__slide {
  position: relative;
  min-height: 80svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.quotes-intermission__slide:nth-child(1) {
  background: linear-gradient(
    180deg,
    var(--color-primary-dark) 0%,
    var(--color-primary) 50%,
    #1a1f6e 100%
  );
}

.quotes-intermission__slide:nth-child(2) {
  background: linear-gradient(
    180deg,
    #1a1f6e 0%,
    var(--color-black) 100%
  );
}

.quotes-intermission__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.quotes-intermission__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
}

.quotes-intermission__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: var(--space-16) var(--section-pad-x);
  max-width: 900px;
}

.quotes-intermission__text {
  font-family: var(--font-primary);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
}

.quotes-intermission__text span {
  display: block;
}

.quotes-intermission__divider {
  width: 60px;
  height: 2px;
  background: var(--color-white);
  opacity: 0.3;
  margin: var(--space-6) auto;
}

/* Parallax / fade-in on scroll */
.quotes-intermission__content {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}

.quotes-intermission__slide.is-visible .quotes-intermission__content {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
  .quotes-intermission__slide {
    min-height: 60svh;
  }

  .quotes-intermission__content {
    padding: var(--space-8) var(--space-6);
  }
}