/* ==========================================================================
   LO COMUN DE LA DECISION (PLANUI U2a; P2, §0.5). La decision de siempre son
   las cartas (decision-cartas.css, los .cv-*); aca queda lo que comparten con
   las demas piezas: la tarjeta de "lo que paso" (.resultado, .res-*, .rn-*,
   que arma decision/comun.js), las clases sueltas que usan otros (.op-label,
   .eje, .riesgo, .tag, .panel-cab) y la costura de la bisagra (los .dc-*,
   components/costura.js): los destinos sobre la luz del ambiente.
   Lo de la linea "antes" y del relato esta en feed.css; las piezas comunes
   (.panel, .opcion, .inspector, .op-tecla) en primitivos.css.
   ========================================================================== */

.decision { position: relative; min-width: 0; }
.parada-decision { position: relative; min-width: 0; }
.parada-decision > .parada-col { min-width: 0; }

/* ---------- el panel: cabecera + cuerpo (opciones | inspector) ---------- */
.panel-cab { padding: 22px 28px 20px; }

/* ---------- opciones (lista): label + glifos ---------- */
.opciones { display: flex; flex-direction: column; padding: 4px 0; }
.opciones .opcion { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 16px; align-items: start; width: 100%; padding: 16px 22px 16px 28px; }
.opciones .op-tecla { margin-top: -2px; }
.op-label { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.eje { display: inline-flex; align-items: center; gap: 6px; }
.eje[data-eje] > .ln-ico, .eje[data-eje] > .eje-nom { color: var(--eje); }
.riesgo { display: inline-flex; align-items: center; gap: 6px; color: var(--warn); }
.riesgo[data-riesgo='seguro'] { color: var(--ink-dim); }
.riesgo[data-riesgo='alto'] { color: var(--danger); }
.gate { color: var(--ink-mute); }

.tag { font: 600 10px / 1 var(--f-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; }
.ln-fantasma .oculta { visibility: hidden; }

/* ---------- el resultado (la opcion crecida): ocupa el cuerpo del panel ---------- */
.resultado { position: relative; grid-column: 1 / -1; padding-bottom: 22px; outline: none; }
.resultado::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--luz); box-shadow: 0 0 14px var(--luz); }
.res-cab {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 16px; align-items: center; padding: 16px 22px 16px 28px;
  background: linear-gradient(90deg, var(--luz-suave) 0%, var(--luz-tenue) 40%, var(--velo-nada) 70%); background-size: 200% 100%; background-position: 0% 0;
}
.res-cab .op-tecla { background: var(--luz-texto); box-shadow: none; color: var(--bg-void); }
.res-tag { font: 600 var(--t-rotulo) / 1 var(--f-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--luz-texto); }
/* C1a (PLANUI §0.3, punto 2): arriba los chips de ganaste / te costó; una línea de prosa (el resto en "más" y con
   textos completos); las tarjetas de cada número en el color de su eje, las que suben plenas y las que bajan atenuadas */
