.hero__pista { height: 600vh; position: relative; }

.hero__lienzo {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--crema);
}

.hero__svg {
  grid-area: 1 / 1;
  height: min(88vh, 900px);
  width: auto;
  max-width: 100%;
}

/* Las transformaciones de cada pieza se calculan respecto a su propia caja,
   no al origen del lienzo: sin esto, escalar el peluche lo mandaría fuera. */
.hero__svg .pieza,
.hero__svg .rollo {
  transform-box: fill-box;
  transform-origin: center;
}

/* La cinta sin montar solo existe durante la primera fase. Oculta por
   defecto: así quien no ejecuta JavaScript ve la tarta ya terminada, con
   su cinta ceñida, en vez de una cinta suelta cruzando la ilustración. */
#cinta-suelta { opacity: 0; }

/* El texto del letrero, con los tokens tipográficos del sitio */
.letrero__linea1 {
  font-family: var(--serif);
  font-size: 26px;
  fill: var(--topo-oscuro);
}
.letrero__linea2 {
  font-family: var(--serif);
  font-size: 32px;
  font-style: italic;
  fill: var(--rosa-cta);
}

.hero__foto {
  grid-area: 1 / 1;
  height: min(88vh, 900px);
  opacity: 0;                 /* la Task 6 la revela al final */
  pointer-events: none;
}
.hero__foto img {
  height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: var(--radio);
}

.hero__leyenda {
  grid-area: 1 / 1;
  align-self: start;
  margin-top: 12vh;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-2xl);
  color: var(--topo-oscuro);
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

.hero__desliza {
  grid-area: 1 / 1;
  align-self: end;
  margin-bottom: 5vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--topo-oscuro);
  pointer-events: none;
}
.hero__flecha {
  font-size: 1.4rem;
  animation: baja 1.8s ease-in-out infinite;
}
@keyframes baja {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

.hero__cierre {
  grid-area: 1 / 1;
  align-self: end;
  margin-bottom: 8vh;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
.hero__cierre h1 { font-size: var(--fs-3xl); margin-bottom: 0; }
.hero__sub {
  font-size: var(--fs-lg);
  color: var(--topo-oscuro);
  margin-bottom: var(--sp-2);
}

/* --- Móvil ---------------------------------------------------------- */
@media (max-width: 767px) {
  /* 300vh = unos 4 gestos de pulgar para el montaje entero. Con 350vh se
     hacían 5 y el hero empezaba a cansar antes de llegar al producto. */
  .hero__pista { height: 300vh; }
  .hero__svg, .hero__foto { height: 62vh; }
  .hero__leyenda { font-size: var(--fs-xl); margin-top: 15vh; }
  .hero__cierre { margin-bottom: 14vh; }
  .hero__desliza { margin-bottom: 7vh; }
}

/* --- Movimiento reducido y sin JavaScript ---------------------------
   En ambos casos no se monta nada: se muestra directamente el resultado,
   que es la tarta ya terminada más la foto real. El montaje es un adorno,
   no puede ser la única forma de ver el producto. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__pista { height: auto; }
  .hero__lienzo {
    position: static;
    height: auto;
    padding: 16vh 0 var(--sp-5);
    gap: var(--sp-4);
  }
  .hero__svg { display: none; }
  .hero__foto { opacity: 1; grid-area: auto; height: auto; max-height: 70vh; }
  .hero__leyenda, .hero__desliza { display: none; }
  .hero__cierre {
    opacity: 1;
    grid-area: auto;
    margin-bottom: 0;
    pointer-events: auto;
  }
  .hero__flecha { animation: none; }
}

.sin-js .hero__pista { height: auto; }
.sin-js .hero__lienzo {
  position: static;
  height: auto;
  padding: 16vh 0 var(--sp-5);
  gap: var(--sp-4);
}
.sin-js .hero__svg { display: none; }
.sin-js .hero__foto { opacity: 1; grid-area: auto; height: auto; max-height: 70vh; }
.sin-js .hero__leyenda, .sin-js .hero__desliza { display: none; }
.sin-js .hero__cierre {
  opacity: 1;
  grid-area: auto;
  margin-bottom: 0;
  pointer-events: auto;
}