/* ============================================================================
   SPICA STUDIO · css/demos/pro.css · LAS ESCENAS DE LAS HOJAS PRO + pro-rings (r14)
   UNA sola hoja para los diez modulos `js/demos/pro-*.js` y para `pro-rings`,
   como `svc.css` lo es para las diez de r13. Las hojas pro (2.1, 2.2, 2.3) la
   cargan una vez; ninguna escena trae hoja propia.

   El lenguaje: UI oscura sobre slate, teal de la Specialty 02 como unico
   acento, tinta papel al 92 %, chips mono en --teal-bright. Nadie actua
   (sin cursor, sin tap): la UI hace su trabajo sola y el estado final es el
   entregable, tambien impreso (?static y reduced-motion).

   Reglas que se cumplen aqui dentro:
   · ningun token se redefine. Lo que empieza por --pro- es local de la UI.
   · geometria en cqw: cada UI es su propio container, asi la misma escena
     cabe en la tarjeta de 300 (a 0,72) y en la nota de 440 x 300 (a 1).
   · la escala del slot se declara en `data-scale` del .demo; el modulo la
     escribe en --s y ESTA hoja la aplica al propio .demo (nunca a un
     ancestro), centrada. Es un transform puro: el ancho de layout lo fija
     el slot de la plantilla (.pro-card__demo .demo, .pro-feat__ui .demo).
   · cero animaciones CSS infinite salvo la orbita de `pro-rings`, que es la
     unica declarada (PLAN r14 seccion 6) y se pausa con .is-halted.
   · el retardo del stagger viaja en --pro-d y se aplica SOLO a opacity y
     transform, para que un nodo pueda cambiar de estado sin heredarlo.
   · lineas que se dibujan: HTML con scaleX/scaleY (grosor exacto), y SVG
     con pathLength="100" solo para trazos cerrados (poligono, lotes, anillos).
   ========================================================================== */

/* ============================================================================
   1 · EL CHASIS DE LA UI PRO
   ========================================================================== */
.demo--pro {
  /* los slots pro miden 300 de alto: el minimo de 420 del Home no aplica */
  min-height: 0;
  padding: 0;
  width: 100%;
  /* escala del slot (C15): transform puro, centrado; solution-pro.css
     repite la misma regla sobre .pro .demo[data-scale] sin conflicto */
  --s: 1;
  transform: scale(var(--s));
  transform-origin: center;
}

.demo--pro .pro-ui {
  --pro-pad: clamp(0.7rem, 3cqw, 0.95rem);
  --pro-gap: clamp(0.4rem, 1.9cqw, 0.6rem);
  --pro-ink: rgba(246, 245, 241, 0.94);
  --pro-soft: rgba(246, 245, 241, 0.76);
  --pro-faint: rgba(246, 245, 241, 0.56);
  --pro-line: var(--line-on-dark);
  --pro-line-strong: rgba(246, 245, 241, 0.34);
  --pro-well: rgba(246, 245, 241, 0.07);
  --pro-well-strong: rgba(246, 245, 241, 0.13);
  --pro-accent: var(--teal-bright);
  --pro-fill: var(--teal);
  /* el verde de "listo" sobre slate no llega a 3:1: se aclara sobre el mismo
     token, como hace svc.css (mismo dueno, mismo hue, solo contraste) */
  --pro-go: color-mix(in srgb, var(--go) 58%, #fff);

  /* escala tipografica local. El piso vive en el minimo del clamp (leccion
     r13): nada nace por debajo de 11,2px, este en el slot que este. */
  --pro-mono: clamp(0.7rem, 2.1cqw, 0.76rem);
  --pro-micro: clamp(0.7rem, 1.9cqw, 0.72rem);
  --pro-small: clamp(0.72rem, 2.2cqw, 0.8rem);
  --pro-text: clamp(0.76rem, 2.4cqw, 0.86rem);
  --pro-lead: clamp(0.86rem, 2.9cqw, 1.02rem);

  container-type: inline-size;
  position: relative;
  width: min(440px, 100%);
  background: var(--slate);
  border: 1px solid var(--pro-line);
  border-radius: var(--radius-md);
  box-shadow: 0 22px 60px rgba(17, 17, 16, 0.28);
  padding: var(--pro-pad);
  display: grid;
  gap: var(--pro-gap);
  align-content: start;
  color: var(--pro-ink);
  overflow: hidden;
}

/* ningun hijo fuerza la columna de la UI: una pildora larga o una cabecera
   con dos rotulos nowrap no ensanchan la UI mas alla de su slot (leccion del
   QA r14: en 375 la columna crecia hasta 331px dentro de una UI de 311) */
.demo--pro .pro-ui > * { min-width: 0; }

/* tarjeta "what it does" (P1): la UI compone mas cuadrada y entra a 0,72 */
.demo--pro-mode-card .pro-ui { width: min(400px, 100%); }

/* cabecera mono: barra de titulo de una UI, no de un documento */
.demo--pro .pro-ui__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--pro-mono);
  font-weight: 560;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--pro-faint);
  min-width: 0;
}
.demo--pro .pro-ui__head > * { min-width: 0; }
.demo--pro .pro-ui__meta { color: var(--pro-accent); white-space: nowrap; }

