/* ==========================================================================
   La portada de CLAQ · misión 016, fase 3 · experto en frontend (Studio)
   El escenario de la escaleta (§2 y §8): barra de la página con el cambio de
   app, banda del titular, el cuadro (la ventana de Studio, 16:10) con su cámara,
   la mesa en 3D detrás, los rótulos en los márgenes y, debajo de la película, el
   cierre del sitio (los créditos). Las medidas del cuadro las pone pelicula.js.
   Lo del acto del iPhone va en acto-iphone.css, bajo su propia raíz.
   ========================================================================== */
html { background: #0B0B0C; }
body { margin: 0; background: var(--sala-fondo); color: var(--sala-tinta); font-family: var(--sala-letra); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- La barra de la página: CLAQ, el cambio de app y la beta ------------------- */
.pagina-barra {
  position: fixed; left: 0; right: 0; top: 0; z-index: 100; height: 52px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 22px;
  background: rgba(11, 11, 12, .92);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .pagina-barra { background: rgba(11, 11, 12, .72); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
}
.marca-claq { font: 900 21px/1 var(--sala-letra-titulos); letter-spacing: -.036em; color: var(--sala-tinta); text-decoration: none; }
.boton-beta {
  display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 999px; flex: none;
  background: #F5F3EF; color: #141414; font: 600 14px/1 var(--sala-letra); text-decoration: none; white-space: nowrap;
}
.boton-beta:hover { background: #FFFFFF; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--sala-ambar); outline-offset: 3px; }
.pagina-marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* El cambio de app: las pestañas de la Sala (PestanasSala), con la luz del acto en
   curso. La luz la mueve pelicula.js con el resorte de la Sala; el texto no cambia. */
.cambio-app {
  position: relative; display: inline-flex; align-items: center; height: 30px; padding: 2px; border-radius: 999px; flex: none;
  background: var(--sala-cristal-relleno, rgba(255, 255, 255, .07));
  box-shadow: inset 0 1px 0 var(--sala-cristal-borde-arriba, rgba(255, 255, 255, .14)), inset 0 0 0 1px var(--sala-cristal-borde-abajo, rgba(255, 255, 255, .06));
}
.cambio-luz { position: absolute; left: 0; top: 2px; width: 100px; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, .16); transform-origin: 0 50%; pointer-events: none; }
.cambio-op {
  position: relative; z-index: 1; height: 26px; padding: 0 12px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 500 13px/1 var(--sala-letra); color: var(--sala-secundaria); white-space: nowrap; transition: color .14s ease-out;
}
.cambio-op[aria-pressed="true"] { color: var(--sala-tinta); }
.cambio-op:hover { color: var(--sala-tinta); }
.cambio-op .corto, .boton-beta .corto { display: none; }
.pagina-demo { font: 400 13px/1 var(--sala-letra); color: var(--sala-secundaria); white-space: nowrap; }
@media (max-width: 599px) {
  .pagina-barra { height: 48px; --pad-barra: 14px; gap: 8px; }
  .pagina-marca { gap: 7px; }
  .pagina-marca .marca-claq { font-size: 17px; }
  .cambio-app { height: 28px; }
  .cambio-luz { height: 24px; }
  .cambio-op { height: 24px; padding: 0 7px; font-size: 12.5px; }
  .cambio-op .largo { display: none; } .cambio-op .corto { display: inline; }
  .pagina-demo { font-size: 12px; }
  .boton-beta { height: 32px; padding: 0 12px; font-size: 13px; }
}
/* «Beta para iPhone» cabe desde 375 px (verificador: «Beta» sola junto a «Mac» puede
   leerse como una beta de Studio). Sólo por debajo se acorta; su etiqueta para
   lectores de pantalla sigue diciendo de qué app es. */
@media (max-width: 369px) { .boton-beta .largo { display: none; } .boton-beta .corto { display: inline; } }
/* Y si con la letra de este aparato tampoco cabe, lo decide pelicula.js al medir. */
.pagina-barra.justa .boton-beta .largo { display: none; } .pagina-barra.justa .boton-beta .corto { display: inline; }

/* --- La película ---------------------------------------------------------- */
.pelicula { position: relative; }
.escenario { background: var(--sala-fondo); }
.escenario > * { position: absolute; }

/* La mesa vive en todo el escenario (detrás del cuadro): la sala a oscuras. */
.capa-mesa { inset: 0; }
.capa-mesa > .pz { position: absolute; inset: 0; }
.capa-mesa .pz--mesa { overflow: visible; }
.capa-mesa .pz--mesa > .pz-lamina { width: 100%; height: 100%; }
.capa-mesa .mesa-escenario { perspective: calc(1.2 * var(--pelicula-ancho, 1440px)); perspective-origin: 50% 40%; }
/* La luz cae con la distancia: el 22 % de arriba del escenario se oscurece. */
.oscuro-arriba { left: 0; right: 0; top: 0; height: 30%; pointer-events: none; background: linear-gradient(var(--sala-fondo) 0%, rgba(11, 11, 12, .85) 40%, rgba(11, 11, 12, 0) 100%); }
/* Lo de fuera del cuadro se apaga: una sombra enorme del color del fondo. */
.velo-cuadro { pointer-events: none; border-radius: 14px; box-shadow: 0 0 0 200vmax var(--sala-fondo); }

/* El cuadro: la ventana de Studio. */
.cuadro { overflow: hidden; border-radius: 14px; isolation: isolate; pointer-events: none; }
.cuadro .pz { pointer-events: none; }
.movil .cuadro, .movil .velo-cuadro { border-radius: 14px 14px 0 0; }
.cuadro-fondo { position: absolute; inset: 0; background: var(--sala-fondo); }
.camara { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.camara > .sala { position: absolute; left: 0; top: 0; }
.camara .sala > .pz { position: absolute; inset: 0; }
.cuadro-barra { position: absolute; left: 0; top: 0; right: 0; height: 100%; pointer-events: none; }
.cuadro-barra > .pz { position: absolute; left: 0; top: 0; }
.cuadro-borde { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), inset 0 1px 0 rgba(255, 255, 255, .1); }

/* Dentro del cuadro las piezas no pintan su fondo: lo pone el cuadro. */
.camara .pz, .cuadro-barra .pz { background: transparent; }
.pz--mesa-ui .mesa-interfaz > * { will-change: auto; }
/* La barra de Studio en la película: una cápsula que viaja de sitio en sitio. */
.cuadro-barra .sitio-luz { display: none; }
.cuadro-barra .barra-sitios { overflow: visible; }
.pastilla { position: absolute; left: 0; top: 50%; height: calc(32 * var(--u)); margin-top: calc(-16 * var(--u)); width: 100px; border-radius: 999px; background: rgba(255, 255, 255, .16); transform-origin: 0 50%; }
.cuadro-barra .sitio { transition: color .14s ease-out; }
/* En el teléfono la barra es más ancha que el cuadro y se desvanece en los bordes. */
.movil .cuadro-barra { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent var(--barra-libre, 0px), #000 calc(var(--barra-libre, 0px) + 20px), #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, transparent var(--barra-libre, 0px), #000 calc(var(--barra-libre, 0px) + 20px), #000 calc(100% - 24px), transparent 100%); }
/* La cápsula fija del proyecto (sólo en el teléfono). */
.barra-fija { position: absolute; left: 0; top: 0; right: 0; height: 100%; pointer-events: none; display: none; }
.barra-fija > .pz { position: absolute; left: 0; top: 0; background: transparent; }
.movil .barra-fija { display: block; }

/* Estados del guion: aquí los maneja la película, no data-estado. */
.pelicula .pz--guion .capa-marcado, .pelicula .pz--guion .capa-guion,
.pelicula .pz--guion[data-estado="marcado"] .capa-guion { opacity: 1; visibility: inherit; }

/* --- La banda del titular --------------------------------------------------- */
.banda { left: 0; right: 0; top: 0; pointer-events: none; z-index: 20; }
/* La opacidad la escribe la película (el motor borra la suya al llegar a 1). */
.titular { position: absolute; left: 0; bottom: 0; max-width: 760px; }
.titular h2 { text-wrap: balance; margin: 0; font: 600 40px/44px var(--sala-letra-titulos); letter-spacing: -.5px; color: var(--sala-tinta); text-shadow: var(--sala-legible); }
.titular p { text-wrap: pretty; margin: 8px 0 0; font: 400 19px/26px var(--sala-letra); color: var(--sala-secundaria); text-shadow: var(--sala-legible); max-width: 640px; }
.titular .boton-beta { pointer-events: auto; margin-top: 18px; }
.movil .titular h2 { font-size: 28px; line-height: 32px; letter-spacing: -.3px; }
.movil .titular p { font-size: 15px; line-height: 20px; margin-top: 6px; }

/* --- Rótulos: un punto en el dato, una línea fina y el texto en el margen ---- */
.rotulos { inset: 0; pointer-events: none; z-index: 30; }
.rotulo-peli { position: absolute; left: 0; top: 0; }
.rotulo-peli .punto-dato { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--sala-tinta); box-shadow: 0 0 0 3px rgba(11, 11, 12, .55); }
.rotulo-peli .linea { position: absolute; height: 1px; background: rgba(242, 240, 236, .35); transform-origin: 0 50%; }
.rotulo-peli .texto { position: absolute; width: 200px; font: 400 13px/18px var(--sala-letra); color: var(--sala-secundaria); text-shadow: var(--sala-legible); }
.rotulo-peli.vertical .linea { width: 1px; height: auto; transform-origin: 50% 0; }

/* --- Lo que viaja con escala uniforme (nombres, «Niebla cerrada») ----------- */
.viajeros-propios { inset: 0; pointer-events: none; z-index: 40; }
.viajeros-propios > * { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 0 0; white-space: nowrap; }

@media (max-width: 699px) { .pagina-barra { height: 48px; --pad-barra: 16px; } }
.pagina-barra { padding-left: max(var(--pad-barra, 22px), env(safe-area-inset-left)); padding-right: max(var(--pad-barra, 22px), env(safe-area-inset-right)); }

/* --- Después de la película: el cierre del sitio, los créditos (escaleta §8.3) ---
   Una sección normal, fuera del escenario fijo. Detrás, la luz del último cuadro
   (la versión -luz del 2.1, el muelle) al 35 %, quieta con la sección. Los textos
   entran disparados al aparecer (pelicula.js pone .visto): el titular sube 12 px en
   600 ms y lo demás va escalonado a 45 ms. Con «Reducir movimiento», sólo opacidad.
   Todo el texto va en tinta o en secundaria: la tenue de la Sala (#6E6A64) quedaba en
   3.6:1 sobre este fondo, y la nota honesta y la legal tienen que leerse (verificador). */
.creditos {
  --c-margen: clamp(20px, 5vw, 80px);
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px 6vw; align-items: end;
  padding: clamp(96px, 16svh, 180px) var(--c-margen) clamp(56px, 9svh, 96px);
  background: var(--sala-fondo); color: var(--sala-tinta);
}
/* La luz es un resplandor detrás del titular, no un relleno (creativo): al 22 % y
   recogida con una máscara en elipse donde está el titular. */
.creditos::before {
  content: ""; position: absolute; inset: 0; z-index: -2; background: var(--luz-creditos, none) center / cover no-repeat; opacity: .22;
  -webkit-mask-image: radial-gradient(ellipse 46% 52% at var(--luz-x, 26%) var(--luz-y, 64%), #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 46% 52% at var(--luz-x, 26%) var(--luz-y, 64%), #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
}
/* Arriba, la luz nace del negro del escenario: no hay borde entre la película y el cierre. */
.creditos::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--sala-fondo) 0%, rgba(11, 11, 12, 0) 34%, rgba(11, 11, 12, 0) 70%, rgba(11, 11, 12, .6) 100%); pointer-events: none; }
.creditos :is(h2, h3, p, ul) { margin: 0; }
.creditos ul { padding: 0; list-style: none; }
.creditos-icono { width: 72px; height: 72px; margin-bottom: 30px; }
.creditos-icono :is(img, .claku-icon) { display: block; width: 72px; height: 72px; border-radius: 17px; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .8); }
.creditos-icono .claku-icon { padding: 0; border: 0; background: none; cursor: default; }
.creditos h2 { font: 600 clamp(44px, 6vw, 96px)/.98 var(--sala-letra-titulos); letter-spacing: -.04em; text-wrap: balance; }
.creditos h2 span { color: var(--sala-secundaria); }
.creditos-texto { margin-top: 20px !important; max-width: 40ch; font: 400 clamp(16px, 1.2vw, 19px)/1.45 var(--sala-letra); color: var(--sala-secundaria); text-wrap: pretty; }
.creditos-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.boton-claro {
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 999px;
  background: #F5F3EF; color: #141414; font: 600 15px/1 var(--sala-letra); letter-spacing: -.01em; white-space: nowrap; text-decoration: none;
}
.boton-claro:hover { background: #FFFFFF; }
.flecha { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.creditos-otros { width: 100%; max-width: 560px; justify-self: end; }
.creditos-rotulo { font: 600 11px/1.2 var(--sala-mono); letter-spacing: 1.6px; text-transform: uppercase; color: var(--sala-secundaria); margin-bottom: 10px !important; }
.creditos-rotulo + .creditos-lista { margin-bottom: 30px; }
.creditos-lista li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .12); font: 400 15px/1.35 var(--sala-letra); }
.creditos-lista li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.creditos-lista .app { color: var(--sala-tinta); font-weight: 500; }
.creditos-lista .estado { flex: 1 1 14em; color: var(--sala-secundaria); }
.creditos-compat .estado { flex: none; }
.creditos-lista :is(a, button) {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--sala-tinta); font: 500 15px/1.35 var(--sala-letra); text-decoration: none; text-align: right;
}
.creditos-lista :is(a, button):hover { color: var(--sala-ambar); }
.creditos-lista .flecha { width: 14px; height: 14px; }
.creditos-nota { margin-top: 14px !important; font: 400 13px/1.45 var(--sala-letra); color: var(--sala-secundaria); max-width: 56ch; }
.creditos-linea { margin-top: 22px !important; font: 400 14px/1.5 var(--sala-letra); color: var(--sala-secundaria); }
.creditos-contacto { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 18px !important; font: 400 14px/1.5 var(--sala-letra); color: var(--sala-secundaria); }
.creditos-contacto a { color: var(--sala-tinta); text-decoration: none; }
.creditos-contacto a:hover { color: var(--sala-ambar); }
.creditos-pie {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px;
  padding: 26px clamp(20px, 5vw, 80px) calc(30px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, .08); background: var(--sala-fondo);
  font: 400 13px/1.5 var(--sala-letra); color: var(--sala-secundaria);
}
.creditos-pie .marca-claq { font-size: 17px; }
.creditos-pie nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.creditos-pie nav a { color: var(--sala-secundaria); text-decoration: none; }
.creditos-pie nav a:hover { color: var(--sala-tinta); }
.creditos-pie p { flex-basis: 100%; margin: 0; }
/* La entrada disparada (sin JS, todo queda visible). */
.js .creditos .revela { opacity: 0; transform: translateY(12px); transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 45ms); }
.js .creditos.visto .revela { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .creditos .revela { transform: none; transition: opacity .15s linear; transition-delay: 0s; } }
@media (max-width: 699px) {
  .creditos { grid-template-columns: 1fr; gap: 40px; padding: 110px 20px 56px; --luz-x: 40%; --luz-y: 22%; }
  .creditos-otros { justify-self: stretch; }
  .creditos-icono { margin-bottom: 24px; }
}

