/* ============================================================================
   SPICA · css/demos/svc.css · LAS DIEZ HOJAS DE SERVICIOS + EL HILO (r13)
   UNA sola hoja para las diez escenas y para js/spine.js. El Home carga 14
   hojas bloqueantes para tener como mucho 2 escenas vivas a la vez; ese peaje
   no se repite: aqui es una peticion, cero FOUC, y pesa menos que las 14.

   El lenguaje es LA HOJA: el objeto en pantalla es siempre papel (una hoja,
   una tabla, una regla, un plano, una ficha), nunca cromo de aplicacion, y
   nadie actua. Reglas que se cumplen aqui dentro:
   · cero animaciones CSS en bucle. Ni una. Una idea que necesita palpitar
     hasta el final no es una idea de Servicios.
   · geometria en cqw (cada hoja es su propio container, como billboard), tipo
     en clamp() con cqw, y por eso no hace falta ni una media query de escena.
   · las lineas que se dibujan van en HTML con scaleX/scaleY, no en SVG con
     preserveAspectRatio="none", que deforma el grosor del trazo segun la caja.
   · ningun token se redefine. Lo que empieza por --svc- es local de la hoja.
   · r13: el acento de la ESCENA se llama --svc-sheet-accent. --svc-accent es
     el acento del acto y del board, y vive en css/services.css. Antes los dos
     nombres eran el mismo y no colisionaban de milagro (.svc-board__demo no
     cuelga de .svc-board__group); ahora no pueden colisionar.
   · el retardo del stagger viaja en --svc-d y se aplica SOLO a opacity y
     transform, para que un nodo pueda cambiar de estado despues sin heredarlo.
   Curvas: las 4 canonicas de MOTION-R3 (--ease-out, --ease, --ease-spring y
   el ease-in de salida, que vive en la primitiva dm-exit del motor).
   ========================================================================== */

/* ============================================================================
   1 · EL CHASIS DE LA HOJA
   ========================================================================== */
.demo--svc {
  min-height: 460px;
  padding: clamp(0.6rem, 2.4vw, 1.6rem) 0;
}

.demo--svc .svc-sheet {
  --svc-pad: clamp(0.95rem, 2.6vw, 1.45rem);
  --svc-ink: var(--ink);
  --svc-soft: var(--ink-soft);
  --svc-faint: var(--ink-faint);
  --svc-line: var(--line);
  --svc-line-strong: var(--line-strong);
  --svc-well: color-mix(in srgb, var(--ink) 7%, transparent);
  --svc-go: var(--go);
  --svc-sheet-accent: var(--violet);

  /* escala tipografica local de la hoja: cqw para que crezca con su ancho,
     clamp para que no se vuelva ilegible en el telefono.
     r13 · EL PISO VIVE AQUI, en el minimo del clamp, no en una lista blanca de
     selectores escrita en otra hoja. Con el minimo anterior (0,58rem) la hoja
     escribia a 9,28px en ESCRITORIO: la unica regla que subia el piso vivia en
     la condicion tactil, que una ventana de mas de 1080px no cumple. Y lo que
     quedaba ahi abajo eran las afirmaciones de la hoja ("US only", "United
     States", "Latin America" y los sellos). Ahora ninguna clase de escena
     puede nacer por debajo de 11,2px, este o no en ninguna lista. */
  --svc-mono: clamp(0.7rem, 1.86cqw, 0.78rem);
  /* la letra mas chica que se permite: marcas colgadas de un chip y poco mas */
  --svc-micro: clamp(0.7rem, 1.8cqw, 0.74rem);
  --svc-small: clamp(0.72rem, 1.9cqw, 0.8rem);
  --svc-text: clamp(0.78rem, 2.1cqw, 0.88rem);
  --svc-lead: clamp(0.9rem, 2.75cqw, 1.12rem);
  --svc-gap: clamp(0.45rem, 1.7cqw, 0.8rem);

  container-type: inline-size;
  /* r14 pasada de ritmo: la hoja se nombra para que una regla pueda consultar
     SU ancho aunque el elemento viva dentro de otro contenedor mas pequeno
     (el caso de la cinta de la 1.3, seccion 7). Un contenedor con nombre sigue
     respondiendo a las consultas sin nombre, asi que nada cambia. */
  container-name: svc-sheet;
  position: relative;
  width: min(600px, 100%);
  background: var(--paper-raised);
  border: 1px solid var(--svc-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--svc-pad);
  display: grid;
  gap: var(--svc-gap);
  align-content: start;
  color: var(--svc-ink);
}

/* la variante oscura: los tres momentos de letra chica que en realidad son
   argumento de venta (Regla 01, el pago unico, y la distincion con la 1.1) */
.demo--svc .svc-sheet--dark {
  --svc-ink: rgba(246, 245, 241, 0.94);
  --svc-soft: rgba(246, 245, 241, 0.76);
  --svc-faint: rgba(246, 245, 241, 0.54);
  --svc-line: var(--line-on-dark);
  --svc-line-strong: rgba(246, 245, 241, 0.34);
  --svc-well: rgba(246, 245, 241, 0.08);
  /* el verde de "listo" sobre slate no llega a 3:1, que es el minimo de un
     objeto grafico. Se aclara sobre el MISMO token, igual que --amber-text
     hace con el ambar: mismo dueno, mismo hue, solo contraste. */
  --svc-go: color-mix(in srgb, var(--go) 58%, #fff);
  background: var(--slate);
  border-color: var(--line-on-dark);
  box-shadow: 0 22px 60px rgba(17, 17, 16, 0.28);
}

/* cabecera mono: es el encabezado de un documento, no la barra de una app */
.demo--svc .svc-sheet__head {
  font-family: var(--font-mono);
  font-size: var(--svc-mono);
  font-weight: 560;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--svc-faint);
}

