/* ============================================================================
   tienda.css — la tienda de la película (planos 2 y 3 de #pelicula) · v3 (02/10/2026)
   Dueño: assets/js/film-tienda.js · contrato: brief/v3/TIENDA-PELICULA.md
   Se carga DESPUÉS de scroll.css (las reglas del final pisan a .film__plano y al encuadre
   de los planos 2 y 3).

   Qué es: la «tienda» de TFT contada con dibujo propio. Cinco cartas con los retratos
   de los campeones flotan en el cielo, encima de los personajes del vídeo: se barajan
   con cada aletazo del pingüino, MIA lo frena, rolea ella y se enciende la carta de la
   maga de luz, justo encima de la columna de luz que cae en el vídeo. En el plano 3 se
   compra la carta dorada (el retrato del campeón que aparece al comprarla) y la de la
   maga se queda sola y encendida. Capa decorativa (aria-hidden): no es interactiva y su
   único texto es el oro del botón de rolear (50, y baja de 2 en 2 con cada rol).
   Familia de la carta de Wisp (wisp.css): madera oscura, marco de metal, esquinas
   redondas y sombra; el pie de cada carta lleva el color de su coste.

   Piezas
     .tienda                  la capa: hija de .film__escenario, encima de su velo
                              (z-index 3) y debajo de los capítulos y del botón de pausa
     .tienda__fila           las cinco ranuras; su centro es el eje de la columna de luz
     .tienda__ranura          hueco de carta (data-ranura = n.º de hueco del contrato;
                              orden visual 1 · 2 · 5 · 3 · 4). ::before = el hueco vacío
     .tienda__carta           la carta de esa ranura: pila de caras, una a la vista
     .tienda__cara            una cara (.is-vista = la que se ve; .is-girada = acaba de
                              llegar con la capa a la vista y entra volteándose): arte
                              cuadrado + pie con gema. --dorso · --coste2 (verde) ·
                              --coste4 (morado) · --coste5 (oro) · --sigilo (aparece sin
                              girar) · --dorada
     .tienda__brillo          brillo que barre cada carta y luz de canto de la encendida
     .tienda__halo, __cono    halo de la carta encendida y cono que baja hasta el vídeo
     .tienda__destello        puf verde de la ranura 4 · .tienda__chispas: chispas de oro
     .tienda__boton           botón de rolear: fuego fatuo, moneda y el oro (50 y baja de 2
                              en 2 con cada rol; el número lo pone film-tienda.js)
     .tienda__propio          dibujos de repuesto (fuego fatuo, hachas): solo sin personajes
   Estados (los pone film-tienda.js en .tienda; son función del plano y del segundo)
     data-estado              oculta · espera · rol (+ data-rol="k") · alto · luz
                              (+ data-haz="1") · oferta · compra
     data-aparte="1"          compra con el vídeo del plano 3 a la vista: hasta 768 px la
                              carta encendida se aparta con la columna de luz
     data-esquiva="1"         el campeón del plano 3 levanta un hacha por donde está la
                              carta encendida: la carta, su halo y su cono bajan al 15 %
                              para dejarla ver y vuelven después (contrato §8.7)
     data-efecto              el hito que se acaba de cruzar con el reloj del vídeo: solo
                              entonces suenan los golpes de una vez (latido, destello,
                              barrido, puf, chispas). Llegar a un estado de golpe no los
                              repite; se quita cuando acaban
     data-entrada="sube"      las cartas entran subiendo (solo al llegar por «espera»; se
                              quita cuando han subido)
     data-salto               un fotograma sin transiciones: la capa aparece ya colocada
     .is-armada               la sección está cerca: la capa existe (antes, display none:
                              sus imágenes no se piden al cargar la página)
   Y en #pelicula
     data-fuente              "movil" | "escritorio": el vídeo que eligió scroll-film.js al
                              arrancar (recorte 9:16 o 16:9). Si la ventana cruza después
                              los 768 px, el vídeo sigue siendo ese: reglas del final

   Colocación: en coordenadas de la ventana, nunca del vídeo. Con object-position
   (--foco-x, …) el punto --foco-x del cuadro 16:9 cae en ese mismo porcentaje del ancho
   de la ventana: los planos 2 y 3 llevan --foco-x: 66.7% y la fila se centra ahí. Hasta
   768 px llega el recorte 9:16, centrado en la columna: el eje es el 50 %. En vertical,
   el borde inferior de la fila sale del vídeo (27 % del alto del cuadro: debajo están las
   bombillas y la cabeza de MIA).

   Color: tokens de tokens.css; las maderas y los tonos de cada coste salen de mezclarlos
   con negro o blanco (color-mix; sin hexadecimales en este fichero) y los rgba() repiten
   los RGB de los tokens (fondo-0 1,10,19 · titulo 240,230,210 · metal 200,170,110 ·
   oro-brillo 255,226,154 · oro 248,179,63 · rareza-2 17,178,136) más el blanco puro.
   La luz de la carta encendida es blanca (blanco y el crema de los titulares, que es el
   tono de la columna del vídeo); el oro es su marco y el premio de la carta dorada.

   Movimiento: solo transform y opacity (filter, en el cambio de brillo de las cartas),
   todo dentro de @media (prefers-reduced-motion: no-preference) y nada en bucle: el halo
   de la carta encendida es fijo, sin parpadeo. Con movimiento reducido la capa no existe.
   ========================================================================== */

