/* ==========================================================================
   CLAQ Studio reconstruido · las cinco piezas de la Sala oscura
   Misión 016 · experto en frontend. Se copian de las capturas de la 0.20
   (taller/015/media/): lienzo, lienzo-cerca, escenas, guion-entre-hojas,
   guion-marcado, produccion-resumen y plan-de-rodaje. Los colores, letras y
   curvas salen de ../sistema/tokens.css (constructor); aquí sólo hay medidas.

   Cómo se mide
   - Cada pieza (.pz) es un contenedor que llena lo que le den. Dentro, la
     lámina (.pz-lamina) define --u: un «punto» de Studio en píxeles de CSS.
     En escritorio la lámina es un cuadro de 1440 × 900 puntos que cabe entero
     en la pieza; en el teléfono (pieza de menos de 700 px de ancho), 1 punto =
     ancho / 390 y la pieza se recoloca, no se encoge.
   - Todo se maqueta en --u, sin transform: la letra es letra a cualquier
     tamaño y nunca se escala un mapa de bits.
   - La mesa del Lienzo vive en sus coordenadas reales (Proyecto.json) con su
     propia unidad --m, y se mueve con la cámara (.mesa-camara).
   - Las raíces y las láminas no llevan transform: son del motor.
   ========================================================================== */

/* --- La pieza y su lámina ---------------------------------------------- */
.pz {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container: pz / size;
  background: var(--sala-fondo);
  color: var(--sala-tinta);
  font-family: var(--sala-letra);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.pz *, .pz *::before, .pz *::after { box-sizing: border-box; }
.pz img { display: block; max-width: none; }
.pz-lamina {
  --u: min(calc(100cqw / 1440), calc(100cqh / 900));
  position: absolute;
  inset: 0;
  margin: auto;
  width: calc(1440 * var(--u));
  height: calc(900 * var(--u));
}
@container pz (max-width: 699px) {
  .pz-lamina { --u: calc(100cqw / 390); width: 100%; height: 100%; }
  .solo-escritorio { display: none !important; }
}
@container pz (min-width: 700px) {
  .solo-telefono { display: none !important; }
}

/* Ayudas de letra (Sala.titulo, Sala.texto, Sala.dato, RotuloSala). */
.pz .mono { font-family: var(--sala-mono); font-variant-numeric: tabular-nums; }
.pz .rotulo {
  font: 600 calc(10 * var(--u))/1.2 var(--sala-mono);
  letter-spacing: calc(1.6 * var(--u));
  text-transform: uppercase;
  color: var(--sala-tenue);
}
.pz .una-linea { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz .icono { width: 1em; height: 1em; flex: none; display: block; }
.pz .punto { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; flex: none; background: var(--c, var(--sala-tenue)); }

/* Cápsulas de cristal (CristalSala en su versión sólida) y pestañas. */
.pz .capsula {
  display: inline-flex; align-items: center; gap: calc(8 * var(--u));
  height: calc(32 * var(--u)); padding: 0 calc(14 * var(--u));
  border-radius: 999px;
  background: 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 calc(6 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, .3);
  font: 600 calc(12.5 * var(--u))/1 var(--sala-letra);
  color: var(--sala-tinta);
  white-space: nowrap;
}
.pz .capsula--activa { background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)), var(--sala-cristal-relleno); }
.pz .capsula--redonda { width: calc(32 * var(--u)); padding: 0; justify-content: center; }
.pz .pestanas {
  display: inline-flex; gap: calc(2 * var(--u)); padding: calc(3 * var(--u));
  border-radius: 999px; background: var(--sala-luz-pestanas);
}
.pz .pestana {
  display: inline-flex; align-items: center; height: calc(28 * var(--u)); padding: 0 calc(13 * var(--u));
  border-radius: 999px; font: 600 calc(12.5 * var(--u))/1 var(--sala-letra); color: var(--sala-secundaria); white-space: nowrap;
}
.pz .pestana--activa { background: var(--sala-luz-capsula-activa); color: var(--sala-tinta); }

/* Fotos sin marco (DOC:40), con un filo de luz de 1 px como en las capturas. */
.pz .foto { position: relative; overflow: hidden; border-radius: calc(10 * var(--u)); background: #1A1A1C; }
.pz .foto > img { width: 100%; height: 100%; object-fit: cover; }
.pz .foto::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.pz .foto .codigo-foto {
  position: absolute; left: calc(6 * var(--u)); bottom: calc(4 * var(--u)); z-index: 1;
  font: 700 calc(10.5 * var(--u))/1 var(--sala-mono); color: #fff; text-shadow: var(--sala-legible);
}
.pz .foto .codigo-foto--arriba { top: calc(5 * var(--u)); bottom: auto; }

/* Hueco: lo que todavía no existe (HuecoSala). */
.pz .hueco {
  border-radius: calc(6 * var(--u));
  background: transparent;
  box-shadow: none;
  outline: 1px dashed color-mix(in srgb, var(--sala-propuesta) 55%, transparent);
  outline-offset: -1px;
}

/* ==========================================================================
   0 · La barra de arriba (una sola, fija; no se toca)
   ========================================================================== */
.pz--barra { background: transparent; pointer-events: none; overflow: visible; }
.barra {
  position: absolute; left: 0; right: 0; top: calc(14 * var(--u));
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(22 * var(--u));
}
.barra .capsula { height: calc(42 * var(--u)); padding: 0 calc(16 * var(--u)); font-size: calc(14 * var(--u)); gap: calc(10 * var(--u)); }
.barra .barra-proyecto .icono { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }
.barra .barra-proyecto .chevron { width: calc(12 * var(--u)); height: calc(12 * var(--u)); color: var(--sala-secundaria); }
.barra .barra-sitios {
  position: absolute; left: 50%; translate: -50% 0;
  padding: 0 calc(5 * var(--u)); gap: calc(2 * var(--u));
}
.barra .sitio {
  position: relative; display: inline-flex; align-items: center; height: calc(32 * var(--u));
  padding: 0 calc(16 * var(--u)); border-radius: 999px;
  font: 600 calc(13.5 * var(--u))/1 var(--sala-letra); color: var(--sala-secundaria);
}
.barra .sitio-luz {
  position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, .16);
  opacity: 0;
}
.barra .sitio[aria-current="page"] { color: var(--sala-tinta); }
.barra .sitio[aria-current="page"] .sitio-luz { opacity: 1; }
.barra .sitio span { position: relative; }
.barra .barra-derecha { gap: calc(14 * var(--u)); }
.barra .barra-derecha .icono { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.barra .barra-derecha .formato { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); font-family: var(--sala-mono); font-weight: 600; }
.barra .barra-derecha .pendientes b { color: var(--sala-ambar); font-weight: 600; margin-left: calc(3 * var(--u)); }
@container pz (max-width: 699px) {
  .barra { top: calc(10 * var(--u)); padding: 0 calc(8 * var(--u)); justify-content: center; }
  .barra .barra-sitios { position: static; translate: none; height: calc(36 * var(--u)); padding: 0 calc(3 * var(--u)); gap: 0; }
  .barra .sitio { height: calc(29 * var(--u)); padding: 0 calc(7 * var(--u)); font-size: calc(11.5 * var(--u)); }
}

/* ==========================================================================
   1 · La mesa del Lienzo
   ========================================================================== */
.pz--mesa { background: var(--sala-mesa); }
.pz--mesa .pz-lamina { overflow: visible; }
.mesa-escenario {
  position: absolute; inset: 0;
  perspective: calc(2400 * var(--u));
  perspective-origin: 50% 30%;
}
/* La cámara: el motor (o encuadrar()) le pone translate, scale y rotateX.
   Su origen es la esquina de arriba a la izquierda del plano. */
