/* Escenario del directo simulado (común a todas las direcciones).
   Variables que una dirección puede ajustar en .a54stage o un ancestro:
   --stage-ratio (16 / 9), --stage-radius (0), --stage-cam-size (26%), --stage-font (system-ui). */

.a54stage {
  --stage-ratio: 16 / 9;
  position: relative;
  aspect-ratio: var(--stage-ratio);
  width: 100%;
  overflow: hidden;
  background: #05070d;
  color: #fff;
  border-radius: var(--stage-radius, 0);
  font-family: var(--stage-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  container-type: inline-size;
  isolation: isolate;
}

.a54stage-screen { position: absolute; inset: 0; }

.a54slide {
  position: absolute; inset: 0;
  display: grid; align-content: end;
  padding: 6cqw 6cqw 7cqw;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
[data-slide="cover"] .a54slide--cover,
[data-slide="exposure"] .a54slide--exposure,
[data-slide="triangle"] .a54slide--triangle,
[data-slide="handheld"] .a54slide--handheld,
[data-slide="editing"] .a54slide--editing {
  opacity: 1; visibility: visible; transition: opacity .6s ease;
}
/* Sin data-slide en el raíz (antes de recibir estado), la portada. */
[data-room]:not([data-slide]) .a54slide--cover { opacity: 1; visibility: visible; }

.a54slide-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -1;
  filter: brightness(.55) saturate(1.1);
}
.a54slide-body { max-width: 70cqw; text-shadow: 0 1px 8px rgb(0 0 0 / .5); }
.a54slide h3 { margin: 0 0 1.6cqw; font-size: 5.6cqw; line-height: 1.1; font-weight: 700; }
.a54slide p, .a54slide li { margin: 0; font-size: 3.2cqw; line-height: 1.35; }
.a54slide ul, .a54slide ol { margin: 0; padding-left: 4cqw; display: grid; gap: .8cqw; }
.a54slide-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: 2.4cqw !important; opacity: .85; }

.a54slide-values { display: flex; gap: 3cqw; margin: 0 0 1.5cqw; }
.a54slide-values div { background: rgb(255 255 255 / .12); border-radius: 1.4cqw; padding: 1.4cqw 2.2cqw; }
.a54slide-values dt { font-size: 2.4cqw; opacity: .8; }
.a54slide-values dd { margin: 0; font-size: 5cqw; font-weight: 700; font-variant-numeric: tabular-nums; }
.a54slide-note { opacity: .8; }

/* Foto en edición: los deslizadores avanzan con --step (lo pone el núcleo en el raíz). */
.a54slide--editing { padding: 3cqw; align-content: stretch; }
.a54edit { display: grid; grid-template-columns: 1fr 34%; gap: 2.4cqw; height: 100%; }
.a54edit-photo { overflow: hidden; border-radius: 1cqw; background: #000; }
.a54edit-photo img {
  width: 100%; height: 100%; object-fit: cover;
  --p: calc(min(var(--step, 0), 6) / 6);
  filter: brightness(calc(.62 + var(--p) * .38)) contrast(calc(.9 + var(--p) * .15)) saturate(calc(.8 + var(--p) * .3)) sepia(calc(.35 - var(--p) * .35));
  transition: filter 1.2s ease;
}
.a54edit-panel { background: #1a1d24; border-radius: 1cqw; padding: 2cqw; display: grid; align-content: start; gap: 2.2cqw; }
.a54edit-title { font-size: 2.3cqw !important; opacity: .8; margin-bottom: 1cqw !important; }
.a54edit-slider { display: grid; gap: .8cqw; font-size: 2.3cqw; }
.a54edit-slider i { display: block; height: .7cqw; border-radius: 1cqw; background: #3a3f4b; position: relative; }
.a54edit-slider i::after {
  content: ""; position: absolute; top: 50%; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #fff;
  left: calc((.5 + (var(--target) - .5) * min(var(--step, 0), 6) / 6) * 100%);
  transform: translate(-50%, -50%); transition: left 1.2s ease;
}

.a54stage-cam {
  position: absolute; right: 2.5cqw; bottom: 2.5cqw;
  width: var(--stage-cam-size, 26%); aspect-ratio: 1;
  border-radius: 2cqw; overflow: hidden; background: #222;
  box-shadow: 0 .6cqw 2.4cqw rgb(0 0 0 / .5);
  border: .3cqw solid rgb(255 255 255 / .7);
}
.a54stage-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }

.a54stage-sim {
  position: absolute; left: 2.5cqw; top: 2.5cqw;
  font-size: max(10px, 2.2cqw); line-height: 1; padding: .6em .8em; border-radius: 99px;
  background: rgb(0 0 0 / .55); color: rgb(255 255 255 / .85); letter-spacing: .02em;
}

@media (prefers-reduced-motion: reduce) {
  .a54slide, .a54edit-photo img, .a54edit-slider i::after { transition: none; }
}