/* --- Capa ----------------------------------------------------------------------- */
.tienda {
  /* Maderas: sin color-mix salen en el azul noche de la interfaz (igual de legibles) */
  --tienda-madera-1: var(--color-superficie-2);
  --tienda-madera-2: var(--color-superficie-1);
  --tienda-madera-3: var(--color-fondo-1);
  --tienda-marco-madera: var(--color-metal-sombra);

  /* Eje y banda. Móvil (recorte 9:16 centrado en la columna): entre el 12 y el 30 % del
     alto, bajo la nav fija. El segundo término de --tienda-abajo solo manda si la ventana
     es más ancha que 9:16: el vídeo se recorta por arriba y la cabeza de MIA sube.
     --tienda-x es el eje de la columna de luz: un porcentaje del ancho escrito sin unidad.
     --tienda-desvio es lo que se aparta la carta encendida tras la compra (solo hasta
     768 px: allí el vídeo del plano 3 se abre y se desplaza). Medido en el clip: la columna
     pasa del 50,4 al 67,2 % del ancho del CUADRO, un 16,8 %, y el cuadro 9:16 se pinta a
     max(100vw, 56,11vh) de ancho (object-fit: cover): el desvío es el 16,8 % de eso. En un
     teléfono 9:19,5 la carta acaba en el 69,4-70,3 % del ancho de la ventana (el 69,6 % del
     contrato); en uno 16:9 o en una tableta, donde manda el ancho, en el 66,8 %. */
  --tienda-x: 50;
  --tienda-desvio: max(16.8vw, 9.43vh);
  --tienda-arriba: max(12vh, calc(var(--alto-nav) + var(--esp-2)));
  --tienda-abajo: min(30vh, calc(48vh - 28.44vw));
  --tienda-banda: calc(var(--tienda-abajo) - var(--tienda-arriba));
  --tienda-sitio: calc(100vw - 2 * var(--gutter));
  --tienda-hueco: clamp(6px, 1.2vw, 10px);
  --tienda-holgura: 3px;                               /* aire de más a cada lado de la central: encendida crece */
  --tienda-huecos: calc(4 * var(--tienda-hueco) + 2 * var(--tienda-holgura));
  /* La central manda (encendida crece un 8 %: 1,19 × 1,08 = 1,29 de alto por ancho) y las
     cuatro pequeñas ocupan lo que queda, sin pasar de su proporción de escritorio.
     390×844 → central 114 px y laterales 54 px · 360×740 → 103 y 49 px. */
  --tienda-central: max(72px, min(158px, calc(var(--tienda-banda) / 1.29), calc((var(--tienda-sitio) - var(--tienda-huecos)) / 2.88)));
  --tienda-lateral: min(calc(var(--tienda-central) / 1.2), calc((var(--tienda-sitio) - var(--tienda-huecos) - var(--tienda-central)) / 4));
  --tienda-fila: calc(4 * var(--tienda-lateral) + var(--tienda-central) + var(--tienda-huecos));
  --tienda-y: calc((var(--tienda-arriba) + var(--tienda-abajo)) / 2);   /* centro de la fila */
  --tienda-boton: 26px;                                /* alto del botón de rolear */
  --tienda-aire: 5px;                                  /* entre las cartas y el botón */
  /* Ancho de la columna de luz del vídeo: ocupa el 47,5 % del recorte 9:16 */
  --tienda-columna: max(47.5vw, 26.7vh);
  --tienda-cono: 14vh;

  position: absolute;
  inset: 0;
  z-index: 4;                    /* encima del velo del escenario (::after, z-index 3) */
  display: none;                 /* hasta que film-tienda.js la arma: nada se pide al cargar */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.tienda.is-armada { display: block; }

.tienda.is-armada[hidden] { display: none; }

.tienda[data-estado="espera"],
.tienda[data-estado="rol"],
.tienda[data-estado="alto"],
.tienda[data-estado="luz"],
.tienda[data-estado="oferta"],
.tienda[data-estado="compra"] {
  opacity: 1;
  visibility: visible;
}

@supports (color: color-mix(in srgb, black, white)) {
  .tienda {
    --tienda-madera-1: color-mix(in srgb, var(--color-estrella-bronce) 26%, black);
    --tienda-madera-2: color-mix(in srgb, var(--color-estrella-bronce) 17%, black);
    --tienda-madera-3: color-mix(in srgb, var(--color-estrella-bronce) 11%, black);
    --tienda-marco-madera: color-mix(in srgb, var(--color-estrella-bronce) 62%, black);
  }
}

/* Más de 768 px: vídeo 16:9 con la columna de luz en el 66,7 % del ancho.
   Banda: por arriba, el 9 % del alto o la nav fija; por abajo, el 27 % del alto del CUADRO
   del vídeo llevado a la ventana (debajo quedan las bombillas, del 28 al 34 %, y el moño de
   MIA, en el 34 %). Con la ventana hasta 16:9 el cuadro mide lo que la ventana de alto: 27vh.
   Más ancha, el cuadro mide 56,25vw, sobresale (56,25vw - 100vh) y con object-position al
   15 % (regla del final) solo el 15 % de eso queda arriba: 0,27 × 56,25vw - 0,15 × (56,25vw
   - 100vh) = 6,75vw + 15vh.
   Fila de ancho ≤ 60 % de la ventana y sin pasar del margen derecho (los 12 px son la barra
   de scroll de Windows). La central encendida (1,285 de alto por ancho) no pasa de la banda;
   las laterales miden de 84 a 132 px y la central un 20 % más, y si no cabe, la central deja
   de ser mayor y encogen todas iguales. El botón de rolear va a la izquierda de la fila.
   1440×900 → 105 y 126 px · 1024×768 → 88 y 105 · 820×1180 → 84 y 101 · 1366×657 → 84 y 92. */
@media (min-width: 769px) {
  .tienda {
    --tienda-x: 66.7;
    --tienda-desvio: 0px;                              /* en escritorio no se aparta */
    --tienda-arriba: max(9vh, calc(var(--alto-nav) + var(--esp-2)));
    --tienda-abajo: max(27vh, calc(6.75vw + 15vh));
    --tienda-sitio: min(60vw, calc(66.6vw - 2 * var(--gutter) - 12px));
    --tienda-tope: calc(var(--tienda-banda) / 1.285);  /* ancho máximo de la central para caber encendida */
    --tienda-lateral: min(132px, calc(var(--tienda-sitio) / 5.56), max(calc(var(--tienda-tope) / 1.2), min(84px, var(--tienda-tope))));
    --tienda-central: min(calc(var(--tienda-lateral) * 1.2), var(--tienda-tope));
    --tienda-hueco: calc(var(--tienda-lateral) * 0.09);
    --tienda-holgura: 0px;
    --tienda-boton: max(22px, calc(var(--tienda-lateral) * 0.26));
    --tienda-columna: max(15vw, 26.67vh);              /* el 15 % del cuadro 16:9 */
  }
}

/* Dibujos que se repiten (hexágono del dorso y fuego fatuo): símbolos SVG, no se pintan */
.tienda__dibujos {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --- Fila y ranuras --------------------------------------------------------------- */
/* Colocada con left/top y su ancho calculado (sin translate(-50%): así ningún borde queda
   a medio píxel por el centrado). La carta central es la más alta y fija el alto de la fila. */
.tienda__fila {
  position: absolute;
  left: calc(var(--tienda-x) * 1% - var(--tienda-fila) / 2);
  top: calc(var(--tienda-y) - var(--tienda-central) * 0.595);
  display: flex;
  align-items: center;
  gap: var(--tienda-hueco);
  width: var(--tienda-fila);
  height: calc(var(--tienda-central) * 1.19);
  isolation: isolate;            /* el halo y el cono (z-index -1) quedan detrás de las cartas */
}

/* Todo lo de dentro se mide en em: la ranura mide 10 em de ancho y 11,9 de alto */
.tienda__ranura {
  --tienda-radio: 0.95em;
  --tienda-marco: 0.36em;
  --tienda-i: 0;                 /* puesto en la fila (0-4): escalona la entrada y los volteos */
  --tienda-onda: 0;              /* distancia a la carta central: escalona el barrido de luz */
  position: relative;
  flex: none;
  width: 10em;
  height: 11.9em;
  font-size: calc(var(--tienda-lateral) / 10);
}

.tienda__ranura--centro {
  margin-inline: var(--tienda-holgura);
  font-size: calc(var(--tienda-central) / 10);
}

.tienda__ranura[data-ranura="2"] { --tienda-i: 1; }
.tienda__ranura[data-ranura="5"] { --tienda-i: 2; }
.tienda__ranura[data-ranura="3"] { --tienda-i: 3; }
.tienda__ranura[data-ranura="4"] { --tienda-i: 4; }
.tienda__ranura[data-ranura="2"],
.tienda__ranura[data-ranura="3"] { --tienda-onda: 1; }
.tienda__ranura[data-ranura="1"],
.tienda__ranura[data-ranura="4"] { --tienda-onda: 2; }

/* El hueco vacío («marco apagado»): se ve cuando la ranura no enseña ninguna cara */
.tienda__ranura::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--tienda-radio);
  background: rgba(1, 10, 19, 0.52);
  box-shadow:
    inset 0 0 0 max(1px, 0.1em) rgba(200, 170, 110, 0.4),
    inset 0 0.5em 1.2em rgba(1, 10, 19, 0.7);
}