/* el sello del cierre: la sintesis de la hoja */
.demo--svc .svc-stamp {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: var(--svc-mono);
  font-weight: 560;
  letter-spacing: 0.06em;
  color: var(--svc-ink);
  border-top: 1px solid var(--svc-line);
  padding-top: 0.45rem;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.36s var(--ease-out) var(--svc-d, 0ms),
    transform 0.42s var(--ease-out) var(--svc-d, 0ms);
}
.demo--svc .svc-stamp.is-on { opacity: 1; transform: none; }

.demo--svc .svc-foot {
  font-family: var(--font-mono);
  font-size: var(--svc-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--svc-faint);
}

/* entrada base de cualquier pieza de la hoja */
.demo--svc .svc-in {
  opacity: 0;
  transform: translateY(9px);
  transition:
    opacity 0.38s var(--ease-out) var(--svc-d, 0ms),
    transform 0.5s var(--ease-scene) var(--svc-d, 0ms);
}
.demo--svc .svc-in.is-on { opacity: 1; transform: none; }

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

/* el stagger de los chips del motor viaja por la misma custom property */
.demo--svc .dm-chip {
  font-size: var(--svc-mono);
  transition-delay: var(--svc-d, 0ms);
}

/* r13 A11Y · el chip pinta `color: var(--dm-accent)` sobre un fondo
   `color-mix(--dm-accent 12%, transparent)`, y ese tinte oscurece el papel lo
   justo para tumbar el ratio: --teal sobre papel limpio mide 4,86 y sobre el
   tinte de su propio chip 4,17. Un paso hacia el fondo oscuro del mismo hue
   (mismo dueno, mismo color a ojo) lo devuelve a AA. Solo en las hojas de
   papel: en las oscuras el chip ya lleva su propia tinta clara. */
.demo--svc .svc-sheet:not(.svc-sheet--dark) {
  --svc-chip-teal: color-mix(in srgb, var(--teal) 68%, var(--teal-deep));
  --svc-chip-go: color-mix(in srgb, var(--go) 72%, var(--slate));
}

/* el texto que se escribe solo (revealWords) hereda el color de su hoja */
.demo--svc .dm-word { color: inherit; }

/* ============================================================================
   2 · N1 · svc-index · "el catalogo cabe en una hoja"
   ========================================================================== */
.demo--svc-index .si-sheet {
  padding-left: calc(var(--svc-pad) + clamp(0.7rem, 2.6cqw, 1.2rem));
  gap: clamp(0.6rem, 2.2cqw, 1rem);
}
.demo--svc-index .si-rule {
  position: absolute;
  left: var(--svc-pad);
  top: calc(var(--svc-pad) + 1.6rem);
  bottom: calc(var(--svc-pad) + 2.2rem);
  width: 2px;
  display: flex;
  flex-direction: column;
}
.demo--svc-index .si-seg { width: 2px; }
.demo--svc-index .si-seg--violet { color: var(--violet); }
.demo--svc-index .si-seg--teal { color: var(--teal); }
.demo--svc-index .si-seg--amber { color: var(--amber); }

.demo--svc-index .si-body { display: grid; gap: clamp(0.55rem, 2.1cqw, 0.95rem); }

.demo--svc-index .si-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: clamp(0.4rem, 1.6cqw, 0.75rem);
  row-gap: 0.34rem;
}
.demo--svc-index .si-row--violet { --svc-sheet-accent: var(--violet); }
.demo--svc-index .si-row--teal { --svc-sheet-accent: var(--teal); }
.demo--svc-index .si-row--amber { --svc-sheet-accent: var(--amber); }

.demo--svc-index .si-row__num {
  font-family: var(--font-mono);
  font-size: var(--svc-mono);
  font-weight: 620;
  letter-spacing: var(--ls-mono);
  color: var(--svc-sheet-accent);
}
.demo--svc-index .si-row--amber .si-row__num { color: var(--amber-text); }
.demo--svc-index .si-row__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 3.3cqw, 1.4rem);
  letter-spacing: var(--ls-heading);
  color: var(--svc-ink);
}
.demo--svc-index .si-row__chips {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}
.demo--svc-index .si-chip { --dm-accent: var(--svc-sheet-accent); }
.demo--svc-index .si-row--amber .si-chip { color: var(--amber-text); }
/* la fila teal del indice cae en el mismo caso que los chips de arriba */
.demo--svc-index .si-row--teal .si-chip { color: var(--svc-chip-teal); }

.demo--svc-index .si-flower {
  position: absolute;
  top: calc(var(--svc-pad) - 0.15rem);
  right: var(--svc-pad);
  width: clamp(1.9rem, 6.4cqw, 2.9rem);
  color: var(--violet);
  opacity: 0;
  transform: translateY(-6px) scale(0.9);
  transition: opacity 0.42s var(--ease-out), transform 0.5s var(--ease-out);
}
.demo--svc-index .si-flower.is-on { opacity: 0.92; transform: none; }
.demo--svc-index .si-flower svg { display: block; width: 100%; height: auto; }

/* ============================================================================
   3 · N2 · svc-rules modo country · la tabla de los dos mercados
   ========================================================================== */
.demo--svc-rules-country .sr-table { width: min(660px, 100%); }

.demo--svc-rules .sr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18cqw 1px 18cqw;
  align-items: center;
  row-gap: clamp(0.14rem, 0.6cqw, 0.3rem);
  position: relative;
}
.demo--svc-rules .sr-col {
  grid-row: 1;
  font-family: var(--font-mono);
  font-size: var(--svc-mono);
  font-weight: 560;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--svc-faint);
  padding-bottom: 0.42rem;
  border-bottom: 1px solid var(--svc-line);
  margin-bottom: 0.35rem;
}
/* la cabecera de los dos mercados no cabe en su columna cuando la hoja baja de
   400px de ancho: no se recorta (overflow visible) pero los dos rotulos se
   rozan. Container query, que no es una media query: la hoja ES su contenedor.
   Va DESPUES del bloque de arriba a proposito: misma especificidad, gana la
   ultima. */
