/* Cuatro partes — carril horizontal fijado con scroll (ScrollTrigger pin). */
.parts {
  position: relative;
  z-index: var(--z-content);
  height: 100vh;
  overflow: hidden;
}
/* Sin JS el carril no se mueve: que al menos se pueda deslizar a mano (la frase puente ocupa el primer tramo) */
.no-js .parts {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.parts__head {
  position: absolute;
  top: clamp(80px, 12vh, 120px);
  left: var(--gutter);
  right: var(--gutter);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.parts__progress {
  position: relative;
  width: min(220px, 30vw);
  height: 1px;
  background: rgb(238 227 211 / 0.15);
}
.parts__bar {
  position: absolute;
  inset: 0;
  background: var(--blood);
  transform: scaleX(0);
  transform-origin: left;
}

.parts__track {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 120px);
  width: max-content;
  height: 100%;
  padding: 0 var(--gutter-wide);
}

/* Frase puente: lo primero que se lee al fijarse la sección; la elipsis empuja hacia las partes que entran por la
   derecha. Ligera y por debajo del tamaño de los títulos de parte: presenta, no compite. "cuatro partes…" no se
   parte entre líneas (inline-block; además así parts.js puede moverlo) */
.parts__intro {
  flex: none;
  width: min(72vw, 600px);
  font: var(--w-light) clamp(32px, 3.8vw, 58px) / 1.12 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--cream);
  text-wrap: balance;
}
.parts__intro em {
  display: inline-block;
  font-style: italic;
}

.part {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: min(78vw, 860px);
}
.part > :not(.part__num) { position: relative; }

/* Numeral gigante en tinta maciza, en contra-parallax. Hueco y rojo sobre rojo no se leía: ahora es la masa más oscura
   de la página (≈3:1 contra la tela donde más brilla, la silueta se recorta de lejos) y el título y el párrafo que
   pasan por encima ganan contraste en vez de perderlo (crema/tinta ≈16:1). El relleno y la luz: lit.css (data-lit-ink) */
.part__num {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-58%);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(220px, 34vw, 520px);
  line-height: 0.8;
  color: var(--ink-dark);                  /* respaldo si no hubiera background-clip: text */
  pointer-events: none;
}

.part__kicker {
  font: var(--w-semibold) 11px/1 var(--font-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blood-text);
}
.part__title {
  font: var(--w-semibold) clamp(42px, 5vw, 80px) / 1 var(--font-display);
  letter-spacing: -0.02em;
}
.part__text {
  max-width: 38ch;
  font-weight: var(--w-light);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
  color: var(--bone);
  text-wrap: pretty;
}