/* --- Carta: pila de caras ----------------------------------------------------------- */
/* Hasta que llega la luz, las cartas están «a oscuras» (algo apagadas) */
.tienda__carta {
  position: absolute;
  inset: 0;
  z-index: 1;
  filter: brightness(0.84) saturate(0.9);
}

/* La central va encima de sus vecinas: su resplandor cae igual sobre las dos */
.tienda__ranura--centro .tienda__carta { z-index: 3; }

/* Cara: marco con relieve (degradado de metal o del color de su coste, con luz arriba y
   sombra abajo), arte cuadrado y pie estrecho. Oculta = de canto (girada 90°). */
.tienda__cara {
  --tienda-c-luz: var(--color-metal);                  /* marco neutro: el de la carta de Wisp */
  --tienda-c: var(--tienda-marco-madera);
  --tienda-c-sombra: var(--color-metal-sombra);
  --tienda-pie-1: var(--tienda-madera-1);
  --tienda-pie-2: var(--tienda-madera-3);
  --tienda-gema: var(--color-metal);
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: 0.3em;
  box-sizing: border-box;
  padding: var(--tienda-marco);
  border-radius: var(--tienda-radio);
  background: linear-gradient(
    160deg,
    var(--tienda-c-luz) 0%,
    var(--tienda-c) 20%,
    var(--tienda-c-sombra) 52%,
    var(--tienda-c) 80%,
    var(--tienda-c-luz) 100%
  );
  box-shadow:
    0 0 0 1px rgba(1, 10, 19, 0.88),
    inset 0 0.09em 0 rgba(240, 230, 210, 0.42),
    inset 0 -0.09em 0 rgba(1, 10, 19, 0.45),
    0 0.3em 0.6em rgba(1, 10, 19, 0.5),
    0 1em 2em rgba(1, 10, 19, 0.45);
  visibility: hidden;
  transform: perspective(64em) rotateY(90deg);
}

.tienda__cara.is-vista {
  visibility: visible;
  transform: perspective(64em) rotateY(0deg);
}

/* Colores de coste (escalera de rareza de tokens.css): verde 2 · morado 4 · oro 5 */
.tienda__cara--coste2 {
  --tienda-c-luz: var(--color-rareza-2);
  --tienda-c: var(--color-rareza-2);
  --tienda-c-sombra: var(--color-rareza-2);
  --tienda-pie-1: var(--color-rareza-2);
  --tienda-pie-2: var(--color-rareza-2);
  --tienda-gema: var(--color-rareza-2);
}

.tienda__cara--coste4 {
  --tienda-c-luz: var(--color-rareza-4);
  --tienda-c: var(--color-rareza-4);
  --tienda-c-sombra: var(--color-rareza-4);
  --tienda-pie-1: var(--color-rareza-4);
  --tienda-pie-2: var(--color-rareza-4);
  --tienda-gema: var(--color-rareza-4);
}

.tienda__cara--coste5 {
  --tienda-c-luz: var(--color-oro-brillo);
  --tienda-c: var(--color-oro);
  --tienda-c-sombra: var(--color-oro-sombra);
  --tienda-pie-1: var(--color-oro);
  --tienda-pie-2: var(--color-oro-sombra);
  --tienda-gema: var(--color-oro-brillo);
}

@supports (color: color-mix(in srgb, black, white)) {
  .tienda__cara--coste2 {
    --tienda-c-luz: color-mix(in srgb, var(--color-rareza-2) 58%, white);
    --tienda-c-sombra: color-mix(in srgb, var(--color-rareza-2) 46%, black);
    --tienda-pie-1: color-mix(in srgb, var(--color-rareza-2) 74%, black);
    --tienda-pie-2: color-mix(in srgb, var(--color-rareza-2) 38%, black);
    --tienda-gema: color-mix(in srgb, var(--color-rareza-2) 52%, white);
  }

  .tienda__cara--coste4 {
    --tienda-c-luz: color-mix(in srgb, var(--color-rareza-4) 58%, white);
    --tienda-c-sombra: color-mix(in srgb, var(--color-rareza-4) 44%, black);
    --tienda-pie-1: color-mix(in srgb, var(--color-rareza-4) 70%, black);
    --tienda-pie-2: color-mix(in srgb, var(--color-rareza-4) 36%, black);
    --tienda-gema: color-mix(in srgb, var(--color-rareza-4) 50%, white);
  }

  .tienda__cara--coste5 {
    --tienda-c-sombra: color-mix(in srgb, var(--color-oro-sombra) 62%, black);
    --tienda-pie-1: color-mix(in srgb, var(--color-oro) 72%, black);
    --tienda-pie-2: color-mix(in srgb, var(--color-oro-sombra) 44%, black);
  }
}

/* Arte: el retrato (360×360) o un dibujo SVG. Vale <picture>, <img> o <svg> dentro */
.tienda__arte {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius:
    calc(var(--tienda-radio) - var(--tienda-marco))
    calc(var(--tienda-radio) - var(--tienda-marco))
    0.3em
    0.3em;
  background: var(--tienda-madera-2);
}

.tienda__arte picture { display: contents; }

.tienda__arte img,
.tienda__arte svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* Relieve del arte: filo oscuro, luz en el canto de arriba y sombra hacia el pie */
.tienda__arte::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(240, 230, 210, 0.14) 0%, rgba(240, 230, 210, 0) 26%);
  box-shadow:
    inset 0 0 0 max(1px, 0.07em) rgba(1, 10, 19, 0.72),
    inset 0 0.16em 0 rgba(240, 230, 210, 0.2),
    inset 0 -1.5em 1.5em -0.7em rgba(1, 10, 19, 0.55);
  pointer-events: none;
}

/* Pie: franja del color del coste con un filete y una gema. Sin nombre y sin número */
.tienda__pie {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  border-radius:
    0.3em
    0.3em
    calc(var(--tienda-radio) - var(--tienda-marco))
    calc(var(--tienda-radio) - var(--tienda-marco));
  background: linear-gradient(180deg, var(--tienda-pie-1) 0%, var(--tienda-pie-2) 100%);
  box-shadow:
    inset 0 0 0 max(1px, 0.07em) rgba(1, 10, 19, 0.62),
    inset 0 0.14em 0 rgba(240, 230, 210, 0.22);
}

.tienda__pie::before {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  top: 50%;
  height: max(1px, 0.07em);
  margin-top: calc(max(1px, 0.07em) / -2);
  background: linear-gradient(
    90deg,
    rgba(240, 230, 210, 0) 0%,
    rgba(240, 230, 210, 0.55) 32%,
    rgba(240, 230, 210, 0) 42%,
    rgba(240, 230, 210, 0) 58%,
    rgba(240, 230, 210, 0.55) 68%,
    rgba(240, 230, 210, 0) 100%
  );
}

.tienda__gema {
  position: relative;
  width: 0.72em;
  height: 0.72em;
  border-radius: 0.1em;
  background: linear-gradient(135deg, var(--color-titulo) 0%, var(--tienda-gema) 46%, var(--tienda-c-sombra) 100%);
  box-shadow: 0 0 0 max(1px, 0.08em) rgba(1, 10, 19, 0.7);
  transform: rotate(45deg);
}

/* Dorso: panel de madera oscura (con veta) y un hexágono de metal */
.tienda__cara--dorso { grid-template-rows: minmax(0, 1fr); }