.res-balance { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin: 16px 28px 0 74px; }
.res-bal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.res-bal-rot { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; font: 600 var(--t-rotulo) / 1 var(--f-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; }
.res-bal[data-signo='sube'] .res-bal-rot { color: var(--up); }
.res-bal[data-signo='baja'] .res-bal-rot { color: var(--down); }
.res-plan { margin: 0; max-width: 62ch; font-size: 15px; color: var(--ink-dim); }
.res-texto { margin: 14px 28px 0 74px; max-width: 62ch; font-size: var(--t-cuerpo-g); line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.res-mas { margin-left: 10px; vertical-align: 2px; }
.res-efectos { margin: 0; max-width: 62ch; font: 500 12px / 1.4 var(--f-mono); letter-spacing: 0.04em; color: var(--ink-dim); }
.res-extra { display: none; gap: 8px; margin: 10px 28px 0 74px; }
.resultado.abierto .res-extra, html[data-textos='completos'] .res-extra { display: grid; }
html[data-textos='completos'] .res-mas { display: none; }
.res-numeros { display: grid; gap: 22px; margin: 22px 28px 0 74px; }
.res-grupo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 40px; }
.res-num { --eje: var(--ink-dim); --eje-f: var(--linea); display: grid; gap: 10px; min-width: 150px; }
.rn-fila { display: flex; align-items: baseline; gap: 12px; }
.rn-fila > .ln-ico { align-self: center; width: 18px; height: 18px; color: var(--ink-dim); }
.rn-rotulo { display: inline-flex; align-items: center; gap: 7px; font: 600 var(--t-rotulo) / 1 var(--f-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--eje); }
.rn-rotulo .ln-ico { color: var(--eje); }
.rn-valor { font-size: var(--t-num-l); line-height: 0.86; letter-spacing: -0.03em; color: var(--ink); }
.rn-delta { display: inline-flex; align-items: center; gap: 5px; padding-bottom: 6px; font: 600 14px / 1 var(--f-mono); }
.rn-delta.sube { color: var(--up); }
.rn-delta.baja { color: var(--down); }
.rn-antes { font: 900 var(--t-num) / 1 var(--f-display); font-stretch: var(--ancho-numero); font-variant-numeric: tabular-nums; color: var(--ink-dim); }
/* la barra 0-100 del antes al después: la base (lo que había) y el tramo (lo que se movió: lleno o hueco) */
.rn-barra { position: relative; display: block; height: 6px; border-radius: var(--r-chip); background: var(--linea); }
.rn-barra i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; transform-origin: left; }
.rn-base { background: color-mix(in srgb, var(--eje) 46%, transparent); }
.res-num[data-signo='sube'] .rn-tramo { background: var(--eje); box-shadow: 0 0 12px color-mix(in srgb, var(--eje) 60%, transparent); }
.res-num[data-signo='baja'] .rn-tramo { background: var(--eje-f); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eje) 62%, transparent); }
/* las que bajan: después y atenuadas (más chicas, el número en la tinta tenue; el color del eje sigue diciendo qué) */
.res-grupo[data-signo='baja'] { gap: 16px 32px; }
.res-num[data-signo='baja'] .rn-valor { font-size: var(--t-num-m); color: var(--ink-dim); }
.res-num[data-signo='baja'] .rn-antes { font-size: var(--t-num-s); }
.res-num[data-signo='baja'] .rn-base { background: color-mix(in srgb, var(--eje) 30%, transparent); }
/* SoloQ: el escalón en grande */
.res-rango { min-width: 0; }
.res-rango .rn-antes { font-size: var(--t-num-s); font-weight: 800; font-stretch: var(--ancho-titulo); }
.res-rango .rn-valor { font-size: var(--t-num-m); font-weight: 800; font-stretch: var(--ancho-titulo); letter-spacing: -0.03em; line-height: 0.95; }
.res-num.res-rango[data-signo='baja'] .rn-valor { font-size: 34px; }
.rn-lp { font-size: 0.55em; font-weight: 700; color: var(--ink-dim); letter-spacing: -0.01em; }
.rn-escalon-nuevo[data-signo='sube'] .rn-escalon { color: var(--eje); }
.rn-paso { margin-left: 6px; padding: 2px 6px; border-radius: var(--r-chip); background: var(--eje-f); color: var(--eje); }
.rn-paso.baja { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eje) 50%, transparent); }
.rn-texto { display: grid; overflow: hidden; padding-bottom: 4px; }
.rn-texto > span { grid-area: 1 / 1; }
.resultado:focus-visible { outline: none; box-shadow: none; }