@container (max-width: 400px) {
  .demo--svc-rules .sr-col { letter-spacing: 0.03em; }
}
.demo--svc-rules .sr-col--line { grid-column: 1; }
.demo--svc-rules .sr-col--us { grid-column: 2; text-align: center; }
.demo--svc-rules .sr-col--la { grid-column: 4; text-align: center; }

.demo--svc-rules .sr-row {
  grid-column: 1;
  font-size: var(--svc-small);
  color: var(--svc-soft);
  padding: 0.12rem 0.6rem 0.12rem 0;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.34s var(--ease-out) var(--svc-d, 0ms),
    transform 0.4s var(--ease-scene) var(--svc-d, 0ms),
    color 0.3s var(--ease);
}
.demo--svc-rules .sr-row.is-on { opacity: 1; transform: none; }
.demo--svc-rules .sr-row.is-gap { color: var(--svc-ink); }

.demo--svc-rules .sr-cell {
  display: grid;
  place-items: center;
  min-height: 1.25rem;
}
.demo--svc-rules .sr-cell--us { grid-column: 2; }
.demo--svc-rules .sr-cell--la { grid-column: 4; }

.demo--svc-rules .sr-check {
  width: clamp(12px, 3.4cqw, 16px);
  height: clamp(12px, 3.4cqw, 16px);
  color: var(--svc-go);
}
/* el check reusa el chasis de trazo del chasis general */
.demo--svc-rules .sr-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(--svc-d, 0ms);
}
.demo--svc-rules .sr-check.is-on svg { stroke-dashoffset: 0; }

.demo--svc-rules .sr-only {
  --dm-accent: var(--svc-faint);
  font-size: var(--svc-micro);
  padding: 0.16rem 0.42rem;
  color: var(--svc-soft);
}

.demo--svc-rules .sr-divider {
  grid-column: 3;
  grid-row-start: 1;
  align-self: stretch;
  width: 1px;
  color: var(--svc-line-strong);
  transform-origin: top center;
}

.demo--svc-rules .sr-stamp { color: var(--svc-ink); }

/* ============================================================================
   4 · N3 · svc-rules modo industry · la casilla que se abre
   ========================================================================== */
.demo--svc-rules-industry .sr-card { width: min(540px, 100%); }
.demo--svc-rules .sr-industries {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.28rem, 1.1cqw, 0.45rem);
  padding: clamp(0.4rem, 1.8cqw, 0.9rem) 0;
}
.demo--svc-rules .sr-tag {
  --dm-accent: var(--ink-faint);
  font-size: var(--svc-small);
  padding: 0.28rem 0.66rem;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0.01em;
}
.demo--svc-rules .sr-slot {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  min-width: clamp(6.5rem, 26cqw, 9rem);
  padding: 0.28rem 0.66rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--svc-small);
  color: var(--ink-faint);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.36s var(--ease-out),
    transform 0.42s var(--ease-scene),
    border-color 0.32s var(--ease),
    color 0.32s var(--ease),
    background 0.32s var(--ease);
}
.demo--svc-rules .sr-slot.is-on { opacity: 1; transform: none; }
.demo--svc-rules .sr-slot.is-open {
  border-style: solid;
  border-color: var(--violet);
  background: color-mix(in srgb, var(--violet) 10%, transparent);
  color: var(--violet);
  animation: svc-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes svc-pop {
  0% { transform: scale(0.94); }
  60% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

/* ============================================================================
   5 · N4 · svc-channels · un servicio, dos maneras de ejecutarlo
   ========================================================================== */
.demo--svc-channels .sch-sheet { --svc-sheet-accent: var(--violet); }

.demo--svc-channels .sch-tabs { display: flex; gap: 0.35rem; }
.demo--svc-channels .sch-tab {
  font-family: var(--font-mono);
  font-size: var(--svc-mono);
  font-weight: 560;
  letter-spacing: var(--ls-mono);
  padding: 0.26rem 0.8rem;
  border: 1px solid var(--svc-line);
  border-radius: var(--radius-pill);
  color: var(--svc-faint);
  transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.demo--svc-channels .sch-tab.is-live {
  color: #fff;
  background: var(--violet);
  border-color: var(--violet);
}

.demo--svc-channels .sch-body {
  display: grid;
  min-height: clamp(160px, 44cqw, 218px);
  align-content: start;
}
.demo--svc-channels .sch-panel {
  grid-area: 1 / 1;
  display: grid;
  gap: clamp(0.5rem, 1.9cqw, 0.9rem);
  align-content: start;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-scene);
}
.demo--svc-channels .sch-panel.is-on { opacity: 1; transform: none; }

.demo--svc-channels .sch-def {
  font-size: var(--svc-lead);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--svc-ink);
  min-height: 1.4em;
}
.demo--svc-channels .sch-chips { display: flex; flex-wrap: wrap; gap: 0.3rem 0.42rem; }
.demo--svc-channels .sch-chan { display: inline-flex; align-items: center; gap: 0.22rem; }
.demo--svc-channels .sch-chip { --dm-accent: var(--violet); }
.demo--svc-channels .sch-mark {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--svc-micro);
  font-weight: 560;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0;
  transform: translateY(4px) scale(0.92);
  transition:
    opacity 0.28s var(--ease-out) var(--svc-d, 0ms),
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) var(--svc-d, 0ms);
}
.demo--svc-channels .sch-mark.is-on { opacity: 1; transform: none; }

.demo--svc-channels .sch-ticket {
  display: flex;
  align-items: flex-end;
  gap: clamp(0.5rem, 2cqw, 0.9rem);
  border-top: 1px solid var(--svc-line);
  padding-top: clamp(0.4rem, 1.6cqw, 0.7rem);
}
.demo--svc-channels .sch-ticket .dm-bars {
  height: clamp(44px, 12.5cqw, 64px);
  gap: 0;
}
.demo--svc-channels .sch-ticket .dm-bars i {
  width: clamp(26px, 9cqw, 44px);
  border-radius: 5px 5px 2px 2px;
  transition: transform 0.5s var(--ease) var(--svc-d, 0ms);
}
.demo--svc-channels .sch-ticket__label {
  font-family: var(--font-mono);
  font-size: var(--svc-mono);
  font-weight: 560;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--violet);
  padding-bottom: 0.2rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.34s var(--ease-out), transform 0.38s var(--ease-out);
}
.demo--svc-channels .sch-ticket__label.is-on { opacity: 1; transform: none; }