/* entrada base de cualquier pieza de la UI */
.demo--pro .pro-in {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.36s var(--ease-out) var(--pro-d, 0ms),
    transform 0.46s var(--ease-scene) var(--pro-d, 0ms);
}
.demo--pro .pro-in.is-on { opacity: 1; transform: none; }

/* pop corto (vertices, pines, signos): entra con resorte */
.demo--pro .pro-pop {
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.26s var(--ease-out) var(--pro-d, 0ms),
    transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) var(--pro-d, 0ms);
}
.demo--pro .pro-pop.is-on { opacity: 1; transform: none; }

/* el sello del cierre */
.demo--pro .pro-stamp {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: var(--pro-mono);
  font-weight: 560;
  letter-spacing: 0.06em;
  color: var(--pro-ink);
  border-top: 1px solid var(--pro-line);
  padding-top: 0.4rem;
  width: 100%;
  text-align: right;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.36s var(--ease-out),
    transform 0.42s var(--ease-out);
}
.demo--pro .pro-stamp.is-on { opacity: 1; transform: none; }

/* el pie mono */
.demo--pro .pro-foot {
  font-family: var(--font-mono);
  font-size: var(--pro-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--pro-faint);
}

/* lineas que se dibujan: HTML puro */
.demo--pro .pro-line {
  display: block;
  background: currentColor;
  transition: transform 0.56s var(--ease-out) var(--pro-d, 0ms);
}
.demo--pro .pro-line--v { width: 2px; transform: scaleY(0); transform-origin: top center; }
.demo--pro .pro-line--h { height: 1.5px; transform: scaleX(0); transform-origin: left center; }
.demo--pro .pro-line.is-on,
.demo--pro .pro-draw.is-on .pro-line { transform: none; }

/* check que se dibuja (SVG con pathLength="100") */
.demo--pro .pro-check {
  width: clamp(12px, 3.4cqw, 15px);
  height: clamp(12px, 3.4cqw, 15px);
  flex: none;
  color: var(--pro-go);
}
.demo--pro .pro-check svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.42s var(--ease-out) var(--pro-d, 0ms);
}
.demo--pro .pro-check.is-on svg { stroke-dashoffset: 0; }

/* chips del motor sobre slate: sin tinte de fondo (el tinte al 12 % tumbaba
   el ratio a 3,4), borde fino y --teal-bright, que mide 5,1 sobre slate.
   Selector de tres clases a proposito: responsive-scenes.css (que carga la
   ultima) baja `.demo .dm-chip` a 0,66rem por debajo de 1080px, y con la
   misma especificidad ganaba ella: el chip caia a 10,6px en telefono. */
.demo--pro .pro-ui .dm-chip {
  --dm-accent: var(--pro-accent);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--pro-accent) 45%, transparent);
  font-size: var(--pro-mono);
  padding: 0.16rem 0.5rem;
  white-space: nowrap;
  transition-delay: var(--pro-d, 0ms);
}
.demo--pro .dm-chip--solid {
  --dm-accent: var(--pro-fill);
  color: #fff;
  background: var(--pro-fill);
  border-color: var(--pro-fill);
}
.demo--pro .dm-chip--dim {
  color: var(--pro-faint);
  border-color: var(--pro-line);
}
.demo--pro .dm-chip--go {
  color: var(--pro-go);
  border-color: color-mix(in srgb, var(--pro-go) 45%, transparent);
}

/* el texto que se escribe solo hereda el color de su UI */
.demo--pro .dm-word { color: inherit; }

/* la nota flotante del motor (papel) dentro de una UI oscura: se ancla
   dentro del propio .demo, nunca sale del slot */
.demo--pro .dm-note {
  position: absolute;
  z-index: 3;
  max-width: 15rem;
}
.demo--pro .dm-note__copy b { font-size: var(--pro-small); }
.demo--pro .dm-note__copy small { font-size: var(--pro-micro); }

/* UI estrecha (telefono: la nota mide unos 311px; la tarjeta compone a 400):
   las dos columnas se apilan, la cabecera puede partir en dos lineas y las
   pildoras largas envuelven. Los chips de los pines del mapa no envuelven:
   son absolutos y partirian por letra. */
@container (max-width: 340px) {
  .demo--pro .pro-ui__head { flex-wrap: wrap; row-gap: 0.15rem; }
  .demo--pro .pro-ui .dm-chip { white-space: normal; text-align: center; line-height: 1.25; }
  .demo--pro-doors .pdo-pin .dm-chip { white-space: nowrap; }
  .demo--pro-measure .pme-wrap,
  .demo--pro-doors .pdo-wrap { grid-template-columns: 1fr; }
}

/* fila generica "icono + texto + check" que usan train y measure */
.demo--pro .pro-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 1.55rem;
  font-size: var(--pro-small);
  color: var(--pro-soft);
  min-width: 0;
}
.demo--pro .pro-row__text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo--pro .pro-row__icon {
  width: clamp(14px, 4cqw, 18px);
  height: clamp(14px, 4cqw, 18px);
  flex: none;
  color: var(--pro-faint);
  transition: color 0.3s var(--ease);
}
.demo--pro .pro-row__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.demo--pro .pro-row.is-done .pro-row__icon { color: var(--pro-accent); }
.demo--pro .pro-row .dm-chip { margin-left: auto; }