/* ---------- celular ---------- */
@media (max-width: 640px) {
  .bisagra { padding-left: 10px; }
  .parada-decision[data-forma='matriz'] .bisagra { display: none; }
  .panel-cab { padding: 16px 16px 14px; }
  .opciones .opcion { grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; padding: 12px 52px 12px 16px; }
  .res-cab { grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; padding: 12px 12px 12px 16px; }
  .res-tag { display: none; }
  .res-balance, .res-texto, .res-extra, .res-numeros { margin-left: 16px; margin-right: 16px; }
  .res-balance { gap: 8px 16px; margin-top: 12px; }
  .res-texto { font-size: 15.5px; margin-top: 10px; }
  .res-numeros { gap: 14px; margin-top: 16px; }
  /* las tarjetas chicas, de a dos; SoloQ, a lo ancho */
  .res-grupo, .res-grupo[data-signo='baja'] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .res-num { min-width: 0; gap: 8px; }
  .rn-fila { flex-wrap: wrap; gap: 4px 8px; }
  .rn-fila > .ln-ico { width: 14px; height: 14px; }
  .rn-valor { font-size: 34px; }
  .rn-antes { font-size: 18px; }
  .rn-delta { font-size: 12px; padding-bottom: 3px; }
  .res-num[data-signo='baja'] .rn-valor { font-size: 26px; }
  .res-num[data-signo='baja'] .rn-antes { font-size: 15px; }
  .res-rango { grid-column: 1 / -1; }
  .res-rango .rn-fila { flex-wrap: wrap; row-gap: 4px; }
  .res-rango .rn-antes { font-size: 14px; }
  .res-rango .rn-valor, .res-num.res-rango[data-signo='baja'] .rn-valor { font-size: 28px; }
}

/* ======================================================================================================================
   LA COSTURA DE LA BISAGRA (PLANUI §4.9-§4.10; components/costura.js). La bisagra que es una oferta llega como ¡OFERTA
   ENCONTRADA! (el aviso del kit, fx.css) sobre la pantalla; aceptar agranda el anillo como un portal y el mundo cruza a
   la costura del ambiente (la dibuja el shader: aca solo van los destinos encima, con sus logos y lo que arriesgas).
   ==================================================================================================================== */