/* estado impreso (?static y reduced-motion): los dos modelos lado a lado,
   porque en Servicios la hoja compuesta ES el entregable y con un solo
   modelo se perderia la mitad del argumento de la linea */
.demo--svc-channels.is-instant .sch-tabs { display: none; }
.demo--svc-channels.is-instant .sch-body {
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.7rem, 3cqw, 1.4rem);
  min-height: 0;
}
.demo--svc-channels.is-instant .sch-panel { grid-area: auto; }
.demo--svc-channels.is-instant .sch-panel::before {
  content: attr(data-tab);
  font-family: var(--font-mono);
  font-size: var(--svc-mono);
  font-weight: 620;
  letter-spacing: var(--ls-mono);
  color: var(--violet);
}

/* ============================================================================
   6 · N5 · svc-realign · nueve piezas sueltas se vuelven un estandar
   ========================================================================== */
.demo--svc-realign .sre-desk { --svc-sheet-accent: var(--violet); }

.demo--svc-realign .sre-field {
  position: relative;
  height: clamp(96px, 29cqw, 152px);
  background: var(--svc-well);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.demo--svc-realign .sre-grid { position: absolute; inset: 0; color: var(--line); }
.demo--svc-realign .sre-gline--v {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  height: auto;
}
.demo--svc-realign .sre-gline--h {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  width: auto;
}

.demo--svc-realign .sre-board {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  place-items: center;
}
.demo--svc-realign .sre-piece {
  width: 62%;
  height: 44%;
  border-radius: 4px;
  background: var(--sre-g, color-mix(in srgb, var(--ink) 16%, transparent));
  opacity: 0;
  transform: rotate(var(--sre-rot, 0deg)) scale(var(--sre-sc, 1));
  transition:
    opacity 0.4s var(--ease-out) var(--svc-d, 0ms),
    transform 0.46s var(--ease) var(--sre-dal, 0ms),
    background 0.46s var(--ease) var(--sre-dal, 0ms);
}
.demo--svc-realign .sre-piece.is-on { opacity: 1; }
.demo--svc-realign .sre-piece--g1 { --sre-g: color-mix(in srgb, var(--ink) 10%, transparent); }
.demo--svc-realign .sre-piece--g2 { --sre-g: color-mix(in srgb, var(--ink) 17%, transparent); }
.demo--svc-realign .sre-piece--g3 { --sre-g: color-mix(in srgb, var(--ink) 24%, transparent); }
.demo--svc-realign .sre-piece--g4 { --sre-g: color-mix(in srgb, var(--ink) 32%, transparent); }
/* el momento de la escena: un solo angulo, un solo tamano, un solo color */
.demo--svc-realign .sre-board.is-aligned .sre-piece {
  transform: none;
  background: color-mix(in srgb, var(--violet) 82%, transparent);
}

.demo--svc-realign .sre-slot { position: relative; height: 1.5rem; }
.demo--svc-realign .sre-tag { position: absolute; left: 0; top: 0.1rem; }
.demo--svc-realign .sre-tag--loose { --dm-accent: var(--ink-faint); }
.demo--svc-realign .sre-tag--one { --dm-accent: var(--violet); }
.demo--svc-realign .sre-tag--code {
  --dm-accent: var(--go);
  color: var(--svc-chip-go);
  position: static;
}

.demo--svc-realign .sre-manual {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}
.demo--svc-realign .sre-manual__cell {
  font-family: var(--font-mono);
  font-size: var(--svc-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--violet);
  background: color-mix(in srgb, var(--violet) 9%, transparent);
  border-radius: 4px;
  padding: 0.3rem 0.4rem;
  text-align: center;
}

.demo--svc-realign .sre-build {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2cqw, 0.9rem);
}
.demo--svc-realign .sre-page {
  width: clamp(36px, 10.5cqw, 52px);
  aspect-ratio: 3 / 4;
  border: 1px solid color-mix(in srgb, var(--violet) 45%, transparent);
  border-radius: 4px;
  padding: 5px;
  display: grid;
  gap: 3px;
  align-content: start;
  flex: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-scene);
}
.demo--svc-realign .sre-page.is-on { opacity: 1; transform: none; }
.demo--svc-realign .sre-page i {
  display: block;
  border-radius: 2px;
  background: color-mix(in srgb, var(--violet) 55%, transparent);
}
.demo--svc-realign .sre-page__bar { height: 5px; }
.demo--svc-realign .sre-page__line { height: 2px; }
.demo--svc-realign .sre-page__line--short { width: 62%; }
.demo--svc-realign .sre-page__block { height: 12px; margin-top: 2px; opacity: 0.55; }

.demo--svc-realign .sre-meter {
  width: clamp(64px, 22cqw, 118px);
  height: 6px;
  border-radius: 3px;
  background: var(--svc-well);
  overflow: hidden;
  flex: none;
}
.demo--svc-realign .sre-meter i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--go);
  transition: width 0.3s var(--ease-liquid);
}
.demo--svc-realign .sre-meter.is-on i { width: 100%; }

/* ============================================================================
   7 · N6 · svc-pipeline · la linea de produccion de la 1.3
   ========================================================================== */
.demo--svc-pipeline .sp-sheet { --svc-sheet-accent: var(--violet); width: min(620px, 100%); }

.demo--svc-pipeline .sp-belt {
  container-type: inline-size;
  position: relative;
  height: clamp(42px, 11cqw, 58px);
}
.demo--svc-pipeline .sp-belt__rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--svc-line-strong);
}
.demo--svc-pipeline .sp-belt__stop {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--svc-line-strong);
  transform: translate(-50%, -50%);
}
.demo--svc-pipeline .sp-belt__stop--1 { left: 16.66%; }
.demo--svc-pipeline .sp-belt__stop--2 { left: 50%; }
.demo--svc-pipeline .sp-belt__stop--3 { left: 83.33%; }

