/* ==========================================================================
   El acto del iPhone (planos 6 a 8 y la salida a Post), módulo de la portada
   Misión 016 · experto del iPhone. Lo de la prueba corta aprobada
   (../prueba-corta-iphone/pelicula.css), todo bajo .acto-iphone: la página, la
   barra, la banda, los titulares, los rótulos y la tarjeta son del anfitrión
   (pelicula.css), que los comparte. El estado de teléfono es .pelicula.movil.
   ========================================================================== */

/* --- Las pantallas del iPhone, dentro del cuadro del anfitrión -------------- */
.acto-iphone.sala { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.acto-iphone.sala > .pzi { position: absolute; inset: 0; }
.acto-iphone.sala > .pzi[data-orientacion="v"] { bottom: auto; }
/* En el teléfono la cámara sólo baja por las pantallas (nunca escala): cada una en
   su capa, para que el paneo no las vuelva a pintar. */
.movil .acto-iphone.sala[data-sala="iphone-monitor"], .movil .acto-iphone.sala[data-sala="iphone-toma"] { will-change: transform; }

/* La pantalla compartida por la tira, el monitor y la toma: el fondo de cada una
   (con su opacidad) debajo, y el borde de luz de la ventana de Studio encima, con el
   radio de la pantalla. Así una pantalla llega sin tapar la imagen que viaja. Los
   fondos y los bordes se funden en su capa (a 1728 costaba cuadros). */
.acto-iphone.fondo-iphone, .acto-iphone.filo-iphone { position: absolute; overflow: hidden; pointer-events: none; }
.acto-iphone.fondo-iphone > i { position: absolute; inset: 0; display: block; will-change: opacity; }
.acto-iphone .fondo-tira {
  background:
    radial-gradient(42% 70% at 3% 42%, rgba(128, 134, 180, .17), rgba(128, 134, 180, 0) 100%),
    radial-gradient(34% 34% at 30% 66%, rgba(201, 147, 90, .11), rgba(201, 147, 90, 0) 100%),
    var(--pzi-suelo, #0C0B0E);
}
.acto-iphone .fondo-monitor { background: #000; }
.acto-iphone .fondo-toma { background: linear-gradient(180deg, #0C0B0E, #101012); }
.acto-iphone.filo-iphone { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), inset 0 1px 0 rgba(255, 255, 255, .1); z-index: 5; will-change: opacity; }
.movil .acto-iphone.filo-iphone { display: none; }
.acto-iphone .pzi-pantalla { background: transparent; box-shadow: none; }
.acto-iphone .pzi-pantalla::after { display: none; }
.movil .acto-iphone .pzi-pantalla { border-radius: 0; }

/* La regla .pastilla del anfitrión (la de la barra de sitios de Studio) alcanzaba las
   cápsulas de las piezas (la del día y la 709 · LOG) con su margen y su origen:
   la del Día 1 salía media pastilla más arriba, recortada. */
.acto-iphone .pzi .pastilla { margin-top: 0; transform-origin: 50% 50%; }

/* --- Las cortinas (acto 2, §2) ------------------------------------------------
   Cada una es la mitad del cuadro, recortada en la línea del centro, con un hueco
   de esquinas redondas y una sombra enorme del color de la sala. Se trasladan (nunca
   se deforman). Van por debajo de la banda (20), los rótulos (30) y la tarjeta (70)
   del anfitrión, y por encima de la capa de viaje del acto (14). Capa propia desde el
   principio: si se creara al cerrarse, su sombra se pintaría en pleno movimiento. */
.acto-iphone.cortina { position: absolute; left: 0; overflow: hidden; pointer-events: none; z-index: 15; }
.acto-iphone.cortina .hueco { position: absolute; border-radius: 14px; box-shadow: 0 0 0 100vmax var(--sala-fondo); will-change: transform; }
.acto-iphone.cortina .filo { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13); will-change: opacity; }
.acto-iphone.cortina--arriba .filo { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), inset 0 1px 0 rgba(255, 255, 255, .1); }
.movil .acto-iphone.cortina .hueco { border-radius: 14px 14px 0 0; }

/* --- Estados que maneja el guion, no el atributo de la pieza --------------------
   REC grabando (dos nodos), el archivo que cambia y el marco ámbar de la escena 7,
   que llega después de la tira. */
.acto-iphone .mon-rec .cuadro { opacity: 1; }
.acto-iphone .pzi--monitor .mon-archivo .grabando { display: block; }
.acto-iphone .tira-tarjeta.elegida .foto::after { box-shadow: inset 0 0 0 calc(.6 * var(--u)) rgba(255, 255, 255, .1); }
.acto-iphone .marco-peli { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 calc(1.5 * var(--u)) var(--pzi-ambar); pointer-events: none; }
/* Las capas de la pieza (aviso de disco, rueda de ISO, voz), con el fundido de la tarjeta. */
.acto-iphone .pzi .capa { transition: opacity .22s cubic-bezier(0, 0, .58, 1), visibility 0s .22s; }
.acto-iphone .pzi .capa.encendida { transition: opacity .22s cubic-bezier(0, 0, .58, 1); }
/* Lo que se toca de verdad: la cápsula 709 · LOG, las estrellas y las tarjetas. */
.acto-iphone .pzi button { pointer-events: auto; }
.acto-iphone button.con-capa { cursor: pointer; }
.pelicula:not(.movil) .acto-iphone [data-capa-mac], .pelicula.movil .acto-iphone [data-capa-tel] { pointer-events: auto; }

/* --- La caja de las jornadas (cristal de la barra del iPhone) ---------------- */
.acto-iphone.viajeros-acto { position: absolute; inset: 0; pointer-events: none; z-index: 14; }
.acto-iphone.viajeros-acto > * { position: absolute; left: 0; top: 0; }
.acto-iphone .viajero-dias > i { position: absolute; left: 0; top: 0; display: block; transform-origin: 0 0; border-radius: 999px; }
.acto-iphone .viajero-dias .cristal { background: rgba(255, 255, 255, .095); }
/* La sombra, en su capa: se pinta una vez y sólo se escala; el cristal no. */
.acto-iphone .viajero-dias .sombra { box-shadow: 0 10px 26px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35); will-change: transform; }
.acto-iphone .viajero-dias .pastilla-viaje { background: rgba(255, 255, 255, .22); }
/* Las divisiones entre los tramos de cada día (sólo mientras viaja). */
.acto-iphone .viajero-dias .divisor { background: rgba(255, 255, 255, .24); border-radius: 0; }

/* --- La tarjeta del acto (la del anfitrión, con lo que añade el acto) ---------- */
.capa-info.acto-iphone.visible.con-enlace, .capa-info.acto-iphone.hoja-movil.visible { pointer-events: auto; }
.capa-info.acto-iphone a { display: inline-block; margin-top: 8px; color: var(--sala-tinta); text-decoration: underline; text-decoration-color: rgba(242, 240, 236, .4); text-underline-offset: 3px; }
.capa-info.acto-iphone .nota-capa { margin-top: 2px; font-size: 12px; color: var(--sala-tenue); }

/* En el teléfono, dos datos por plano como mucho llevan un «+» de cristal: 22 px de
   dibujo y 44 de toque, en un nodo propio junto al dato. */
.acto-iphone .pzi .mas-peli {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: none;
  opacity: 0; pointer-events: none; transition: opacity .22s ease-out;
}
.acto-iphone .pzi .mas-peli::before {
  content: ""; position: absolute; inset: 11px; border-radius: 50%;
  background: linear-gradient(var(--sala-tinta), var(--sala-tinta)) center / 10px 1.5px no-repeat, linear-gradient(var(--sala-tinta), var(--sala-tinta)) center / 1.5px 10px no-repeat, var(--sala-cristal-relleno);
  box-shadow: inset 0 1px 0 var(--sala-cristal-borde-arriba), inset 0 0 0 1px var(--sala-cristal-borde-abajo), 0 4px 14px rgba(0, 0, 0, .35);
}
.pelicula.movil .acto-iphone .pzi .mas-peli.encendido { opacity: 1; pointer-events: auto; }
/* Apagado no se toca (la regla de [data-capa-tel] lo volvía tocable sin verse). */
.pelicula.movil .acto-iphone .pzi .mas-peli:not(.encendido) { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .acto-iphone .pzi .capa, .acto-iphone .pzi .capa.encendida { transition: opacity .15s ease-out; }
}

/* La regla .movil .cuadro del anfitrión (las esquinas de su cuadro en el teléfono)
   alcanzaba el recuadro de REC del monitor. */
.pelicula.movil .acto-iphone .pzi .cuadro { border-radius: calc(var(--r, 0) * var(--u)); }
.acto-iphone .pzi .cuadro { overflow: visible; }