@property --dc-pr { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --dc-pa { syntax: '<number>'; inherits: false; initial-value: 1; }

/* el aviso: el panel entra al aceptar */
.parada-decision.dc-espera > .parada-col { visibility: hidden; }

/* el portal: un velo con el hueco del anillo que crece; su borde es el aro dorado de la ceremonia */
.dc-portal {
  --dc-px: 50%; --dc-py: 50%; --dc-pr: 0px; --dc-pa: 1;
  position: fixed; inset: 0; z-index: 39; pointer-events: none;
  background: radial-gradient(circle at var(--dc-px) var(--dc-py),
    var(--ln-velo-nada) var(--dc-pr),
    color-mix(in srgb, var(--ln-oro-claro) calc(var(--dc-pa) * 100%), var(--ln-velo-nada)) calc(var(--dc-pr) + 1px),
    color-mix(in srgb, var(--ln-oro) calc(var(--dc-pa) * 100%), var(--ln-velo)) calc(var(--dc-pr) + 3px),
    color-mix(in srgb, var(--tono-luz) calc(var(--dc-pa) * 34%), var(--ln-velo)) calc(var(--dc-pr) + 7px),
    var(--ln-velo) calc(var(--dc-pr) + 56px));
}

/* la costura: los dos destinos, cada uno en el tono de su liga */
.dc-costura { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.dc-banda { display: none; }
.dc-lado {
  position: absolute; left: 0; top: calc(var(--franja-alto) + var(--dc-aire)); display: grid; justify-items: start; gap: 12px;
  width: max-content; max-width: min(var(--dc-lado-ancho), 42vw); transition: opacity 520ms var(--expo);
}
.dc-lado[data-lado='b'] { justify-items: end; }
/* el velo de lectura: el vacio de SU tono detras del destino */
.dc-lado::before {
  content: ''; position: absolute; inset: -54px -84px -40px; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tono-vacio) var(--dc-velo-lado), transparent) 0%, color-mix(in srgb, var(--tono-vacio) calc(var(--dc-velo-lado) * 0.75), transparent) 55%, transparent 100%);
}
.dc-costura[data-fase='aviso'] .dc-lado { opacity: 0; }
.dc-logos { display: flex; align-items: center; gap: 22px; }
.ln-logo.dc-logo-liga { --ln-logo-tam: var(--dc-logo); filter: drop-shadow(0 8px 26px var(--sombra)) drop-shadow(0 0 34px color-mix(in srgb, var(--tono-luz) 42%, transparent)); }
.ln-logo.dc-logo-org { --ln-logo-tam: var(--dc-logo-org); filter: drop-shadow(0 8px 22px var(--sombra)); }
.dc-lugar { display: grid; justify-items: inherit; gap: 7px; margin: 0; text-align: left; }
.dc-lado[data-lado='b'] .dc-lugar { text-align: right; }
.dc-lugar b { font: 800 30px / 1 var(--f-display); font-stretch: var(--ancho-titulo); letter-spacing: -0.025em; color: var(--ink); text-shadow: 0 2px 18px var(--tono-vacio); }
.dc-lugar span { font: 600 var(--t-rotulo) / 1 var(--f-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: color-mix(in srgb, var(--tono-luz) 45%, var(--ink)); }
/* lo que arriesgas: una fila por camino de ese lado, con su tecla, su nombre corto y la previa del motor en chips */
.dc-filas { display: grid; gap: 8px; justify-items: inherit; margin: 4px 0 0; padding: 0; list-style: none; }
.dc-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 10px; transition: opacity 420ms var(--expo); }
.dc-lado[data-lado='b'] .dc-fila { justify-content: flex-end; }
.dc-cabeza { display: inline-flex; align-items: center; gap: 9px; height: 26px; padding: 0 12px 0 0; border-radius: var(--r-control); background: color-mix(in srgb, var(--tono-vacio) var(--dc-chip-fondo), transparent); }
.dc-tecla {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: var(--r-control); flex: none;
  box-shadow: inset 0 0 0 1px var(--linea-fuerte); font: 600 12px / 1 var(--f-mono); color: var(--ink);
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.dc-tecla .ln-ico { width: 14px; height: 14px; }
.dc-camino { font: 600 var(--t-rotulo) / 1 var(--f-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--ink); }
.dc-chips { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dc-lado[data-lado='b'] .dc-chips { justify-content: flex-end; }
.dc-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-chip);
  background: color-mix(in srgb, var(--tono-vacio) var(--dc-chip-fondo), transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono-luz) 24%, transparent);
  font: 500 var(--t-rotulo) / 1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim);
  transition: box-shadow 200ms ease, color 200ms ease;
}
.dc-chip .ln-ico { width: 13px; height: 13px; }
.dc-chip.sube .ln-ico { color: var(--up); }
.dc-chip.baja .ln-ico { color: var(--down); }
.dc-chip-riesgo { color: var(--warn); }
.dc-chip-riesgo[data-riesgo='seguro'] { color: var(--ink-dim); }
.dc-chip-riesgo[data-riesgo='alto'] { color: var(--danger); }
/* apuntar un camino: su fila se enciende en el tono de su destino */
.dc-fila.on .dc-tecla { background: var(--tono-acento); box-shadow: none; color: var(--bg-void); }
.dc-fila.on .dc-chip { color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono-luz) 70%, transparent), 0 0 18px -6px var(--tono-luz); }
.dc-fila.on .dc-chip-riesgo { color: var(--warn); }
.dc-cerrada .dc-tecla { color: var(--ink-dim); }
.dc-cerrada .dc-camino { color: var(--ink-dim); }
.dc-cerrada.on .dc-tecla { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-dim), 0 0 20px -4px var(--tono-luz); }
/* elegido: el otro destino se va; en el elegido quedan su logo y su lugar */
.dc-costura[data-elegido='a'] .dc-lado[data-lado='b'], .dc-costura[data-elegido='b'] .dc-lado[data-lado='a'] { opacity: 0; }
.dc-costura:is([data-elegido='a'], [data-elegido='b']) .dc-filas { opacity: 0; transition: opacity 320ms var(--expo); }
/* compacto (el panel llega hasta el destino): sin las filas; mini: solo los logos, del alto que queda */
.dc-lado { --dc-logo-cabe: var(--dc-logo); }
.dc-lado.dc-compacto .dc-filas { display: none; }
.dc-lado.dc-mini .dc-lugar { display: none; }
.dc-lado.dc-mini .ln-logo.dc-logo-liga { --ln-logo-tam: min(var(--dc-logo), var(--dc-logo-cabe)); }
.dc-lado.dc-mini .ln-logo.dc-logo-org { --ln-logo-tam: min(var(--dc-logo-org), var(--dc-logo-cabe)); }