/* ============================================================================
   2 · pro-rings · los anillos de linea en orbita del hero pro (MOTION 3.8, E3)
   Tres elipses concentricas en un SVG de viewBox 1000, radios 320 / 410 / 490,
   excentricidad 0,82, inclinadas 0 / 18 / -14, trazo 1,25. Monocromo teal:
   --teal-bright, --teal y papel al 22 %. Se dibujan por stroke-dashoffset en
   1.100 ms con stagger 260 y despues orbitan a 64 / 88 / 112 s en sentidos
   alternos. Es la unica animacion infinite fuera de guion: ambiente de hero,
   pausada por .is-halted, quieta en reduced-motion y ?static. Cero puntos,
   cero degradados, cero particulas. La grilla del ref cada 96px la pinta el
   hero de la plantilla (solution-pro.css .pro-hero), no este stage: dos
   grillas superpuestas se verian como una caja de lineas mas densas.
   ========================================================================== */
.demo--pro-rings {
  position: absolute;
  inset: 0;
  min-height: 0;
  padding: 0;
  display: block;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.demo--pro-rings .pr-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.demo--pro-rings .pr-ring {
  transform-box: view-box;
  transform-origin: 50% 50%;
  transform: rotate(var(--pr-tilt, 0deg));
}
.demo--pro-rings .pr-ring--1 { color: var(--teal-bright); }
.demo--pro-rings .pr-ring--2 { color: var(--teal); }
.demo--pro-rings .pr-ring--3 { color: rgba(246, 245, 241, 0.22); }
.demo--pro-rings .pr-ring ellipse {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.1s var(--ease-out);
}
.demo--pro-rings .pr-ring.is-on ellipse { stroke-dashoffset: 0; }
.demo--pro-rings.is-orbit .pr-ring {
  animation: pr-spin var(--pr-spin, 88s) linear infinite;
  animation-direction: var(--pr-dir, normal);
}
@keyframes pr-spin {
  from { transform: rotate(var(--pr-tilt, 0deg)); }
  to { transform: rotate(calc(var(--pr-tilt, 0deg) + 360deg)); }
}

/* ============================================================================
   3 · pro-reply · la conversacion que se contesta sola (2.2 F1 y tarjeta 1)
   ========================================================================== */
.demo--pro-reply .prp-thread {
  display: flex;
  flex-direction: column;
  gap: clamp(0.3rem, 1.4cqw, 0.45rem);
  min-height: clamp(96px, 30cqw, 150px);
  justify-content: flex-end;
}
.demo--pro-reply .dm-bubble {
  --dm-accent: var(--pro-fill);
  font-size: var(--pro-small);
  padding: 0.44rem 0.66rem;
  border-radius: 13px;
  max-width: 78%;
  box-shadow: none;
}
.demo--pro-reply .dm-bubble--in {
  background: var(--pro-well-strong);
  color: var(--pro-ink);
  border-bottom-left-radius: 4px;
}
.demo--pro-reply .dm-bubble--out { border-bottom-right-radius: 4px; }
.demo--pro-reply .dm-typing {
  --dm-accent: var(--pro-well-strong);
  align-self: flex-start;
  padding: 0.36rem 0.5rem;
}
.demo--pro-reply .dm-typing i { background: var(--pro-soft); }
.demo--pro-reply .prp-close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--pro-line);
  padding-top: 0.4rem;
}

/* ============================================================================
   4 · pro-flow · lo que iba en papel corre solo (2.2 F2 y tarjeta 2)
   ========================================================================== */