/* el token: un rectangulo 9:16 plano. Ni marco de telefono ni pantalla. */
.demo--svc-pipeline .sp-token {
  position: absolute;
  left: 16.66%;
  top: 50%;
  width: clamp(18px, 5.6cqw, 26px);
  aspect-ratio: 9 / 16;
  border-radius: 3px;
  background: color-mix(in srgb, var(--violet) 88%, transparent);
  display: grid;
  align-content: end;
  padding: 3px;
  opacity: 0;
  transform: translate(-50%, -50%) translateX(var(--sp-tx, 0cqw)) translateY(9px);
  transition:
    opacity 0.4s var(--ease-out),
    transform 0.48s var(--ease);
}
.demo--svc-pipeline .sp-token.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) translateX(var(--sp-tx, 0cqw));
}
.demo--svc-pipeline .sp-token.is-at-2 { --sp-tx: 33.33cqw; }
.demo--svc-pipeline .sp-token.is-at-3 { --sp-tx: 66.66cqw; }
.demo--svc-pipeline .sp-token__caps { display: grid; gap: 2px; color: rgba(255, 255, 255, 0.9); }
.demo--svc-pipeline .sp-cap { height: 1.5px; border-radius: 1px; }

.demo--svc-pipeline .sp-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.4rem, 1.7cqw, 0.85rem);
  align-items: start;
}
/* min-width 0: sin el, un hijo de grilla no baja de su min-content y las tres
   columnas se salian 7 a 11px de su celda cuando la hoja se estrecha (medido
   en ?static a 900px, donde la hoja mide 323px y cada columna 87). */
.demo--svc-pipeline .sp-col {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  min-width: 0;
}
.demo--svc-pipeline .sp-col > * { min-width: 0; }
.demo--svc-pipeline .sp-chip { max-width: 100%; }

/* la hoja baja a 323px de ancho en la banda de 900 a 1080 (dos columnas y la
   columna de la escena estrecha) y a 335 en el telefono. Con tres estaciones
   ahi, cada una queda en 87px y ni "PRODUCTION DIRECTION" ni los dos formatos
   caben. Se pasa a dos columnas y la tercera, que es la que lleva la
   bifurcacion, ocupa la fila entera. Container query, no media query. */
@container (max-width: 400px) {
  .demo--svc-pipeline .sp-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo--svc-pipeline .sp-cols > :last-child { grid-column: 1 / -1; }
  .demo--svc-pipeline .sp-chip { padding: 0.16rem 0.34rem; }
  /* r14 pasada de ritmo (REVISION-VISUAL 2.3): con dos columnas los rotulos
     "01 · BEFORE SHOOTING" y "02 · THE EDIT" quedaban a tres caracteres uno de
     otro y se leian como una frase corrida. La calle entre columnas se abre. */
  .demo--svc-pipeline .sp-cols { column-gap: clamp(0.9rem, 4cqw, 1.4rem); }
}
/* r14 pasada de ritmo (REVISION-VISUAL 2.3): la cinta seguia mostrando tres
   paradas repartidas a lo ancho mientras las columnas de abajo ya eran dos mas
   una, asi que la linea de tiempo no coincidia con nada. Las paradas y el
   recorrido del token pasan a los centros de las tres celdas reales: 25 % y
   75 % de la primera fila, y 50 % de la segunda, que ocupa el ancho entero.
   La consulta va contra la HOJA (`svc-sheet`) y no contra la cinta, que es un
   contenedor mas estrecho: si cada una mirara su propio ancho habria una
   franja en la que los puntos ya habrian cambiado y las columnas no. */
@container svc-sheet (max-width: 400px) {
  .demo--svc-pipeline .sp-belt__stop--1 { left: 25%; }
  .demo--svc-pipeline .sp-belt__stop--2 { left: 75%; }
  .demo--svc-pipeline .sp-belt__stop--3 { left: 50%; }
  .demo--svc-pipeline .sp-token { left: 25%; }
  .demo--svc-pipeline .sp-token.is-at-2 { --sp-tx: 50cqw; }
  .demo--svc-pipeline .sp-token.is-at-3 { --sp-tx: 25cqw; }
}
.demo--svc-pipeline .sp-col__label {
  font-family: var(--font-mono);
  font-size: var(--svc-mono);
  font-weight: 560;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--svc-faint);
}
.demo--svc-pipeline .sp-col__chips { display: flex; flex-wrap: wrap; gap: 0.24rem; }
.demo--svc-pipeline .sp-chip {
  --dm-accent: var(--violet);
  font-size: var(--svc-micro);
  padding: 0.18rem 0.44rem;
}

.demo--svc-pipeline .sp-fork {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.38s var(--ease-out), transform 0.42s var(--ease-scene);
}
.demo--svc-pipeline .sp-fork.is-on { opacity: 1; transform: none; }
.demo--svc-pipeline .sp-format {
  font-family: var(--font-mono);
  font-size: var(--svc-micro);
  letter-spacing: 0.05em;
  border: 1px solid var(--svc-line-strong);
  border-radius: 5px;
  padding: 0.2rem 0.42rem;
  color: var(--svc-faint);
  transition: color 0.3s var(--ease), background 0.3s var(--ease),
    border-color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.demo--svc-pipeline .sp-fork.is-picked .sp-format--v {
  color: #fff;
  background: var(--violet);
  border-color: var(--violet);
}
/* el formato descartado se apaga con COLOR, no con opacity: al 0,42 el
   rotulo medía 1,80:1 sobre papel y a 8,8px era ilegible. Ahora 5,00:1 y se
   sigue leyendo cual de los dos se eligio, que es el punto de la escena. */
.demo--svc-pipeline .sp-fork.is-picked .sp-format--h {
  color: var(--svc-soft);
  border-color: var(--svc-line);
  background: transparent;
}
.demo--svc-pipeline .sp-tag { --dm-accent: var(--violet); justify-self: start; }

.demo--svc-pipeline .sp-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.45rem, 1.8cqw, 0.9rem);
  border-top: 1px solid var(--svc-line);
  padding-top: clamp(0.45rem, 1.7cqw, 0.8rem);
}
.demo--svc-pipeline .sp-plan {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.28rem;
}
.demo--svc-pipeline .sp-plan__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1rem, 3.4cqw, 1.45rem);
  letter-spacing: var(--ls-display);
  color: var(--svc-ink);
}
.demo--svc-pipeline .sp-plan__cells {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: min-content;
  align-content: start;
  gap: 3px;
}
.demo--svc-pipeline .sp-cell {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity 0.3s var(--ease-out) var(--svc-d, 0ms),
    transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) var(--svc-d, 0ms),
    background 0.34s var(--ease);
}
.demo--svc-pipeline .sp-plan__cells.is-on .sp-cell { opacity: 1; transform: none; }
.demo--svc-pipeline .sp-plan.is-top .sp-cell { background: var(--violet); }
.demo--svc-pipeline .sp-plan__unit {
  font-family: var(--font-mono);
  font-size: var(--svc-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--svc-faint);
}
.demo--svc-pipeline .sp-tag--top { grid-column: 1 / -1; justify-self: end; }