/* el panel, abajo: al aceptar el foco pasa al titulo (un ancla): sin el recuadro del foco de teclado; el inspector no
   repite el nombre de la opcion */
.parada-decision[data-costura] .titulo-parada:focus-visible { box-shadow: none; }
.parada-decision[data-costura][data-forma='lista'] .insp-kicker { display: none; }
.parada-decision[data-costura][data-forma='lista'] .insp-texto { margin-top: 0; }
/* la linea "antes" queda sobre la costura: un velo suave detras, para leerla sobre la luz */
.shell-cuerpo:has(.parada-decision[data-costura]) .antes { margin-left: -12px; padding: 6px 12px 6px 16px; border-radius: var(--r-chip); background: linear-gradient(90deg, var(--velo-lectura), var(--velo-medio) 70%, var(--velo-nada)); }

/* ---------- liga: el monumento de cada lado (el logo, la ciudad, la pared de escudos y lo marcado) ---------- */
.dc-heroe { position: absolute; left: 0; top: 0; transition: opacity var(--dc-heroe-cruce) var(--expo); }
.dc-heroe-escala { transform: scale(var(--dc-heroe-k, 1)); transform-origin: 0 0; transition: transform var(--dc-heroe-cruce) var(--expo); }
.dc-heroe-luz { transition: transform var(--dc-heroe-cruce) var(--expo); }
.dc-costura[data-fase='aviso'] .dc-heroe { opacity: 0; }
.dc-costura[data-apunta='a'] .dc-heroe[data-lado='a'] .dc-heroe-luz,
.dc-costura[data-apunta='b'] .dc-heroe[data-lado='b'] .dc-heroe-luz { transform: translateY(calc(var(--dc-heroe-sube) * -1)); }
/* se apagan el logo y la pared del otro lado, no lo escrito (la ciudad y lo marcado siguen leyendose) */
.dc-costura[data-apunta='a'] .dc-heroe[data-lado='b'] :is(.dc-mon-logo, .dc-pared, .dc-marca-escudo),
.dc-costura[data-apunta='b'] .dc-heroe[data-lado='a'] :is(.dc-mon-logo, .dc-pared, .dc-marca-escudo) { opacity: var(--dc-heroe-apagado-liga); }
.dc-mon-logo, .dc-pared, .dc-marca-escudo { transition: opacity var(--dc-heroe-cruce) var(--expo); }
.dc-costura[data-elegido='a'] .dc-heroe[data-lado='b'], .dc-costura[data-elegido='b'] .dc-heroe[data-lado='a'] { opacity: 0; }
.dc-monumento { position: relative; isolation: isolate; display: grid; justify-items: center; gap: var(--dc-mon-hueco); width: max-content; text-align: center; }
.dc-monumento::before {
  content: ''; position: absolute; inset: -18% -22%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tono-vacio) var(--dc-velo-lado), transparent) 0%, color-mix(in srgb, var(--tono-vacio) calc(var(--dc-velo-lado) * 0.7), transparent) 60%, transparent 100%);
}
.dc-filtros { position: absolute; width: 0; height: 0; overflow: hidden; }
.dc-grabado-luz { flood-color: color-mix(in srgb, var(--tono-luz) var(--dc-grabado-mezcla), var(--ink)); flood-opacity: var(--dc-grabado-k); }
.ln-logo.dc-mon-logo { --ln-logo-tam: var(--dc-mon-logo); filter: drop-shadow(0 10px 30px var(--sombra)) drop-shadow(0 0 46px color-mix(in srgb, var(--tono-luz) 52%, transparent)); transition: filter var(--dc-heroe-cruce) var(--expo), opacity var(--dc-heroe-cruce) var(--expo); }
.ln-logo.dc-mon-logo img, .ln-logo.dc-marca-escudo img { width: 100%; height: 100%; object-fit: contain; }
.dc-mon-lugar { display: grid; justify-items: center; gap: 7px; margin: 0; }
.dc-mon-lugar b { font: 800 var(--dc-mon-ciudad) / 1 var(--f-display); font-stretch: var(--ancho-titulo); letter-spacing: -0.025em; color: var(--ink); text-shadow: 0 2px 18px var(--tono-vacio); }
.dc-mon-lugar span { font: 600 var(--t-rotulo) / 1 var(--f-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: color-mix(in srgb, var(--tono-luz) 45%, var(--ink)); }
.dc-pared { display: grid; grid-template-columns: repeat(var(--dc-cols, 5), var(--dc-escudo)); gap: var(--dc-pared-hueco); margin: 2px 0 0; padding: 0; list-style: none; }
.dc-escudo { display: grid; place-items: center; width: var(--dc-escudo); height: var(--dc-escudo); }
.dc-escudo img { display: block; width: 100%; height: 100%; object-fit: contain; filter: var(--dc-grabado); }
.dc-escudo .ln-escudo { width: 86%; height: 100%; }
.dc-escudo[data-yo] { border-radius: var(--r-control); background: color-mix(in srgb, var(--tono-vacio) var(--dc-chip-fondo), transparent); box-shadow: 0 0 0 2px var(--tono-acento), 0 0 22px -2px var(--tono-luz); }
.dc-escudo[data-yo] img { filter: none; padding: 3px; }
.dc-escudo[data-yo] img[data-tinta='oscura'] { filter: brightness(0) invert(1); }
.dc-marca { display: flex; align-items: center; gap: 10px; margin: 2px 0 0; padding: 6px 14px 6px 6px; border-radius: var(--r-control); background: color-mix(in srgb, var(--tono-vacio) var(--dc-chip-fondo), transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono-luz) 34%, transparent); }
.ln-logo.dc-marca-escudo { --ln-logo-tam: var(--dc-escudo-yo); }
.dc-marca-txt { display: grid; gap: 4px; text-align: left; }
.dc-marca-txt b { font: 600 var(--t-rotulo) / 1 var(--f-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: color-mix(in srgb, var(--tono-luz) 40%, var(--ink)); }
.dc-marca-txt span { font: 600 14px / 1.1 var(--f-cuerpo); color: var(--ink); white-space: nowrap; }
.dc-incognito .ln-escudo-forma { fill: color-mix(in srgb, var(--tono-vacio) 60%, var(--tono-luz)); stroke: var(--tono-luz); }
.dc-incognito .ln-escudo-canto { stroke: var(--tono-luz); }
.dc-incognito .ln-escudo { animation: dc-llama var(--dc-llama) ease-in-out infinite alternate; }
@keyframes dc-llama { from { opacity: 0.62; } to { opacity: 1; } }
.dc-costura[data-apunta='a'] .dc-heroe[data-lado='a'] .ln-logo.dc-mon-logo,
.dc-costura[data-apunta='b'] .dc-heroe[data-lado='b'] .ln-logo.dc-mon-logo,
.dc-costura[data-elegido] .ln-logo.dc-mon-logo { filter: drop-shadow(0 10px 30px var(--sombra)) drop-shadow(0 0 64px color-mix(in srgb, var(--tono-luz) 80%, transparent)); }
/* compacto (la franja libre es baja: 1280x720): el logo y la ciudad, sin la pared */
.dc-mon-compacto :is(.dc-pared, .dc-marca, .dc-mon-lugar span) { display: none; }

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .dc-lado, .dc-fila, .dc-tecla, .dc-chip, .dc-heroe, .dc-heroe-escala, .dc-heroe-luz, .ln-logo.dc-mon-logo, .dc-pared, .dc-marca-escudo { transition: none; }
  .dc-incognito .ln-escudo { animation: none; }
}
html[data-reducido] :is(.dc-lado, .dc-fila, .dc-tecla, .dc-chip, .dc-heroe, .dc-heroe-escala, .dc-heroe-luz, .ln-logo.dc-mon-logo, .dc-pared, .dc-marca-escudo) { transition: none; }
html[data-reducido] .dc-incognito .ln-escudo { animation: none; }