.mesa-camara {
  position: absolute; left: 0; top: 0;
  width: calc(2800 * var(--m)); height: calc(1640 * var(--m));
  transform-origin: 0 0;
}
.mesa-plano { position: absolute; inset: 0; }
.pz--mesa .pz-lamina { --m: calc(var(--u) * 1.3); }
@container pz (max-width: 699px) {
  .pz--mesa .pz-lamina { --m: calc(var(--u) * .6); }
}
.mesa-luz {
  position: absolute; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--c) 26%, transparent) 0%,
    color-mix(in srgb, var(--c) 20.8%, transparent) 22%,
    color-mix(in srgb, var(--c) 13.5%, transparent) 45%,
    color-mix(in srgb, var(--c) 9.1%, transparent) 62%,
    color-mix(in srgb, var(--c) 4.4%, transparent) 80%,
    color-mix(in srgb, var(--c) 1.6%, transparent) 92%,
    transparent 100%);
}
.mesa-hilos { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.mesa-hilos line { stroke: rgba(255, 255, 255, .22); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; }

.mesa-territorio-cabeza {
  position: absolute;
  display: flex; align-items: center; gap: calc(15 * var(--m));
  white-space: nowrap;
  translate: 0 -50%;
}
.mesa-territorio-cabeza .punto { width: calc(16 * var(--m)); height: calc(16 * var(--m)); }
.mesa-territorio-cabeza h3 {
  margin: 0; font: 600 calc(29 * var(--m))/1 var(--sala-letra-titulos); letter-spacing: calc(-.3 * var(--m)); color: var(--sala-tinta);
}
.mesa-territorio-cabeza .cifras { font: 500 calc(20 * var(--m))/1 var(--sala-mono); color: #747577; letter-spacing: calc(.5 * var(--m)); }
.mesa-territorio-cabeza .mas { width: calc(24 * var(--m)); height: calc(24 * var(--m)); color: #727273; }

.mesa-foto { position: absolute; margin: 0; }
.mesa-foto .foto { border-radius: calc(9 * var(--m)); }
.mesa-foto figcaption {
  display: flex; align-items: baseline; justify-content: space-between; gap: calc(10 * var(--m));
  margin-top: calc(10 * var(--m));
  font: 400 calc(15.5 * var(--m))/1.2 var(--sala-letra); color: #9F9FA1;
}
.mesa-foto figcaption .titulo { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mesa-foto figcaption .uso { flex: none; font: 600 calc(13 * var(--m))/1 var(--sala-mono); letter-spacing: calc(2 * var(--m)); color: #656769; text-transform: uppercase; }

/* Post-its: papel liso del color apagado de su territorio (PostitSala). */
.mesa-nota {
  position: absolute; overflow: hidden;
  padding: calc(42 * var(--m)) calc(30 * var(--m)) calc(16 * var(--m));
  border-radius: calc(2 * var(--m));
  background: color-mix(in srgb, var(--c) var(--sala-postit-mezcla), var(--sala-postit-base));
  box-shadow: 0 calc(10 * var(--m)) calc(28 * var(--m)) rgba(0, 0, 0, .55);
}
.mesa-nota::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(14 * var(--m));
  background: color-mix(in srgb, var(--c) 28%, transparent);
}
.mesa-nota--suelta { background: var(--sala-postit-suelto); }
.mesa-nota--suelta::before { background: rgba(0, 0, 0, .28); }
.mesa-nota h4 {
  margin: 0; font: 600 calc(28.5 * var(--m))/1.18 var(--sala-letra-titulos); letter-spacing: calc(-.2 * var(--m)); color: #F9FEFF;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.mesa-nota p {
  margin: calc(6 * var(--m)) 0 0; font: 400 calc(23 * var(--m))/1.42 var(--sala-letra); color: color-mix(in srgb, #fff 78%, var(--c));
  white-space: pre-line;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lineas, 1); overflow: hidden;
}
.mesa-nota--suelta p { color: #CECAC6; }
.mesa-nota .rotulo { font-size: calc(17 * var(--m)); letter-spacing: calc(3.4 * var(--m)); color: #928E8B; margin: calc(4 * var(--m)) 0 calc(18 * var(--m)); }

/* La tarjeta del guion: hoja oscura con letra de máquina (DOC:45). */
.mesa-guion {
  position: absolute; overflow: hidden;
  padding: calc(30 * var(--m)) calc(28 * var(--m)) 0;
  border-radius: calc(4 * var(--m));
  background: #131215;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 calc(10 * var(--m)) calc(28 * var(--m)) rgba(0, 0, 0, .45);
}
.mesa-guion .rotulo { font-size: calc(17 * var(--m)); letter-spacing: calc(3.4 * var(--m)); color: #6E6D6D; }
.mesa-guion h4 { margin: calc(24 * var(--m)) 0 calc(12 * var(--m)); font: 600 calc(27 * var(--m))/1.22 var(--sala-letra-titulos); letter-spacing: calc(-.2 * var(--m)); color: #F9FEFF; }
.mesa-guion p { margin: 0; font: 400 calc(19.5 * var(--m))/1.72 var(--sala-mono); color: #9D9B9C; white-space: pre-line; }

/* Tarjetas de sonido: celda plana con su forma de onda (de la captura). */
.mesa-audio {
  position: absolute; padding: calc(20 * var(--m)) calc(20 * var(--m)) 0;
  border-radius: calc(10 * var(--m));
  background: #141416;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 calc(8 * var(--m)) calc(22 * var(--m)) rgba(0, 0, 0, .4);
}
.mesa-audio .cabeza { display: flex; align-items: center; gap: calc(12 * var(--m)); font: 600 calc(21 * var(--m))/1.2 var(--sala-letra); color: var(--sala-tinta); }
.mesa-audio .cabeza .icono { width: calc(21 * var(--m)); height: calc(21 * var(--m)); }
.mesa-audio .cabeza span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mesa-audio .rotulo { margin: calc(8 * var(--m)) 0 0 calc(33 * var(--m)); font-size: calc(12.5 * var(--m)); letter-spacing: calc(2.4 * var(--m)); color: #6F6F6F; }
.mesa-audio svg { position: absolute; left: calc(18 * var(--m)); right: calc(18 * var(--m)); bottom: calc(22 * var(--m)); width: calc(100% - 36 * var(--m)); height: calc(30 * var(--m)); }
.mesa-audio svg path { fill: url(#onda-luz); }

/* ==========================================================================
   2 · Una escena abierta (Escenas · escena 1)
   ========================================================================== */
.esc-lista {
  position: absolute; left: calc(16 * var(--u)); top: calc(76 * var(--u)); bottom: calc(16 * var(--u)); width: calc(299 * var(--u));
  padding: calc(24 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  border-radius: var(--sala-esquina-panel);
  background: var(--sala-panel-brillo), #111111;
  box-shadow: inset 0 1px 0 var(--sala-panel-borde-arriba), inset 0 0 0 1px var(--sala-panel-borde-abajo), var(--sala-panel-sombra);
  overflow: hidden;
}
.esc-lista header { display: flex; align-items: baseline; justify-content: space-between; padding: 0 calc(12 * var(--u)) calc(14 * var(--u)); }
.esc-lista h3 { margin: 0; font: 600 calc(23 * var(--u))/1 var(--sala-letra-titulos); letter-spacing: calc(-.3 * var(--u)); }
.esc-lista header .mono { font-size: calc(11 * var(--u)); color: #8A8A88; }
.esc-fila {
  position: relative; display: grid; grid-template-columns: calc(28 * var(--u)) minmax(0, 1fr) auto; column-gap: calc(8 * var(--u));
  grid-template-areas: "num titulo dur" ". meta meta" ". puntos puntos"; grid-template-rows: auto auto 1fr; align-items: start;
  padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(9 * var(--u)) calc(12 * var(--u));
  border-radius: calc(13 * var(--u));
  height: calc(74 * var(--u));
}
.esc-fila--activa { background: rgba(255, 255, 255, .08); }
.esc-fila--activa::before { content: ""; position: absolute; left: 0; top: calc(26 * var(--u)); height: calc(26 * var(--u)); width: calc(3 * var(--u)); border-radius: 2px; background: var(--sala-ambar); }
.esc-fila .num { font: 600 calc(11.5 * var(--u))/1.6 var(--sala-mono); color: #6B6B69; }
.esc-fila--activa .num { color: var(--sala-tinta); }
.esc-fila .titulo { font: 600 calc(15 * var(--u))/1.35 var(--sala-letra); color: #D8D6D2; }
.esc-fila--activa .titulo { color: var(--sala-tinta); }
.esc-fila .meta { margin-top: calc(2 * var(--u)); font: 500 calc(9.5 * var(--u))/1.4 var(--sala-mono); letter-spacing: calc(1 * var(--u)); color: #666663; }
.esc-fila .puntos { display: flex; gap: calc(4 * var(--u)); margin-top: calc(6 * var(--u)); }
.esc-fila .puntos .punto { width: calc(5.5 * var(--u)); height: calc(5.5 * var(--u)); }
.esc-fila .num { grid-area: num; } .esc-fila .titulo { grid-area: titulo; } .esc-fila .meta { grid-area: meta; } .esc-fila .puntos { grid-area: puntos; }
.esc-fila .dur { grid-area: dur; justify-self: end; font: 500 calc(10.5 * var(--u))/1.9 var(--sala-mono); color: #606060; }
.esc-fila .minis { position: absolute; right: calc(10 * var(--u)); bottom: calc(9 * var(--u)); display: flex; gap: calc(3 * var(--u)); }
.esc-fila .minis .foto { width: calc(40 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(4 * var(--u)); }

.esc-main { position: absolute; left: calc(331 * var(--u)); right: calc(16 * var(--u)); top: calc(86 * var(--u)); }
.esc-main .rotulo { font-size: calc(10.5 * var(--u)); color: #707070; }
.esc-titulo-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(16 * var(--u)); margin-top: calc(12 * var(--u)); }
.esc-main h2 { margin: 0; font: 600 calc(38 * var(--u))/1.1 var(--sala-letra-titulos); letter-spacing: calc(-.6 * var(--u)); }
.esc-acciones { display: flex; gap: calc(10 * var(--u)); margin-top: calc(-18 * var(--u)); }
.esc-acciones .capsula { height: calc(34 * var(--u)); font-size: calc(13 * var(--u)); }
.esc-acciones .icono { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.esc-meta { display: flex; align-items: center; gap: calc(18 * var(--u)); margin-top: calc(14 * var(--u)); font: 400 calc(14 * var(--u))/1.2 var(--sala-letra); color: #AAA8A5; }
.esc-meta .chip { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); }
.esc-meta .punto { width: calc(7 * var(--u)); height: calc(7 * var(--u)); }
.esc-meta .mono { font-size: calc(12.5 * var(--u)); color: #9B9B9A; }
.esc-desc { margin: calc(16 * var(--u)) 0 0; font: 400 calc(16.5 * var(--u))/1.4 var(--sala-letra); color: #B8B6B5; max-width: calc(1000 * var(--u)); }
.esc-planos { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(19 * var(--u)); margin-top: calc(26 * var(--u)); }
.esc-plano .foto { aspect-ratio: 16 / 9; }
.esc-plano .cabeza { display: flex; align-items: baseline; gap: calc(9 * var(--u)); margin-top: calc(14 * var(--u)); }
.esc-plano .codigo { font: 700 calc(14 * var(--u))/1 var(--sala-mono); color: #F4F4F4; }
.esc-plano .dur { font: 500 calc(12 * var(--u))/1 var(--sala-mono); color: #616161; }
.esc-plano p { margin: calc(10 * var(--u)) 0 0; font: 400 calc(15 * var(--u))/1.38 var(--sala-letra); color: var(--sala-tinta); }
.esc-plano p + p { margin-top: 0; }
.esc-plano .ficha { margin-top: calc(6 * var(--u)); font: 500 calc(11 * var(--u))/1.45 var(--sala-mono); color: #757573; }
.esc-pie { display: grid; grid-template-columns: 1fr auto; gap: calc(36 * var(--u)); margin-top: calc(28 * var(--u)); }
.esc-intencion blockquote {
  margin: calc(14 * var(--u)) 0 0; padding-left: calc(18 * var(--u));
  border-left: 2px solid #3A3A3C;
  font: 400 calc(18 * var(--u))/1.38 var(--sala-letra); color: var(--sala-tinta);
}
.esc-intencion .mono { margin: calc(10 * var(--u)) 0 0 calc(20 * var(--u)); font-size: calc(11.5 * var(--u)); color: #8A8A88; }
.esc-mesa .fotos { display: flex; gap: calc(10 * var(--u)); margin-top: calc(14 * var(--u)); align-items: center; }
.esc-mesa .foto { width: calc(118 * var(--u)); height: calc(68 * var(--u)); border-radius: calc(7 * var(--u)); }
.esc-mesa .mas { font: 500 calc(12 * var(--u))/1 var(--sala-mono); color: #6A6A6B; }
.esc-mesa .enlaces { display: flex; gap: calc(22 * var(--u)); margin-top: calc(14 * var(--u)); font: 500 calc(13 * var(--u))/1 var(--sala-letra); color: #B8B6B5; }

@container pz (max-width: 699px) {
  .esc-main { left: calc(16 * var(--u)); right: calc(16 * var(--u)); top: calc(66 * var(--u)); }
  .esc-main .rotulo { font-size: calc(10 * var(--u)); letter-spacing: calc(1 * var(--u)); line-height: 1.5; }
  .esc-main h2 { font-size: calc(29 * var(--u)); }
  .esc-meta { gap: calc(12 * var(--u)); font-size: calc(13 * var(--u)); flex-wrap: wrap; }
  .esc-meta .mono { font-size: calc(11.5 * var(--u)); }
  .esc-desc { font-size: calc(14.5 * var(--u)); margin-top: calc(12 * var(--u)); }
  .esc-planos { grid-template-columns: 1fr 1fr; column-gap: calc(12 * var(--u)); row-gap: calc(18 * var(--u)); margin-top: calc(20 * var(--u)); }
  .esc-plano:first-child { grid-column: 1 / -1; }
  .esc-plano .cabeza { margin-top: calc(9 * var(--u)); }
  .esc-plano p { font-size: calc(13 * var(--u)); margin-top: calc(6 * var(--u)); }
  .esc-plano:first-child p { font-size: calc(14 * var(--u)); }
  .esc-plano .ficha { font-size: calc(10 * var(--u)); }
}

/* ==========================================================================
   3 · La hoja del guion: oscura (sitio Guion) y blanca (guion marcado)
   Medidas de guion impreso: carta, 12 pt Courier, 6 líneas por pulgada,
   acción a 1.5 in del borde y 60 caracteres, personaje a 3.7 in, diálogo
   a 2.5 in y 35 caracteres, acotación a 3.1 in. Una pulgada = 78 puntos.
   Las dos hojas tienen el mismo cuadro de texto; en «guion» la hoja va
   centrada (captura guion-entre-hojas) y en «marcado», 190 puntos a la
   derecha, junto al código de colores (captura guion-marcado).
   ========================================================================== */
.pz--guion .pz-lamina { --in: calc(78 * var(--u)); }
.pz--guion .capa-guion, .pz--guion .capa-marcado { transition: none; }

/* Los filtros del código de colores son botones de verdad (se tocan). */
.pz button.gn-cat, .pz button.opcion {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.pz button.gn-cat { width: 100%; padding: 0; border-radius: calc(6 * var(--u)); }
.pz button.opcion { padding: 0; }
.pz button.gn-cat:focus-visible, .pz button.opcion:focus-visible { outline: 2px solid var(--sala-ambar); outline-offset: calc(3 * var(--u)); }

/* Barras de cada estado. */
.gn-formatos { position: absolute; left: calc(16 * var(--u)); top: calc(84 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u)); }
.gn-formatos .capsula--redonda { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
.gn-formatos .icono, .gn-acciones .icono { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.gn-formatos .pestana { font-size: calc(13 * var(--u)); padding: 0 calc(12 * var(--u)); height: calc(30 * var(--u)); }
.gn-formatos .pestana.apagada { color: #4A4A4A; }
.gn-titulo { position: absolute; left: calc(388 * var(--u)); width: calc(663 * var(--u)); top: calc(84 * var(--u)); height: calc(36 * var(--u)); display: flex; align-items: center; justify-content: center; }
.gn-titulo .titulo-guion { display: inline-flex; align-items: center; gap: calc(7 * var(--u)); font: 600 calc(14.5 * var(--u))/1 var(--sala-letra); }
.gn-titulo .icono { width: calc(11 * var(--u)); height: calc(11 * var(--u)); color: var(--sala-secundaria); }
.gn-acciones { position: absolute; right: calc(16 * var(--u)); top: calc(84 * var(--u)); display: flex; gap: calc(10 * var(--u)); }
.gn-acciones .capsula { height: calc(36 * var(--u)); font-size: calc(13.5 * var(--u)); }
.gn-produccion { position: absolute; left: calc(120 * var(--u)); right: calc(200 * var(--u)); top: calc(86 * var(--u)); display: flex; align-items: center; justify-content: space-between; }
.gn-produccion .pestana { font-size: calc(13 * var(--u)); height: calc(30 * var(--u)); padding: 0 calc(13 * var(--u)); }
.gn-produccion .decidir { height: calc(34 * var(--u)); font-size: calc(13.5 * var(--u)); gap: calc(8 * var(--u)); }
.gn-produccion .decidir .punto { width: calc(7 * var(--u)); height: calc(7 * var(--u)); background: var(--sala-ambar); }
.gn-produccion .decidir b { color: var(--sala-ambar); font-weight: 600; }
.gn-produccion .decidir .icono { width: calc(10 * var(--u)); height: calc(10 * var(--u)); color: var(--sala-secundaria); }
.gn-desglose { position: absolute; left: calc(120 * var(--u)); right: calc(200 * var(--u)); top: calc(136 * var(--u)); }
.gn-desglose .todas { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.gn-desglose h2 { margin: 0; font: 600 calc(26 * var(--u))/1.1 var(--sala-letra-titulos); letter-spacing: calc(-.4 * var(--u)); }
.gn-desglose .todas > .icono { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: var(--sala-secundaria); margin-right: calc(18 * var(--u)); }
.gn-desglose .pestana { font-size: calc(12.5 * var(--u)); height: calc(28 * var(--u)); }
.gn-desglose .pagina-de { margin-top: calc(10 * var(--u)); font: 400 calc(13.5 * var(--u))/1.2 var(--sala-letra); color: var(--sala-secundaria); }

/* Columna izquierda: EN ESTE GUION (guion) o el código de colores (marcado). */
.gn-lista {
  position: absolute; left: calc(16 * var(--u)); top: calc(132 * var(--u)); width: calc(276 * var(--u));
  padding: calc(20 * var(--u)) calc(8 * var(--u)) calc(16 * var(--u));
  border-radius: var(--sala-esquina-panel);
  background: var(--sala-panel-brillo), #161616;
  box-shadow: inset 0 1px 0 var(--sala-panel-borde-arriba), inset 0 0 0 1px var(--sala-panel-borde-abajo), var(--sala-panel-sombra);
}
.gn-lista .rotulo { padding: 0 calc(14 * var(--u)) calc(10 * var(--u)); color: #71706F; }
.gn-fila { display: grid; grid-template-columns: calc(26 * var(--u)) minmax(0, 1fr) auto; align-items: center; column-gap: calc(8 * var(--u)); height: calc(47.5 * var(--u)); padding: 0 calc(10 * var(--u)) 0 calc(14 * var(--u)); border-radius: calc(12 * var(--u)); }
.gn-fila .num { font: 500 calc(10.5 * var(--u))/1 var(--sala-mono); color: #6B6B69; }
.gn-fila .titulo { font: 400 calc(13 * var(--u))/1.3 var(--sala-letra); color: #C9C7C3; }
.gn-fila .meta { font: 500 calc(9 * var(--u))/1.5 var(--sala-mono); letter-spacing: calc(.9 * var(--u)); color: #71706F; }
.gn-fila .foto { width: calc(46 * var(--u)); height: calc(27 * var(--u)); border-radius: calc(4 * var(--u)); }
.gn-lista footer { margin-top: calc(12 * var(--u)); padding: 0 calc(14 * var(--u)); font: 500 calc(10 * var(--u))/1.75 var(--sala-mono); color: #717170; }

.gn-leyenda { position: absolute; left: calc(120 * var(--u)); top: calc(222 * var(--u)); width: calc(400 * var(--u)); }
.gn-leyenda .cabeza { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: 0 0 calc(10 * var(--u)) calc(2 * var(--u)); }
.gn-leyenda .cabeza > .icono { width: calc(15 * var(--u)); height: calc(15 * var(--u)); color: #8A8A88; }
.gn-leyenda .cabeza .rotulo { flex: 1; color: #737373; }
.gn-leyenda .cabeza .opcion { font: 600 calc(13 * var(--u))/1 var(--sala-letra); color: #FDFDFD; cursor: pointer; }
.gn-leyenda .cabeza .opcion + .opcion { color: #747373; font-weight: 400; margin-left: calc(10 * var(--u)); }
.gn-cat { display: grid; grid-template-columns: calc(22 * var(--u)) auto minmax(0, 1fr) auto; align-items: center; column-gap: calc(12 * var(--u)); height: calc(31 * var(--u)); cursor: pointer; transition: opacity .15s ease-out; }
.gn-cat.filtrada { opacity: .35; }
.gn-cat .nombre { font: 500 calc(14 * var(--u))/1 var(--sala-letra); color: var(--sala-tinta); white-space: nowrap; }
.gn-cat .para { font: 400 calc(12.5 * var(--u))/1 var(--sala-letra); color: #757374; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: calc(4 * var(--u)); }
.gn-cat .cuenta { font: 500 calc(12 * var(--u))/1 var(--sala-mono); color: #9B999A; }
.muestra { display: block; width: calc(20 * var(--u)); height: calc(12 * var(--u)); border-radius: calc(2 * var(--u)); font-style: normal; }
.muestra--relleno { background: var(--f); box-shadow: inset 0 calc(-2 * var(--u)) 0 var(--l); }
.muestra--ovalo { border-radius: 999px; box-shadow: inset 0 0 0 calc(1.5 * var(--u)) var(--l); }
.muestra--caja { border-radius: 1px; box-shadow: inset 0 0 0 calc(1.5 * var(--u)) var(--l); }
.muestra--asterisco { color: var(--l); font: 700 calc(21 * var(--u))/calc(14 * var(--u)) var(--sala-mono); text-align: center; }
.muestra--subrayado { background: linear-gradient(var(--l), var(--l)) bottom / 100% calc(1.5 * var(--u)) no-repeat; }
.gn-leyenda .nosalen { display: flex; align-items: center; gap: calc(7 * var(--u)); margin-top: calc(10 * var(--u)); font: 400 calc(12.5 * var(--u))/1 var(--sala-letra); color: #757374; }
.gn-leyenda .nosalen .muestra { width: calc(15 * var(--u)); height: calc(9 * var(--u)); margin-left: calc(6 * var(--u)); }
.gn-leyenda .elementos { margin-top: calc(20 * var(--u)); padding-top: calc(16 * var(--u)); border-top: 1px solid #202022; }
.gn-leyenda .elementos .cabeza .rotulo b { color: #9B999A; font-weight: 500; margin-left: calc(8 * var(--u)); letter-spacing: 0; }
.gn-leyenda .elementos .cabeza .opcion { color: #757374; font-weight: 400; }
.gn-elem-grupo { display: flex; align-items: center; gap: calc(10 * var(--u)); margin: calc(12 * var(--u)) 0 calc(2 * var(--u)); font: 500 calc(14 * var(--u))/1 var(--sala-letra); color: #B5B3B0; }
.gn-elem-grupo .cuenta { font: 500 calc(12 * var(--u))/1 var(--sala-mono); color: #757374; }
.gn-elem { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: calc(10 * var(--u)); height: calc(32 * var(--u)); }
.gn-elem .nombre { font: 600 calc(14.5 * var(--u))/1.1 var(--sala-letra); color: var(--sala-tinta); min-width: 0; }
.gn-elem .detalle { font: 400 calc(13 * var(--u))/1 var(--sala-letra); color: #757474; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gn-elem .esc { font: 500 calc(11.5 * var(--u))/1 var(--sala-mono); color: #707070; }
.gn-elem .etiqueta-propuesta {
  display: inline-flex; align-items: center; height: calc(21 * var(--u)); padding: 0 calc(9 * var(--u)); border-radius: 999px;
  font: 500 calc(11.5 * var(--u))/1 var(--sala-letra); font-style: normal; color: #B5B3B0;
  outline: 1px dashed color-mix(in srgb, var(--sala-propuesta) 80%, transparent); outline-offset: -1px;
}

/* La hoja. */
.gn-hoja { position: absolute; left: calc(388 * var(--u)); top: calc(210 * var(--u)); width: calc(8.5 * var(--in)); height: calc(11 * var(--in)); }
.pz--guion[data-estado="marcado"] .gn-hoja { left: calc(578 * var(--u)); }
.gn-hoja > .hoja { position: absolute; inset: 0; }
.hoja {
  padding: var(--in) 0 0 calc(1.5 * var(--in));
  font-family: var(--sala-guion); font-weight: 400;
  font-size: calc(var(--in) / 6);
  line-height: calc(var(--in) / 6);
  font-kerning: none; font-variant-ligatures: none; letter-spacing: 0;
}
.hoja--oscura { background: var(--sala-hoja); color: #ECEAE6; box-shadow: inset 0 0 0 1px #242426; }
.hoja--blanca { background: var(--d-hoja-papel); color: #221D18; box-shadow: 0 calc(18 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, .45); }
.hoja .b { position: relative; width: calc(6 * var(--in)); margin: 0 0 calc(var(--in) / 6); }
.hoja .b--escena { font-weight: 700; }
.hoja .b--personaje { margin-left: calc(2.2 * var(--in)); margin-bottom: 0; width: calc(3.8 * var(--in)); }
.hoja .b--acotacion { margin-left: calc(1.6 * var(--in)); margin-bottom: 0; width: calc(2.4 * var(--in)); }
.hoja .b--dialogo { margin-left: var(--in); width: calc(3.5 * var(--in)); }
.hoja .b--transicion { text-align: right; }
.hoja .num-escena { position: absolute; left: calc(-.4 * var(--in)); top: 0; font-weight: 400; color: #797773; }
.hoja--oscura .num-escena { display: none; }

/* Las marcas del desglose: color estándar de marcador (de la captura).
   --aparece (0..1) lo escribe la película mientras pinta; --pinta (0..1) es
   cuánto del relleno ya pasó el marcador, de izquierda a derecha; --filtro
   baja el color al 12 % al filtrar, y el texto se queda. */
@property --filtro { syntax: '<number>'; inherits: true; initial-value: 1; }
.marca {
  --f: transparent; --l: transparent; --aparece: 1; --pinta: 1; --filtro: 1;
  --fc: color-mix(in srgb, var(--f) calc(var(--aparece) * var(--filtro) * 100%), transparent);
  --lc: color-mix(in srgb, var(--l) calc(var(--aparece) * var(--filtro) * 100%), transparent);
  border-radius: 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: --filtro .15s ease-out;
}
.marca--relleno, .marca--asterisco {
  background:
    linear-gradient(var(--lc), var(--lc)) left bottom / calc(var(--pinta) * 100%) calc(2.2 * var(--u)) no-repeat,
    linear-gradient(var(--fc), var(--fc)) left top / calc(var(--pinta) * 100%) 100% no-repeat;
}
.marca--ovalo { border-radius: 999px; box-shadow: 0 0 0 calc(1.6 * var(--u)) var(--lc); }
.marca--caja { box-shadow: 0 0 0 calc(1.4 * var(--u)) var(--lc); border-radius: 0; }
.marca--subrayado { background: linear-gradient(var(--lc), var(--lc)) left bottom / calc(var(--pinta) * 100%) calc(1.5 * var(--u)) no-repeat; }
.marca--propuesta {
  text-decoration: underline dashed var(--lc);
  text-decoration-thickness: calc(1.6 * var(--u));
  text-underline-offset: calc(3 * var(--u));
  text-decoration-skip-ink: none;
}
.asterisco { position: relative; display: inline-block; width: 0; transition: opacity .15s ease-out; }
.asterisco::after { content: "*"; position: absolute; left: -.2ch; top: -.12em; color: var(--l); font-weight: 700; font-size: 1.45em; line-height: 1; }
.marca.filtrada { --filtro: .12; }
.asterisco.filtrada { opacity: .12; }
.c-reparto { --f: var(--d-reparto-hoja); --l: var(--d-reparto-hoja-linea); }
.c-efectos { --f: var(--d-efectos-hoja); --l: var(--d-efectos-hoja-linea); }
.c-props { --f: var(--d-props-hoja); --l: var(--d-props-hoja-linea); }
.c-vehiculos { --f: var(--d-vehiculos-hoja); --l: var(--d-vehiculos-hoja-linea); }
.c-sonido { --f: var(--d-sonido-hoja); --l: var(--d-sonido-hoja-linea); }
.c-vestuario { --l: var(--d-vestuario-hoja-borde); }
.c-maquillaje { --f: var(--d-maquillaje-hoja); --l: var(--d-maquillaje-hoja-linea); }
.c-equipo { --l: var(--d-equipo-hoja-borde); }
.c-locaciones { --f: var(--d-locaciones-hoja); --l: var(--d-locaciones-hoja-linea); }
/* Trazo de lo propuesto sin categoría clara: el azul pizarra de la captura. */
.c-propuesta { --l: #4F5B8C; }
.c-propuesta-lila { --l: #6E5890; }
/* En la columna oscura, las muestras usan el fondo y la línea de la leyenda. */
.gn-leyenda .c-reparto, .gn-elem-grupo .c-reparto { --f: var(--d-reparto-fondo); --l: var(--d-reparto-linea); }
.gn-leyenda .c-dobles { --f: var(--d-dobles-fondo); --l: var(--d-dobles-linea); }
.gn-leyenda .c-efectos { --f: var(--d-efectos-fondo); --l: var(--d-efectos-linea); }
.gn-leyenda .c-props { --f: var(--d-props-fondo); --l: var(--d-props-linea); }
.gn-leyenda .c-vehiculos { --f: var(--d-vehiculos-fondo); --l: var(--d-vehiculos-linea); }
.gn-leyenda .c-sonido { --f: var(--d-sonido-fondo); --l: var(--d-sonido-linea); }
.gn-leyenda .c-vestuario { --l: var(--d-vestuario-borde); }
.gn-leyenda .c-maquillaje { --l: var(--d-maquillaje); }
.gn-leyenda .c-equipo { --l: var(--d-equipo-borde); }
.gn-leyenda .c-escenografia { --f: var(--d-escenografia-fondo); --l: var(--d-escenografia-linea); }
.gn-leyenda .c-locaciones { --f: var(--d-locaciones-fondo); --l: var(--d-locaciones-linea); }
.gn-leyenda .c-notas { --l: var(--d-notas-linea); }
/* «No salen»: muestreados de la captura guion-marcado (no están en tokens). */
.gn-leyenda .c-extras { --f: #48482E; --l: #D2D6A7; }
.gn-leyenda .c-ambiente { --f: #2E402F; --l: #8AAD8F; }

/* Planos al margen (sitio Guion): a la derecha de la hoja centrada. */
.gn-margen { position: absolute; left: calc(1083 * var(--u)); top: calc(210 * var(--u)); width: calc(340 * var(--u)); }
.gn-margen-escena { position: absolute; left: 0; right: 0; }
.gn-margen-escena .territorios { display: flex; gap: calc(14 * var(--u)); height: calc(var(--in) / 6); align-items: center; font: 400 calc(12.5 * var(--u))/1 var(--sala-letra); color: #ABABAA; }
.gn-margen-escena .territorios span { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); }
.gn-margen-escena .territorios .punto { width: calc(6.5 * var(--u)); height: calc(6.5 * var(--u)); }
.gn-margen-escena .fotos { display: flex; align-items: center; gap: calc(11 * var(--u)); margin-top: calc(12 * var(--u)); }
.gn-margen-escena figure { margin: 0; }
.gn-margen-escena .foto { width: calc(124 * var(--u)); height: calc(70 * var(--u)); border-radius: calc(7 * var(--u)); }
.gn-margen-escena .foto .codigo-foto { font-size: calc(11.5 * var(--u)); left: calc(7 * var(--u)); bottom: calc(6 * var(--u)); }
.gn-margen-escena figcaption { margin-top: calc(8 * var(--u)); font: 500 calc(10.5 * var(--u))/1 var(--sala-mono); color: #676766; }
.gn-margen-escena .mas { align-self: center; margin-top: calc(-16 * var(--u)); font: 500 calc(12.5 * var(--u))/1 var(--sala-letra); color: #6A6A6B; }

/* Estados quietos: «guion» y «marcado». El motor puede fundir cada capa por
   su cuenta (data-elemento); esto sólo fija el principio y el final. */
.pz--guion .capa-marcado { opacity: 0; visibility: hidden; }
.pz--guion[data-estado="marcado"] .capa-marcado { opacity: 1; visibility: visible; }
.pz--guion[data-estado="marcado"] .capa-guion { opacity: 0; visibility: hidden; }

/* Teléfono: los filtros como pestañas de la Sala (PestanasSala), con su muestra. */
.gn-chips { position: absolute; left: 0; right: 0; top: calc(100 * var(--u)); overflow: hidden; padding: 0 calc(12 * var(--u)); }
.gn-chips .pestanas { flex-wrap: wrap; row-gap: calc(2 * var(--u)); border-radius: calc(17 * var(--u)); }
.pz button.gn-chip { appearance: none; -webkit-appearance: none; margin: 0; border: 0; background: none; cursor: pointer; gap: calc(6 * var(--u)); height: calc(26 * var(--u)); padding: 0 calc(9 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--sala-secundaria); transition: opacity .15s ease-out; }
.pz button.gn-chip[aria-pressed="true"] { background: var(--sala-luz-capsula-activa); color: var(--sala-tinta); }
.pz button.gn-chip.filtrada { opacity: .45; }
.pz button.gn-chip:focus-visible { outline: 2px solid var(--sala-ambar); outline-offset: 1px; }
.gn-chip .muestra { width: calc(14 * var(--u)); height: calc(9 * var(--u)); }
.gn-chip .muestra--asterisco { font-size: calc(15 * var(--u)); line-height: calc(9 * var(--u)); }

@container pz (max-width: 699px) {
  .pz--guion .pz-lamina { --in: calc(60 * var(--u)); }
  .gn-hoja, .pz--guion[data-estado="marcado"] .gn-hoja { left: calc(-1.25 * var(--in)); top: calc(164 * var(--u)); }
  .gn-titulo { left: 0; width: 100%; top: calc(62 * var(--u)); }
  .gn-titulo .titulo-guion { font-size: calc(13 * var(--u)); }
  .gn-lista, .gn-leyenda { display: none; }
  .gn-produccion { left: 0; right: 0; top: calc(58 * var(--u)); justify-content: center; }
  .gn-produccion .pestana { font-size: calc(11.5 * var(--u)); padding: 0 calc(9 * var(--u)); }
  .gn-desglose { left: calc(16 * var(--u)); right: calc(16 * var(--u)); top: calc(102 * var(--u)); display: none; }
}

/* ==========================================================================
   4 · El resumen de Producción
   ========================================================================== */
.pr { position: absolute; left: calc(120 * var(--u)); right: calc(120 * var(--u)); top: calc(86 * var(--u)); }
.pr-titulo { display: flex; align-items: baseline; gap: calc(16 * var(--u)); margin-top: calc(34 * var(--u)); }
.pr-titulo h2 { margin: 0; font: 600 calc(29 * var(--u))/1.1 var(--sala-letra-titulos); letter-spacing: calc(-.5 * var(--u)); }
.pr-titulo p { margin: 0; font: 400 calc(15 * var(--u))/1.3 var(--sala-letra); color: var(--sala-secundaria); }
.pr-cifras { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: calc(34 * var(--u)); }
.pr-cifra { padding: 0 calc(28 * var(--u)); border-left: 1px solid #1F1F21; }
.pr-cifra:first-child { padding-left: 0; border-left: 0; }
.pr-cifra .rotulo { font-size: calc(10 * var(--u)); color: #7A7A78; }
.pr-cifra .valor { display: flex; align-items: baseline; gap: calc(10 * var(--u)); margin-top: calc(18 * var(--u)); }
.pr-cifra .numero { font: 600 calc(45 * var(--u))/1 var(--sala-letra-titulos); letter-spacing: calc(-.9 * var(--u)); }
.pr-cifra .unidad { font: 400 calc(17 * var(--u))/1 var(--sala-letra); color: #CFCDC9; }
.pr-cifra .detalle { display: flex; align-items: center; gap: calc(6 * var(--u)); margin-top: calc(14 * var(--u)); font: 400 calc(14.5 * var(--u))/1.2 var(--sala-letra); color: var(--sala-secundaria); }
.pr-cifra .detalle .icono { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
.pr-medio { display: grid; grid-template-columns: minmax(0, 1fr) calc(320 * var(--u)); gap: calc(56 * var(--u)); margin-top: calc(46 * var(--u)); }
.pr-decidir .cabeza { display: flex; align-items: baseline; gap: calc(10 * var(--u)); }
.pr-decidir .cabeza .punto { width: calc(7 * var(--u)); height: calc(7 * var(--u)); background: var(--sala-ambar); align-self: center; }
.pr-decidir .cabeza h3 { margin: 0; font: 600 calc(17 * var(--u))/1 var(--sala-letra); }
.pr-decidir .cabeza .total { font: 600 calc(13.5 * var(--u))/1 var(--sala-mono); color: var(--sala-ambar); }
.pr-decidir .cabeza .nota { margin-left: auto; font: 400 calc(13.5 * var(--u))/1 var(--sala-letra); color: #7A7A78; }
.pr-pregunta { display: grid; grid-template-columns: calc(46 * var(--u)) minmax(0, 1fr) auto; align-items: center; column-gap: calc(16 * var(--u)); height: calc(50 * var(--u)); margin-top: calc(10 * var(--u)); }
.pr-pregunta:first-of-type { margin-top: calc(18 * var(--u)); }
.pr-pregunta .foto { width: calc(46 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(6 * var(--u)); }
.pr-pregunta .q { font: 600 calc(15.5 * var(--u))/1.25 var(--sala-letra); color: var(--sala-tinta); }
.pr-pregunta .m { margin-top: calc(3 * var(--u)); font: 400 calc(13 * var(--u))/1.25 var(--sala-letra); color: #7A7A78; }
.pr-pregunta .opciones { display: flex; gap: calc(7 * var(--u)); }
.pr-pregunta .opcion {
  display: inline-flex; align-items: center; height: calc(30 * var(--u)); padding: 0 calc(12 * var(--u));
  border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  font: 600 calc(13 * var(--u))/1 var(--sala-letra); color: #EBE6E8; white-space: nowrap;
}
.pr-decidir .mas { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); margin-top: calc(12 * var(--u)); font: 400 calc(13.5 * var(--u))/1 var(--sala-letra); color: var(--sala-secundaria); }
.pr-decidir .mas .icono { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
.pr-paso h4 { margin: calc(16 * var(--u)) 0 0; font: 600 calc(19 * var(--u))/1.2 var(--sala-letra); }
.pr-paso p { margin: calc(10 * var(--u)) 0 0; font: 400 calc(14.5 * var(--u))/1.45 var(--sala-letra); color: var(--sala-secundaria); }
.pr-paso .boton {
  display: inline-flex; align-items: center; height: calc(34 * var(--u)); margin-top: calc(14 * var(--u)); padding: 0 calc(14 * var(--u));
  border-radius: 999px; background: #F5F3EF; color: #141414; font: 600 calc(13.5 * var(--u))/1 var(--sala-letra);
}
.pr-paso .despues { margin-top: calc(36 * var(--u)); }
.pr-paso .despues > div:not(.rotulo) { display: flex; align-items: center; gap: calc(6 * var(--u)); margin-top: calc(14 * var(--u)); font: 400 calc(14.5 * var(--u))/1 var(--sala-letra); color: #CFCDC9; }
.pr-paso .despues .icono { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
.pr-jornadas { margin-top: calc(40 * var(--u)); padding-top: calc(26 * var(--u)); border-top: 1px solid #1F1F21; }
.pr-jornadas .rotulo { color: #7A7A78; }

/* La rejilla de cuatro jornadas: la comparten el resumen y el plan, para que
   una se despliegue en la otra (creativo, punto 6). */
.rejilla-jornadas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: calc(28 * var(--u)); }
.pr-jornada { margin-top: calc(14 * var(--u)); min-width: 0; }
.pr-jornada .nombre { display: flex; align-items: baseline; gap: calc(10 * var(--u)); white-space: nowrap; }
.pr-jornada .nombre b { min-width: 0; font: 600 calc(14.5 * var(--u))/1.2 var(--sala-letra); overflow: hidden; text-overflow: ellipsis; }
.pr-jornada .nombre span { flex: none; }
.pr-jornada .nombre span { font: 400 calc(13.5 * var(--u))/1.2 var(--sala-letra); color: #7A7A78; }
.pr-jornada .fotos { display: flex; gap: calc(4 * var(--u)); margin-top: calc(12 * var(--u)); }
.pr-jornada .foto { width: calc(78 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(5 * var(--u)); }

@container pz (max-width: 699px) {
  .pr { left: calc(16 * var(--u)); right: calc(16 * var(--u)); top: calc(62 * var(--u)); }
  .pr .pestanas .pestana { padding: 0 calc(10 * var(--u)); font-size: calc(12 * var(--u)); }
  .pr-titulo { display: block; margin-top: calc(20 * var(--u)); }
  .pr-titulo h2 { font-size: calc(26 * var(--u)); }
  .pr-titulo p { margin-top: calc(6 * var(--u)); font-size: calc(13 * var(--u)); }
  .pr-cifras { grid-template-columns: 1fr 1fr; row-gap: calc(18 * var(--u)); margin-top: calc(20 * var(--u)); }
  .pr-cifra { padding: 0 0 0 calc(16 * var(--u)); }
  .pr-cifra:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
  .pr-cifra .valor { margin-top: calc(8 * var(--u)); }
  .pr-cifra .numero { font-size: calc(34 * var(--u)); }
  .pr-cifra .unidad { font-size: calc(14 * var(--u)); }
  .pr-cifra .detalle { margin-top: calc(6 * var(--u)); font-size: calc(12.5 * var(--u)); }
  .pr-cifra .detalle .icono { display: none; }
  .pr-medio { display: block; margin-top: calc(24 * var(--u)); }
  .pr-decidir .cabeza .nota { display: none; }
  .pr-pregunta { grid-template-columns: calc(44 * var(--u)) 1fr; height: auto; margin-top: calc(12 * var(--u)); column-gap: calc(12 * var(--u)); }
  .pr-pregunta:first-of-type { margin-top: calc(14 * var(--u)); }
  .pr-pregunta:nth-of-type(n + 4) { display: none; }
  .pr-pregunta .foto { width: calc(44 * var(--u)); height: calc(30 * var(--u)); }
  .pr-pregunta .q { font-size: calc(13.5 * var(--u)); }
  .pr-pregunta .m { font-size: calc(12 * var(--u)); }
  .pr-pregunta .opciones { display: none; }
  .pr-paso { display: none; }
  .pr-jornadas { margin-top: calc(22 * var(--u)); padding-top: calc(16 * var(--u)); }
  .rejilla-jornadas { grid-template-columns: 1fr 1fr; column-gap: calc(14 * var(--u)); }
  .pr-jornada .nombre b { font-size: calc(13 * var(--u)); }
  .pr-jornada .nombre span { display: none; }
  .pr-jornada .foto { width: calc(54 * var(--u)); height: calc(30 * var(--u)); }
  .pr-jornada .fotos { margin-top: calc(8 * var(--u)); }
}

/* ==========================================================================
   5 · El plan de rodaje (Set)
   ========================================================================== */
.pl { position: absolute; left: calc(24 * var(--u)); right: calc(24 * var(--u)); top: calc(92 * var(--u)); }
.pl-cabeza { display: flex; align-items: baseline; gap: calc(18 * var(--u)); }
.pl-cabeza h2 { margin: 0; font: 600 calc(33 * var(--u))/1.1 var(--sala-letra-titulos); letter-spacing: calc(-.6 * var(--u)); }
.pl-cabeza .rotulo { font-size: calc(10.5 * var(--u)); color: #77777A; }
.pl-cabeza .pestanas { margin-left: auto; align-self: center; }
.pl-avisos { display: flex; justify-content: space-between; gap: calc(30 * var(--u)); margin-top: calc(14 * var(--u)); font: 400 calc(13 * var(--u))/1.3 var(--sala-letra); color: #6E6E70; }
.pl-avisos b { color: #CFCDC9; font-weight: 600; margin-right: calc(6 * var(--u)); }
.pl-avisos .punto { display: inline-block; width: calc(6 * var(--u)); height: calc(6 * var(--u)); margin-right: calc(8 * var(--u)); vertical-align: middle; background: #6E6E70; }
.pl-avisos .nota { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(560 * var(--u)); }
.pl-columnas { margin-top: calc(30 * var(--u)); }
.pl-dia .cabeza { padding-bottom: calc(14 * var(--u)); border-bottom: 1px solid #202022; }
.pl-dia .cabeza .linea { display: flex; justify-content: space-between; gap: calc(8 * var(--u)); font: 500 calc(10 * var(--u))/1 var(--sala-mono); letter-spacing: calc(1.2 * var(--u)); color: #9A9A98; white-space: nowrap; }
.pl-dia .cabeza .linea span:last-child { color: #626262; }
.pl-dia h3 span { display: inline; }
.pl-dia h3 { margin: calc(12 * var(--u)) 0 0; font: 600 calc(21 * var(--u))/1.2 var(--sala-letra-titulos); letter-spacing: calc(-.3 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-dia .lugar { margin-top: calc(8 * var(--u)); font: 400 calc(13.5 * var(--u))/1.2 var(--sala-letra); color: var(--sala-secundaria); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-escena {
  position: relative; display: grid; grid-template-columns: calc(52 * var(--u)) minmax(0, 1fr); column-gap: calc(12 * var(--u));
  margin-top: calc(14 * var(--u)); padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)) calc(18 * var(--u));
  border-radius: calc(13 * var(--u)); background: #151516;
}
.pl-escena::before { content: ""; position: absolute; left: 0; top: calc(10 * var(--u)); bottom: calc(10 * var(--u)); width: calc(3 * var(--u)); border-radius: 2px; background: color-mix(in srgb, var(--c) 82%, #151516); }
.pl-escena .hora { font: 700 calc(14.5 * var(--u))/1.3 var(--sala-mono); color: var(--sala-tinta); }
.pl-escena .simbolo { width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin-top: calc(8 * var(--u)); color: #626262; }
.pl-escena .arriba { display: flex; align-items: baseline; justify-content: space-between; }
.pl-escena .esc { font: 600 calc(16 * var(--u))/1.2 var(--sala-letra); }
.pl-escena .pl-n { font: 500 calc(10 * var(--u))/1 var(--sala-mono); letter-spacing: calc(1 * var(--u)); color: #626262; }
.pl-escena .enc { margin-top: calc(6 * var(--u)); font: 500 calc(10 * var(--u))/1.3 var(--sala-mono); letter-spacing: calc(.8 * var(--u)); color: #9A9A98; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-escena .fotos { display: flex; gap: calc(5 * var(--u)); margin-top: calc(10 * var(--u)); }
.pl-escena .foto, .pl-escena .hueco { width: calc(54 * var(--u)); height: calc(31 * var(--u)); border-radius: calc(4 * var(--u)); flex: none; }
.pl-escena .foto .codigo-foto { font-size: calc(9.5 * var(--u)); left: calc(4 * var(--u)); bottom: calc(3 * var(--u)); }
.pl-escena .hueco { display: flex; align-items: flex-end; padding: 0 0 calc(3 * var(--u)) calc(4 * var(--u)); font: 600 calc(9.5 * var(--u))/1 var(--sala-mono); color: #626262; }
.pl-escena .mas { display: flex; align-items: center; justify-content: center; width: calc(54 * var(--u)); height: calc(31 * var(--u)); border-radius: calc(4 * var(--u)); background: rgba(255, 255, 255, .06); font: 600 calc(11 * var(--u))/1 var(--sala-mono); color: #9A9A98; }

@container pz (max-width: 699px) {
  .pl { left: calc(14 * var(--u)); right: calc(14 * var(--u)); top: calc(64 * var(--u)); }
  .pl-cabeza { flex-wrap: wrap; row-gap: calc(4 * var(--u)); }
  .pl-cabeza h2 { font-size: calc(26 * var(--u)); }
  .pl-cabeza .pestanas { display: none; }
  .pl-cabeza .rotulo { font-size: calc(10 * var(--u)); width: 100%; }
  .pl-avisos { display: none; }
  .pl-columnas { margin-top: calc(14 * var(--u)); grid-template-columns: 1fr 1fr; column-gap: calc(12 * var(--u)); row-gap: calc(16 * var(--u)); }
  .pl-dia .cabeza { padding-bottom: calc(8 * var(--u)); }
  .pl-dia .cabeza .linea { font-size: calc(10 * var(--u)); letter-spacing: 0; }
  .pl-dia .cabeza .linea span:last-child { display: none; }
  .pl-dia h3 { font-size: calc(14.5 * var(--u)); margin-top: calc(6 * var(--u)); }
  .pl-dia .lugar { display: none; }
  .pl-escena { grid-template-columns: 1fr; margin-top: calc(8 * var(--u)); padding: calc(9 * var(--u)) calc(9 * var(--u)) calc(9 * var(--u)) calc(12 * var(--u)); }
  .pl-escena .lado { display: flex; align-items: baseline; gap: calc(8 * var(--u)); }
  .pl-escena .simbolo { display: none; }
  .pl-escena .hora { font-size: calc(12 * var(--u)); }
  .pl-escena .arriba { margin-top: calc(-17 * var(--u)); margin-left: calc(48 * var(--u)); }
  .pl-escena .esc { font-size: calc(12.5 * var(--u)); }
  .pl-escena .pl-n { display: none; }
  .pl-escena .enc { display: none; }
  .pl-escena .fotos { margin-top: calc(7 * var(--u)); gap: calc(3 * var(--u)); }
  .pl-escena .foto, .pl-escena .hueco, .pl-escena .mas { width: calc(35 * var(--u)); height: calc(20 * var(--u)); }
  .pl-escena .foto .codigo-foto { display: none; }
  .pl-escena .hueco { font-size: 0; }
  .pl-escena .fotos > :nth-child(n + 5) { display: none; }
}

/* La interfaz de la mesa: columna de herramientas, minimapa con el zoom y la
   barra de territorios (captura lienzo). Entra cuando la mesa queda de frente. */
.mesa-interfaz > * { position: absolute; }
.pz--mesa[data-interfaz="no"] .mesa-interfaz { opacity: 0; visibility: hidden; }
.mesa-herramientas {
  left: calc(18 * var(--u)); top: calc(222 * var(--u)); width: calc(54 * var(--u));
  display: flex; flex-direction: column; align-items: center; gap: calc(21 * var(--u)); padding: calc(22 * var(--u)) 0;
  border-radius: 999px; background: 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), var(--sala-cristal-sombra);
  color: #D6D4D0;
}
.mesa-herramientas .icono { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.mesa-herramientas .sep { display: block; height: calc(4 * var(--u)); }
.mesa-herramientas .sep ~ .icono { color: #8A8A88; }
.mesa-minimapa { left: calc(18 * var(--u)); bottom: calc(14 * var(--u)); width: calc(112 * var(--u)); }
.mesa-minimapa .mapa {
  position: relative; height: calc(72 * var(--u)); border-radius: calc(9 * var(--u));
  background: #19191B; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  overflow: hidden;
}
.mesa-minimapa .mapa i { position: absolute; background: color-mix(in srgb, var(--c, #555) 70%, #222); border-radius: 2px; }
.mesa-minimapa .mapa i.suelta { background: #3A3A3C; }
.mesa-minimapa .zoom {
  display: flex; align-items: center; justify-content: space-between; height: calc(28 * var(--u)); margin-top: calc(8 * var(--u)); padding: 0 calc(10 * var(--u));
  border-radius: 999px; background: 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);
  font: 500 calc(11.5 * var(--u))/1 var(--sala-mono); color: #9B9B9A;
}
.mesa-minimapa .zoom .icono { width: calc(12 * var(--u)); height: calc(12 * var(--u)); color: #9B9B9A; }
.mesa-territorios {
  left: 50%; translate: -50% 0; bottom: calc(14 * var(--u)); height: calc(38 * var(--u)) !important;
  gap: calc(24 * var(--u)) !important; padding: 0 calc(20 * var(--u)) !important; font-size: calc(13.5 * var(--u)) !important;
}
.mesa-territorios span { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); font-weight: 500; }
.mesa-territorios .todo { font-weight: 600; gap: calc(9 * var(--u)); }
.mesa-territorios .todo .icono { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.mesa-territorios .punto { width: calc(6.5 * var(--u)); height: calc(6.5 * var(--u)); }
.mesa-territorios b { font: 500 calc(10.5 * var(--u))/1 var(--sala-mono); color: #6E6E70; margin-left: calc(2 * var(--u)); }
@container pz (max-width: 699px) {
  .mesa-herramientas, .mesa-territorios { display: none !important; }
  .mesa-minimapa { left: calc(14 * var(--u)); }
}

/* Escena: el hueco «+ Plano o dilo con la voz» y «Siguiente». */
.esc-hueco {
  display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(60 * var(--u)); margin-top: calc(26 * var(--u)); padding: 0 calc(12 * var(--u)) 0 calc(20 * var(--u));
  border-radius: calc(12 * var(--u)) !important; font: 400 calc(13.5 * var(--u))/1 var(--sala-letra); color: #696A68;
}
.esc-hueco .icono { width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: #A4A2A2; }
.esc-hueco b { font-weight: 500; color: #A4A2A2; font-size: calc(14 * var(--u)); }
.esc-hueco .capsula { margin-left: auto; width: calc(36 * var(--u)); height: calc(36 * var(--u)); padding: 0; justify-content: center; font-style: normal; }
.esc-hueco .capsula .icono { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.esc-siguiente { position: absolute; right: calc(16 * var(--u)); bottom: calc(18 * var(--u)); height: calc(40 * var(--u)) !important; font-size: calc(14 * var(--u)) !important; color: #B8B6B5 !important; font-weight: 500 !important; }
.esc-siguiente .icono { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }

/* Producción: la fila de arriba. */
.pr-arriba { display: flex; align-items: center; justify-content: space-between; }
.pr-arriba .pestana { font-size: calc(13 * var(--u)); height: calc(30 * var(--u)); }
.pr-arriba .icono { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }

/* Plan: botones de la cabecera y la nota del set. */
.pl-cabeza .capsula { align-self: center; height: calc(36 * var(--u)); font-size: calc(13.5 * var(--u)); }
.pl-cabeza .capsula .icono { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.pl-cabeza .pestana { font-size: calc(12.5 * var(--u)); height: calc(28 * var(--u)); }
.pl-avisos .nota { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); min-width: 0; }
.pl-avisos .nota span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-avisos .nota .icono { width: calc(13 * var(--u)); height: calc(13 * var(--u)); flex: none; }

/* ==========================================================================
   6 · Post · Vista previa (captura post-montaje; SalaPostMesa.swift)
   Medidas tomadas de la captura de 2400 px (1.5 px por punto, ventana de
   1600 × 1000): punto de la lámina = píxel × 0.6. La línea de tiempo muestra de
   0:00 a 2:00 en el Mac y de 0:00 a 0:45 en el teléfono (--ps: puntos por segundo).
   ========================================================================== */
.po { position: absolute; inset: 0; --ps: 10.44; --x0: 145; }
.po .panel-sala, .po-medios, .po-ficha, .po-linea {
  position: absolute; border-radius: var(--sala-esquina-panel);
  background: var(--sala-panel-brillo), #121213;
  box-shadow: inset 0 1px 0 var(--sala-panel-borde-arriba), inset 0 0 0 1px var(--sala-panel-borde-abajo), var(--sala-panel-sombra);
}
.po-vista { position: absolute; left: calc(24 * var(--u)); top: calc(67 * var(--u)); }
.po-vista .pestana, .po-medios .pestana, .po-ficha .pestana, .po-herramientas .pestana { height: calc(24 * var(--u)); font-size: calc(11.5 * var(--u)); padding: 0 calc(11 * var(--u)); }
.po-exportar { position: absolute; right: calc(143 * var(--u)); top: calc(66 * var(--u)); height: calc(30 * var(--u)) !important; font-size: calc(12.5 * var(--u)) !important; }
.po-exportar .icono { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }

/* Medios: pestañas, buscador y la lista de planos por escena. */
.po-medios { left: calc(17 * var(--u)); top: calc(106 * var(--u)); width: calc(251 * var(--u)); height: calc(419 * var(--u)); padding: calc(12 * var(--u)); overflow: hidden; }
.po-medios .pestanas.anchas { display: flex; width: 100%; }
.po-medios .pestanas.anchas .pestana { flex: 1; justify-content: center; }
.po-buscar { display: flex; align-items: center; gap: calc(7 * var(--u)); height: calc(27 * var(--u)); margin-top: calc(11 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(8 * var(--u)); background: rgba(255, 255, 255, .05); font: 400 calc(12.5 * var(--u))/1 var(--sala-letra); color: var(--sala-secundaria); }
.po-buscar .icono { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: var(--sala-tenue); }
.po-lista { margin-top: calc(14 * var(--u)); }
.po-escena-rotulo { font: 600 calc(9.5 * var(--u))/1.2 var(--sala-mono); letter-spacing: calc(1.5 * var(--u)); text-transform: uppercase; color: var(--sala-tenue); margin: calc(12 * var(--u)) 0 calc(8 * var(--u)); }
.po-escena-rotulo:first-child { margin-top: 0; }
.po-plano { display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(40 * var(--u)); }
.po-plano .foto { flex: none; width: calc(55 * var(--u)); height: calc(31 * var(--u)); border-radius: calc(4 * var(--u)); }
.po-plano .foto.elegido { box-shadow: 0 0 0 calc(1.5 * var(--u)) var(--sala-ambar); }
.po-plano > div:last-child { min-width: 0; flex: 1; }
.po-plano .titulo { font: 600 calc(12 * var(--u))/1.3 var(--sala-letra); color: var(--sala-tinta); }
.po-plano .dur { font: 500 calc(9.5 * var(--u))/1.4 var(--sala-mono); color: var(--sala-tenue); }

/* Visor: proyecto y duración, rótulo de programa, la imagen y el transporte. */
.po-visor { position: absolute; left: calc(431 * var(--u)); top: calc(70 * var(--u)); width: calc(578 * var(--u)); }
.po-proyecto { display: flex; justify-content: center; align-items: baseline; gap: calc(8 * var(--u)); height: calc(22 * var(--u)); font: 600 calc(13 * var(--u))/1 var(--sala-letra); }
.po-proyecto .mono { font-size: calc(11 * var(--u)); font-weight: 500; color: var(--sala-secundaria); }
.po-programa { position: relative; display: flex; align-items: center; height: calc(18 * var(--u)); margin-top: calc(20 * var(--u)); }
.po-programa .rotulo { font-size: calc(9.5 * var(--u)); letter-spacing: calc(1.5 * var(--u)); }
.po-programa-clip { position: relative; flex: 1; margin-left: .6em; }
.po-programa-clip > span { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; visibility: hidden; }
.po-programa-clip > span[data-clip="0"] { visibility: inherit; }
.po-programa .iconos { display: flex; gap: calc(14 * var(--u)); color: var(--sala-secundaria); }
.po-programa .iconos .icono { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.po-pantalla { position: relative; height: calc(325 * var(--u)); margin-top: calc(9 * var(--u)); border-radius: calc(12 * var(--u)); overflow: hidden; background: #000; }
.po-cuadro { position: absolute; inset: 0; opacity: 0; }
.po-cuadro[data-clip="0"] { opacity: 1; }
.po-cuadro > img { width: 100%; height: 100%; object-fit: cover; }
.po-texto-pantalla { position: absolute; left: 0; right: 0; bottom: 14%; text-align: center; font: 500 calc(27 * var(--u))/1 var(--sala-letra); letter-spacing: calc(-.2 * var(--u)); color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); opacity: 0; }
.po-transporte { display: flex; align-items: center; justify-content: space-between; height: calc(44 * var(--u)); margin-top: calc(10 * var(--u)); }
.po-tc { font: 600 calc(13.5 * var(--u))/1 var(--sala-mono); color: var(--sala-tinta); width: calc(110 * var(--u)); contain: layout paint; }
.po-total { font: 500 calc(11 * var(--u))/1 var(--sala-mono); color: var(--sala-secundaria); width: calc(110 * var(--u)); text-align: right; }
.po-transporte .botones { display: flex; align-items: center; gap: calc(18 * var(--u)); color: var(--sala-secundaria); }
.po-transporte .botones .icono { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.po-transporte .txt { font: 500 calc(13 * var(--u))/1 var(--sala-mono); font-style: normal; }
.po-play { display: grid; place-items: center; width: calc(39 * var(--u)); height: calc(39 * var(--u)); border-radius: 50%; background: 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); color: var(--sala-tinta); }
.po-play .icono { width: calc(15 * var(--u)) !important; height: calc(15 * var(--u)) !important; margin-left: calc(2 * var(--u)); }

/* Ficha del clip (sin Fundido ni Orden). */
.po-ficha { left: calc(1171 * var(--u)); top: calc(106 * var(--u)); width: calc(253 * var(--u)); height: calc(419 * var(--u)); padding: calc(13 * var(--u)) calc(14 * var(--u)); overflow: hidden; }
.po-clip { position: absolute; left: calc(14 * var(--u)); right: calc(14 * var(--u)); top: calc(52 * var(--u)); visibility: hidden; }
.po-clip[data-clip="0"] { visibility: inherit; }
.po-clip h4 { margin: 0; font: 600 calc(15 * var(--u))/1.25 var(--sala-letra-titulos); color: var(--sala-tinta); }
.po-clip > .rotulo { margin-top: calc(5 * var(--u)); font-size: calc(9 * var(--u)); letter-spacing: calc(1.4 * var(--u)); }
.po-clip .filas { margin-top: calc(14 * var(--u)); }
.po-clip .filas > div { display: flex; align-items: center; height: calc(28.5 * var(--u)); font: 400 calc(12 * var(--u))/1 var(--sala-letra); color: var(--sala-secundaria); }
.po-clip .filas span { flex: 1; }
.po-clip .filas b { font: 500 calc(11.5 * var(--u))/1 var(--sala-mono); color: var(--sala-tinta); }
.po-clip .filas b.campo { padding: calc(5 * var(--u)) calc(8 * var(--u)); border-radius: calc(7 * var(--u)); background: rgba(255, 255, 255, .05); min-width: calc(76 * var(--u)); text-align: right; }
.po-clip .filas i { font: 400 calc(10.5 * var(--u))/1 var(--sala-mono); font-style: normal; color: var(--sala-tenue); margin-left: calc(6 * var(--u)); }
.po-int-rotulo { margin-top: calc(22 * var(--u)); }
.po-int { margin: calc(8 * var(--u)) 0 0; font: 400 calc(12.5 * var(--u))/1.45 var(--sala-letra); color: var(--sala-secundaria); }

/* Línea de tiempo. */
.po-linea { left: calc(17 * var(--u)); top: calc(540 * var(--u)); right: calc(16 * var(--u)); height: calc(344 * var(--u)); overflow: hidden; }
.po-herramientas { position: absolute; left: calc(12 * var(--u)); top: calc(10 * var(--u)); display: flex; align-items: center; gap: calc(6 * var(--u)); color: var(--sala-secundaria); }
.po-herr { display: grid; place-items: center; width: calc(27 * var(--u)); height: calc(27 * var(--u)); border-radius: calc(8 * var(--u)); font: 500 calc(13 * var(--u))/1 var(--sala-letra); }
.po-herr .icono { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.po-herr.activa { background: rgba(255, 255, 255, .12); color: var(--sala-tinta); }
.po-iman { margin-left: calc(14 * var(--u)); color: var(--sala-ambar) !important; }
.po-herramientas .pestanas { margin-left: calc(14 * var(--u)); }
.po-resumen { position: absolute; left: 0; right: 0; top: calc(16 * var(--u)); text-align: center; font: 500 calc(11 * var(--u))/1.2 var(--sala-mono); color: var(--sala-secundaria); pointer-events: none; }
.po-zoom { position: absolute; right: calc(16 * var(--u)); top: calc(10 * var(--u)); display: flex; align-items: center; gap: calc(9 * var(--u)); color: var(--sala-secundaria); }
.po-zoom .icono { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.po-zoom .capsula { height: calc(28 * var(--u)) !important; font-size: calc(12 * var(--u)) !important; }
.po-deslizador { position: relative; width: calc(108 * var(--u)); height: calc(3 * var(--u)); border-radius: 2px; background: rgba(255, 255, 255, .14); }
.po-deslizador i { position: absolute; left: calc(6 * var(--u)); top: 50%; width: calc(13 * var(--u)); height: calc(13 * var(--u)); margin-top: calc(-6.5 * var(--u)); border-radius: 50%; background: #F2F0EC; }
.po-regla { position: absolute; left: calc(var(--x0) * var(--u)); right: calc(26 * var(--u)); top: calc(52 * var(--u)); height: calc(20 * var(--u)); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.po-marca { position: absolute; left: calc(var(--t) * var(--ps) * var(--u)); top: 0; padding-left: calc(3 * var(--u)); border-left: 1px solid rgba(255, 255, 255, .16); font: 500 calc(9.5 * var(--u))/1.2 var(--sala-mono); color: var(--sala-tenue); }
.po-ventana-telefono, .po-todo-mac, .po-todo-telefono { display: none; }
/* Zoom «Ver todo» (la portada): el montaje entero en la pista. Lo enciende la película
   con la clase po--todo y su --ps. */
.po--todo .po-ventana-mac { display: none; } .po--todo .po-todo-mac { display: inline; }
.po-entrada-salida { position: absolute; left: calc(var(--t) * var(--ps) * var(--u)); width: calc(var(--d) * var(--ps) * var(--u)); top: calc(2 * var(--u)); height: calc(15 * var(--u)); border-radius: calc(4 * var(--u)); background: rgba(255, 255, 255, .05); box-shadow: inset 2px 0 0 rgba(255, 255, 255, .5), inset -2px 0 0 rgba(255, 255, 255, .5); }
.po-bandera { position: absolute; left: calc(var(--t) * var(--ps) * var(--u)); top: 0; width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 2px 2px 50% 50%; background: var(--sala-ambar); }
.po-cabezas { position: absolute; left: calc(12 * var(--u)); top: calc(73 * var(--u)); width: calc(118 * var(--u)); }
.po-pista-cabeza { position: relative; display: flex; align-items: center; gap: calc(5 * var(--u)); font: 400 calc(12 * var(--u))/1 var(--sala-letra); color: var(--sala-secundaria); padding-left: calc(5 * var(--u)); }
.po-pista-cabeza b { font-weight: 600; color: var(--sala-tinta); }
.po-pista-cabeza .botones { position: absolute; right: 0; display: flex; gap: calc(6 * var(--u)); color: var(--sala-tenue); }
.po-pista-cabeza .botones .icono { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.po-pista-cabeza .m { font: 600 calc(8.5 * var(--u))/1 var(--sala-mono); font-style: normal; padding: calc(3 * var(--u)) calc(4 * var(--u)); border-radius: calc(4 * var(--u)); background: rgba(255, 255, 255, .06); }
.po-carriles { position: absolute; left: calc(var(--x0) * var(--u)); right: calc(26 * var(--u)); top: calc(73 * var(--u)); height: calc(227 * var(--u)); overflow: hidden; }
.po-carril { position: relative; border-radius: calc(5 * var(--u)); background: rgba(255, 255, 255, .025); }
.po-v2 { height: calc(22 * var(--u)); }
.po-v1 { height: calc(55 * var(--u)); }
.po-a1, .po-a2, .po-a3 { height: calc(42 * var(--u)); }
.po-carril + .po-carril { margin-top: calc(6 * var(--u)); }
.po-cabezas .po-pista-cabeza { margin-bottom: calc(6 * var(--u)); }
.po-cabezas .po-v2 { height: calc(22 * var(--u)); } .po-cabezas .po-v1 { height: calc(55 * var(--u)); }
.po-cabezas .po-a1, .po-cabezas .po-a2, .po-cabezas .po-a3 { height: calc(42 * var(--u)); }
.po-carril > div { position: absolute; top: 0; bottom: 0; left: calc(var(--t) * var(--ps) * var(--u) + 0.5px); width: calc(var(--d) * var(--ps) * var(--u) - 1.5px); border-radius: calc(5 * var(--u)); overflow: hidden; }
.po-v1 > div { background: #1A1A1C; }
.po-v1 > div > img { width: 100%; height: 100%; object-fit: cover; }
.po-v1 .codigo-foto { position: absolute; left: calc(5 * var(--u)); top: calc(4 * var(--u)); font: 700 calc(10 * var(--u))/1 var(--sala-mono); color: #fff; text-shadow: var(--sala-legible); }
.po-v2 > div { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.po-v2 span { position: absolute; left: calc(5 * var(--u)); right: calc(4 * var(--u)); top: 50%; transform: translateY(-50%); font: 700 calc(8.5 * var(--u))/1 var(--sala-letra); color: var(--sala-tinta); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.po-audio { background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.po-audio > span { position: absolute; left: calc(7 * var(--u)); right: calc(6 * var(--u)); top: calc(6 * var(--u)); font: 600 calc(11 * var(--u))/1.1 var(--sala-letra); color: var(--sala-tinta); }
.po-audio .onda { position: absolute; left: calc(4 * var(--u)); right: calc(4 * var(--u)); bottom: calc(4 * var(--u)); height: calc(18 * var(--u)); width: calc(100% - 8 * var(--u)); }
.po-audio .onda path { stroke: #9A9894; stroke-width: .55; fill: none; vector-effect: non-scaling-stroke; }
.po-a1 .onda path { stroke: #B9B6B1; }
.po-a2 .onda path { stroke: #E4E2DE; }
.po-cabezal { position: absolute; left: 0; top: calc(-21 * var(--u)); bottom: 0; width: 0; pointer-events: none; }
.po-cabezal::before { content: ""; position: absolute; left: calc(-0.75 * var(--u)); top: calc(4 * var(--u)); bottom: 0; width: calc(1.5 * var(--u)); background: var(--sala-ambar); }
.po-cabezal i { position: absolute; left: calc(-6 * var(--u)); top: calc(3 * var(--u)); width: calc(12 * var(--u)); height: calc(12 * var(--u)); background: var(--sala-ambar); transform: rotate(45deg); border-radius: 2px; }
.po-carriles { overflow: visible; }
.po-carriles::after { content: none; }
.po-pie { position: absolute; left: calc(12 * var(--u)); right: calc(140 * var(--u)); bottom: calc(10 * var(--u)); display: flex; justify-content: space-between; font: 500 calc(9.5 * var(--u))/1 var(--sala-mono); color: var(--sala-tenue); }
.po-voz { position: absolute; right: calc(130 * var(--u)); bottom: calc(26 * var(--u)); display: grid; place-items: center; width: calc(51 * var(--u)); height: calc(51 * var(--u)); border-radius: 50%; background: #F2F0EC; color: #161616; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
.po-voz .icono { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }

/* Teléfono: el visor arriba, la ficha corta y, debajo, V2, V1 y A1–A3 de 0:00 a
   0:45. Sin medios (composición del experto, aprobada por el creativo). */
@container pz (max-width: 699px) {
  .po { --ps: 6.53; --x0: 80; }
  .po-visor { left: calc(16 * var(--u)); top: calc(62 * var(--u)); width: calc(358 * var(--u)); }
  .po-programa { margin-top: 0; }
  .po-programa .rotulo { font-size: calc(10 * var(--u)); letter-spacing: calc(1 * var(--u)); }
  .po-pantalla { height: calc(201 * var(--u)); margin-top: calc(6 * var(--u)); border-radius: calc(10 * var(--u)); }
  .po-texto-pantalla { font-size: calc(16 * var(--u)); }
  .po-transporte { height: calc(36 * var(--u)); margin-top: calc(6 * var(--u)); }
  .po-tc { font-size: calc(12 * var(--u)); width: calc(96 * var(--u)); }
  .po-total { font-size: calc(10 * var(--u)); width: calc(96 * var(--u)); }
  .po-transporte .botones { gap: calc(14 * var(--u)); }
  .po-play { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
  .po-ficha { left: calc(16 * var(--u)); right: calc(16 * var(--u)); width: auto; top: calc(335 * var(--u)); height: calc(104 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); }
  .po-clip { top: calc(12 * var(--u)); }
  .po-clip h4 { font-size: calc(14 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .po-clip > .rotulo { font-size: calc(10 * var(--u)); letter-spacing: calc(1 * var(--u)); }
  .po-clip .filas { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(18 * var(--u)); margin-top: calc(8 * var(--u)); }
  .po-clip .filas > div { height: calc(24 * var(--u)); font-size: calc(11 * var(--u)); }
  .po-clip .filas > div:nth-child(1) { order: 1; } .po-clip .filas > div:nth-child(2) { order: 3; } .po-clip .filas > div:nth-child(3) { order: 2; } .po-clip .filas > div:nth-child(4) { order: 4; }
  .po-clip .filas b { font-size: calc(10.5 * var(--u)); }
  .po-clip .filas b.campo { min-width: 0; padding: 0; background: none; }
  .po-int-rotulo, .po-int { display: none; }
  .po-linea { left: 0; right: 0; top: calc(445 * var(--u)); height: calc(222 * var(--u)); border-radius: 0; background: none; box-shadow: none; }
  /* En el teléfono, V1 y A1–A3 (escaleta): V2 no cabe y su bloque de 6 s cortaba el
     título; el título se ve sobre la imagen. */
  .po-carril.po-v2, .po-cabezas .po-v2 { display: none; }
  .po-resumen { top: 0; font-size: calc(10 * var(--u)); }
  .po-regla { top: calc(22 * var(--u)); right: calc(16 * var(--u)); }
  .po-marca { font-size: calc(10 * var(--u)); }
  .po-ventana-mac { display: none; } .po-ventana-telefono { display: inline; }
  .po--todo .po-ventana-telefono, .po--todo .po-todo-mac { display: none; } .po--todo .po-todo-telefono { display: inline; }
  /* En «Ver todo» del teléfono ningún clip mide más de 15 pt: sus nombres no caben y
     sólo quedan las imágenes y las ondas. */
  .po--todo .po-v1 .codigo-foto, .po--todo .po-audio > span { display: none; }
  .po-cabezas { left: calc(16 * var(--u)); top: calc(46 * var(--u)); width: calc(62 * var(--u)); }
  .po-pista-cabeza { padding-left: 0; gap: calc(4 * var(--u)); font-size: calc(10 * var(--u)); white-space: nowrap; }
  .po-pista-cabeza b { font-size: calc(10.5 * var(--u)); }
  .po-carriles { top: calc(46 * var(--u)); right: calc(16 * var(--u)); height: calc(166 * var(--u)); clip-path: inset(calc(-24 * var(--u)) 0 0 0); }
  .po-v2 { height: calc(18 * var(--u)) !important; }
  .po-v1 { height: calc(44 * var(--u)) !important; }
  .po-a1, .po-a2, .po-a3 { height: calc(34 * var(--u)) !important; }
  .po-carril + .po-carril, .po-cabezas .po-pista-cabeza { margin-top: 0; margin-bottom: 0; }
  .po-carril { margin-bottom: calc(5 * var(--u)); }
  .po-cabezas .po-pista-cabeza { margin-bottom: calc(5 * var(--u)); }
  .po-audio > span { font-size: calc(10 * var(--u)); top: calc(4 * var(--u)); max-width: calc((45 - var(--t)) * var(--ps) * var(--u) - 13 * var(--u)); }
  .po-audio .onda { height: calc(14 * var(--u)); bottom: calc(3 * var(--u)); }
  .po-v1 .codigo-foto { font-size: calc(10 * var(--u)); }
  .po-v2 span { font-size: calc(10 * var(--u)); }
}