/* ============================================================================
   8 · N7 · svc-own · el traspaso, pago unico
   ========================================================================== */
.demo--svc-own .so-sheet { --svc-sheet-accent: var(--teal); width: min(560px, 100%); }

.demo--svc-own .so-deal {
  container-type: inline-size;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: clamp(0.6rem, 2.4cqw, 1.1rem);
  align-content: center;
  min-height: clamp(84px, 24cqw, 122px);
  padding: clamp(0.4rem, 1.6cqw, 0.8rem) 0;
}
.demo--svc-own .so-side {
  font-family: var(--font-mono);
  font-size: var(--svc-mono);
  font-weight: 560;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--svc-faint);
  transition: color 0.34s var(--ease);
}
.demo--svc-own .so-side--b { text-align: right; }
/* el lado que se apaga NO desaparece: dice de quien deja de ser el sistema.
   Con --svc-faint (papel al 0,54) mas opacity 0,6 medía 2,73:1 sobre slate.
   Sin la opacity y con el alfa justo, 4,58:1 y sigue leyendose apagado. */
.demo--svc-own .so-deal.is-theirs .so-side--a { color: rgba(246, 245, 241, 0.66); }
.demo--svc-own .so-deal.is-theirs .so-side--b { color: var(--teal-bright); opacity: 1; }

.demo--svc-own .so-split {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--svc-line-strong);
}
.demo--svc-own .so-row {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--svc-text);
  color: var(--svc-ink);
}
.demo--svc-own .so-paid { --dm-accent: var(--svc-go); }

.demo--svc-own .so-key {
  position: absolute;
  left: 14%;
  bottom: clamp(0.3rem, 1.4cqw, 0.7rem);
  width: clamp(20px, 6cqw, 28px);
  color: var(--teal-bright);
  transform: translateX(-50%);
  transition: transform 0.62s var(--ease);
}
.demo--svc-own .so-key.is-handed { transform: translateX(-50%) translateX(70cqw); }
.demo--svc-own .so-key svg {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.demo--svc-own .so-costs {
  display: grid;
  gap: 0.22rem;
  border-top: 1px solid var(--svc-line);
  padding-top: clamp(0.4rem, 1.6cqw, 0.75rem);
}
.demo--svc-own .so-costs__head {
  font-family: var(--font-mono);
  font-size: var(--svc-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--svc-faint);
  margin-bottom: 0.1rem;
}
.demo--svc-own .so-cost { font-size: var(--svc-small); color: var(--svc-soft); }
.demo--svc-own .so-fine {
  font-size: var(--svc-small);
  line-height: 1.4;
  color: var(--svc-faint);
  min-height: 1.3em;
}
.demo--svc-own .so-stamp { color: var(--teal-bright); }

/* ============================================================================
   9 · N8 · svc-spec-crm · la ficha de producto de la 2.1
   ========================================================================== */
.demo--svc-spec-crm .scr-sheet { --svc-sheet-accent: var(--teal); }

.demo--svc-spec-crm .scr-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.demo--svc-spec-crm .scr-head__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 3.4cqw, 1.42rem);
  letter-spacing: var(--ls-heading);
  color: var(--svc-ink);
}
.demo--svc-spec-crm .scr-us { --dm-accent: var(--teal); color: var(--svc-chip-teal); }
.demo--svc-spec-crm .scr-rule { color: var(--svc-line-strong); }
.demo--svc-spec-crm .scr-rule--thin { height: 1px; opacity: 0.7; }

.demo--svc-spec-crm .scr-list { display: grid; gap: clamp(0.3rem, 1.2cqw, 0.55rem); }
.demo--svc-spec-crm .scr-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: var(--svc-text);
  color: var(--svc-soft);
}
.demo--svc-spec-crm .scr-check {
  width: clamp(12px, 3.2cqw, 15px);
  height: clamp(12px, 3.2cqw, 15px);
  flex: none;
  color: var(--teal);
}
.demo--svc-spec-crm .scr-check svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.demo--svc-spec-crm .scr-row__text { min-width: 0; }
.demo--svc-spec-crm .scr-figure {
  font-family: var(--font-mono);
  font-size: var(--svc-small);
  font-weight: 620;
  color: var(--teal);
  margin-left: auto;
}
.demo--svc-spec-crm .scr-tag { --dm-accent: var(--teal); color: var(--svc-chip-teal); }
.demo--svc-spec-crm .scr-addon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: var(--svc-small);
  color: var(--svc-faint);
}
.demo--svc-spec-crm .scr-tag--addon { --dm-accent: var(--teal); color: var(--svc-chip-teal); }
.demo--svc-spec-crm .scr-stamp { color: var(--teal); }

/* ============================================================================
   10 · N9 · svc-where · donde se enchufa la IA
   ========================================================================== */
