/* ============================================================================
   DEMOS DEL MEDIA KIT (r13) · mk-card y mk-case
   Dos escenas, cinco montajes. Solo estilos de estas dos escenas: ningun
   token se define aqui, todos salen de css/tokens.css.

   mk-card  · la portada y el cierre. Gramatica de cine del billboard (cortes
              secos, wipes de acento, muebles de pantalla), reescrita con
              prefijo propio para no arrastrar css/demos/billboard.css, que
              esta calibrado para la caja de 760px del pie del Home.
   mk-case  · la ficha de un caso real. Un solo modulo, tres modos (money,
              volume, reach). Comparten carcasa y acento violeta; lo que
              cambia es el widget de datos, porque lo que cambia entre los
              tres casos es la unidad de medida.
   ========================================================================== */

/* ============================================================================
   MK-CARD · pantalla de cine, a sangre dentro de su slide
   ========================================================================== */
/* el stage del mk-card llena su marco: el marco (.kd-film) le da la caja y
   aqui solo se hereda, para que container-type: size tenga altura definida */
.demo--mk-card {
  min-height: 0;
  display: block;
  position: absolute;
  inset: 0;
}
.demo--mk-card .mk {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: size;
  background: radial-gradient(130% 100% at 50% 0%, var(--slate-raised), var(--slate) 64%);
}

/* maya de 1px al 6%: solo se lee en los beats de tinta */
.demo--mk-card .mk::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(246, 245, 241, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 245, 241, 0.055) 1px, transparent 1px);
  background-size: 68px 68px;
  pointer-events: none;
}
/* vineta filmica por encima de los cortes */
.demo--mk-card .mk::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  box-shadow: inset 0 0 12cqmin rgba(17, 17, 16, 0.34);
  pointer-events: none;
}

/* ---- cortes: una idea por beat -------------------------------------------- */
.demo--mk-card .mk-cut {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 2cqmin;
  padding: 7cqmin;
}
.demo--mk-card .mk-cut[hidden] { display: none; }

/* ---- lineas de titular: ventana de clip fija, el texto sube adentro ------- */
.demo--mk-card .mk-line { display: block; clip-path: inset(-0.14em -0.32em); }
.demo--mk-card .mk-line b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 8.4cqmin;
  line-height: 0.96;
  letter-spacing: var(--ls-display);
  color: var(--paper);
  text-transform: uppercase;
}
.demo--mk-card .mk-cut.is-on .mk-line b { animation: mk-rise 0.62s var(--ease-out) both; }
.demo--mk-card .mk-cut.is-on .mk-line:nth-child(2) b { animation-delay: 0.15s; }
.demo--mk-card .mk-cut.is-on .mk-line:nth-child(3) b { animation-delay: 0.3s; }
.demo--mk-card .mk-line i { font-style: normal; color: var(--violet-bright); }

/* beat de especialidad: una palabra enorme y su bajada mono */
.demo--mk-card .mk-cut--spec .mk-line b { font-size: 15cqmin; }
.demo--mk-card .mk-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: max(11px, 2.2cqmin);
  font-weight: 480;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(246, 245, 241, 0.66);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.42s var(--ease-out), transform 0.42s var(--ease-out);
  transition-delay: 0.22s;
}
.demo--mk-card .mk-cut.is-on .mk-sub { opacity: 1; transform: none; }
.demo--mk-card .mk-cut--growth .mk-line b { color: var(--violet-bright); }
.demo--mk-card .mk-cut--systems .mk-line b { color: var(--teal-bright); }
.demo--mk-card .mk-cut--strategy .mk-line b { color: var(--amber-bright); }