.tienda__reverso {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 0;
  border-radius: calc(var(--tienda-radio) - var(--tienda-marco));
  background:
    repeating-linear-gradient(96deg, rgba(1, 10, 19, 0) 0, rgba(1, 10, 19, 0) 0.52em, rgba(1, 10, 19, 0.2) 0.56em, rgba(1, 10, 19, 0) 0.66em),
    radial-gradient(ellipse 70% 56% at 50% 46%, rgba(200, 170, 110, 0.14) 0%, rgba(200, 170, 110, 0) 72%),
    linear-gradient(180deg, var(--tienda-madera-1) 0%, var(--tienda-madera-2) 48%, var(--tienda-madera-3) 100%);
  box-shadow:
    inset 0 0 0 max(1px, 0.07em) rgba(1, 10, 19, 0.7),
    inset 0 0.16em 0 rgba(240, 230, 210, 0.09),
    inset 0 -1.6em 2em rgba(1, 10, 19, 0.4);
}

.tienda__reverso svg {
  display: block;
  width: 64%;
  height: auto;
  aspect-ratio: 1;
  max-width: none;
  overflow: visible;
}

/* Sigilo: la carta de la ranura 4 no se gira para entrar ni para irse: aparece («llevaba
   ahí todo el rato») y desaparece en su sitio */
.tienda__cara--sigilo {
  opacity: 0;
  transform: scale(0.94);
}

.tienda__cara--sigilo.is-vista {
  opacity: 1;
  transform: none;
}

/* Repuesto sin personajes (LHC_CONFIG.pelicula.tiendaPersonajes = false): fichas propias
   en las cartas, el fuego fatuo teal en la que se enciende y el emblema de las dos hachas
   en la dorada (.tienda__propio: dibujos que ya van en el marcado y solo se pintan entonces).
   Basta con que no se vea roto. */
.tienda__arte .tienda__propio { display: none; }

.tienda--propia .tienda__arte .tienda__propio { display: block; }

.tienda--propia .tienda__arte {
  background:
    radial-gradient(ellipse 80% 70% at 50% 56%, rgba(48, 200, 192, 0.22) 0%, rgba(48, 200, 192, 0) 72%),
    var(--color-fondo-0);
}

.tienda--propia .tienda__arte img {
  object-fit: contain;
  box-sizing: border-box;
  padding: 6%;
}

/* --- Brillo de cada carta (barrido) y luz de canto ---------------------------------- */
/* Va fuera de .tienda__carta para que el brillo de las cartas apagadas no lo oscurezca.
   Las ranuras de la izquierda lo llevan en espejo: la luz les llega desde la central. */
.tienda__brillo {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: var(--tienda-radio);
  pointer-events: none;
}

.tienda__ranura[data-ranura="1"] .tienda__brillo,
.tienda__ranura[data-ranura="2"] .tienda__brillo { transform: scaleX(-1); }

/* Destello diagonal (parado y transparente en reposo) */
.tienda__brillo::before {
  content: "";
  position: absolute;
  inset-block: -20%;
  left: 0;
  width: 46%;
  background: linear-gradient(
    100deg,
    rgba(240, 230, 210, 0) 0%,
    rgba(240, 230, 210, 0.2) 34%,
    rgba(255, 255, 255, 0.78) 50%,
    rgba(240, 230, 210, 0.2) 66%,
    rgba(240, 230, 210, 0) 100%
  );
  opacity: 0;
  transform: translateX(-130%) skewX(-14deg);
}

/* Luz de canto: el lado que mira a la carta encendida recoge su luz («la fila se ilumina») */
.tienda__brillo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.6) 2.5%,
    rgba(240, 230, 210, 0.28) 11%,
    rgba(240, 230, 210, 0.1) 32%,
    rgba(240, 230, 210, 0) 58%
  );
  opacity: 0;
}

.tienda__ranura[data-ranura="1"] .tienda__brillo::after,
.tienda__ranura[data-ranura="4"] .tienda__brillo::after {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.52) 0%,
    rgba(255, 255, 255, 0.3) 2.5%,
    rgba(240, 230, 210, 0.12) 14%,
    rgba(240, 230, 210, 0) 44%
  );
}

.tienda__ranura--centro .tienda__brillo::after { content: none; }

/* --- Halo y cono de la carta encendida ------------------------------------------------ */
/* Halo fijo, detrás de la fila. La luz de la carta es blanca, de un blanco cálido muy claro
   como la columna del vídeo (su núcleo mide 237,223,213: el crema de los titulares); el oro
   queda para su marco y para la carta dorada del plano 3 */
.tienda__halo {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: calc(var(--tienda-central) * 2.5);
  height: calc(var(--tienda-central) * 3.4);
  margin: calc(var(--tienda-central) * -1.7) 0 0 calc(var(--tienda-central) * -1.25);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.78) 28%,
    rgba(240, 230, 210, 0.48) 50%,
    rgba(240, 230, 210, 0.16) 74%,
    rgba(240, 230, 210, 0) 100%
  );
  opacity: 0;
  transform: scale(0.55);
}

/* Cono: baja del borde inferior de la carta, se ensancha hasta el ancho de la columna de
   luz del vídeo y se desvanece hacia abajo. El desenfoque (fijo, se pinta una vez) va en
   la caja y el recorte en su hijo: así los bordes del trapecio quedan suaves.
   La luz tiene que SALIR de la carta: la caja empieza detrás de ella (un 16 % del ancho
   de la carta por encima del borde de la fila), con un tramo recto que la carta tapa y que
   se lleva el desenfoque del borde de arriba; por debajo de la carta la luz arranca a toda
   su fuerza (blanco al 92 %) y solo entonces se abre y se desvanece. */
.tienda__cono {
  position: absolute;
  left: calc(50% - var(--tienda-columna) / 2);
  top: calc(100% - var(--tienda-central) * 0.16);
  z-index: -1;
  width: var(--tienda-columna);
  height: calc(var(--tienda-cono) + var(--tienda-central) * 0.12);
  filter: blur(calc(var(--tienda-central) * 0.07));
  opacity: 0;
  transform: scaleY(0.2);
  transform-origin: 50% 0;
}

.tienda__cono::before {
  --tienda-cono-ancho: calc(var(--tienda-central) * 0.48);   /* medio ancho del arranque: algo menos que la carta */
  --tienda-cono-tapado: calc(var(--tienda-central) * 0.12);  /* tramo recto, detrás de la carta */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.92) 0,
    rgba(255, 255, 255, 0.92) calc(var(--tienda-central) * 0.2),
    rgba(255, 255, 255, 0.72) calc(var(--tienda-central) * 0.2 + 10%),
    rgba(240, 230, 210, 0.46) calc(var(--tienda-central) * 0.2 + 26%),
    rgba(240, 230, 210, 0.18) 64%,
    rgba(240, 230, 210, 0) 100%
  );
  -webkit-clip-path: polygon(
    calc(50% - var(--tienda-cono-ancho)) 0,
    calc(50% + var(--tienda-cono-ancho)) 0,
    calc(50% + var(--tienda-cono-ancho)) var(--tienda-cono-tapado),
    94% 100%,
    6% 100%,
    calc(50% - var(--tienda-cono-ancho)) var(--tienda-cono-tapado)
  );
  clip-path: polygon(
    calc(50% - var(--tienda-cono-ancho)) 0,
    calc(50% + var(--tienda-cono-ancho)) 0,
    calc(50% + var(--tienda-cono-ancho)) var(--tienda-cono-tapado),
    94% 100%,
    6% 100%,
    calc(50% - var(--tienda-cono-ancho)) var(--tienda-cono-tapado)
  );
}