.demo--svc-where .sw-sheet { --svc-sheet-accent: var(--teal); width: min(620px, 100%); }

.demo--svc-where .sw-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) clamp(34px, 11cqw, 62px) minmax(0, 1.08fr);
  min-height: clamp(178px, 50cqw, 244px);
}
.demo--svc-where .sw-stack {
  display: grid;
  grid-template-rows: auto repeat(5, 1fr);
  gap: 3px;
  align-content: center;
  padding-right: clamp(0.3rem, 1.2cqw, 0.6rem);
}
.demo--svc-where .sw-stack__head {
  font-family: var(--font-mono);
  font-size: var(--svc-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--svc-faint);
  padding-bottom: 0.2rem;
}
.demo--svc-where .sw-box {
  display: grid;
  align-items: center;
  background: var(--svc-well);
  border-radius: 5px;
  padding: 0.2rem 0.5rem;
  font-size: var(--svc-small);
  color: var(--svc-faint);
}

.demo--svc-where .sw-bridge { position: relative; }
.demo--svc-where .sw-spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  height: auto;
  color: var(--svc-line-strong);
}
.demo--svc-where .sw-links {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  color: var(--teal);
}
.demo--svc-where .sw-link { align-self: center; width: 100%; height: 1.5px; }

.demo--svc-where .sw-stations {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  align-items: center;
}
.demo--svc-where .sw-station {
  align-self: center;
  border: 1px solid color-mix(in srgb, var(--teal) 34%, transparent);
  border-radius: 6px;
  padding: 0.24rem 0.55rem;
  font-size: var(--svc-small);
  color: var(--svc-ink);
  background: var(--paper-raised);
}
.demo--svc-where .sw-plus {
  font-style: normal;
  font-weight: 640;
  color: var(--svc-faint);
  display: inline-block;
  transition: color 0.3s var(--ease), transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.demo--svc-where .sw-plus.is-on { color: var(--teal); transform: scale(1.28); }
.demo--svc-where .sw-tag { --dm-accent: var(--ink-faint); justify-self: start; }
.demo--svc-where .sw-stamp { color: var(--teal); }

/* ============================================================================
   11 · N10 · svc-fit · el software toma la forma del proceso
   ========================================================================== */
.demo--svc-fit .sf-sheet { --svc-sheet-accent: var(--teal); }

.demo--svc-fit .sf-track {
  position: relative;
  display: grid;
  gap: clamp(0.35rem, 1.4cqw, 0.62rem);
  padding: clamp(0.5rem, 2cqw, 0.9rem) 0;
}
.demo--svc-fit .sf-slot { display: grid; }
.demo--svc-fit .sf-bar {
  display: flex;
  width: 100%;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.demo--svc-fit .sf-bar.is-on { opacity: 1; }
.demo--svc-fit .sf-slot .sf-bar { grid-area: 1 / 1; }
.demo--svc-fit .sf-seg {
  width: var(--sf-w, 20%);
  height: clamp(20px, 5.4cqw, 28px);
  border-right: 1px solid var(--paper-raised);
}
.demo--svc-fit .sf-seg:last-child { border-right: 0; }
.demo--svc-fit .sf-bar--process .sf-seg {
  background: color-mix(in srgb, var(--ink) 13%, transparent);
}
.demo--svc-fit .sf-bar--process .sf-seg:first-child { border-radius: 5px 0 0 5px; }
.demo--svc-fit .sf-bar--process .sf-seg:last-child { border-radius: 0 5px 5px 0; }
.demo--svc-fit .sf-bar--shelf .sf-seg {
  background: color-mix(in srgb, var(--teal) 24%, transparent);
}
.demo--svc-fit .sf-bar--shelf .sf-seg:first-child { border-radius: 5px 0 0 5px; }
.demo--svc-fit .sf-bar--shelf .sf-seg:last-child { border-radius: 0 5px 5px 0; }
.demo--svc-fit .sf-bar--custom .sf-seg {
  background: var(--teal);
  transform: scaleX(0.12);
  transform-origin: left center;
  transition: transform 0.44s var(--ease-out) var(--svc-d, 0ms);
}
.demo--svc-fit .sf-bar--custom.is-on .sf-seg { transform: none; }
.demo--svc-fit .sf-bar--custom .sf-seg:first-child { border-radius: 5px 0 0 5px; }
.demo--svc-fit .sf-bar--custom .sf-seg:last-child { border-radius: 0 5px 5px 0; }

.demo--svc-fit .sf-guides { position: absolute; inset: 0; pointer-events: none; }
.demo--svc-fit .sf-guide {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed var(--line-strong);
  opacity: 0.55;
}

.demo--svc-fit .sf-tags {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  justify-items: start;
}
.demo--svc-fit .sf-tag { --dm-accent: var(--ink-faint); }
.demo--svc-fit .sf-tag--fit { --dm-accent: var(--teal); color: var(--svc-chip-teal); }

.demo--svc-fit .sf-ports { display: flex; gap: 0.4rem; }
.demo--svc-fit .sf-port {
  width: clamp(16px, 4.6cqw, 24px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--teal) 45%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--teal) 10%, transparent);
}
.demo--svc-fit .sf-line {
  font-size: var(--svc-text);
  line-height: 1.4;
  color: var(--svc-soft);
  min-height: 1.3em;
}
.demo--svc-fit .sf-stamp { color: var(--teal); }

/* ============================================================================
   12 · N11 · svc-order · los siete puntos, de arriba hacia abajo
   ========================================================================== */
.demo--svc-order .sor-sheet { --svc-sheet-accent: var(--amber); }
.demo--svc-order .sor-order {
  font-family: var(--font-mono);
  font-size: var(--svc-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--amber-text);
}