.demo--pro-flow .pfl-board {
  container-type: inline-size;
  position: relative;
  display: grid;
  grid-template-columns: clamp(52px, 17cqw, 76px) 1fr;
  gap: clamp(0.6rem, 3cqw, 1.1rem);
  align-items: center;
  min-height: clamp(110px, 32cqw, 150px);
}
.demo--pro-flow .pfl-old {
  display: grid;
  gap: clamp(0.35rem, 1.8cqw, 0.6rem);
  justify-items: center;
}
.demo--pro-flow .pfl-old__label {
  font-family: var(--font-mono);
  font-size: var(--pro-micro);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--pro-faint);
  text-align: center;
}
.demo--pro-flow .pfl-icon {
  width: clamp(24px, 7cqw, 30px);
  height: clamp(24px, 7cqw, 30px);
  border-radius: 8px;
  background: var(--pro-well);
  color: var(--pro-faint);
  display: grid;
  place-items: center;
  transition:
    opacity 0.36s var(--ease-out) var(--pro-d, 0ms),
    transform 0.46s var(--ease-scene) var(--pro-d, 0ms);
}
.demo--pro-flow .pfl-icon svg {
  width: 58%;
  height: 58%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* el viaje al nodo 1: cada icono se desplaza (en cqw del tablero) y se
   apaga al llegar. Es una sola transicion de 600 ms, sin medir layout. */
.demo--pro-flow .pfl-icon.is-absorbed {
  opacity: 0;
  transform: translate(var(--pfl-tx, 30cqw), var(--pfl-ty, 0)) scale(0.45);
  transition:
    opacity 0.32s cubic-bezier(0.55, 0, 0.85, 0.36) 0.3s,
    transform 0.6s var(--ease);
}
.demo--pro-flow .pfl-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  align-items: center;
}
.demo--pro-flow .pfl-rail,
.demo--pro-flow .pfl-wire {
  position: absolute;
  left: clamp(14px, 4cqw, 18px);
  right: clamp(14px, 4cqw, 18px);
  top: 50%;
  height: 1.5px;
  width: auto;
}
.demo--pro-flow .pfl-rail { color: var(--pro-line-strong); }
.demo--pro-flow .pfl-wire { color: var(--pro-accent); height: 2px; }
.demo--pro-flow .pfl-node {
  position: relative;
  z-index: 1;
  width: clamp(28px, 8cqw, 36px);
  height: clamp(28px, 8cqw, 36px);
  border-radius: 50%;
  border: 1.5px solid var(--pro-line-strong);
  background: var(--slate);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: var(--pro-micro);
  font-weight: 620;
  color: var(--pro-faint);
  transition:
    border-color 0.36s var(--ease),
    color 0.36s var(--ease),
    background 0.36s var(--ease),
    box-shadow 0.36s var(--ease);
}
.demo--pro-flow .pfl-node.is-lit {
  border-color: var(--pro-accent);
  color: #fff;
  background: var(--pro-fill);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal-bright) 18%, transparent);
}
.demo--pro-flow .pfl-nodes { display: contents; }
.demo--pro-flow .pfl-tag {
  position: absolute;
  right: 0;
  top: -1.9rem;
}
.demo--pro-flow .pfl-close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ============================================================================
   5 · pro-train · cada equipo, sus herramientas; Design + AI (2.2 F4 y tarjeta 3)
   ========================================================================== */
.demo--pro-train .ptr-rows { display: grid; gap: clamp(0.2rem, 1cqw, 0.35rem); }
.demo--pro-train .ptr-row { border-bottom: 1px solid var(--pro-line); padding-bottom: 0.2rem; }
.demo--pro-train .ptr-row:last-child { border-bottom: 0; }
.demo--pro-train .ptr-row__name { font-weight: 560; color: var(--pro-ink); }
.demo--pro-train .ptr-plus {
  display: inline-block;
  font-style: normal;
  font-weight: 700;
  color: var(--pro-accent);
  margin: 0 0.15rem;
}
.demo--pro-train .ptr-plus,
.demo--pro-train .ptr-ai { transition: opacity 0.26s var(--ease-out), transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1); }
.demo--pro-train .ptr-plus:not(.is-on),
.demo--pro-train .ptr-ai:not(.is-on) { opacity: 0; transform: scale(0.4); display: inline-block; }
.demo--pro-train .ptr-ai { display: inline-block; }

.demo--pro-train .ptr-studio {
  container-type: inline-size;
  display: grid;
  grid-template-columns: clamp(92px, 30cqw, 128px) 1fr;
  gap: clamp(0.6rem, 3cqw, 1rem);
  align-items: start;
}
/* la ficha del manual: monograma, paleta de tres, par tipografico */
.demo--pro-train .ptr-manual {
  border: 1px solid var(--pro-line);
  border-radius: 10px;
  padding: clamp(0.4rem, 2cqw, 0.6rem);
  display: grid;
  gap: 0.4rem;
  background: var(--pro-well);
}
.demo--pro-train .ptr-manual__head {
  font-family: var(--font-mono);
  font-size: var(--pro-micro);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--pro-faint);
}
.demo--pro-train .ptr-mark {
  width: clamp(22px, 8cqw, 30px);
  height: clamp(22px, 8cqw, 30px);
  color: var(--pro-accent);
}
.demo--pro-train .ptr-mark svg,
.demo--pro-train .ptr-piece__mark svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.demo--pro-train .ptr-swatches { display: flex; gap: 0.3rem; }
.demo--pro-train .ptr-swatch {
  width: clamp(14px, 4.6cqw, 18px);
  height: clamp(14px, 4.6cqw, 18px);
  border-radius: 4px;
  border: 1px solid var(--pro-line);
}
.demo--pro-train .ptr-swatch--teal { background: var(--teal); }
.demo--pro-train .ptr-swatch--paper { background: var(--paper); }
.demo--pro-train .ptr-swatch--slate { background: var(--slate); }
.demo--pro-train .ptr-type {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  color: var(--pro-ink);
}
.demo--pro-train .ptr-type b { font-family: var(--font-display); font-weight: 800; font-size: var(--pro-lead); }
.demo--pro-train .ptr-type span { font-family: var(--font-sans); font-size: var(--pro-text); color: var(--pro-soft); }

