/* Las DEMOS PEQUEÑAS (8-oct-2026). Referencia: «demos pequeñas.mov» de Pablo: una lista numerada de capacidades y UNA ventana flotante tipo macOS (blanca, semáforo, sombra grande)
   que se acopla a la fila bajo el cursor, se inclina un poco al moverse y trae dentro una micro-demo. Aquí: assets/ventanas-v1.js (el componente) + una escena por fila (assets/mv-*.js).
   Reglas de la casa: un tamaño sólo sube (nada de letra por debajo de 13 px dentro de las ventanas ni de 14 px fuera), «Ejemplo ilustrativo» siempre a la vista, sin peticiones a terceros. */
.vent { position:relative; margin-top:clamp(36px, 4vw, 72px) }
.vent-lista { list-style:none; margin:0; padding:0; border-top:1px solid var(--line) }
.vent-f { position:relative; display:grid; grid-template-columns:calc(60 * var(--u)) minmax(0, 1fr) minmax(0, calc(300 * var(--u))); align-items:center; column-gap:calc(24 * var(--u));
  min-height:calc(148 * var(--u)); padding-block:calc(24 * var(--u)); border-bottom:1px solid var(--line) }
.vent-n { font:500 var(--fs-s)/1 var(--mono); color:var(--ink-3); letter-spacing:.02em }
.vent-t { justify-self:start; max-width:100%; margin:0; padding:0; background:none; border:0; text-align:left; cursor:pointer; color:var(--ink);
  font:500 clamp(26px, 2.5vw, 60px)/1.1 var(--sans); letter-spacing:-.025em; text-wrap:balance }
.vent-t:focus-visible { outline-offset:6px }
.vent-d { margin:0; font-size:var(--fs-m); line-height:1.5; color:var(--ink-3); transition:color .3s var(--ease-ui) }
.vent-f.on .vent-d, .vent-f:hover .vent-d { color:var(--ink) }

/* la ventana: se mueve con una transformación (la calcula el JS con un muelle), así que aquí sólo vive su aspecto */
.vent-v { position:absolute; inset:0; z-index:3; pointer-events:none; perspective:1500px }
.vw { --vw:calc(470 * var(--u)); position:absolute; left:0; top:0; width:var(--vw); aspect-ratio:3 / 2; border-radius:calc(14 * var(--u)); background:#fff; overflow:hidden;
  box-shadow:0 0 0 1px rgba(14, 15, 18, .07), 0 2px 6px rgba(14, 15, 18, .05), 0 46px 90px -30px rgba(14, 15, 18, .46), 0 14px 34px -12px rgba(14, 15, 18, .2);
  transform-origin:50% 35%; will-change:transform; opacity:0; transition:opacity .4s var(--ease-ui) }
.vent.listo .vw { opacity:1 }
.vw-b { position:absolute; left:0; right:0; top:0; z-index:2; height:calc(34 * var(--u)); display:flex; align-items:center; gap:calc(7 * var(--u)); padding:0 calc(14 * var(--u));
  background:rgba(255, 255, 255, .92); border-bottom:1px solid var(--line); font:500 max(13px, calc(13 * var(--u)))/1 var(--sans); color:var(--ink-3) }