/* ---- wipe de acento: un solo panel, color por modificador ------------------ */
.demo--mk-card .mk-wipe {
  position: absolute;
  inset: 0;
  z-index: 3;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
.demo--mk-card .mk-wipe.is-in {
  transform: scaleX(1);
  transition: transform 0.52s var(--ease);
}
.demo--mk-card .mk-wipe.is-out {
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform 0.46s var(--ease);
}
.demo--mk-card .mk-wipe--violet { background: var(--violet); }
.demo--mk-card .mk-wipe--teal { background: var(--teal-bright); }
.demo--mk-card .mk-wipe--amber { background: var(--amber-bright); }

/* ---- muebles de pantalla (z4) --------------------------------------------- */
.demo--mk-card .mk-bug,
.demo--mk-card .mk-year,
.demo--mk-card .mk-count {
  position: absolute;
  z-index: 4;
  font-family: var(--font-mono);
  /* mismo suelo: en el modo close la caja es una columna de 16/9, no la
     pantalla, y "SPICA STUDIO · COMPANY PROFILE" caia a 6,95 px */
  font-size: max(9.5px, 1.7cqmin);
  font-weight: 520;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246, 245, 241, 0.6);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.demo--mk-card .mk-bug.is-on,
.demo--mk-card .mk-year.is-on,
.demo--mk-card .mk-count.is-on { opacity: 1; }
.demo--mk-card .mk-bug {
  top: 3.6cqmin;
  left: 4cqmin;
  display: flex;
  align-items: center;
  gap: 1.3cqmin;
}
.demo--mk-card .mk-bug i { font-style: normal; }
.demo--mk-card .mk-bug__mark { width: 2.7cqmin; height: auto; display: block; color: rgba(246, 245, 241, 0.6); }
.demo--mk-card .mk-year { top: 3.6cqmin; right: 4cqmin; }
.demo--mk-card .mk-count {
  bottom: 3.6cqmin;
  right: 4cqmin;
  font-variant-numeric: tabular-nums;
}
.demo--mk-card .mk-progress {
  position: absolute;
  z-index: 4;
  left: 4cqmin;
  right: 14cqmin;
  bottom: 4.3cqmin;
  height: 2px;
  background: rgba(246, 245, 241, 0.16);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.demo--mk-card .mk-progress.is-on { opacity: 1; }
.demo--mk-card .mk-progress i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: rgba(246, 245, 241, 0.85);
}

/* ---- cierre: la flor y el wordmark ---------------------------------------- */
.demo--mk-card .mk-cut--logo { gap: 3cqmin; }
.demo--mk-card .mk-mark {
  display: block;
  opacity: 0;
  color: var(--violet-bright);
}
.demo--mk-card .mk-mark svg { width: 15cqmin; height: auto; display: block; }
.demo--mk-card .mk-mark.is-on { opacity: 1; animation: mk-drop 0.62s var(--ease-spring) both; }
.demo--mk-card .mk-word {
  display: block;
  opacity: 0;
  color: var(--paper);
  transform: translateY(10px);
  transition: opacity 0.42s var(--ease-out), transform 0.42s var(--ease-out);
}
.demo--mk-card .mk-word svg { width: 26cqmin; height: auto; display: block; }
.demo--mk-card .mk-word.is-on { opacity: 1; transform: none; }
/* subtitular de portada (D2.1). Va en el aterrizaje, no en un beat: es una
   frase de 99 caracteres y ahi se queda quieta para siempre. En versalita
   sostenida no cabria, asi que va en caja normal y con interlinea de lectura.
   El cuerpo se acota por abajo con clamp: 2,3cqmin sobre una caja de 375 px
   caeria a 8,6 px y no se leeria en un telefono. */
.demo--mk-card .mk-lede {
  display: block;
  max-width: 44ch;
  font-family: var(--font-mono);
  font-size: clamp(11.5px, 2.3cqmin, 21px);
  font-weight: 480;
  letter-spacing: 0.05em;
  line-height: 1.55;
  text-wrap: balance;
  color: rgba(246, 245, 241, 0.78);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.42s var(--ease-out), transform 0.42s var(--ease-out);
}
.demo--mk-card .mk-lede.is-on { opacity: 1; transform: none; }
/* la firma es una FRASE en el modo close, y ahi la caja es la columna de una
   rejilla partida, no la pantalla: medido 7,8 px a 1440. Suelo en px. */
.demo--mk-card .mk-sign {
  display: block;
  font-family: var(--font-mono);
  font-size: max(11px, 1.9cqmin);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(246, 245, 241, 0.6);
  opacity: 0;
  transition: opacity 0.42s var(--ease-out);
}
.demo--mk-card .mk-sign.is-on { opacity: 1; }

/* ---- linea de contacto del cierre ----------------------------------------- */
.demo--mk-card .mk-contact { display: grid; gap: 1.4cqmin; justify-items: center; }
.demo--mk-card .mk-contact b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 5cqmin;
  letter-spacing: var(--ls-heading);
  color: var(--paper);
}
.demo--mk-card .mk-contact span {
  font-family: var(--font-mono);
  font-size: 2.1cqmin;
  letter-spacing: 0.12em;
  color: rgba(246, 245, 241, 0.72);
}

@keyframes mk-rise { from { transform: translateY(112%); } }
@keyframes mk-drop {
  from { transform: translateY(-200%) scale(0.86); opacity: 0; }
  42% { opacity: 1; }
  to { transform: none; opacity: 1; }
}