/* --- Lo que vuela en la capa del motor ------------------------------------
   Los clones salen de su pieza y pierden los estilos que dependen de ella:
   aquí se repiten los que hacen falta (fotos, cápsulas, filas y la cabecera
   de la hoja). --u la pone pelicula.js. */
.pelicula-viajeros .foto { position: relative; overflow: hidden; border-radius: calc(10 * var(--u)); background: #1A1A1C; }
.pelicula-viajeros .foto > img { display: block; max-width: none; width: 100%; height: 100%; object-fit: cover; }
.pelicula-viajeros .foto .codigo-foto { position: absolute; left: calc(6 * var(--u)); bottom: calc(4 * var(--u)); font: 700 calc(10.5 * var(--u))/1 var(--sala-mono); color: #fff; text-shadow: var(--sala-legible); }
.pelicula-viajeros .gn-margen-escena .foto, .pelicula-viajeros .foto.margen { border-radius: calc(7 * var(--u)); }
.pelicula-viajeros .chip { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); font: 400 calc(14 * var(--u))/1.2 var(--sala-letra); color: #AAA8A5; white-space: nowrap; }
.pelicula-viajeros .chip .punto { display: block; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--c); }
.pelicula-viajeros .una-linea { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pelicula-viajeros .gn-fila { color: var(--sala-tinta); font-family: var(--sala-letra); }
.pelicula-viajeros .gn-fila img { display: block; max-width: none; }
.pelicula-viajeros .cabecera-texto { white-space: nowrap; font: 700 calc(13 * var(--u))/calc(13 * var(--u)) var(--sala-guion); color: #ECEAE6; font-kerning: none; }
.movil .pelicula-viajeros .cabecera-texto { font-size: calc(10.42 * var(--u)); line-height: calc(10.42 * var(--u)); }
.pelicula-viajeros .pl-escena .foto, .pelicula-viajeros [data-viaja^="escena:"] { border-radius: calc(4 * var(--u)); }
.viajeros-propios .marca { display: inline-block; }
/* Los viajeros propios (clones del origen): lo mínimo de cada pieza. */
.viajeros-propios .foto { overflow: hidden; background: #1A1A1C; }
.viajeros-propios .foto > img { display: block; max-width: none; width: 100%; height: 100%; object-fit: cover; }
.viajeros-propios .codigo-foto { position: absolute; left: calc(6 * var(--u)); top: calc(5 * var(--u)); font: 700 calc(10.5 * var(--u))/1 var(--sala-mono); color: #fff; text-shadow: var(--sala-legible); }
.viajeros-propios .esc-fila .punto { display: block; width: calc(5.5 * var(--u)); height: calc(5.5 * var(--u)); border-radius: 50%; background: var(--c); }
.viajeros-propios .una-linea { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viajeros-propios .esc-fila img, .viajeros-propios .esc-fila .foto > img { display: block; max-width: none; width: 100%; height: 100%; object-fit: cover; }

/* --- Capas de información (con el cursor o al tocar) ------------------------
   Cristal sólo en este control (lección §2.8); con respaldo casi opaco. */
.capa-info {
  left: 0; top: 0; z-index: 70; max-width: 300px; padding: 12px 14px; border-radius: 14px;
  background: rgba(30, 30, 33, .94); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 12px 32px rgba(0, 0, 0, .45);
  font: 400 13px/18px var(--sala-letra); color: var(--sala-secundaria);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s cubic-bezier(0, 0, .58, 1), visibility 0s .22s;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .capa-info { background: rgba(30, 30, 33, .72); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); }
}
.capa-info.visible { opacity: 1; visibility: visible; transition: opacity .22s cubic-bezier(0, 0, .58, 1); }
.capa-info b { display: block; margin-bottom: 4px; font-weight: 600; color: var(--sala-tinta); }
.capa-info span { display: block; }
.capa-info.hoja-movil { left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); max-width: none; transform: translateY(16px); transition: opacity .22s ease-out, transform .4s var(--mv-panel), visibility 0s .4s; }
.capa-info.hoja-movil.visible { transform: none; transition: opacity .22s ease-out, transform .4s var(--mv-panel); }
.cuadro .con-capa { cursor: help; }
/* En el teléfono, dos datos por plano como mucho llevan un «+» pequeño de cristal
   (22 px de dibujo; se toca el dato entero, que mide más de 44 px). v1.3. */
/* Recibir el cursor: sólo los datos con capa y los filtros del guion, siempre (la
   película decide por el tiempo si responden). El «+» existe desde el principio,
   apagado, para que encenderlo no cambie la maqueta. */
.pelicula:not(.movil) [data-capa], .pelicula.movil [data-capa-movil], .pelicula .gn-cat, .pelicula .gn-chip, .pelicula [data-filtro] { pointer-events: auto; }
.movil .cuadro [data-capa-movil] { position: relative; }
.movil [data-capa-movil]::after {
  content: ""; position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; pointer-events: none; opacity: 0;
  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);
}
.movil .con-mas::after { opacity: 1; }
.movil .capa-mesa [data-capa-movil]::after { transform: scale(var(--mesa-inv, 1)); transform-origin: 100% 0; right: calc(6px * var(--mesa-inv, 1)); top: calc(6px * var(--mesa-inv, 1)); }
@media (prefers-reduced-motion: reduce) { .capa-info, .capa-info.visible, .capa-info.hoja-movil { transition: opacity .15s ease-out; transform: none; } }

/* v1.3 · En el teléfono el rótulo no lleva línea: un punto sobre el dato y el mismo
   punto antes del texto, en la banda del titular. */
.rotulo-peli .punto-banda { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--sala-tinta); }
/* (Sin opacidad en CSS: la pone la película, y el motor borra la suya al llegar a 1.) */

/* v1.3 · La panga lleva la selección de la app (borde ámbar de 1.5 px) hasta que
   viaja. Dentro de la mesa, que la cámara achica: se compensa con --mesa-inv. */
.capa-mesa .mesa-foto.seleccionada .foto { box-shadow: 0 0 0 calc(1.5px * var(--mesa-inv, 1)) var(--sala-ambar); }

/* v1.3 · «Niebla cerrada» → la primera decisión: un solo viajero con su sombra. */
.viajero-niebla { width: 0; height: 0; }
.viajero-niebla .caja-azul { border-radius: 2px; box-shadow: 0 6px 18px rgba(0, 0, 0, .55); }
.viajero-niebla > * { will-change: auto; }

/* v1.3 · Lo que flota (la lista de Escenas, las pestañas de Producción) va encima
   de la sala, que pasa por debajo con el empuje. */
.camara [data-flota] { z-index: 3; }

/* v1.3 · Teléfono: detrás de la barra, una banda opaca del color de la sala (al 92 %
   se transparentaba el texto). Lo que pasa por debajo queda entero detrás, nunca a
   medias; los reposos empiezan en un hueco bajo ella. */
.banda-barra { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; display: none; }
.movil .banda-barra { display: block; background: var(--sala-fondo); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }

/* v1.3 · En el teléfono la cámara sólo se desplaza (nunca escala): capa propia, y el
   paneo de las esperas no obliga a repintar la sala en cada cuadro. En escritorio no:
   allí la cámara empuja y una capa fija emborronaría la letra (LEEME). */
.movil .camara { will-change: transform; }

/* Vuelta 2 · Lo que viaja (los clones del motor y los propios) se recorta con el
   cuadro: lo que viene de fuera de la ventana entra por su borde. */
.escenario .pelicula-viajeros, .escenario .viajeros-propios { clip-path: var(--recorte-cuadro, none); }

/* Las cápsulas de territorio viajan con viaje propio (su punto de color, fuera de su
   pieza, necesita su medida). */
.viajeros-propios .chip { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); }
.viajeros-propios .chip .punto { display: block; flex: none; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--c); }

/* Vuelta de Diego · La barra de la página dice qué se ve: «Studio para Mac · demo»
   (creativo; corrección del verificador: en el teléfono no se entendía). */
/* En el teléfono no cabe en un renglón junto al botón: va debajo de CLAQ. */

/* Post en la película: el visor y su título los gobierna pelicula.js (corte por
   clip). En la galería de piezas sólo se ve el primer clip; aquí todos parten
   visibles y el guion apaga los que no tocan (el motor deja la opacidad 1 vacía). */
.pelicula .po-cuadro, .pelicula .po-texto-pantalla { opacity: 1; }