/* las piezas que se generan: cuadrado, vertical, banner, y la cuarta */
.demo--pro-train .ptr-pieces {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.35rem, 1.6cqw, 0.55rem);
  align-items: end;
}
.demo--pro-train .ptr-piece {
  --ptr-bg: var(--teal);
  position: relative;
  width: 100%;
  border-radius: 6px;
  background: var(--ptr-bg);
  display: grid;
  place-items: center;
  overflow: hidden;
  transition:
    opacity 0.36s var(--ease-out) var(--pro-d, 0ms),
    transform 0.46s var(--ease-scene) var(--pro-d, 0ms),
    background 0.4s var(--ease);
}
.demo--pro-train .ptr-piece--square { aspect-ratio: 1; }
.demo--pro-train .ptr-piece--vertical { aspect-ratio: 9 / 16; }
.demo--pro-train .ptr-piece--banner { aspect-ratio: 16 / 9; align-self: center; }
.demo--pro-train .ptr-piece__mark { width: 42%; height: 42%; color: var(--paper); }
.demo--pro-train .ptr-piece__bar {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 12%;
  height: 3px;
  border-radius: 2px;
  background: rgba(246, 245, 241, 0.7);
}
/* la cuarta intenta un color ajeno a la paleta y se corrige sola en 400 ms */
.demo--pro-train .ptr-piece--off { --ptr-bg: var(--slate-soft); }
.demo--pro-train .ptr-piece--off.is-corrected { --ptr-bg: var(--teal); }
.demo--pro-train .ptr-close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ============================================================================
   6 · pro-cut · el corte a la pauta (2.2 F3)
   ========================================================================== */
.demo--pro-cut .pcu-board {
  container-type: inline-size;
  position: relative;
  height: 48cqw;
  max-height: 200px;
}
.demo--pro-cut .pcu-label {
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--pro-micro);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--pro-faint);
}
.demo--pro-cut .pcu-label--raw { left: 0; top: 0; }
.demo--pro-cut .pcu-label--tpl { left: 66cqw; top: 0; color: var(--pro-accent); }
/* el clip crudo: una barra con el largo del material, en posicion absoluta,
   asi el viaje a la ranura es una sola transicion en cqw (sin medir nada) */
.demo--pro-cut .pcu-clip {
  position: absolute;
  left: 0;
  top: var(--pcu-top);
  width: var(--pcu-w);
  height: 8cqw;
  border-radius: 4px;
  background: var(--pro-well-strong);
  border: 1px solid var(--pro-line-strong);
  display: grid;
  align-content: center;
  padding: 0 4px;
  opacity: 0;
  transform: translateX(-10px);
  transition:
    opacity 0.34s var(--ease-out) var(--pro-d, 0ms),
    transform 0.42s var(--ease-scene) var(--pro-d, 0ms);
}
.demo--pro-cut .pcu-clip i {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: var(--pro-line-strong);
}
.demo--pro-cut .pcu-clip.is-on { opacity: 1; transform: none; }
/* recorte: el ancho baja al de la ranura en 400 ms, y despues viaja 560 ms */
.demo--pro-cut .pcu-clip.is-placed {
  width: 19cqw;
  height: 11cqw;
  background: var(--pro-fill);
  border-color: var(--pro-accent);
  transform: translate(var(--pcu-tx), var(--pcu-ty));
  transition:
    width 0.4s var(--ease),
    height 0.4s var(--ease),
    background 0.4s var(--ease),
    border-color 0.4s var(--ease),
    transform 0.56s var(--ease) 0.4s;
}
.demo--pro-cut .pcu-clip.is-placed i { background: rgba(246, 245, 241, 0.7); }
/* el descartado se queda en gris, fuera de la plantilla */
.demo--pro-cut .pcu-clip.is-left { opacity: 0.45; }