/* Filo de luz de la carta encendida (resplandor pegado al marco) y onda del encendido */
.tienda__ranura--centro .tienda__carta::after,
.tienda__ranura--centro .tienda__carta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--tienda-radio);
  opacity: 0;
  pointer-events: none;
}

.tienda__ranura--centro .tienda__carta::after {
  box-shadow:
    0 0 0 0.1em rgba(255, 255, 255, 0.94),
    0 0 0.8em 0.12em rgba(255, 255, 255, 0.82),
    0 0 2.2em 0.4em rgba(240, 230, 210, 0.42);
}

.tienda__ranura--centro .tienda__carta::before {
  inset: -0.2em;
  border: 0.12em solid rgba(255, 255, 255, 0.9);
  border-radius: calc(var(--tienda-radio) + 0.2em);
  box-shadow:
    0 0 0.9em rgba(240, 230, 210, 0.85),
    inset 0 0 0.9em rgba(240, 230, 210, 0.5);
}

/* --- Ranura 4: puf verde y chispas de oro ---------------------------------------------- */
.tienda__destello {
  position: absolute;
  inset: -22%;
  z-index: 3;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(240, 230, 210, 0.9) 0%,
    rgba(17, 178, 136, 0.82) 30%,
    rgba(17, 178, 136, 0.36) 60%,
    rgba(17, 178, 136, 0) 100%
  );
  opacity: 0;
  pointer-events: none;
}

.tienda__chispas {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 3;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Cada chispa es una estrella de cuatro puntas (la de la moneda) que sale en su ángulo */
.tienda__chispas i {
  --tienda-a: 0deg;
  --tienda-d: 7em;
  position: absolute;
  left: -0.65em;
  top: -0.65em;
  width: 1.3em;
  height: 1.3em;
  background: var(--color-oro-brillo);
  -webkit-clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
}

.tienda__chispas i:nth-child(1) { --tienda-a: 8deg; --tienda-d: 8.2em; }
.tienda__chispas i:nth-child(2) { --tienda-a: 47deg; --tienda-d: 6.4em; }
.tienda__chispas i:nth-child(3) { --tienda-a: 84deg; --tienda-d: 7.6em; }
.tienda__chispas i:nth-child(4) { --tienda-a: 128deg; --tienda-d: 6em; }
.tienda__chispas i:nth-child(5) { --tienda-a: 166deg; --tienda-d: 7.8em; }
.tienda__chispas i:nth-child(6) { --tienda-a: 203deg; --tienda-d: 6.2em; }
.tienda__chispas i:nth-child(7) { --tienda-a: 241deg; --tienda-d: 8em; }
.tienda__chispas i:nth-child(8) { --tienda-a: 279deg; --tienda-d: 6.6em; }
.tienda__chispas i:nth-child(9) { --tienda-a: 318deg; --tienda-d: 7.4em; }
.tienda__chispas i:nth-child(10) { --tienda-a: 346deg; --tienda-d: 5.6em; }

.tienda__chispas i:nth-child(even) { background: var(--color-oro); }

/* --- Botón de rolear: fuego fatuo, moneda y el oro que queda (50 → 48 → 46 → 44 → 42) --- */
/* Nunca bajo la carta central, que es donde cae la luz. Hasta 768 px la caja ocupa el ancho
   de las dos primeras ranuras y centra la pastilla debajo de ellas (la central, más alta,
   deja ese hueco). En escritorio va a la izquierda de la fila, a media altura, como los
   botones de la tienda del juego: así no le quita alto a las cartas. */
.tienda__boton {
  position: absolute;
  left: 0;
  top: calc(50% + var(--tienda-lateral) * 0.595 + var(--tienda-aire));
  display: flex;
  justify-content: center;
  width: calc(2 * var(--tienda-lateral) + var(--tienda-hueco));
  font-size: var(--tienda-boton);
  line-height: 1;
}

@media (min-width: 769px) {
  .tienda__boton {
    left: auto;
    right: calc(100% + var(--tienda-hueco) * 1.4);
    top: calc(50% - var(--tienda-boton) / 2);
    width: auto;
  }
}

.tienda__boton[hidden] { display: none; }

.tienda__rol {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  box-sizing: border-box;
  height: 1em;
  padding: 0 0.46em 0 0.08em;
  border-radius: var(--radio-pill);
  background: linear-gradient(180deg, var(--tienda-madera-1) 0%, var(--tienda-madera-3) 100%);
  box-shadow:
    0 0 0 1px var(--color-metal-sombra),
    0 0 0 2px rgba(1, 10, 19, 0.85),
    inset 0 0.05em 0 rgba(240, 230, 210, 0.22),
    0 0.16em 0.4em rgba(1, 10, 19, 0.6);
}

.tienda__rol svg {
  display: block;
  flex: none;
  max-width: none;
}

.tienda__rol-fatuo {
  width: 0.86em;
  height: 0.86em;
}

.tienda__rol-moneda {
  width: 0.6em;
  height: 0.6em;
  margin-left: 0.04em;
}

/* El oro: dos cifras de ancho fijo (tabulares) para que la pastilla no baile al bajar de 50 a 48… */
.tienda__cero {
  display: inline-block;
  min-width: 1.3em;
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 0.66em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  color: var(--color-oro-brillo);
}

/* Aro de luz del botón: late con cada aletazo (teal) y con el roleo de MIA (luz blanca) */
.tienda__rol::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0.07em rgba(48, 200, 192, 0.95), 0 0 0.6em 0.08em rgba(48, 200, 192, 0.6);
  opacity: 0;
}

/* ============================================================================
   ESTADOS (estáticos: valen con y sin movimiento)
   ========================================================================== */
/* luz: la central a plena luz; las otras cuatro bajan al 55 % de brillo */
.tienda[data-estado="luz"] .tienda__carta,
.tienda[data-estado="oferta"] .tienda__carta,
.tienda[data-estado="compra"] .tienda__carta { filter: brightness(0.55) saturate(0.82); }

.tienda[data-estado="luz"] .tienda__ranura--centro .tienda__carta,
.tienda[data-estado="oferta"] .tienda__ranura--centro .tienda__carta,
.tienda[data-estado="compra"] .tienda__ranura--centro .tienda__carta,
.tienda[data-estado="oferta"] .tienda__ranura[data-ranura="4"] .tienda__carta,
.tienda[data-estado="compra"] .tienda__ranura[data-ranura="4"] .tienda__carta { filter: brightness(1) saturate(1); }

.tienda[data-estado="luz"] .tienda__rol,
.tienda[data-estado="oferta"] .tienda__rol { opacity: 0.72; }

/* haz: la carta se enciende (crece un 8 %), halo fijo, cono hasta el vídeo y luz de canto */
.tienda[data-haz="1"] .tienda__ranura--centro .tienda__carta { transform: scale(1.08); }

/* Una carta que da luz no hace sombra: sin las dos sombras caídas de la cara (oscurecían la
   columna del vídeo justo debajo de la carta, donde nace el haz). Quedan el filo y el relieve. */
.tienda[data-haz="1"] .tienda__ranura--centro .tienda__cara {
  box-shadow:
    0 0 0 1px rgba(1, 10, 19, 0.88),
    inset 0 0.09em 0 rgba(240, 230, 210, 0.42),
    inset 0 -0.09em 0 rgba(1, 10, 19, 0.45);
}

.tienda[data-haz="1"] .tienda__ranura--centro .tienda__carta::after { opacity: 1; }

.tienda[data-haz="1"] .tienda__halo {
  opacity: 1;
  transform: none;
}

