/* puente-tienda.css — ajustes para que nuestra tienda (tienda.css) cuadre sobre la película de Claude Design.
   · En escritorio, los planos 2 y 3 se encuadran como en la landing (object-position 66,7 % 15 %): así la fila de
     cartas cae justo encima de la columna de luz del vídeo, que es donde tienda.css la coloca.
   · La capa va por debajo de la columna de textos (su z-index es 1 y la capa entra antes en el orden).
   · Su cabecera fija mide 68 px (la nuestra, 64).
   · Tras la compra se van TODAS las cartas de arriba (cambio 10 de la V2, abajo). */
@media (min-width: 769px) {
  #pelicula video.film__plano[data-plano="2"],
  #pelicula video.film__plano[data-plano="3"] { object-position: 66.7% 15% !important; }
}

#pelicula .film__escenario .tienda {
  z-index: 1;
  --alto-nav: 68px;
}

/* Cambio 10 (V2, 04/10/2026): en la compra del plano 3 (vídeo de Draven) se van todas las cartas, también la
   encendida (Lux) con su halo y su cono. tienda.css la dejaba sola a propósito («Queda la carta encendida, sola»);
   aquí se va con las demás y con la MISMA salida que ellas (baja un 44 % de su alto y se funde, curva de salida y
   duraciones de tienda.css), en su sitio de la cascada de derecha a izquierda: la 3 a los 0 ms, la central a los
   70 ms (su --tienda-i es 2), la 2 a los 140 y la 1 a los 210; la dorada de la 4 se sigue deshaciendo en chispas.
   Su halo y su cono bajan y se funden con ella, como una sola imagen. No toca nada antes de la compra (oro
   50 → 48 → 46 → 44 → 42, Lux encendida, carta dorada). Al volver atrás (el vídeo vuelve a empezar) sube con las
   demás con las transiciones de tienda.css; en un plano ya visto, la capa aparece ya vacía (data-salto: sin
   transiciones). En móvil gana a data-aparte (ya no se aparta a la derecha con la columna de luz del vídeo) y la
   esquiva queda sin nada que apartar. Más específico que tienda.css (#pelicula): gana a sus reglas de haz y de
   aparte sin !important. Con movimiento reducido la capa no existe. */
#pelicula .film__escenario .tienda[data-estado="compra"] .tienda__ranura--centro {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 44%, 0);
}

/* El 44 % de la carta central, que mide 1,19 × --tienda-central de alto: 0,5236 × --tienda-central */
#pelicula .film__escenario .tienda[data-estado="compra"] .tienda__halo,
#pelicula .film__escenario .tienda[data-estado="compra"] .tienda__cono {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, calc(var(--tienda-central) * 0.5236), 0);
}

@media (prefers-reduced-motion: no-preference) {
  #pelicula .film__escenario .tienda:not([data-salto])[data-estado="compra"] .tienda__ranura--centro {
    transition:
      opacity 320ms var(--ease-entrada) calc((3 - var(--tienda-i)) * 70ms),
      transform 380ms var(--ease-entrada) calc((3 - var(--tienda-i)) * 70ms),
      visibility 0s linear calc(380ms + (3 - var(--tienda-i)) * 70ms);
  }

  #pelicula .film__escenario .tienda:not([data-salto])[data-estado="compra"] .tienda__halo,
  #pelicula .film__escenario .tienda:not([data-salto])[data-estado="compra"] .tienda__cono {
    transition:
      opacity 320ms var(--ease-entrada) 70ms,
      transform 380ms var(--ease-entrada) 70ms,
      visibility 0s linear 450ms;
  }
}