/* Escena estrella: especialidades con los equipos negro mate / bronce.
   Sin JS o con movimiento reducido es una lista estática de bloques completos;
   js/escena.js añade .escena--viva para fijarla (pin) y apilar los pasos. */
.escena { position: relative; color: var(--papel); background: var(--negro); }
.escena__marco { position: relative; }
.escena__fondos, .escena__particulas, .escena__contador { display: none; }
.escena__pasos { list-style: none; margin: 0; padding: 0; }

.paso {
  position: relative; overflow: hidden;
  min-height: 100svh;
  background: var(--fondo);
}

/* ---------- Palabra gigante ---------- */
.paso__palabra {
  position: absolute; left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  display: flex; white-space: nowrap;
  font: italic 400 clamp(5.5rem, 21vw, 22rem)/.8 var(--serif);
  font-variation-settings: 'opsz' 96;
  letter-spacing: -0.02em;
  color: var(--champana); opacity: .16;
  pointer-events: none; user-select: none;
}
.letra { display: inline-block; will-change: transform, opacity; }

/* ---------- Equipo ---------- */
.paso__equipo {
  position: absolute; left: 50%; top: 44%;
  width: min(58vw, 62vh, 560px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.paso__ingredientes {
  position: absolute; inset: -58%; width: 216%; height: 216%; max-width: none;
  object-fit: contain; opacity: .85;
  will-change: transform, opacity;
}
.paso__flota, .paso__img { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.paso__img { object-fit: contain; filter: drop-shadow(0 40px 50px rgb(0 0 0 / .55)); }

/* ---------- Texto ---------- */
.paso__texto {
  position: absolute; left: var(--gutter); bottom: clamp(32px, 9vh, 96px);
  max-width: 25rem;
  will-change: transform, opacity;
}
.paso__num { font: 400 .78rem/1 var(--mono); letter-spacing: .06em; color: var(--champana); opacity: .8; }
.paso__num span { color: var(--papel); }
.paso__texto h3 { margin-top: .9rem; font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.02; letter-spacing: -0.01em; }
.paso__texto p:not(.paso__num) { margin-top: .9rem; font-size: 1.0625rem; line-height: 1.6; color: color-mix(in srgb, var(--papel) 72%, transparent); max-width: 24em; }
.paso__enlace {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 1rem;
  color: var(--champana); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
  font-style: italic;
}
.paso__enlace:hover { color: var(--papel); }

/* ---------- Foto real (copia de contacto) ---------- */
.paso__foto {
  position: absolute; right: var(--gutter); bottom: clamp(40px, 10vh, 110px);
  width: clamp(120px, 12vw, 180px); margin: 0;
  border: 8px solid #F6F1E8; transform: rotate(3deg);
  box-shadow: 0 24px 40px -18px rgb(0 0 0 / .7);
  will-change: transform, opacity;
}
.paso__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- Modo vivo (pin + scrub) ---------- */
.escena--viva .escena__marco { height: 100svh; overflow: hidden; }
.escena--viva .escena__fondos { display: block; position: absolute; inset: 0; }
.escena__fondo { position: absolute; inset: 0; opacity: 0; }
.escena__fondo:first-child { opacity: 1; }
.escena--viva .escena__particulas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.escena--viva .escena__pasos { position: absolute; inset: 0; }
.escena--viva .paso { position: absolute; inset: 0; min-height: 0; background: none; }
.escena--viva .paso:not(:first-child) { visibility: hidden; }
.escena--viva .escena__contador {
  display: flex; flex-direction: column; gap: 10px;
  position: absolute; right: calc(var(--gutter) * .5); top: 50%; transform: translateY(-50%);
}
.escena__contador i { width: 14px; height: 1px; background: var(--papel); opacity: .3; transition: opacity .3s, width .3s var(--ease-out); }
.escena__contador i.activo { opacity: 1; width: 26px; }

/* ---------- Móvil ---------- */
@media (max-width: 720px) {
  .paso__palabra { top: 32%; font-size: calc(165vw / var(--letras, 7)); }
  .paso__equipo { top: 34%; width: min(80vw, 44svh); }
  .paso__texto { right: var(--gutter); bottom: max(28px, env(safe-area-inset-bottom)); max-width: none; }
  .paso__texto h3 { font-size: clamp(1.9rem, 8.6vw, 2.4rem); padding-right: 92px; }
  .paso__texto p:not(.paso__num) { font-size: 1rem; }
  .paso__foto { width: 78px; border-width: 5px; right: var(--gutter); bottom: auto; top: calc(100svh - 300px); }
  .escena--viva .escena__contador { display: none; }
}
@media (max-width: 720px) and (max-height: 700px) {
  .paso__texto p:not(.paso__num) { display: none; }
}