.tienda[data-haz="1"] .tienda__cono {
  opacity: 1;
  transform: none;
}

.tienda[data-haz="1"] .tienda__brillo::after { opacity: 1; }

/* compra: las cartas 1, 2 y 3 bajan y se van, la ranura 4 se apaga y el botón se retira.
   Queda la carta encendida, sola, igual que estaba. */
.tienda[data-estado="compra"] .tienda__ranura:not(.tienda__ranura--centro) {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 44%, 0);
}

.tienda[data-estado="compra"] .tienda__ranura[data-ranura="4"] { transform: none; }

.tienda[data-estado="compra"] .tienda__ranura[data-ranura="4"]::before,
.tienda[data-estado="compra"] .tienda__ranura[data-ranura="4"] .tienda__brillo { opacity: 0; }

.tienda[data-estado="compra"] .tienda__boton {
  opacity: 0;
  visibility: hidden;
}

/* Hasta 768 px, tras la compra: el vídeo del plano 3 se abre y se desplaza hacia el campeón
   que aparece, y la columna de luz se va a la derecha (--tienda-desvio, arriba: el 16,8 %
   del ancho del cuadro del vídeo). La carta encendida la sigue: se desliza hasta allí,
   encoge al 80 % y allí se queda, con su halo y su cono. film-tienda.js pone data-aparte
   cuando ese vídeo es lo que se ve (con la foto fija, que es su primer fotograma, la columna
   sigue en el centro). En escritorio no se mueve. --tienda-desvio se declara en la capa, fuera
   de este estado: al comprar solo se recalculan estos tres elementos, no todo el subárbol. */
@media (max-width: 768px) {
  .tienda[data-aparte="1"] .tienda__ranura--centro { transform: translate3d(var(--tienda-desvio), 0, 0) scale(0.8); }

  .tienda[data-aparte="1"] .tienda__halo { transform: translate3d(var(--tienda-desvio), 0, 0) scale(0.8); }

  .tienda[data-aparte="1"] .tienda__cono { transform: translate3d(var(--tienda-desvio), calc(var(--tienda-central) * -0.049), 0) scale(0.8); }
}

/* esquiva (contrato §8.7): mientras el campeón del plano 3 levanta sus hachas (entre
   data-t-esquiva y data-t-vuelve del marcado), la de la derecha sube justo por donde está la
   carta encendida. La carta, su halo y su cono bajan al 15 % para dejarla ver y vuelven
   después; la columna de luz del vídeo no se toca: la luz no se apaga. Va en la fila entera
   (en «compra» no queda en ella nada más) para que los tres se desvanezcan como una sola
   imagen. La pose final del plano y un plano ya visto no la llevan. */
.tienda[data-esquiva="1"] .tienda__fila { opacity: 0.15; }

