/*
  PrintGats — tres direcciones locales para portada + selector.
  Local: ?hero=conservative | editorial | motion. Producción: editorial.
  La composición usa los activos y las familias ya cargadas; no altera el puzle ni el scroll.
*/

.hero-story[data-hero-variant] .hero-story__headline {
  z-index: 8;
  width: min(76vw, 1180px);
  text-wrap: balance;
}

.hero-story[data-hero-variant] .hero-story__headline span {
  white-space: normal;
}

.hero-story[data-hero-variant] .hero-story__promise {
  z-index: 8;
  margin: 0;
  color: #111318;
  hyphens: auto;
  text-wrap: balance;
}

.hero-story[data-hero-variant] .hero-story__promise span:nth-child(2) {
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

/* A — conserva el comportamiento y orden actual, con un margen de lectura más firme. */
.hero-story[data-hero-variant="conservative"] .hero-story__headline {
  top: 24%;
  left: var(--pad);
  font-size: clamp(46px, 7vw, 116px);
  line-height: .8;
}

.hero-story[data-hero-variant="conservative"] .hero-story__headline span:nth-child(2) { margin-left: 3vw; }
.hero-story[data-hero-variant="conservative"] .hero-story__headline span:nth-child(3) { margin-left: 8vw; }
.hero-story[data-hero-variant="conservative"] .hero-story__promise {
  top: 23%;
  right: var(--pad);
  left: auto;
  width: min(35vw, 520px);
  font-size: clamp(38px, 4.2vw, 68px);
  line-height: .88;
  text-align: right;
}

/* B — elegante-editorial: tipografía, fotografía y una línea funcional forman un único recorrido. */
.hero-story[data-hero-variant="editorial"] .hero-story__headline {
  top: 24%;
  left: 50%;
  width: min(82vw, 1240px);
  font-size: clamp(48px, 6.9vw, 116px);
  line-height: .79;
  text-align: center;
  transform: translateX(-50%) translate3d(0, calc(var(--story-progress) * 43vh), 0) scale(calc(1 + var(--story-progress) * .045));
  transform-origin: center;
}

.hero-story[data-hero-variant="editorial"] .hero-story__headline span:nth-child(2),
.hero-story[data-hero-variant="editorial"] .hero-story__headline span:nth-child(3) { margin-left: 0; }
.hero-story[data-hero-variant="editorial"] .hero-cut,
.hero-story[data-hero-variant="editorial"][data-cut-locked] .hero-cut {
  width: min(38vw, 560px);
  height: min(68vh, 710px);
  /* Compensación óptica: la promesa queda a la izquierda, pero la masa de piezas no. */
  transform: translate(calc(-50% - 1.7vw + var(--story-shift, 0vw)), -50%) !important;
}
.hero-story[data-hero-variant="editorial"] .hero-story__promise {
  top: 52%;
  right: auto;
  left: clamp(24px, 7.4vw, 136px);
  width: min(31vw, 470px);
  font-size: clamp(42px, 4.25vw, 70px);
  line-height: .85;
  letter-spacing: -.055em;
  text-align: left;
}

.hero-story[data-hero-variant="editorial"] .hero-story__promise span:nth-child(2) {
  display: inline-block;
  margin-top: .09em;
  color: var(--accent);
}

.hero-story[data-hero-variant="editorial"] .hero-story__promise::after {
  position: absolute;
  top: 54%;
  left: calc(100% + clamp(18px, 2.3vw, 42px));
  width: clamp(58px, 9.6vw, 152px);
  height: 1px;
  background: currentColor;
  content: "";
  opacity: .52;
  transform: scaleX(clamp(.2, var(--story-progress), 1));
  transform-origin: left;
}

.hero-story[data-hero-variant="editorial"] .hero-story__promise::before {
  position: absolute;
  top: calc(54% - 3px);
  left: calc(100% + clamp(18px, 2.3vw, 42px) + clamp(58px, 9.6vw, 152px) - 6px);
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  content: "";
  opacity: .52;
  transform: rotate(45deg) scale(clamp(.2, var(--story-progress), 1));
  transform-origin: center;
}

@media (min-width: 901px) {
  .hero-story[data-hero-variant="editorial"] .hero-cut,
  .hero-story[data-hero-variant="editorial"][data-cut-locked] .hero-cut { top: 52.8%; }
}

/* C — digital/motion-first: una línea central acompaña la recomposición, sin otra escena cinética. */
.hero-story[data-hero-variant="motion"] .hero-story__headline {
  top: 23%;
  left: 50%;
  width: min(82vw, 1280px);
  font-size: clamp(46px, 7.35vw, 122px);
  line-height: .78;
  text-align: center;
  transform: translateX(-50%) translate3d(calc(var(--story-progress) * -2vw), calc(var(--story-progress) * 42vh), 0) scale(calc(1 + var(--story-progress) * .045));
  transform-origin: center;
}

.hero-story[data-hero-variant="motion"] .hero-story__headline span:nth-child(2),
.hero-story[data-hero-variant="motion"] .hero-story__headline span:nth-child(3) { margin-left: 0; }
.hero-story[data-hero-variant="motion"] .hero-story__promise {
  top: 15%;
  right: auto;
  left: 50%;
  width: min(64vw, 940px);
  font-size: clamp(40px, 4.1vw, 68px);
  line-height: .88;
  letter-spacing: -.052em;
  text-align: center;
  transform: translateX(-50%) translateY(calc(var(--story-progress) * 9vh));
}

.hero-story[data-hero-variant="motion"] .hero-story__promise::after {
  display: block;
  width: min(100%, 440px);
  height: 1px;
  margin: .45em auto 0;
  background: currentColor;
  content: "";
  opacity: .36;
  transform: scaleX(calc(.32 + var(--story-progress) * .68));
  transform-origin: center;
}

/* Sección sin numeraciones: la jerarquía queda en los propios títulos y el espacio respirado. */
.work-title > h2:first-child { margin-top: 0; }
.before-after .section-head > h2:first-child { margin-top: 0; }
.contact-minimal__intro > h2:first-child { margin-top: 0; }

/* El título cede el plano antes de que la primera tarjeta cruce su columna. */
.motion-horizontal .work-title {
  opacity: calc(1 - min(1, var(--horizontal-progress, 0) * 10));
  transform: translateY(-50%) translateX(calc(var(--horizontal-progress, 0) * -9vw));
}

/* El tramo de salida termina con el ensamblaje, no con una pantalla vacía. */
.hero-story[data-hero-variant="editorial"] { height: 160svh; }

@media (max-width: 900px) {
  .hero-story[data-hero-variant] .hero-story__headline {
    top: 26%;
    left: var(--pad);
    width: calc(100% - var(--pad) * 2);
    font-size: clamp(40px, 10.2vw, 76px);
    line-height: .8;
    text-align: left;
    transform: translate3d(0, calc(var(--story-progress) * 38vh), 0) scale(calc(1 + var(--story-progress) * .035));
    transform-origin: left center;
  }

  .hero-story[data-hero-variant] .hero-story__headline span:nth-child(2),
  .hero-story[data-hero-variant] .hero-story__headline span:nth-child(3) { margin-left: 0; }

  .hero-story[data-hero-variant] .hero-story__promise {
    top: 14%;
    right: auto;
    left: var(--pad);
    width: calc(100% - var(--pad) * 2);
    font-size: clamp(32px, 8.8vw, 58px);
    line-height: .88;
    text-align: center;
    transform: none;
  }

  .hero-story[data-hero-variant="editorial"] .hero-story__headline { left: 50%; text-align: center; transform: translateX(-50%) translate3d(0, calc(var(--story-progress) * 38vh), 0) scale(calc(1 + var(--story-progress) * .035)); transform-origin: center; }
  .hero-story[data-hero-variant="editorial"] .hero-cut,
  .hero-story[data-hero-variant="editorial"][data-cut-locked] .hero-cut { top: 53.6%; width:min(80vw,420px);height:57vh; transform: translate(-50%, -48%) !important; }
  .hero-story[data-hero-variant="editorial"] .hero-story__promise { top: 15%; }
  .hero-story[data-hero-variant="editorial"] .hero-story__promise::before,
  .hero-story[data-hero-variant="editorial"] .hero-story__promise::after { display: none; }
  .hero-story[data-hero-variant="motion"] .hero-story__promise { top: 13%; }
  .hero-story[data-hero-variant="editorial"] { height: 154svh; }
}

@media (max-width: 520px) {
  .hero-story[data-hero-variant] .hero-story__headline { top: 27%; font-size: clamp(30px, 8.2vw, 44px); line-height: .86; }
  .hero-story[data-hero-variant] .hero-story__promise { font-size: clamp(29px, 8.7vw, 43px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-story[data-hero-variant] .hero-story__headline,
  .hero-story[data-hero-variant="motion"] .hero-story__promise,
  .hero-story[data-hero-variant="motion"] .hero-story__promise::after { transform: none; }

  /* Equivalente estático: conserva titular, promesa y pieza final sin depender del scroll animado. */
  .hero-story[data-hero-variant="editorial"] .hero-cut,
  .hero-story[data-hero-variant="editorial"][data-cut-locked] .hero-cut {
    display: block;
    top: 51%;
    overflow: hidden;
    border-radius: clamp(10px, 1.35vw, 22px);
    opacity: 1;
    transform: translate(-50%, -50%) !important;
  }

  .hero-story[data-hero-variant="editorial"] .hero-story__fragments { display: block; }
  .hero-story[data-hero-variant="editorial"] .hero-cut__slices { display: none; }
  .hero-story[data-hero-variant="editorial"] .hero-cut__complete { opacity: 1; transform: none; }
  .hero-story[data-hero-variant="editorial"] .hero-story__feature { opacity: 1; }
  .hero-story[data-hero-variant="editorial"] .hero-story__promise { display: block; }

  .hero-story[data-hero-variant="editorial"] .hero-story__headline {
    transform: none;
    left: 50%;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .hero-story[data-hero-variant="editorial"] .hero-story__headline {
    left: var(--pad);
    width: calc(100% - var(--pad) * 2);
    text-align: left;
    transform: none;
  }

  .hero-story[data-hero-variant="editorial"] .hero-cut,
  .hero-story[data-hero-variant="editorial"][data-cut-locked] .hero-cut {
    top: 55%;
    width: min(72vw, 400px);
    height: 44svh;
  }

  .hero-story[data-hero-variant="editorial"] .hero-story__promise { top: 15%; }
}