/* ---------- celular: la costura partida en vertical (A arriba, B abajo) en la banda de arriba; el panel debajo ---------- */
@media (max-width: 640px) {
  .dc-banda { display: block; height: var(--dc-banda-cel); }
  .parada-decision[data-costura='liga'] .dc-banda { height: var(--dc-banda-cel-heroe); }
  .dc-lado { top: 0; justify-items: start; gap: 6px; max-width: calc(100vw - 20px); }
  .dc-lado[data-lado='b'] { justify-items: end; }
  .dc-lado::before { inset: -26px -36px; }
  .dc-logos { gap: 12px; }
  .ln-logo.dc-logo-liga { --ln-logo-tam: var(--dc-logo-cel); }
  .ln-logo.dc-logo-org { --ln-logo-tam: var(--dc-logo-org-cel); }
  .dc-lado[data-lado='b'] .dc-logos { flex-direction: row-reverse; }
  .dc-lugar { justify-items: inherit; text-align: inherit; gap: 5px; }
  .dc-lado[data-lado='b'] .dc-lugar { text-align: right; }
  .dc-lugar b { font-size: 18px; }
  .dc-filas { justify-items: inherit; gap: 5px; margin-top: 2px; }
  .dc-fila { justify-content: inherit; gap: 5px 6px; }
  .dc-lado[data-lado='b'] .dc-fila { flex-direction: row-reverse; }
  /* en el celular, lo que arriesgas ya esta en las opciones del panel: el destino lleva su camino */
  .dc-chips { display: none; }
  .dc-cabeza { height: 22px; gap: 7px; padding-right: 9px; }
  .dc-lado[data-lado='b'] .dc-cabeza { flex-direction: row-reverse; padding: 0 0 0 9px; }
  .dc-tecla { min-width: 22px; height: 22px; font-size: 11px; }
  .dc-monumento { gap: var(--dc-mon-hueco-cel); }
  .ln-logo.dc-mon-logo { --ln-logo-tam: var(--dc-mon-logo-cel); }
  .dc-mon-lugar { gap: 4px; }
  .dc-mon-lugar b { font-size: var(--dc-mon-ciudad-cel); }
  .dc-pared { gap: var(--dc-pared-hueco-cel); grid-template-columns: repeat(var(--dc-cols, 5), var(--dc-escudo-cel)); }
  .dc-escudo { width: var(--dc-escudo-cel); height: var(--dc-escudo-cel); }
  .dc-escudo[data-yo] { box-shadow: 0 0 0 1.5px var(--tono-acento), 0 0 12px -2px var(--tono-luz); }
  .dc-escudo[data-yo] img { padding: 1px; }
  .dc-marca { gap: 6px; padding: 3px 8px 3px 3px; }
  .ln-logo.dc-marca-escudo { --ln-logo-tam: var(--dc-escudo-yo-cel); }
  .dc-marca-txt span { display: none; }
}