/* ============================================================================
   MOVIMIENTO — solo si la persona no ha pedido menos (con reduce la capa no existe).
   Todo cuelga de :not([data-salto]): mientras film-tienda.js coloca la capa de golpe
   (aparece ya en su estado), nada se anima.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* La capa se funde con el mismo tiempo que los planos */
  .tienda {
    transition:
      opacity var(--film-cruce, 900ms) var(--ease-salida),
      visibility 0s linear var(--film-cruce, 900ms);
  }

  .tienda[data-estado="espera"],
  .tienda[data-estado="rol"],
  .tienda[data-estado="alto"],
  .tienda[data-estado="luz"],
  .tienda[data-estado="oferta"],
  .tienda[data-estado="compra"] {
    transition:
      opacity var(--film-cruce, 900ms) var(--ease-salida),
      visibility 0s;
  }

  /* Volteo: la cara que se va gira hasta ponerse de canto (80 ms) y la que llega sigue el
     giro desde el otro canto, se pasa un pelo y se asienta (150 ms). Escalonado por ranura
     (30 ms): el barajado de las cuatro cartas dura 320 ms en total.
     El giro de la que llega cuelga de .is-girada, que film-tienda.js pone solo a la cara que
     cambia con la capa a la vista y quita al acabar: si colgara de .is-vista, al soltar
     data-salto (o al volver a pintarse la capa) las cartas ya colocadas se pondrían de
     canto y repetirían el volteo. */
  .tienda:not([data-salto]) .tienda__cara {
    --tienda-escalon: calc(var(--tienda-i) * 30ms);
    transition:
      transform 80ms var(--ease-entrada) var(--tienda-escalon),
      visibility 0s linear calc(80ms + var(--tienda-escalon));
  }

  .tienda:not([data-salto]) .tienda__cara.is-vista { transition: visibility 0s linear calc(80ms + var(--tienda-escalon)); }

  .tienda:not([data-salto]) .tienda__cara.is-vista.is-girada:not(.tienda__cara--sigilo) { animation: tienda-gira 150ms linear calc(80ms + var(--tienda-escalon)) backwards; }

  .tienda:not([data-salto]) .tienda__cara--sigilo {
    transition:
      opacity 220ms var(--ease-entrada),
      transform 220ms var(--ease-entrada),
      visibility 0s linear 220ms;
  }

  .tienda:not([data-salto]) .tienda__cara--sigilo.is-vista {
    transition:
      opacity 320ms var(--ease-salida) 60ms,
      transform 420ms var(--ease-rebote) 60ms,
      visibility 0s;
    animation: none;
  }

  /* Brillo de las cartas, encendido, halo, cono y luz de canto */
  .tienda:not([data-salto]) .tienda__carta {
    transition:
      filter 420ms var(--ease-salida),
      transform 520ms var(--ease-rebote);
  }

  .tienda:not([data-salto]) .tienda__ranura--centro .tienda__carta::after { transition: opacity 420ms var(--ease-salida); }

  .tienda:not([data-salto]) .tienda__halo {
    transition:
      opacity 520ms var(--ease-salida),
      transform 700ms var(--ease-salida);
  }

  .tienda:not([data-salto]) .tienda__cono {
    transition:
      opacity 520ms var(--ease-salida) 120ms,
      transform 760ms var(--ease-salida) 120ms;
  }

  .tienda:not([data-salto]) .tienda__brillo::after { transition: opacity 520ms var(--ease-salida) calc(var(--tienda-onda) * 110ms); }

  .tienda:not([data-salto]) .tienda__brillo { transition: opacity 200ms var(--ease-salida); }

  .tienda:not([data-salto]) .tienda__rol { transition: opacity 420ms var(--ease-salida); }

  /* compra: se van escalonadas, primero la de la derecha (hasta 768 px la carta encendida se
     aparta hacia ese lado); al volver atrás, suben a la vez */
  .tienda:not([data-salto]) .tienda__ranura {
    transition:
      opacity 340ms var(--ease-salida),
      transform 460ms var(--ease-salida),
      visibility 0s;
  }

  .tienda:not([data-salto])[data-estado="compra"] .tienda__ranura:not(.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);
  }

  /* la ranura 4 no baja: su hueco se apaga mientras la carta dorada se deshace y la ranura
     entera espera a que acaben las chispas. A los 0,7 s de la compra (2,03 s del vídeo) no
     queda nada más que la carta encendida: en el vídeo, el estallido llega a los 2,04 s y el
     campeón cae a los 2,67 s */
  .tienda:not([data-salto]) .tienda__ranura::before { transition: opacity 260ms var(--ease-salida); }

  .tienda:not([data-salto])[data-estado="compra"] .tienda__ranura[data-ranura="4"]::before { transition: opacity 240ms var(--ease-entrada) 200ms; }

  .tienda:not([data-salto])[data-estado="compra"] .tienda__ranura[data-ranura="4"] {
    transition:
      opacity 0s linear 700ms,
      visibility 0s linear 700ms;
  }

  /* se aparta: carta, halo y cono se deslizan a la vez, al paso del vídeo (su paneo va de
     1,4 a 2,0 s; la compra, a los 1,33 s) */
  .tienda:not([data-salto])[data-aparte="1"] .tienda__ranura--centro,
  .tienda:not([data-salto])[data-aparte="1"] .tienda__halo,
  .tienda:not([data-salto])[data-aparte="1"] .tienda__cono { transition: transform 700ms cubic-bezier(0.45, 0, 0.55, 1); }

  /* esquiva: la fila (la carta encendida, su halo y su cono) baja deprisa, antes de que
     suba el hacha, y vuelve cuando ya ha bajado */
  .tienda:not([data-salto]) .tienda__fila { transition: opacity 200ms var(--ease-salida); }

  .tienda:not([data-salto])[data-esquiva="1"] .tienda__fila { transition: opacity 180ms var(--ease-salida); }

  .tienda:not([data-salto]) .tienda__boton {
    transition:
      opacity 320ms var(--ease-salida),
      visibility 0s;
  }

  .tienda:not([data-salto])[data-estado="compra"] .tienda__boton {
    transition:
      opacity 320ms var(--ease-entrada),
      visibility 0s linear 320ms;
  }

  /* Entrada (espera): las cinco cartas suben boca abajo, escalonadas, y luego el botón;
     todo posado 0,8 s después de entrar el plano (el primer aletazo llega a los 0,9 s).
     --tienda-t-entra lo pone film-tienda.js con data-t-entra. Durante el salto esperan
     ocultas: la capa ya se está fundiendo y no deben asomar antes de subir. */
  .tienda[data-salto][data-entrada="sube"] .tienda__ranura,
  .tienda[data-salto][data-entrada="sube"] .tienda__boton { opacity: 0; }

  .tienda:not([data-salto])[data-entrada="sube"] .tienda__ranura {
    animation: tienda-sube 480ms var(--ease-rebote) calc(var(--tienda-t-entra, 100ms) + var(--tienda-i) * 55ms) backwards;
  }

  .tienda:not([data-salto])[data-entrada="sube"] .tienda__boton {
    animation: tienda-sube-boton 420ms var(--ease-rebote) calc(var(--tienda-t-entra, 100ms) + 280ms) backwards;
  }

  /* rol: el botón late con cada aletazo (dos nombres para que cada golpe arranque de cero) */
  .tienda:not([data-salto])[data-efecto="rol"][data-pulso="a"] .tienda__rol { animation: tienda-latido-a 280ms var(--ease-salida); }
  .tienda:not([data-salto])[data-efecto="rol"][data-pulso="b"] .tienda__rol { animation: tienda-latido-b 280ms var(--ease-salida); }
  .tienda:not([data-salto])[data-efecto="rol"][data-pulso="a"] .tienda__rol::after { animation: tienda-aro-a 320ms var(--ease-salida); }
  .tienda:not([data-salto])[data-efecto="rol"][data-pulso="b"] .tienda__rol::after { animation: tienda-aro-b 320ms var(--ease-salida); }

  /* …y el oro baja 2: la cifra nueva cae desde arriba (dos nombres, como el latido) */
  .tienda:not([data-salto])[data-efecto="rol"][data-pulso="a"] .tienda__cero { animation: tienda-oro-a 260ms var(--ease-salida); }
  .tienda:not([data-salto])[data-efecto="rol"][data-pulso="b"] .tienda__cero { animation: tienda-oro-b 260ms var(--ease-salida); }

  /* alto: la carta de la ranura 4 aparece con un destello verde */
  .tienda:not([data-salto])[data-efecto="alto"] .tienda__destello { animation: tienda-destello 620ms var(--ease-salida) 40ms backwards; }

  /* luz: el roleo de MIA. El botón late más fuerte, con la luz blanca de la carta, y el oro rebota */
  .tienda:not([data-salto])[data-efecto="luz"] .tienda__rol { animation: tienda-latido-fuerte 520ms var(--ease-salida); }

  .tienda:not([data-salto])[data-efecto="luz"] .tienda__rol::after {
    box-shadow: 0 0 0 0.08em rgba(255, 255, 255, 0.98), 0 0 0.8em 0.14em rgba(240, 230, 210, 0.78);
    animation: tienda-aro-a 620ms var(--ease-salida);
  }

  .tienda:not([data-salto])[data-efecto="luz"] .tienda__cero { animation: tienda-cero 560ms var(--ease-rebote) 120ms backwards; }

  /* haz: onda de luz al encenderse y un brillo que barre la fila una vez, desde la central */
  .tienda:not([data-salto])[data-efecto="haz"] .tienda__ranura--centro .tienda__carta::before { animation: tienda-onda 760ms var(--ease-salida) backwards; }

  .tienda:not([data-salto])[data-efecto="haz"] .tienda__brillo::before { animation: tienda-barrido 720ms var(--ease-salida) calc(80ms + var(--tienda-onda) * 130ms) backwards; }

  /* oferta: la carta de la ranura 4 se va con un puf verde; la dorada se gira y late una vez */
  .tienda:not([data-salto])[data-efecto="oferta"] .tienda__destello { animation: tienda-puf 520ms var(--ease-salida) backwards; }

  .tienda:not([data-salto])[data-efecto="oferta"] .tienda__ranura[data-ranura="4"] .tienda__carta { animation: tienda-late 560ms ease-in-out 380ms; }

  /* compra: la dorada se hunde como un botón pulsado y se deshace en chispas */
  .tienda:not([data-salto])[data-efecto="compra"] .tienda__cara--dorada { animation: tienda-pulsada 440ms var(--ease-entrada) both; }

  .tienda:not([data-salto])[data-efecto="compra"] .tienda__destello {
    background: radial-gradient(
      closest-side,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 226, 154, 0.85) 28%,
      rgba(248, 179, 63, 0.4) 58%,
      rgba(248, 179, 63, 0) 100%
    );
    animation: tienda-destello 480ms var(--ease-salida) 110ms backwards;
  }

  .tienda:not([data-salto])[data-efecto="compra"] .tienda__chispas i { animation: tienda-chispa 480ms var(--ease-salida) 140ms backwards; }

  .tienda:not([data-salto])[data-efecto="compra"] .tienda__chispas i:nth-child(3n) { animation-delay: 180ms; }

  .tienda:not([data-salto])[data-efecto="compra"] .tienda__chispas i:nth-child(3n + 1) { animation-delay: 220ms; }
}