/* ============================================================================
   MK-CASE · la ficha de un caso real, sobre slate
   Carcasa comun en los tres modos; el widget de datos es lo que cambia.
   ========================================================================== */
.demo--mk-case { min-height: 0; display: block; width: 100%; }
.demo--mk-case .mkc {
  --mkc-accent: var(--violet-bright);
  position: relative;
  width: 100%;
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.6rem);
  padding: clamp(1.3rem, 2.2vw, 2.1rem) clamp(1.3rem, 2.4vw, 2.3rem) clamp(1.2rem, 2vw, 1.9rem);
  border-radius: var(--radius-lg);
  background: var(--slate-raised);
  border: 1px solid var(--line-on-dark);
  box-shadow: 0 26px 70px rgba(17, 17, 16, 0.4);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.demo--mk-case .mkc.is-on { opacity: 1; transform: none; }
/* la regla superior: una linea de acento que declara el caso */
.demo--mk-case .mkc::before {
  content: "";
  position: absolute;
  left: clamp(1.3rem, 2.4vw, 2.3rem);
  right: clamp(1.3rem, 2.4vw, 2.3rem);
  top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--mkc-accent);
}

/* ---- cabecera: logo real, contexto, chip de servicio ---------------------- */
.demo--mk-case .mkc__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.9rem 1.1rem;
}
.demo--mk-case .mkc__logo {
  width: clamp(4.6rem, 7vw, 6.4rem);
  height: auto;
  border-radius: 8px;
  background: var(--paper);
  padding: 0.4rem 0.5rem;
}
.demo--mk-case .mkc__logo img { width: 100%; height: auto; object-fit: contain; }
/* mismo tratamiento que el footer del Home, que ya esta aprobado: estos dos
   assets son la version BLANCA del logo y sobre la pastilla de papel no se
   leerian; los dos pastel ganan cuerpo sin recolorearse. No se recolorea
   ningun logo: solo se ajusta brillo y contraste. */
.demo--mk-case .mkc__logo img[src*="ba-kitchen-bath"] { filter: brightness(0.3); }
.demo--mk-case .mkc__logo img[src*="vianka-med-spa"] { filter: contrast(1.35) saturate(1.2); }
.demo--mk-case .mkc__id { display: grid; gap: 0.42rem; min-width: 0; }
.demo--mk-case .mkc__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: 1.06;
  letter-spacing: -0.008em;
  color: var(--paper);
}
/* el sello Inc. 5000 vive arriba a la derecha de la ficha: en el modo reach la
   linea de contexto le deja el sitio en vez de pasarle por debajo */
.demo--mk-case .mkc--reach .mkc__ctx { padding-right: 10.5rem; }
.demo--mk-case .mkc__ctx {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 480;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(246, 245, 241, 0.62);
}
/* los .dm-word y su .is-revealed ya viven en css/demos.css: no se duplican */
.demo--mk-case .mkc__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.demo--mk-case .dm-chip {
  --dm-accent: var(--mkc-accent);
  max-width: 100%;
  white-space: normal;
  text-align: left;
  line-height: 1.35;
}
/* sello Inc. 5000: el unico overshoot de la ficha, y es del cliente */
.demo--mk-case .mkc__badge {
  position: absolute;
  top: clamp(1.1rem, 2vw, 1.9rem);
  right: clamp(1.3rem, 2.4vw, 2.3rem);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  background: var(--paper);
  border-radius: var(--radius-pill);
  padding: 0.34rem 0.72rem;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-spring);
}
.demo--mk-case .mkc__badge.is-on { opacity: 1; transform: none; }

/* ---- filas de dato (modo money y las filas de volume) --------------------- */
.demo--mk-case .mkc__rows { display: grid; gap: clamp(0.5rem, 0.9vw, 0.85rem); }
.demo--mk-case .mkc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(246, 245, 241, 0.12);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.38s var(--ease-out), transform 0.38s var(--ease-out);
}
.demo--mk-case .mkc-row.is-on { opacity: 1; transform: none; }
.demo--mk-case .mkc-row__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 480;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(246, 245, 241, 0.6);
}
.demo--mk-case .mkc-row__val {
  display: flex;
  align-items: baseline;
  gap: 0.42rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.9vw, 1.65rem);
  line-height: 1;
  letter-spacing: var(--ls-heading);
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* la fila de ingreso es la cifra grande del caso */
.demo--mk-case .mkc-row--hero { border-bottom: 0; padding-top: 0.3rem; }
.demo--mk-case .mkc-row--hero .mkc-row__label { color: var(--mkc-accent); }
.demo--mk-case .mkc-row--hero .mkc-row__val {
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
}
/* el conector del rango: mono, chico, para que "30 to 45" se lea como UNA cifra */
.demo--mk-case .mkc-to {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 480;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: rgba(246, 245, 241, 0.55);
  opacity: 0;
  transition: opacity 0.24s var(--ease-out);
}
.demo--mk-case .mkc-to.is-on { opacity: 1; }
.demo--mk-case .mkc-row__note {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: rgba(246, 245, 241, 0.45);
}