.demo--pro-cut .pcu-tpl {
  position: absolute;
  left: 66cqw;
  top: 5cqw;
  width: 25cqw;
  height: 43cqw;
  border-radius: 6px;
  border: 1px solid var(--pro-accent);
  background: var(--pro-well);
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 1.5cqw;
  padding: 2cqw;
}
.demo--pro-cut .pcu-slot {
  border: 1px dashed var(--pro-line-strong);
  border-radius: 4px;
  display: grid;
  align-content: end;
  padding: 2px 3px;
  font-family: var(--font-mono);
  font-size: var(--pro-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pro-faint);
}
.demo--pro-cut .pcu-caps {
  position: absolute;
  left: 68cqw;
  right: 100cqw;
  width: 21cqw;
  bottom: 1cqw;
  display: grid;
  gap: 2px;
  justify-items: center;
}
.demo--pro-cut .pcu-caps i {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--paper);
  width: var(--pcu-cw, 70%);
}
.demo--pro-cut .pcu-chips {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

/* ============================================================================
   7 · pro-measure · medir sin escalera, vender solar (2.1 F1, F2, tarjeta 1)
   ========================================================================== */
.demo--pro-measure .pme-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(0.6rem, 3cqw, 1rem);
  align-items: start;
}
.demo--pro-mode-card.demo--pro-measure .pme-wrap { grid-template-columns: 1fr; }
.demo--pro-measure .pme-plan {
  position: relative;
  border-radius: 10px;
  background: var(--pro-well);
  border: 1px solid var(--pro-line);
  overflow: hidden;
}
.demo--pro-measure .pme-plan svg { display: block; width: 100%; height: auto; }
.demo--pro-measure .pme-poly {
  fill: color-mix(in srgb, var(--teal) 12%, transparent);
  stroke: var(--pro-line-strong);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
.demo--pro-measure .pme-trace {
  fill: none;
  stroke: var(--pro-accent);
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.1s var(--ease-out);
}
.demo--pro-measure .pme-trace.is-on { stroke-dashoffset: 0; }
.demo--pro-measure .pme-ridge {
  fill: none;
  stroke: var(--pro-accent);
  stroke-width: 1.2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  vector-effect: non-scaling-stroke;
  transition: stroke-dashoffset 0.7s var(--ease-out) 0.5s;
}
.demo--pro-measure .pme-trace.is-on ~ .pme-ridge { stroke-dashoffset: 0; }
.demo--pro-measure .pme-dot {
  fill: var(--paper);
  stroke: var(--teal);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(0.3);
  transition:
    opacity 0.26s var(--ease-out) var(--pro-d, 0ms),
    transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) var(--pro-d, 0ms);
}
.demo--pro-measure .pme-dots.is-on .pme-dot { opacity: 1; transform: none; }
/* los paneles solares caen sobre la faceta sur */
.demo--pro-measure .pme-panel {
  fill: var(--teal);
  stroke: var(--paper);
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: translateY(-8px) scale(0.8);
  transition:
    opacity 0.3s var(--ease-out) var(--pro-d, 0ms),
    transform 0.4s var(--ease-scene) var(--pro-d, 0ms);
}
.demo--pro-measure .pme-panels.is-on .pme-panel { opacity: 1; transform: none; }
.demo--pro-measure .pme-area {
  position: absolute;
  left: 6%;
  bottom: 6%;
}
.demo--pro-measure .pme-side { display: grid; gap: clamp(0.3rem, 1.4cqw, 0.5rem); align-content: start; min-width: 0; }
.demo--pro-measure .pme-rows { display: grid; gap: 0.15rem; }
.demo--pro-measure .pme-row { border-bottom: 1px solid var(--pro-line); padding-bottom: 0.15rem; min-height: 1.45rem; }
.demo--pro-measure .pme-row:last-child { border-bottom: 0; }
.demo--pro-measure .pme-pair {
  display: flex;
  align-items: center;
  gap: 0;
}
.demo--pro-measure .pme-pair .pro-line--h {
  width: clamp(14px, 5cqw, 26px);
  color: var(--pro-accent);
}
.demo--pro-measure .pme-close { display: grid; gap: 0.35rem; }

/* ============================================================================
   8 · pro-pipeline · un lead de punta a punta (2.1 F3 y tarjeta 2)
   ========================================================================== */
.demo--pro-pipeline .ppl-lanes {
  container-type: inline-size;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.25rem, 1.2cqw, 0.4rem);
  min-height: clamp(96px, 30cqw, 128px);
}
.demo--pro-pipeline .ppl-col {
  border-radius: 8px;
  background: var(--pro-well);
  padding: 0.35rem;
  min-width: 0;
  transition: background 0.4s var(--ease);
}
.demo--pro-pipeline .ppl-col.is-go { background: color-mix(in srgb, var(--go) 18%, transparent); }
.demo--pro-pipeline .ppl-col__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.2rem;
  font-family: var(--font-mono);
  font-size: var(--pro-micro);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pro-faint);
  white-space: nowrap;
  overflow: hidden;
}
.demo--pro-pipeline .ppl-count {
  font-style: normal;
  min-width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background: var(--pro-well-strong);
  color: var(--pro-ink);
  display: grid;
  place-items: center;
  font-size: var(--pro-micro);
  font-weight: 620;
  letter-spacing: 0;
  flex: none;
}
.demo--pro-pipeline .ppl-count.is-pop { animation: ppl-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes ppl-pop { 50% { transform: scale(1.25); } }
/* la tarjeta viaja sola: posicion absoluta y translateX en cqw de las lanes */
.demo--pro-pipeline .ppl-card {
  position: absolute;
  left: 0.35rem;
  top: 2rem;
  width: calc(25cqw - 0.75rem - 0.35rem);
  border-radius: 7px;
  background: var(--paper-raised);
  color: var(--ink);
  padding: 0.35rem 0.42rem;
  display: grid;
  gap: 0.15rem;
  box-shadow: 0 8px 20px rgba(17, 17, 16, 0.28);
  opacity: 0;
  transform: translate(0, 8px);
  transition:
    opacity 0.34s var(--ease-out),
    transform 0.6s var(--ease);
}
.demo--pro-pipeline .ppl-card.is-on { opacity: 1; transform: translateX(calc(var(--ppl-col, 0) * 25cqw)); }
.demo--pro-pipeline .ppl-card__row { display: flex; align-items: center; gap: 0.3rem; min-width: 0; }
.demo--pro-pipeline .ppl-card b {
  font-size: var(--pro-micro);
  font-weight: 620;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.demo--pro-pipeline .ppl-card small {
  font-size: var(--pro-micro);
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo--pro-pipeline .ppl-card .pro-check { margin-left: auto; color: var(--go); }
.demo--pro-pipeline .ppl-sent { position: absolute; left: 52cqw; bottom: 0.4rem; }
.demo--pro-pipeline .ppl-note { left: 0.2rem; bottom: -0.3rem; }
.demo--pro-pipeline .ppl-close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-height: 1.4rem;
}

/* ============================================================================
   9 · pro-doors · la calle como registro (2.1 F4 y tarjeta 3)
   ========================================================================== */
.demo--pro-doors .pdo-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(0.6rem, 3cqw, 1rem);
  align-items: start;
}
.demo--pro-mode-card.demo--pro-doors .pdo-wrap { grid-template-columns: 1fr; }
.demo--pro-doors .pdo-map {
  position: relative;
  border-radius: 10px;
  background: var(--pro-well);
  border: 1px solid var(--pro-line);
  overflow: hidden;
}
.demo--pro-doors .pdo-map svg { display: block; width: 100%; height: auto; }
.demo--pro-doors .pdo-lot {
  fill: none;
  stroke: var(--pro-line-strong);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.6s var(--ease-out) var(--pro-d, 0ms);
}
.demo--pro-doors .pdo-street {
  fill: none;
  stroke: var(--pro-line-strong);
  stroke-width: 1.2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  vector-effect: non-scaling-stroke;
  transition: stroke-dashoffset 0.6s var(--ease-out);
}
.demo--pro-doors .pdo-lines.is-on .pdo-lot,
.demo--pro-doors .pdo-lines.is-on .pdo-street { stroke-dashoffset: 0; }
.demo--pro-doors .pdo-pin {
  position: absolute;
  left: var(--pdo-x);
  top: var(--pdo-y);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transform: translate(-6px, -50%);
}
.demo--pro-doors .pdo-pin__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--pro-accent);
  border: 2px solid var(--slate);
  box-shadow: 0 0 0 1.5px var(--pro-accent);
  flex: none;
}
.demo--pro-doors .pdo-pin--dim .pdo-pin__dot { background: var(--pro-faint); box-shadow: 0 0 0 1.5px var(--pro-faint); }
.demo--pro-doors .pdo-pin--solid .pdo-pin__dot { background: var(--paper); box-shadow: 0 0 0 1.5px var(--teal); }
.demo--pro-doors .pdo-pin .dm-chip { font-size: var(--pro-micro); padding: 0.1rem 0.4rem; background: var(--slate); }
.demo--pro-doors .pdo-side { display: grid; gap: clamp(0.3rem, 1.4cqw, 0.5rem); align-content: start; min-width: 0; }
/* la columna lateral mide unos 163px en la nota de 440: la pildora "Logged
   from the street" (181px en una linea) envuelve en vez de ensanchar la columna */