.vw-b i { flex:none; width:calc(11 * var(--u)); height:calc(11 * var(--u)); min-width:9px; min-height:9px; border-radius:50%; background:#ff5f57 }
.vw-b i:nth-child(2) { background:#febc2e } .vw-b i:nth-child(3) { background:#28c840 }
.vw-t { flex:1; min-width:0; margin-right:calc(36 * var(--u)); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.vw-c { position:absolute; inset:calc(34 * var(--u)) 0 0; overflow:hidden; font-size:max(13px, calc(13 * var(--u))); line-height:1.35; color:var(--ink) }
.vw-esc { position:absolute; inset:0; opacity:0; transform:scale(.985); pointer-events:none; transition:opacity .26s var(--ease-ui), transform .4s var(--ease) }
.vw-esc.on { opacity:1; transform:none }
.vw-ej { position:absolute; left:calc(12 * var(--u)); bottom:calc(10 * var(--u)); z-index:3; display:inline-flex; align-items:center; height:calc(24 * var(--u)); min-height:20px; padding:0 calc(10 * var(--u));
  border-radius:999px; background:rgba(14, 15, 18, .86); color:#fff; font:500 max(13px, calc(13 * var(--u)))/1 var(--sans); letter-spacing:.01em; pointer-events:none }
/* escena de recambio (cuando la fila apunta a una escena que aún no existe) */
.mv-vacia { position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:var(--ink-3); padding:calc(20 * var(--u)) }

/* estrecho o táctil: la ventana se abre DEBAJO de la fila activa, a todo el ancho, sin muelle ni inclinación */
@media (max-width: 900px) {
  .vent-f { grid-template-columns:calc(40 * var(--u)) minmax(0, 1fr); column-gap:calc(14 * var(--u)); row-gap:calc(10 * var(--u)); min-height:0; padding-block:calc(22 * var(--u)) }
  .vent-d { grid-column:2 }
  .vent-v { position:relative; inset:auto; grid-column:1 / -1; pointer-events:auto; perspective:none }
  .vent-v:not([data-dentro]) { display:none }
  .vw { position:relative; width:100%; max-width:560px; aspect-ratio:5 / 4; margin:calc(8 * var(--u)) auto 0; transform:none !important }
  .vent-t { font-size:clamp(24px, 6.4vw, 34px) }
  .vent-d { color:var(--ink-3) }
}
@media (prefers-reduced-motion: reduce) {
  .vw, .vw-esc { transition:none }
}

/* primitivas compartidas por las escenas (api.cursor y la etiqueta) */
.mv-cur { position:absolute; left:0; top:0; z-index:6; pointer-events:none; will-change:transform; transition:transform .9s var(--ease) }
.mv-cur svg { width:calc(18 * var(--u)); min-width:16px; fill:var(--tono, var(--acento)); stroke:#fff; stroke-width:1.5; stroke-linejoin:round; filter:drop-shadow(0 1px 2px rgba(14, 15, 18, .4)) }
.mv-cur span { position:absolute; left:calc(15 * var(--u)); top:calc(17 * var(--u)); padding:.2em .62em; border-radius:999px; background:var(--tono, var(--acento)); color:#fff; font:500 max(13px, calc(13 * var(--u)))/1.35 var(--sans); white-space:nowrap; box-shadow:0 2px 8px rgba(14, 15, 18, .25) }
.mv-chip { display:inline-flex; align-items:center; gap:.4em; padding:.22em .7em; border-radius:999px; background:#fff; border:1px solid var(--line-2); box-shadow:0 2px 10px rgba(14, 15, 18, .16); color:var(--ink); font:500 max(13px, calc(13 * var(--u)))/1.3 var(--sans); white-space:nowrap }
.mv-chip.ac { border-color:var(--acento); color:var(--acento) }

/* en reposo (nadie con el cursor sobre una fila) la ventana enseña el fotograma final y un símbolo de «reproducir»; con el cursor sobre 01, 02… se mueve (9-oct) */
.vw::after { content:""; position:absolute; left:50%; top:calc(50% + 17 * var(--u)); margin:calc(-25 * var(--u)) 0 0 calc(-25 * var(--u)); z-index:4; width:calc(50 * var(--u)); height:calc(50 * var(--u)); min-width:40px; min-height:40px; box-shadow:0 0 0 calc(5 * var(--u)) rgba(255, 255, 255, .55); border-radius:50%; background:rgba(14, 15, 18, .82) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 6.5v11l9-5.5z' fill='white'/></svg>") center / 58% no-repeat; opacity:1; transition:opacity .2s; pointer-events:none }
.vent.jugando .vw::after { opacity:0 }
@media (prefers-reduced-motion: reduce) { .vw::after { display:none } }