/* ---- widget del modo volume: dos columnas a escala real ------------------- */
.demo--mk-case .mkc__chart {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.8rem);
  align-items: end;
  padding: 0.4rem 0 0.7rem;
  border-bottom: 1px solid rgba(246, 245, 241, 0.12);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.42s var(--ease-out), transform 0.42s var(--ease-out);
}
.demo--mk-case .mkc__chart.is-on { opacity: 1; transform: none; }
.demo--mk-case .mkc-col { display: grid; gap: 0.5rem; justify-items: start; }
.demo--mk-case .mkc-col .dm-bars { height: clamp(52px, 7vw, 84px); width: 62%; }
.demo--mk-case .mkc-col .dm-bars i { width: 100%; border-radius: 4px 4px 1px 1px; }
.demo--mk-case .mkc-col__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 480;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(246, 245, 241, 0.6);
}
.demo--mk-case .mkc-col__val {
  display: flex;
  align-items: baseline;
  gap: 0.42rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1;
  letter-spacing: var(--ls-heading);
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
/* el bonus de recurrencia: un segundo motor, nunca dentro del embudo */
.demo--mk-case .mkc__bonus {
  display: grid;
  gap: 0.3rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--go) 22%, transparent);
  border-left: 3px solid var(--go);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.demo--mk-case .mkc__bonus.is-on { opacity: 1; transform: none; }
/* 🔴 este bloque es el que dice "sustains up to", o sea el matiz que impide
   que $100,000 se lea como recurrencia firme. A 9,92 px en versal sostenida
   ese matiz no se lee, y un matiz que no se lee no esta puesto. El rotulo de
   arriba se queda en mono versalita, que es su papel de etiqueta; la clausula
   larga de abajo pasa a caja normal y cuerpo de lectura, porque es prosa. */
.demo--mk-case .mkc__bonus-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 520;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(246, 245, 241, 0.78);
}
.demo--mk-case .mkc__bonus-label--long {
  font-size: 0.82rem;
  font-weight: 480;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.45;
}
.demo--mk-case .mkc__bonus-val {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.3vw, 1.95rem);
  line-height: 1;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

/* ---- widget del modo reach: la linea que sube y tres hitos ---------------- */
.demo--mk-case .mkc__reach { display: grid; gap: 0.8rem; }
.demo--mk-case .mkc__axis {
  height: clamp(46px, 6vw, 76px);
  width: 100%;
  --dm-accent: var(--mkc-accent);
}
.demo--mk-case .mkc__axis svg { height: 100%; width: 100%; }
/* el eje se estira a lo ancho, asi que el grosor del trazo se protege */
.demo--mk-case .mkc__axis path { vector-effect: non-scaling-stroke; }
.demo--mk-case .mkc__marks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.7rem, 1.4vw, 1.3rem);
}
.demo--mk-case .mkc-mark {
  display: grid;
  gap: 0.4rem;
  justify-items: start;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(246, 245, 241, 0.12);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.38s var(--ease-out), transform 0.38s var(--ease-out);
}
.demo--mk-case .mkc-mark.is-on { opacity: 1; transform: none; }
.demo--mk-case .mkc-mark__val {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.demo--mk-case .mkc-mark--top .mkc-mark__val { color: var(--mkc-accent); }
.demo--mk-case .mkc-mark .dm-chip { --dm-accent: var(--mkc-accent); }
/* la frase que sostiene el bloque entero */
.demo--mk-case .mkc__said {
  font-size: var(--text-lead);
  line-height: 1.5;
  color: rgba(246, 245, 241, 0.74);
  max-width: 46ch;
}

/* ---- sello de lectura: la conclusion del caso ----------------------------- */
.demo--mk-case .mkc__stamp {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 540;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mkc-accent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.42s var(--ease-out), transform 0.42s var(--ease-out);
}
.demo--mk-case .mkc__stamp.is-on { opacity: 1; transform: none; }
.demo--mk-case .mkc__stamp svg { width: 0.95rem; height: 0.95rem; flex: none; }

/* ---- la prueba de al lado: una captura de trabajo real -------------------- */
.demo--mk-case .mkc__shot {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line-on-dark);
  background: var(--slate);
}
.demo--mk-case .mkc__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* modo instant y ?static: todo compuesto, nada a medio camino */
.demo--mk-case.is-instant .mkc,
.demo--mk-case.is-instant .mkc-row,
.demo--mk-case.is-instant .mkc__chart,
.demo--mk-case.is-instant .mkc__bonus,
.demo--mk-case.is-instant .mkc-mark,
.demo--mk-case.is-instant .mkc__stamp,
.demo--mk-case.is-instant .mkc__badge { opacity: 1; transform: none; }
.demo--mk-case.is-instant .mkc__ctx .dm-word,
.demo--mk-case.is-instant .mkc__said .dm-word { opacity: 1; transform: none; }
.demo--mk-case.is-instant .mkc-to { opacity: 1; }