.demo--pro-doors .pdo-side .dm-chip { white-space: normal; text-align: center; line-height: 1.25; justify-self: start; }
.demo--pro-doors .pdo-legend { display: grid; gap: 0.15rem; min-width: 0; }
.demo--pro-doors .pdo-legend__row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: var(--pro-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pro-soft);
  border-bottom: 1px solid var(--pro-line);
  padding: 0.18rem 0;
}
.demo--pro-doors .pdo-legend__row b { color: var(--pro-ink); font-weight: 620; }
.demo--pro-doors .pdo-legend__row i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pro-accent);
  margin-right: 0.35rem;
  flex: none;
  font-style: normal;
}
.demo--pro-doors .pdo-legend__row--dim i { background: var(--pro-faint); }
.demo--pro-doors .pdo-legend__row--solid i { background: var(--paper); box-shadow: 0 0 0 1.5px var(--teal); }
.demo--pro-doors .pdo-legend__row span { display: inline-flex; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; }

/* ============================================================================
   10 · pro-rebuild · arreglar y extender, sin empezar de cero (2.3 F3, tarjeta 2)
   ========================================================================== */
.demo--pro-rebuild .prb-window {
  position: relative;
  border: 1px solid var(--pro-line-strong);
  border-radius: 0;
  background: var(--pro-well);
  padding: clamp(0.4rem, 2cqw, 0.6rem);
  display: grid;
  gap: 0.4rem;
  transition: border-radius 0.5s var(--ease), border-color 0.5s var(--ease);
}
.demo--pro-rebuild .prb-window.is-new { border-radius: 10px; border-color: var(--pro-line); }
.demo--pro-rebuild .prb-window__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--pro-micro);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--pro-faint);
  min-height: 1.1rem;
}
.demo--pro-rebuild .prb-window__title { min-width: 0; }
.demo--pro-rebuild .prb-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.3rem, 1.4cqw, 0.5rem);
  min-height: clamp(70px, 20cqw, 92px);
}
/* los bloques nacen desalineados por translate (nada se inclina) y con
   bordes duros; al arreglarse vuelven a su celda y toman radio y sombra */