.demo--svc-order .sor-list {
  --sor-row: clamp(1.55rem, 4.6cqw, 2.05rem);
  position: relative;
  display: grid;
  grid-auto-rows: var(--sor-row);
  padding-left: clamp(1.15rem, 4cqw, 1.85rem);
}
.demo--svc-order .sor-rule {
  position: absolute;
  left: clamp(0.35rem, 1.4cqw, 0.7rem);
  top: 0;
  bottom: 0;
  width: 2px;
  height: auto;
  color: color-mix(in srgb, var(--amber) 55%, transparent);
}
.demo--svc-order .sor-head {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(0.5rem, 1.6cqw, 0.75rem);
  height: var(--sor-row);
  border-radius: 2px;
  background: var(--amber);
  opacity: 0;
  transform: translateY(calc(var(--sor-i, 0) * var(--sor-row)));
  transition: transform 0.6s var(--ease), opacity 0.34s var(--ease-out);
}
.demo--svc-order .sor-head.is-on { opacity: 1; }

.demo--svc-order .sor-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.5rem;
  border-radius: 6px;
  opacity: 0;
  transform: translateY(7px);
  transition:
    opacity 0.34s var(--ease-out) var(--svc-d, 0ms),
    transform 0.4s var(--ease-scene) var(--svc-d, 0ms),
    background 0.4s var(--ease),
    color 0.34s var(--ease);
}
.demo--svc-order .sor-row.is-on { opacity: 1; transform: none; }
.demo--svc-order .sor-row__num {
  font-family: var(--font-mono);
  font-size: var(--svc-mono);
  font-weight: 620;
  letter-spacing: var(--ls-mono);
  color: var(--amber-text);
}
.demo--svc-order .sor-row__name { font-size: var(--svc-text); color: var(--svc-soft); }
.demo--svc-order .sor-row.is-done .sor-row__name { color: var(--svc-ink); }
/* el 04 es el unico con lavado propio: es lo que separa esto de una agencia */
.demo--svc-order .sor-row.is-key {
  background: color-mix(in srgb, var(--amber) 14%, transparent);
}
.demo--svc-order .sor-check {
  width: clamp(12px, 3.2cqw, 15px);
  height: clamp(12px, 3.2cqw, 15px);
  color: var(--amber);
}
.demo--svc-order .sor-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.26s var(--ease-out);
}
.demo--svc-order .sor-check.is-on svg { stroke-dashoffset: 0; }
.demo--svc-order .sor-row--bridge {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}
.demo--svc-order .sor-tag {
  --dm-accent: var(--amber);
  color: var(--amber-text);
  justify-self: end;
}

/* el puente con la 1.3 comparte fila con "Video editing", y las filas tienen
   alto FIJO (grid-auto-rows), asi que no puede envolver: cuando la hoja baja
   de 470px el chip se come la columna del nombre y lo cortaba 19px (medido en
   ?static a 1200). Ahi baja a su propia linea, debajo de la lista, sin perder
   una palabra y sin tocar el alto de fila del que depende el cabezal. */
@container (max-width: 470px) {
  .demo--svc-order .sor-list { padding-bottom: var(--sor-row); }
  .demo--svc-order .sor-row--bridge {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .demo--svc-order .sor-tag {
    position: absolute;
    left: clamp(1.15rem, 4cqw, 1.85rem);
    top: calc(var(--sor-row) * 7 + 0.15rem);
    justify-self: start;
  }
}
.demo--svc-order .sor-stamp { color: var(--amber-text); }

/* ============================================================================
   13 · EL HILO · nota de lindes
   El hilo (`.svc-spine`) es markup de `services.html` y estilo de
   `css/services.css`: columna sticky por acto, rellenada con scroll-driven
   animations. Esta hoja NO lo estiliza, a proposito: dos hojas escribiendo el
   mismo pixel es exactamente como se rompe una pagina.
   `js/spine.js` es el unico dueno del relleno del hilo en los tres motores
   (r13 retiro el camino de `animation-timeline`, que se saturaba al 25% del
   acto en Chrome), y escribe una sola propiedad del markup que ya existe.
   ========================================================================== */

/* ============================================================================
   14 · ESTADO COMPUESTO
   En Servicios ?static y reduced-motion no son un fallback degradado: son la
   pagina impresa. El motor ya congela transiciones con .is-instant; aqui solo
   se garantiza que nada quede a medio camino.

   Y EL DESCANSO DE LA HOJA (aqui vive la explicacion; los once modulos solo
   apuntan a esta nota). Con el tail de 1,800 ms, el estado compuesto, que ES
   el entregable, vivia 1,4 s de cada 7 a 10,8: del 17 al 26 % del ciclo. Los
   tails subieron a 2,800 a 4,800 ms, proporcionales a lo densa que es cada
   hoja. El GUION no se toco, asi que el axioma 4 (5 a 9 s) sigue intacto: lo
   que crece es la pausa de lectura del final.
   ========================================================================== */
.demo--svc.is-instant .svc-line,
.demo--svc.is-instant .sf-bar--custom .sf-seg { transform: none; }
.demo--svc.is-instant .sre-meter.is-on i { width: 100%; }

/* svc-fit · en la escena la barra de catalogo y la barra a medida comparten
   celda porque una sustituye a la otra. Impresa, la escena ENTERA es el
   contraste entre las dos, asi que la ranura se desapila en dos filas. */
.demo--svc-fit.is-instant .sf-slot { gap: clamp(0.28rem, 1.1cqw, 0.45rem); }
.demo--svc-fit.is-instant .sf-slot .sf-bar { grid-area: auto; }

/* svc-realign · los dos chips de estado se pisan a proposito (uno reemplaza
   al otro). Impresa, el diagnostico y el estandar se leen los dos, en fila. */
.demo--svc-realign.is-instant .sre-slot {
  position: static;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.demo--svc-realign.is-instant .sre-tag { position: static; }
/* los checks que NO sellan (las tres excepciones de la Regla 01) se quedan
   sin dibujar a proposito: el hueco es la escena */
.demo--svc.is-instant .sr-check.is-on svg,
.demo--svc.is-instant .sor-check.is-on svg { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .demo--svc .svc-in,
  .demo--svc .svc-line,
  .demo--svc .svc-stamp { transition: none; }
}