@media (max-width: 767px) {
  .demo--mk-case .mkc__head { grid-template-columns: 1fr; }
  .demo--mk-case .mkc__badge { position: static; justify-self: start; }
  .demo--mk-case .mkc-row { grid-template-columns: 1fr; gap: 0.25rem; }
  .demo--mk-case .mkc__marks { grid-template-columns: 1fr; }
}

/* ============================================================================
   MK-SHAPE · K1, el plano de la empresa (adenda vectorial, 1-sep)
   Sustituye al montaje de films: `assets/films/` sale del proyecto entero.
   Siete lineas entran en paralelo con su numero, se trenzan en un punto unico,
   sale un solo caudal, florece la flor, y encima las dos cifras firmadas.
   Es la tesis one-system del Home re-declarada aqui, porque el visitante del
   media kit normalmente no ha visto el Home. Cero assets: toda la geometria
   es SVG dibujado por el motor, y toda la escala va en cqw.
   ========================================================================== */
.demo--mk-shape { min-height: 0; display: block; width: 100%; }
.demo--mk-shape .shp {
  position: relative;
  width: 100%;
  container-type: inline-size;
  display: grid;
  gap: 2.6cqw;
  padding: 3.2cqw 3.4cqw 3cqw;
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.demo--mk-shape .shp.is-on { opacity: 1; transform: none; }
/* 🔴 SUELO DE LEGIBILIDAD. Todo el pie de mk-shape mide en cqw, y la escena
   vive en la columna derecha de una rejilla partida: a 1440 la caja son unos
   680 px y el rotulo de las dos cifras FIRMADAS caia a 8,5 px. Se pone un
   suelo en px con max(), que nunca encoge nada (por encima del suelo manda el
   cqw de siempre) y saca del rango ilegible lo que sostiene una cifra. */
.demo--mk-shape .shp__head {
  font-family: var(--font-mono);
  font-size: max(10.5px, 1.5cqw);
  font-weight: 520;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- el plano ------------------------------------------------------------- */
.demo--mk-shape .shp__plot { position: relative; width: 100%; }
.demo--mk-shape .shp-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* etiquetas de especialidad: un evento, stagger interno por delay */
.demo--mk-shape .shp-label {
  font-family: var(--font-mono);
  font-size: 2.35px;
  font-weight: 600;
  letter-spacing: 0.16em;
  opacity: 0;
  transition: opacity 0.42s var(--ease-out);
}
.demo--mk-shape .shp-svg.is-labelled .shp-label { opacity: 1; }
.demo--mk-shape .shp-svg.is-labelled .shp-label:nth-of-type(2) { transition-delay: 0.15s; }
.demo--mk-shape .shp-svg.is-labelled .shp-label:nth-of-type(3) { transition-delay: 0.3s; }
.demo--mk-shape .shp-label--growth { fill: var(--violet); }
.demo--mk-shape .shp-label--systems { fill: color-mix(in srgb, var(--teal) 70%, var(--teal-deep)); }
.demo--mk-shape .shp-label--strategy { fill: var(--amber-text); }

/* numeros de linea: un evento, stagger interno 110 ms */
.demo--mk-shape .shp-num {
  font-family: var(--font-mono);
  font-size: 2.25px;
  font-weight: 520;
  letter-spacing: 0.05em;
  fill: var(--ink-faint);
  opacity: 0;
  transition: opacity 0.36s var(--ease-out);
}
.demo--mk-shape .shp-svg.is-numbered .shp-num { opacity: 1; }
.demo--mk-shape .shp-svg.is-numbered .shp-num:nth-of-type(2) { transition-delay: 0.11s; }
.demo--mk-shape .shp-svg.is-numbered .shp-num:nth-of-type(3) { transition-delay: 0.22s; }
.demo--mk-shape .shp-svg.is-numbered .shp-num:nth-of-type(4) { transition-delay: 0.33s; }
.demo--mk-shape .shp-svg.is-numbered .shp-num:nth-of-type(5) { transition-delay: 0.44s; }
.demo--mk-shape .shp-svg.is-numbered .shp-num:nth-of-type(6) { transition-delay: 0.55s; }
.demo--mk-shape .shp-svg.is-numbered .shp-num:nth-of-type(7) { transition-delay: 0.66s; }

/* los siete trazos. Cada uno es UN path: el tramo recto y, seguido, la curva
   que lo lleva al nodo. Se revela en dos tiempos con stroke-dashoffset, asi
   que "entrar en paralelo" y "trenzarse" son el mismo trazo en dos momentos
   y no hace falta interpolar la geometria. */
.demo--mk-shape .shp-line {
  fill: none;
  stroke-width: 0.62;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.52s var(--ease-out);
}
.demo--mk-shape .shp-g--growth .shp-line { stroke: var(--violet); }
.demo--mk-shape .shp-g--systems .shp-line { stroke: var(--teal); }
.demo--mk-shape .shp-g--strategy .shp-line { stroke: var(--amber); }
/* fase 1: solo el tramo recto. El corte exacto lo calcula el guion por la
   longitud real de cada path y viaja en una custom property. */
.demo--mk-shape .shp-g.is-drawn .shp-line { stroke-dashoffset: var(--shp-cut, 42); }
.demo--mk-shape .shp-g.is-drawn .shp-line:nth-of-type(2) { transition-delay: 0.15s; }
.demo--mk-shape .shp-g.is-drawn .shp-line:nth-of-type(3) { transition-delay: 0.3s; }
/* fase 2: una sola clase sobre el grupo entero, siete transiciones */
.demo--mk-shape .shp-svg.is-converged .shp-line {
  stroke-dashoffset: 0;
  transition-duration: 0.72s;
  transition-timing-function: var(--ease);
}
.demo--mk-shape .shp-svg.is-converged .shp-g--growth .shp-line:nth-of-type(1) { transition-delay: 0s; }
.demo--mk-shape .shp-svg.is-converged .shp-g--growth .shp-line:nth-of-type(2) { transition-delay: 0.09s; }
.demo--mk-shape .shp-svg.is-converged .shp-g--growth .shp-line:nth-of-type(3) { transition-delay: 0.18s; }
.demo--mk-shape .shp-svg.is-converged .shp-g--systems .shp-line:nth-of-type(1) { transition-delay: 0.27s; }
.demo--mk-shape .shp-svg.is-converged .shp-g--systems .shp-line:nth-of-type(2) { transition-delay: 0.36s; }
.demo--mk-shape .shp-svg.is-converged .shp-g--systems .shp-line:nth-of-type(3) { transition-delay: 0.45s; }
.demo--mk-shape .shp-svg.is-converged .shp-g--strategy .shp-line:nth-of-type(1) { transition-delay: 0.54s; }

/* el nodo: solido, sin destello y sin particulas */
.demo--mk-shape .shp-node {
  fill: var(--ink);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.4s var(--ease-out);
  transition-delay: 0.45s;
}
.demo--mk-shape .shp-svg.is-converged .shp-node { opacity: 1; }

/* el caudal: un solo trazo grueso que cruza hasta el borde derecho */
.demo--mk-shape .shp-out {
  fill: none;
  stroke: var(--violet);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.62s var(--ease-out);
}
.demo--mk-shape .shp-svg.is-out .shp-out { stroke-dashoffset: 0; }

/* la flor sobre el punto de convergencia: el unico overshoot de la escena */
.demo--mk-shape .shp-flower {
  position: absolute;
  left: 74%;
  top: 53.4%;
  width: 13cqw;
  transform: translate(-50%, -50%) scale(0.6);
  color: var(--violet);
  opacity: 0;
  transition: opacity 0.34s var(--ease-out), transform 0.62s var(--ease-spring);
}
.demo--mk-shape .shp-flower svg { width: 100%; height: auto; display: block; }
.demo--mk-shape .shp-flower.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---- el pie: mercados, las dos cifras firmadas y el sello ----------------- */
.demo--mk-shape .shp__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 2.4cqw;
  padding-top: 2.4cqw;
  border-top: 1px solid var(--line);
}
.demo--mk-shape .shp__market {
  font-family: var(--font-mono);
  font-size: max(10.5px, 1.55cqw);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.demo--mk-shape .shp-fig { display: grid; gap: 0.5cqw; justify-items: end; text-align: right; }
.demo--mk-shape .shp-fig__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 6.2cqw;
  line-height: 0.9;
  letter-spacing: var(--ls-display);
  color: var(--violet);
  font-variant-numeric: tabular-nums;
}
.demo--mk-shape .shp-fig__label {
  font-family: var(--font-mono);
  font-size: max(10.5px, 1.35cqw);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.38s var(--ease-out), transform 0.38s var(--ease-out);
}
.demo--mk-shape .shp-fig__label.is-on { opacity: 1; transform: none; }
.demo--mk-shape .shp__stamp {
  font-family: var(--font-mono);
  font-size: max(11px, 1.5cqw);
  font-weight: 540;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.42s var(--ease-out), transform 0.42s var(--ease-out);
}
.demo--mk-shape .shp__stamp.is-on { opacity: 1; transform: none; }

/* estado compuesto: ?static, reduced-motion y print ------------------------- */
.demo--mk-shape.is-instant .shp,
.demo--mk-shape.is-instant .shp__stamp,
.demo--mk-shape.is-instant .shp-fig__label { opacity: 1; transform: none; }
.demo--mk-shape.is-instant .shp-flower { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.demo--mk-shape.is-instant .shp-line,
.demo--mk-shape.is-instant .shp-out { stroke-dashoffset: 0; }
.demo--mk-shape.is-instant .shp-label,
.demo--mk-shape.is-instant .shp-num,
.demo--mk-shape.is-instant .shp-node { opacity: 1; }

@media (max-width: 767px) {
  /* el plano no cambia de geometria en el telefono: lo que sube es el cuerpo
     del texto y del trazo DENTRO del viewBox, que es lo unico que escala con
     el ancho. A 375 px el numero de linea caia a 6,7 px y no se leia. */
  .demo--mk-shape .shp-label { font-size: 4.4px; }
  .demo--mk-shape .shp-num { font-size: 4px; }
  .demo--mk-shape .shp-line { stroke-width: 1.05; }
  .demo--mk-shape .shp-out { stroke-width: 2.8; }
  .demo--mk-shape .shp__foot { grid-template-columns: 1fr; gap: 1.6cqw; }
  .demo--mk-shape .shp-fig { justify-items: start; text-align: left; }
  .demo--mk-shape .shp__market { font-size: max(10.5px, 3cqw); }
  .demo--mk-shape .shp__head, .demo--mk-shape .shp__stamp { font-size: max(11px, 2.9cqw); }
  .demo--mk-shape .shp-fig__value { font-size: 11cqw; }
  .demo--mk-shape .shp-fig__label { font-size: max(10.5px, 2.6cqw); }
}

/* ============================================================================
   IMPRESION · el bloqueo que costo encontrar, dicho por escrito
   `container-type` (size en mk-card, inline-size en mk-shape) hace que Chrome
   pagine EN BLANCO la pieza entera: 23 hojas con las cajas puestas y CERO
   operaciones de texto, medido con Page.printToPDF. No es el @media print del
   deck (se probo quitandolo y el PDF seguia vacio) ni base.css ni sections.css:
   apagando estas dos declaraciones el mismo PDF pasa de 0 a 10.042 operaciones
   de texto. Se apagan solo al imprimir, y ahi las medidas cq* se resuelven
   contra el viewport de la hoja, que en apaisado da valores equivalentes.
   Si algun dia otra escena estrena `container-type`, tiene que entrar aqui.
   ========================================================================== */
@media print {
  .demo--mk-card .mk,
  .demo--mk-shape .shp { container-type: normal; }
  /* con el contenedor apagado las medidas cq* dejan de tener a que agarrarse,
     asi que en la hoja las dos escenas van con tamanos absolutos: una hoja
     apaisada mide siempre lo mismo y no hace falta que nada escale */
  .demo--mk-card .mk-line b { font-size: 3.1rem; }
  .demo--mk-card .mk-cut--spec .mk-line b { font-size: 4.6rem; }
  .demo--mk-card .mk-sub { font-size: 0.78rem; }
  .demo--mk-card .mk-bug,
  .demo--mk-card .mk-year,
  .demo--mk-card .mk-count { font-size: 0.62rem; }
  .demo--mk-card .mk-bug__mark { width: 1rem; }
  .demo--mk-card .mk-mark svg { width: 5.4rem; }
  .demo--mk-card .mk-word svg { width: 9.4rem; }
  .demo--mk-card .mk-sign { font-size: 0.68rem; }
  .demo--mk-card .mk-lede { font-size: 0.8rem; max-width: 46ch; }
  .demo--mk-card .mk-contact b { font-size: 1.8rem; }
  .demo--mk-card .mk-contact span { font-size: 0.74rem; }
  .demo--mk-card .mk::after { box-shadow: none; }

  .demo--mk-shape .shp { padding: 1.3rem 1.5rem 1.2rem; gap: 1rem; }
  .demo--mk-shape .shp-svg { aspect-ratio: 100 / 58; height: auto; }
  .demo--mk-shape .shp__head,
  .demo--mk-shape .shp__market,
  .demo--mk-shape .shp__stamp { font-size: 0.68rem; }
  .demo--mk-shape .shp__foot { gap: 1.4rem; padding-top: 1rem; }
  .demo--mk-shape .shp-fig__value { font-size: 2.2rem; }
  .demo--mk-shape .shp-fig__label { font-size: 0.6rem; }
  .demo--mk-shape .shp-flower { width: 4.4rem; }
}

/* ============================================================================
   PISO TACTIL DE 12 px · los muebles de pantalla del mk-card
   Medido en WebKit a 390: la linea de marca, el ano y el contador de beat
   salian a 9,5 px. Miden en cqmin y la caja de la portada en un telefono es
   estrecha, asi que el suelo en px es la unica forma de sacarlos del rango
   ilegible. Al subir el cuerpo se AFLOJA el tracking de 0,22em a 0,08em: con
   el tracking original la linea de marca se comia el ancho y chocaba con el
   ano, que vive en la esquina opuesta. Medido despues: cero solapes y cero
   desbordes de caja. Misma condicion que en deck.css, o sea que el escritorio
   no se entera.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  /* muebles de la portada: al subir el cuerpo se AFLOJA el tracking de 0,22em
     a 0,08em, porque con el original la linea de marca se comia el ancho y
     chocaba con el ano, que vive en la esquina opuesta */
  .demo--mk-card .mk-bug,
  .demo--mk-card .mk-year,
  .demo--mk-card .mk-count {
    font-size: 12px;
    letter-spacing: 0.08em;
  }
  .demo--mk-card .mk-bug__mark { width: 14px; }
  .demo--mk-card .mk-bug { gap: 6px; }
  /* la barra de progreso terminaba DEBAJO del contador de beat: a 390 se
     solapaban 18 px (ya se solapaban 6 px con el cuerpo viejo, o sea que el
     fallo venia de antes y el suelo solo lo hizo visible). Se le pide a la
     barra que despeje el ancho del contador, con suelo en px para la portada
     estrecha y el cqmin de siempre para las cajas grandes. */
  .demo--mk-card .mk-progress { right: max(14cqmin, 96px); }
  /* el resto del mk-card mide en cqmin: se conserva la expresion y solo sube
     el suelo, para que en una caja grande siga escalando como siempre */
  .demo--mk-card .mk-sub { font-size: max(12px, 2.2cqmin); }
  .demo--mk-card .mk-lede { font-size: clamp(12px, 2.3cqmin, 21px); }
  .demo--mk-card .mk-sign { font-size: max(12px, 1.9cqmin); letter-spacing: 0.12em; }
  .demo--mk-card .mk-contact span { font-size: max(12px, 2.1cqmin); }

  /* la ficha de caso mide en rem, o sea que su cuerpo es constante */
  .demo--mk-case .mkc__ctx,
  .demo--mk-case .mkc__badge,
  .demo--mk-case .mkc-row__label,
  .demo--mk-case .mkc-row__note,
  .demo--mk-case .mkc-col__label,
  .demo--mk-case .mkc-to,
  .demo--mk-case .mkc__bonus-label,
  .demo--mk-case .mkc__stamp,
  .demo--mk-case .dm-chip { font-size: 12px; }
  .demo--mk-case .mkc__bonus-label--long { font-size: 13px; }

  /* el plano de la empresa mide en cqw: mismo criterio, solo sube el suelo */
  .demo--mk-shape .shp__head { font-size: max(12px, 1.5cqw); }
  .demo--mk-shape .shp__market { font-size: max(12px, 1.55cqw); }
  .demo--mk-shape .shp__stamp { font-size: max(12px, 1.5cqw); }
  .demo--mk-shape .shp-fig__label { font-size: max(12px, 1.35cqw); }
}