@keyframes tienda-gira {
  0% { transform: perspective(64em) rotateY(-90deg) scale(1); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  64% { transform: perspective(64em) rotateY(9deg) scale(1.035); animation-timing-function: ease-in-out; }
  100% { transform: perspective(64em) rotateY(0deg) scale(1); }
}

@keyframes tienda-sube {
  0% { opacity: 0; transform: translate3d(0, 52%, 0) scale(0.88) rotate(-3deg); }
  40% { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
}

@keyframes tienda-sube-boton {
  0% { opacity: 0; transform: translate3d(0, 90%, 0) scale(0.8); }
  45% { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes tienda-latido-a {
  0% { transform: scale(1); }
  30% { transform: scale(0.88); }
  65% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes tienda-latido-b {
  0% { transform: scale(1); }
  30% { transform: scale(0.88); }
  65% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes tienda-latido-fuerte {
  0% { transform: scale(1); }
  22% { transform: scale(0.82); }
  55% { transform: scale(1.24); }
  78% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

@keyframes tienda-aro-a {
  0% { opacity: 0; transform: scale(1); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.5, 1.9); }
}

@keyframes tienda-aro-b {
  0% { opacity: 0; transform: scale(1); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.5, 1.9); }
}

@keyframes tienda-cero {
  0% { transform: scale(0.3); }
  55% { transform: scale(1.5); }
  78% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes tienda-oro-a {
  0% { opacity: 0; transform: translateY(-0.5em); }
  100% { opacity: 1; transform: none; }
}

@keyframes tienda-oro-b {
  0% { opacity: 0; transform: translateY(-0.5em); }
  100% { opacity: 1; transform: none; }
}

@keyframes tienda-destello {
  0% { opacity: 0; transform: scale(0.4); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.3); }
}

@keyframes tienda-puf {
  0% { opacity: 0.95; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.5); }
}

@keyframes tienda-late {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.09); }
}

@keyframes tienda-onda {
  0% { opacity: 0; transform: scale(0.96); }
  14% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.3); }
}

@keyframes tienda-barrido {
  0% { opacity: 0; transform: translateX(-130%) skewX(-14deg); }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translateX(330%) skewX(-14deg); }
}

@keyframes tienda-pulsada {
  0% { visibility: visible; opacity: 1; transform: perspective(64em) rotateY(0deg) scale(1); }
  30% { visibility: visible; opacity: 1; transform: perspective(64em) rotateY(0deg) translate3d(0, 0.4em, 0) scale(0.9); }
  100% { visibility: hidden; opacity: 0; transform: perspective(64em) rotateY(0deg) translate3d(0, 0.4em, 0) scale(0.7); }
}

@keyframes tienda-chispa {
  0% { opacity: 0; transform: rotate(var(--tienda-a)) translate3d(0, -1em, 0) scale(0.4); }
  16% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--tienda-a)) translate3d(0, calc(var(--tienda-d) * -1), 0) scale(1.15); }
}

/* ============================================================================
   CUÁNDO NO EXISTE
   ========================================================================== */
/* No cabe sin tapar a los personajes.
   · Más de 768 px: cuando la banda no da para una carta de 60 px (por debajo ya no se lee
     como carta). La carta mide (max(27vh, 6,75vw + 15vh) - 72 px) / 1,285 (72 px = la nav y
     su aire): baja de 60 px si el alto no llega a 553 px Y, además, 6,75vw + 15vh no llega
     a 149 px, es decir, alto < 994 px - 0,45 × ancho. Un media query solo sabe de
     rectángulos: esa frontera inclinada va en escalones, siempre del lado de no mostrarla.
     Caen aquí los móviles grandes apaisados (932×430, 915×412: salían cartas de 40 px), las
     tabletas pequeñas apaisadas y las ventanas de escritorio muy bajas.
   · Hasta 768 px, con el recorte 9:16: ventanas más anchas que 4:5 (un móvil apaisado). El
     vídeo se recorta tanto que no queda cielo. */
@media (min-width: 769px) and (max-height: 400px),
  (min-width: 769px) and (max-width: 1320px) and (max-height: 454px),
  (min-width: 769px) and (max-width: 1200px) and (max-height: 499px),
  (min-width: 769px) and (max-width: 1100px) and (max-height: 544px),
  (min-width: 769px) and (max-width: 1000px) and (max-height: 552px),
  (max-width: 768px) and (min-aspect-ratio: 4/5) {
  .tienda.is-armada { display: none; }
}

/* Movimiento reducido (también en caliente) y película en fotos: la capa no existe. Las
   fotos de los capítulos llevan la tienda ya compuesta. */
@media (prefers-reduced-motion: reduce) {
  .tienda.is-armada { display: none; }
}

.pelicula.is-stills .tienda.is-armada { display: none; }

/* Colores forzados: sin fondos ni sombras las cartas serían cajas vacías sobre el vídeo */
@media (forced-colors: active) {
  .tienda.is-armada { display: none; }
}

@media print {
  .tienda.is-armada { display: none; }
}

/* ============================================================================
   ENCUADRE Y EMPALME DE LOS PLANOS 2 Y 3 (contrato §6 y §7 bis)
   · Encuadre. Con la ventana más ancha que 16:9 (la de casi cualquier navegador de
     escritorio), object-fit: cover recorta el vídeo por arriba y por abajo. Centrado, el
     cielo de la tienda se quedaba fuera; al 15 % se recorta casi todo por abajo, donde solo
     hay losas (el botón, en el 83 % del alto del cuadro, sigue a la vista). --tienda-abajo
     cuenta con este 15 %. Foto y vídeo, solo por encima de 768 px (debajo va el 9:16).
   · Empalme. El plano 3 empieza en el fotograma en que acaba el 2. En scroll.css el plano
     que ha terminado «respira» (empuje al 3,5 %) y el que entra hace un zoom del 4 %:
     durante el fundido se vería doble. Para este par, ni lo uno ni lo otro; el resto, como
     están. (Si el plano 3 entra con el 2 a medias, film-tienda.js lleva el vídeo del 2 a
     su último fotograma.)
   ========================================================================== */
@media (min-width: 769px) {
  .film__plano[data-plano="2"] .film__still,
  .film__plano[data-plano="2"] .film__video,
  .film__plano[data-plano="3"] .film__still,
  .film__plano[data-plano="3"] .film__video { object-position: var(--foco-x, 50%) 15%; }
}

.film__plano[data-plano="2"].is-activo.is-terminado { transform: none; }

.film__plano[data-plano="3"] { transform: none; }

/* ============================================================================
   LA VENTANA CRUZA LOS 768 PX CON LA PELÍCULA YA ARRANCADA (móvil que se gira, ventana
   que se estrecha)
   scroll-film.js elige la fuente de los vídeos una vez, al arrancar: el recorte 9:16 hasta
   768 px y el 16:9 por encima; las fotos, en cambio, cambian solas con el ancho (<picture>).
   Las reglas de arriba y las de scroll.css se guían por el ancho de la ventana, y con el
   vídeo de la otra anchura enseñaban solo cielo (el 9:16 al 15 % en una ventana apaisada) o
   dejaban a los personajes fuera (el 16:9 centrado en una ventana vertical), con la carta
   encendida lejos de la columna de luz. film-tienda.js apunta en #pelicula la fuente con que
   arrancó la película (data-fuente, solo si hay vídeo): el VÍDEO de los planos 2 y 3 se
   encuadra según su fuente y la capa, que tiene el eje de la otra, no se muestra.
   ========================================================================== */
@media (min-width: 769px) {
  .pelicula[data-fuente="movil"] .film__plano[data-plano="2"] .film__video,
  .pelicula[data-fuente="movil"] .film__plano[data-plano="3"] .film__video { object-position: 50% 50%; }

  .pelicula[data-fuente="movil"] .tienda.is-armada { display: none; }
}

@media (max-width: 768px) {
  .pelicula[data-fuente="escritorio"] .film__plano[data-plano="2"] .film__video,
  .pelicula[data-fuente="escritorio"] .film__plano[data-plano="3"] .film__video { object-position: var(--foco-x, 50%) 50%; }

  .pelicula[data-fuente="escritorio"] .tienda.is-armada { display: none; }
}