.demo--pro-rebuild .prb-block {
  grid-column: span var(--prb-span, 2);
  border: 1px solid var(--pro-line-strong);
  background: var(--slate-raised);
  border-radius: 0;
  min-height: clamp(24px, 7cqw, 32px);
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 0.3rem 0.4rem;
  transform: translate(var(--prb-dx, 0), var(--prb-dy, 0));
  transition:
    opacity 0.34s var(--ease-out) var(--pro-d, 0ms),
    transform 0.48s var(--ease) var(--prb-dal, 0ms),
    border-radius 0.48s var(--ease) var(--prb-dal, 0ms),
    box-shadow 0.48s var(--ease) var(--prb-dal, 0ms),
    border-color 0.48s var(--ease) var(--prb-dal, 0ms);
}
.demo--pro-rebuild .prb-block i {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: var(--pro-line-strong);
  width: var(--prb-lw, 70%);
}
.demo--pro-rebuild .prb-block.is-fixed {
  transform: none;
  border-radius: 7px;
  border-color: var(--pro-line);
  box-shadow: 0 6px 16px rgba(17, 17, 16, 0.3);
}
.demo--pro-rebuild .prb-block--new {
  border-color: var(--pro-accent);
  background: var(--pro-fill);
  border-radius: 7px;
  transform: translateY(8px);
  opacity: 0;
}
.demo--pro-rebuild .prb-block--new i { background: rgba(246, 245, 241, 0.75); }
.demo--pro-rebuild .prb-block--new.is-on { opacity: 1; transform: none; }
.demo--pro-rebuild .prb-keep { position: absolute; right: 0.5rem; top: -0.75rem; }
.demo--pro-rebuild .prb-close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-height: 1.4rem;
}

/* ============================================================================
   11 · pro-spec · el sistema toma la forma del proceso; sin limite (2.3 F1, F2)
   ========================================================================== */
.demo--pro-spec .psp-track {
  position: relative;
  display: grid;
  gap: clamp(0.3rem, 1.4cqw, 0.5rem);
  padding: clamp(0.3rem, 1.4cqw, 0.5rem) 0;
}
/* la fila de rotulos (ocho nowrap en grow) no fija el ancho de la pista */
.demo--pro-spec .psp-track > * { min-width: 0; }
.demo--pro-spec .psp-bar { display: flex; width: 100%; }
.demo--pro-spec .psp-seg {
  width: var(--psp-w, 20%);
  height: clamp(18px, 5cqw, 26px);
  border-right: 1.5px solid var(--slate);
  min-width: 0;
}
.demo--pro-spec .psp-seg:last-child { border-right: 0; }
.demo--pro-spec .psp-bar--process .psp-seg { background: var(--pro-well-strong); }
.demo--pro-spec .psp-bar--process .psp-seg:first-child { border-radius: 5px 0 0 5px; }
.demo--pro-spec .psp-bar--process .psp-seg:last-child { border-radius: 0 5px 5px 0; }
/* los modulos caen desde arriba y se acoplan exactos a cada hito */
.demo--pro-spec .psp-bar--modules .psp-seg {
  background: var(--pro-fill);
  border-right-color: var(--slate);
  opacity: 0;
  transform: translateY(-14px);
  transition:
    opacity 0.34s var(--ease-out) var(--pro-d, 0ms),
    transform 0.46s var(--ease-scene) var(--pro-d, 0ms);
}
.demo--pro-spec .psp-bar--modules .psp-seg.is-on { opacity: 1; transform: none; }
.demo--pro-spec .psp-bar--modules .psp-seg:first-child { border-radius: 5px 0 0 5px; }
.demo--pro-spec .psp-bar--modules .psp-seg:last-child { border-radius: 0 5px 5px 0; }
/* hitos nuevos del modo grow: entran a la derecha, en gris de proceso */
.demo--pro-spec .psp-seg--new {
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 0.34s var(--ease-out) var(--pro-d, 0ms),
    transform 0.42s var(--ease-scene) var(--pro-d, 0ms);
}
.demo--pro-spec .psp-seg--new.is-on { opacity: 1; transform: none; }
.demo--pro-spec .psp-labels {
  display: flex;
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--pro-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pro-faint);
}
.demo--pro-spec .psp-labels span {
  width: var(--psp-w, 20%);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  padding-right: 2px;
}
.demo--pro-spec .psp-bus {
  height: 2px;
  width: 100%;
  color: var(--pro-accent);
}
.demo--pro-spec .psp-count { color: var(--pro-accent); }
.demo--pro-spec .psp-close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-height: 1.4rem;
}

/* ============================================================================
   12 · ESTADO COMPUESTO
   En ?static y reduced-motion la UI compone entera y se lee de un vistazo.
   El motor congela transiciones con .is-instant; aqui solo se garantiza que
   nada quede a medio camino.
   ========================================================================== */
.demo--pro.is-instant .pro-line,
.demo--pro.is-instant .pro-draw .pro-line { transform: none; }
.demo--pro.is-instant .pro-check.is-on svg,
.demo--pro.is-instant .pme-trace.is-on,
.demo--pro.is-instant .pme-trace.is-on ~ .pme-ridge,
.demo--pro.is-instant .pdo-lines.is-on .pdo-lot,
.demo--pro.is-instant .pdo-lines.is-on .pdo-street { stroke-dashoffset: 0; }
/* pro-flow impreso: los tres iconos grises se componen a la izquierda, sin
   absorber (el guion no pone .is-absorbed en instantMode) */
/* pro-rings impreso: dibujados y quietos */
.demo--pro-rings.is-instant .pr-ring ellipse { stroke-dashoffset: 0; transition: none; }
.demo--pro-rings.is-instant .pr-ring { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .demo--pro .pro-in,
  .demo--pro .pro-pop,
  .demo--pro .pro-line,
  .demo--pro .pro-stamp,
  .demo--pro-rings .pr-ring ellipse { transition: none; }
  .demo--pro-rings .pr-ring { animation: none !important; }
}