/* ============================================================
   Kelp · Memoria. Solo las escenas de esta página; hero, bloques
   de caso, cabeceras, cierre y pie son del sistema (kelp.css).
   ============================================================ */

/* ---- Hero: la memoria de una cuenta que se ordena sola. Cuatro columnas con
   el mismo alto: lo que entra, a quién pertenece, el registro de lo que pasó y
   la ficha con lo que es verdad hoy. Kelp lleva cada fuente por los cables de
   una estación a la siguiente; lo que ya ha hecho su parte se atenúa.
   Dos tamaños de texto: 13.5 (lo que se lee) y 11.5 (lo que sitúa) ---- */
#mem { height: 600px; }
.mh-cv { --cw: 1104px; --ch: 416px; }
.mh-gl { position: absolute; top: 0; font-size: 11.5px; font-weight: 600; color: rgb(198 238 227 / .62); }
.mh-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mh-wb { fill: none; stroke: rgb(198 238 227 / .22); stroke-width: 1.5; stroke-dasharray: 2 5; }
.mh-wl { fill: none; stroke: var(--foam); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.mh-src { position: absolute; left: 0; width: 232px; height: 104px; padding: 14px; overflow: hidden; transition: box-shadow .3s, opacity .5s; }
.mh-src.on { box-shadow: 0 0 0 2px var(--foam), 0 20px 40px -18px rgb(0 0 0 / .6); }
.mh-src.done { opacity: .62; }
.mh-sh { display: flex; align-items: center; gap: 10px; }
.mh-sh b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.mh-sh small { display: block; font-size: 11.5px; color: var(--ink-3); }
.mh-lg { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.mh-lg img { width: 17px; height: 17px; }
.mh-ok { position: absolute; right: 14px; top: 69px; width: 18px; height: 18px; border-radius: 50%; background: var(--deep); color: var(--foam); display: grid; place-items: center; }
.mh-ok .ic { width: 11px; height: 11px; stroke-width: 3; }
.mh-sb { display: flex; align-items: center; height: 34px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-2); font-size: 11.5px; color: var(--ink-2); }
.mh-avs img, .mh-avs .co { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; margin-right: -5px; }
.mh-avs .co { font-size: 8.5px; }
.mh-wave { gap: 2.5px; }
.mh-wave i { width: 2.5px; border-radius: 2px; background: #8FA59A; height: calc(var(--h) * 1px); }
.mh-scan { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgb(198 238 227 / .75) 50%, transparent 70%); opacity: 0; }
.mh-cls { position: absolute; left: 280px; top: 134px; width: 164px; padding: 8px; display: grid; gap: 4px; border-radius: 14px; background: rgb(1 33 32 / .45);
  box-shadow: inset 0 0 0 1px rgb(198 238 227 / .18), 0 24px 44px -22px rgb(0 0 0 / .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mh-row { position: relative; height: 52px; padding: 8px 12px; border-radius: 9px; }
.mh-row small { display: block; font-size: 11.5px; font-weight: 600; color: rgb(198 238 227 / .55); }
.mh-row b { display: block; font-size: 13.5px; font-weight: 600; color: rgb(242 251 248 / .7); transition: color .3s; }
.mh-row i { position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: rgb(198 238 227 / .22); transition: background-color .3s, box-shadow .3s; }
.mh-row.hit b { color: #F2FBF8; }
.mh-row.hit i { background: var(--foam); box-shadow: 0 0 0 4px rgb(198 238 227 / .18); }
.mh-hl { position: absolute; left: 8px; top: 8px; width: 148px; height: 52px; border-radius: 9px; background: rgb(198 238 227 / .12); box-shadow: inset 0 0 0 1px rgb(198 238 227 / .45); }
.mh-reg { position: absolute; left: 488px; top: 34px; width: 280px; height: 382px; display: flex; flex-direction: column; overflow: hidden; }
.mh-rb { flex: 1; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.mh-hd { display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 14px; font-size: 13.5px; font-weight: 600; flex: none; }
.mh-fi .mh-hd { border-bottom: 1px solid var(--line); }
.mh-ev { height: 56px; overflow: hidden; }
.mh-ei { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; height: 56px; padding: 0 14px; border-top: 1px solid var(--line); }
.mh-ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.mh-ic img, .mh-ic .ic { width: 14px; height: 14px; }
.mh-ic .ic { color: var(--teal); }
.mh-ei small { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.mh-ei b { display: block; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.mh-warn small { color: var(--ember-ink); }
.mh-past { opacity: .5; }
.mh-fi { position: absolute; left: 812px; top: 34px; width: 292px; }
.mh-f { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 1px; height: 54px; padding: 8px 14px; border-bottom: 1px solid var(--line); transition: background-color .4s; }
.mh-f:last-child { border-bottom: 0; border-radius: 0 0 12px 12px; }
.mh-f.hit { background: var(--foam-2); }
.mh-k { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.mh-cite { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 99px; background: var(--foam-2); color: var(--ok); font-size: 11.5px; font-weight: 600; white-space: nowrap; transition: box-shadow .3s; }
.mh-f.hit .mh-cite { background: #fff; }
.mh-cite.lit { box-shadow: 0 0 0 2px var(--teal); }
.mh-cite img { width: 11px; height: 11px; }
.mh-v { grid-column: 1 / -1; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.mh-roll { display: inline-grid; justify-items: start; overflow: hidden; }
.mh-roll > * { grid-area: 1 / 1; }
.mh-v i { font-style: italic; font-weight: 400; color: var(--ink-3); }
.mh-old { position: relative; display: inline-block; }
.mh-tk { position: absolute; left: -3px; top: 50%; width: calc(100% + 6px); height: 10px; margin-top: -4px; overflow: visible; }
.mh-tk path { fill: none; stroke: #C98A2B; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.mh-end { margin-left: 8px; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--ember-ink); }
.mh-rec { position: absolute; left: 812px; top: 308px; width: 292px; height: 108px; padding: 12px 14px; }
.mh-rh { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.mh-rh b { font-weight: 600; }
.mh-rh .kbot { width: 20px; height: 20px; border-radius: 6px; }
.mh-rh img { width: 14px; height: 14px; margin-left: auto; }
.mh-rec p { margin-top: 6px; font-size: 13.5px; line-height: 1.4; font-weight: 500; }

/* ---- Criterio: lo que sabe la firma es una nube sin columnas (personas, métodos, servicios,
   criterios, cuentas ganadas y por qué se ganaron). Entra una pregunta en el centro y la nube
   se reordena: lo que la responde se acerca a ella y lo demás se aparta y se apaga. La
   respuesta sale de lo que se acercó. Las posiciones las pone memoria.js.
   Dos tamaños de texto: 14 (lo que se lee) y 11.5 (lo que sitúa) ---- */
.nb-s { position: relative; height: 540px; margin: 0 24px 24px; border-radius: 18px; overflow: hidden; }
.nb-cv { --cw: 1104px; --ch: 470px; }
.nb-net { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nb-eg line { stroke: rgb(0 74 72 / .22); stroke-width: 1.2; }
.nb-lk path { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.nb-n { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 14px 0 8px; border-radius: 22px; background: #fff; box-shadow: var(--shadow-card); white-space: nowrap; will-change: transform; transition: box-shadow .35s; }
.nb-n > b { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
.nb-n.hot { box-shadow: 0 0 0 2px var(--teal), 0 16px 30px -14px rgb(1 33 32 / .45); }
.nb-p img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.nb-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--foam-2); color: var(--teal); flex: none; }
.nb-ic .ic { width: 15px; height: 15px; }
.nb-m { background: var(--ember-2); }
.nb-m .nb-ic { background: #fff; color: var(--ember-ink); }
.nb-ac { padding-left: 9px; }
.nb-ac .co { width: 28px; height: 28px; border-radius: 8px; font-size: 10.5px; }
.nb-ac em { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--ok); }
.nb-ac em .ic { width: 12px; height: 12px; stroke-width: 2.6; }
.nb-fx .nb-ic { background: var(--deep); color: var(--foam); }
.nb-qa { position: absolute; left: 0; top: 0; width: 400px; height: 188px; z-index: 5; }
.nb-pr { position: absolute; inset: 0; display: grid; grid-template-rows: 78px 1fr; }
.nb-q, .nb-a { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 16px 20px 0; }
.nb-q { border-bottom: 1px solid var(--line); }
.nb-q img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.nb-a .kbot { width: 34px; height: 34px; border-radius: 10px; }
.nb-q b, .nb-a b { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.nb-q p, .nb-a p { font-size: 14px; line-height: 1.45; }
.nb-a p { font-weight: 500; }
.nb-a em { font-style: normal; font-weight: 600; border-radius: 4px; transition: background-color .35s, color .35s; }
.nb-a em.on { background: var(--foam); color: var(--teal); }
.nb-typ { display: flex; gap: 4px; margin-top: 8px; }
.nb-typ i { width: 6px; height: 6px; border-radius: 50%; background: #9AA6AC; animation: wdot 1.2s infinite; }
.nb-typ i:nth-child(2) { animation-delay: .15s; }
.nb-typ i:nth-child(3) { animation-delay: .3s; }

/* ---- 01 · Las palabras se convierten en trabajo. Un solo gesto, dos veces: en la reunión,
   dos palabras del subtítulo se marcan, se despegan y forman la tarea; en la nota de voz,
   una cifra se despega y sustituye a la de la propuesta. Dos tamaños: 17 (lo que se dice
   y lo que se escribe) y 12 (lo que sitúa) ---- */
.wt-act { position: absolute; inset: 0; }
.wt-call, .wt-vn { position: absolute; left: 0; top: 0; width: 600px; overflow: hidden; }
.wt-h { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; }
.wt-h img { width: 16px; height: 16px; }
.wt-h .kbot { width: 22px; height: 22px; border-radius: 7px; }
.wt-live { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.wt-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #D93025; }
.wt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px; background: #202124; }
.wt-tile { position: relative; height: 78px; border-radius: 9px; overflow: hidden; background: #3C4043; display: grid; place-items: center; }
.wt-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wt-tile > span:last-child { position: absolute; left: 8px; bottom: 5px; font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / .6); }
.wt-tile .co { width: 40px; height: 40px; border-radius: 50%; font-size: 13px; }
.wt-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px #8AB4F8; opacity: 0; transition: opacity .3s; }
.wt-tile.on::after { opacity: 1; }
.wt-k { background: var(--deep); }
.wt-k svg { position: relative; width: 30px; height: 30px; fill: var(--foam); }
.wt-ring { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; box-shadow: 0 0 0 2px var(--foam); opacity: 0; }
.wt-cap { padding: 14px 18px 16px; font-size: 17px; line-height: 1.4; letter-spacing: -0.01em; }
.wt-cap b { margin-right: 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.wt-src { font-style: normal; border-radius: 5px; padding: 0 3px; transition: background-color .3s, color .3s; }
.wt-src.on { background: var(--foam); }
.wt-src.gone { background: transparent; color: var(--ink-3); }
.wt-task, .wt-doc { position: absolute; left: 110px; width: 380px; padding: 14px 18px 18px; }
.wt-task { top: 262px; }
.wt-doc { top: 206px; }
.wt-oh { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.wt-oh img { width: 15px; height: 15px; }
.wt-oh .co { margin-left: auto; }
.wt-tt { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 17px; font-weight: 600; }
.wt-slot, .wt-date { justify-items: start; align-items: center; }
.wt-gap { display: block; width: 116px; height: 26px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--line-2); background: repeating-linear-gradient(135deg, transparent 0 6px, rgb(1 33 32 / .03) 6px 7px); }
.wt-due { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.wt-due img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.wt-date { margin-left: auto; }
.wt-date .wt-gap { width: 84px; }
.wt-date b { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 17px; font-weight: 600; color: var(--ink); }
.wt-date b:last-child { background: var(--ember-2); color: var(--ember-ink); }
.wt-date .ic { width: 15px; height: 15px; }
.wt-vb { display: grid; grid-template-columns: 36px 12px 1fr auto; gap: 12px; align-items: center; padding: 14px 18px 0; }
.wt-vb img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.wt-play { width: 0; height: 0; border-left: 11px solid #54656F; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.wt-wave { display: flex; align-items: center; gap: 4px; height: 26px; }
.wt-wave i { width: 3px; border-radius: 2px; background: #B7C5C0; height: calc(var(--h) * 1px); transition: background-color .2s; }
.wt-wave i.on { background: #25A366; }
.wt-vb small { font-size: 12px; color: var(--ink-3); }
.wt-tr { padding-top: 10px; }
.wt-ln { display: grid; gap: 8px; margin-top: 16px; }
.wt-ln i { display: block; height: 7px; border-radius: 4px; background: #D9E2DF; transform-origin: left; }
.wt-mg { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line-2); font-size: 12px; font-weight: 600; color: var(--ink-3); }
.wt-val { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 12px; border-radius: 8px; font-size: 17px; font-weight: 600; color: var(--ink); transition: background-color .4s; }
.wt-val.on { background: var(--foam); }
.wt-num { display: inline-grid; justify-items: end; }
.wt-num > b { grid-area: 1 / 1; }
.wt-fly { position: absolute; left: 0; top: 0; z-index: 8; padding: 0 3px; border-radius: 5px; background: var(--foam); font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; white-space: nowrap; box-shadow: 0 12px 24px -10px rgb(1 33 32 / .45); opacity: 0; }

/* ---- 02 · Preguntar: Kelp escribe la propuesta, se para en el dato que falta,
   espera a que Jorge esté libre y se lo pregunta ---- */
.ask-link { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ask-link path { fill: none; stroke: #C98A2B; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.ask-doc { position: absolute; left: 0; top: 52px; width: 292px; padding: 0 20px 22px; }
.ask-dh { display: flex; align-items: center; gap: 8px; height: 44px; margin: 0 -20px 18px; padding: 0 20px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 600; }
.ask-dh img { width: 16px; height: 16px; }
.ask-l { display: block; height: 7px; margin-top: 10px; }
.ask-l i { display: block; height: 100%; border-radius: 4px; background: #D9E2DF; transform-origin: left; }
.ask-t { height: 12px; margin-top: 0; }
.ask-t i { background: #C5D1CD; }
.ask-s { height: 9px; margin-top: 22px; }
.ask-s i { background: #C5D1CD; }
.ask-to { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 26px; padding: 12px 0; border-block: 1px dashed var(--line-2); }
.ask-to small { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.ask-q { display: inline-grid; place-items: center; min-width: 46px; height: 26px; padding: 0 10px; border-radius: 7px; background: var(--ember-2); box-shadow: inset 0 0 0 1.5px #E7B25C; color: var(--ember-ink); font-size: 13px; font-weight: 700; }
.ask-fill { font-size: 13px; font-weight: 600; text-align: right; }
.ask-fill em { display: block; font-style: normal; font-size: 11px; font-weight: 600; color: var(--ok); }
.ask-car { position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 6px; z-index: 2; box-shadow: 0 6px 12px -4px rgb(1 33 32 / .5); }
.ask-who { position: absolute; left: 320px; top: 270px; width: 280px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.ask-av { position: relative; width: 40px; height: 40px; flex: none; }
.ask-av img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.ask-st { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; background: #C4314B; box-shadow: 0 0 0 2.5px #fff; transition: background-color .4s; }
.ask-st.on { background: #6BB700; }
.ask-who b { display: block; font-size: 14px; font-weight: 600; }
.ask-who .swap { justify-items: start; }
.ask-sw small { font-size: 12px; font-weight: 600; }
.ask-busy { color: #C4314B; }
.ask-free { color: #3F7F00; }
.ask-dm { position: absolute; left: 320px; top: 52px; width: 280px; height: 162px; padding: 0 14px 16px; }
.ask-dm .ask-dh { margin: 0 -14px 2px; padding: 0 14px; }
.ask-m { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; margin-top: 12px; }
.ask-m img, .ask-m .kbot { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.ask-m .kbot svg { width: 19px; height: 19px; }
.ask-m b { display: block; font-size: 12.5px; font-weight: 600; }
.ask-m p { margin-top: 1px; font-size: 13.5px; line-height: 1.4; }


/* ---- 03 · Heredar: la firma es un recinto y lo que sabe Marta vive dentro, atado a
   ella con hilos de longitud fija: flojos cuelgan; tensos se estiran, adelgazan y tiran
   de su tarjeta. En su último día Marta cruza el borde, los hilos se tensan y el borde
   los corta: ella se va y las tarjetas vuelven a su sitio, con el sello de Kelp. Entra
   Andrés, los hilos se lanzan hacia él y Kelp le da la bienvenida.
   Dos tamaños de texto: 14 (lo que se lee) y 11.5 (lo que sitúa) ---- */
.her-firm { position: absolute; left: 0; top: 0; width: 460px; height: 420px; border-radius: 20px; background: rgb(255 255 255 / .5);
  box-shadow: inset 0 0 0 1px rgb(1 33 32 / .1), 0 24px 48px -32px rgb(1 33 32 / .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.her-fh { position: absolute; left: 24px; top: 22px; display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.her-fh .ic { width: 15px; height: 15px; color: var(--teal); }
.her-line { position: absolute; right: -1px; top: 22px; bottom: 22px; width: 2px; border-radius: 1px; background: var(--teal); box-shadow: 0 0 12px 1px rgb(0 74 72 / .35); opacity: 0; }
.her-glow { position: absolute; right: -45px; top: 0; width: 90px; height: 170px; background: radial-gradient(closest-side, rgb(0 74 72 / .26), transparent); opacity: 0; pointer-events: none; }
.her-net { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.her-r { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.her-gr { fill: #fff; stroke: var(--teal); stroke-width: 1.5; opacity: 0; }
.her-sp { fill: var(--teal); opacity: 0; }
.her-k { position: absolute; left: 24px; width: 240px; height: 64px; padding: 0 14px; display: grid; grid-template-columns: 28px 1fr; gap: 11px; align-items: center; will-change: transform; transition: box-shadow .3s; }
.her-k .co { width: 28px; height: 28px; border-radius: 8px; font-size: 10px; }
.her-k small { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.her-k small img { width: 14px; height: 14px; }
.her-k b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.her-k1 { top: 86px; }
.her-k2 { top: 170px; }
.her-k3 { top: 254px; }
.her-k.on { box-shadow: 0 0 0 2px var(--teal), 0 14px 30px -14px rgb(1 33 32 / .4); }
.her-seal { position: absolute; left: -8px; top: -8px; width: 22px; height: 22px; border-radius: 7px; box-shadow: 0 0 0 3px #fff; }
.her-eye { position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--teal); }
.her-p { position: absolute; left: 318px; top: 162px; width: 140px; display: flex; flex-direction: column; align-items: center; z-index: 2; will-change: transform; }
.her-av { position: relative; width: 80px; height: 80px; padding: 4px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-card); }
.her-av img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.her-ring { position: absolute; inset: -4px; border-radius: 50%; border: 3px solid var(--rc); opacity: 0; }
.her-p b { margin-top: 10px; font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.her-tg { margin-top: 6px; }
.her-msg { position: absolute; left: 24px; top: 336px; width: 412px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.her-msg .kbot { width: 30px; height: 30px; border-radius: 9px; }
.her-msg .kbot svg { width: 19px; height: 19px; }
.her-msg p { font-size: 14px; line-height: 1.4; font-weight: 500; }

/* ---- 04 · Vigilar el mercado: la cinta de lo que se publica hoy pasa bajo Kelp y
   el contador sube; lo que no os afecta se apaga al leerse. La licitación de un
   cliente se queda, baja al chat, Kelp le cruza lo que sabe la firma (el cliente
   en el CRM, el caso ganado) y te propone el primer paso ---- */
.mk-wire { position: absolute; left: 0; top: 0; width: 600px; height: 138px; overflow: hidden; }
.mk-wh { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 600; }
.mk-live { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgb(0 74 72 / .15); }
.mk-cnt { margin-left: auto; font-weight: 500; color: var(--ink-3); }
.mk-cnt b { font-weight: 600; color: var(--ink); }
.mk-win { position: relative; height: 104px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.mk-strip { position: absolute; left: 0; top: 8px; display: flex; gap: 12px; }
.mk-it, .mk-att, .mk-fly { width: 168px; height: 88px; flex: none; padding: 10px 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); display: grid; align-content: start; gap: 6px; }
.mk-it { transition: box-shadow .3s; }
.mk-it.lit { box-shadow: inset 0 0 0 1.5px var(--teal); }
.mk-it.read { opacity: .34; }
.mk-hit.on, .mk-fly, .mk-att { box-shadow: 0 0 0 2px #E7B25C, 0 12px 26px -14px rgb(138 90 23 / .5); }
.mk-src { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.mk-src em { margin-left: auto; font-style: normal; font-weight: 500; }
.mk-src img { width: 16px; height: 16px; border-radius: 4px; }
.mk-ico { width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; background: var(--c); color: #fff; flex: none; }
.mk-ico svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mk-news { --c: #5E6E7C; }
.mk-appt { --c: #7B6397; }
.mk-bid { --c: #B7791F; }
.mk-it b, .mk-att b, .mk-fly b { font-size: 13px; font-weight: 600; line-height: 1.32; }
.mk-beam { position: absolute; left: 299px; top: 138px; width: 2px; height: 14px; background: rgb(0 74 72 / .45); }
.mk-hub { position: absolute; left: 276px; top: 150px; width: 48px; height: 48px; border-radius: 14px; }
.mk-hub svg { width: 28px; height: 28px; }
.mk-hub .rp { width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 16px; }
.mk-msg { position: absolute; left: 60px; top: 208px; width: 480px; height: 210px; padding: 0 16px; }
.mk-mh { display: flex; align-items: center; gap: 8px; height: 38px; margin: 0 -16px; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 600; }
.mk-mh img { width: 15px; height: 15px; }
.mk-mh em { margin-left: auto; font-style: normal; font-weight: 500; color: var(--ink-3); }
.mk-att { position: absolute; left: 16px; top: 50px; }
.mk-fly { position: absolute; left: 0; top: 0; z-index: 5; }
.mk-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mk-links path { fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.mk-ctx { position: absolute; left: 224px; top: 56px; display: grid; gap: 16px; justify-items: start; }
.mk-chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 8px; border-radius: 8px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.mk-chip img { width: 16px; height: 16px; }
.mk-ask { position: absolute; left: 16px; right: 16px; top: 152px; display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.mk-ask p { font-size: 13px; font-weight: 600; }
.mk-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 8px; background: var(--deep); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; transition: box-shadow .3s; }
.mk-btn.ready { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--teal); }
.mk-go { display: inline-flex; align-items: center; gap: 8px; height: 32px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.mk-go img { width: 16px; height: 16px; }
.mk-bar { display: block; width: 72px; height: 5px; border-radius: 3px; background: var(--foam-2); overflow: hidden; }
.mk-bar i { display: block; height: 100%; background: var(--teal); transform-origin: left; }
.mk-pk { position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgb(0 74 72 / .16); opacity: 0; z-index: 6; }

/* ---- Móvil: las escenas se reducen a escala para caber sin recortarse ---- */
@media (max-width: 700px) {
  /* hero: el lienzo a tamaño de lectura y encuadrado como una cámara que sigue a Kelp de
     estación en estación (memoria.js mueve el encuadre y ajusta el zoom al ancho) */
  #mem { height: auto; padding: 24px 0; }
  .mh-cv { position: relative; left: 0; top: 0; translate: none; zoom: .87; }
  .mh-gl, .mh-sh small, .mh-sb, .mh-row small, .mh-ei small, .mh-k, .mh-cite, .mh-end, .mh-rh { font-size: 12.5px; }
  /* la nube, con su propio encuadre: más alta que ancha y sin nodos de más */
  .nb-s { height: 660px; margin: 0 12px 12px; }
  .nb-cv { --cw: 380px; --ch: 640px; }
  .nb-qa { width: 356px; height: 196px; }
  /* los cuatro bloques: cada lienzo con su propio encuadre vertical, a tamaño de lectura;
     la caja se ajusta a su alto */
  .mm-s { height: auto; margin: 12px; padding: 24px 0; }
  .mm-s > .cv { position: relative; left: auto; top: auto; translate: none; margin-inline: auto; }
  /* 02: la propuesta arriba; debajo, Jorge y la conversación con él */
  #s-ask { --cw: 340px; --ch: 522px; }
  .ask-doc { top: 0; width: 340px; }
  .ask-l:nth-of-type(3), .ask-l:nth-of-type(4) { display: none; }
  .ask-to { margin-top: 18px; }
  .ask-who { left: 0; top: 294px; width: 340px; }
  .ask-dm { left: 0; top: 370px; width: 340px; height: 152px; }
  /* 03: el mismo recinto, más estrecho; las posiciones casan con las de memoria.js (mob) */
  #s-her { --cw: 360px; --ch: 440px; }
  .her-firm { width: 300px; height: 440px; }
  .her-fh { left: 14px; top: 18px; }
  .her-k { left: 12px; width: 196px; }
  .her-k1 { top: 76px; }
  .her-k2 { top: 158px; }
  .her-k3 { top: 240px; }
  .her-k b { white-space: normal; font-size: 13.5px; line-height: 1.25; }
  .her-p { left: 206px; top: 150px; width: 100px; }
  .her-msg { left: 12px; top: 334px; width: 276px; }
  /* 04: la cinta a lo ancho del móvil; en el mensaje, los datos de la firma debajo de la licitación */
  #s-mkt { --cw: 360px; --ch: 508px; }
  .mk-wire { width: 360px; }
  .mk-beam { left: 179px; }
  .mk-hub { left: 156px; }
  .mk-msg { left: 0; width: 360px; height: 300px; }
  .mk-ctx { left: 40px; top: 152px; gap: 14px; }
  .mk-ask { top: 244px; }
  .mk-links path { stroke-dashoffset: 1.02; }   /* sin el punto del remate antes de trazarse */
  /* 01, con su propio encuadre: las piezas a lo ancho del móvil, sin reducir el texto */
  .mm-s > .wt-cv { zoom: .9; --cw: 380px; --ch: 400px; }
  .wt-call, .wt-vn { width: 380px; }
  .wt-tile { height: 58px; }
  .wt-task, .wt-doc { left: 0; width: 380px; }
  .wt-task { top: 250px; }
  .wt-doc { top: 196px; }
}