/* ============================================================
   Kelp · Studio. Solo las escenas de esta página; hero, bloque
   de capacidad, cierre, nav y pie son del sistema.
   ============================================================ */

/* ---- Hero: una propuesta abierta que se edita conversando. A la izquierda el
   documento, a la derecha su conversación con Kelp ---- */
#hstudio { height: 600px; }
.hs-cv { --cw: 1040px; --ch: 508px; }
.hs-win { position: absolute; inset: 0; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 40px 80px -30px rgb(0 0 0 / .7); }
.hs-top { display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px; background: #F7F8F7; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); flex: none; }
.hs-top > .kbot { width: 22px; height: 22px; border-radius: 6px; }
.hs-top > b { font-weight: 600; color: var(--ink); }
.hs-crumb { display: flex; align-items: center; gap: 8px; margin-left: 8px; padding-left: 16px; border-left: 1px solid var(--line-2); font-weight: 500; white-space: nowrap; }
.hs-crumb i { font-style: normal; color: var(--ink-3); }
.hs-crumb .co { width: 20px; height: 20px; font-size: 8.5px; border-radius: 5px; }
.hs-ver { margin-left: auto; }
.hs-vt { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hs-v2 { background: var(--ember-2); box-shadow: none; color: var(--ember-ink); }
.hs-vok { background: var(--foam-2); box-shadow: none; color: var(--ok); }
.hs-vok .ic { width: 13px; height: 13px; stroke-width: 2.6; }
.hs-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 380px; }

/* El documento */
.hs-pane { position: relative; overflow: hidden; background: #EDF1EF; }
.hs-pane::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: linear-gradient(rgb(237 241 239 / 0), #EDF1EF); }
.hs-page { position: absolute; left: 50%; top: 16px; width: 556px; translate: -50% 0; padding: 20px 40px 26px; background: #fff; border-radius: 4px; box-shadow: 0 0 0 1px rgb(1 33 32 / .06), 0 20px 40px -24px rgb(1 33 32 / .4); }
.hs-firm { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--deep); }
.hs-firm i { width: 12px; height: 12px; border-radius: 3px; background: var(--deep); }
.hs-firm span { margin-left: auto; font-weight: 500; color: var(--ink-3); }
.hs-title { margin-top: 12px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.hs-meta { margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.hs-sec { margin-top: 14px; }
.hs-lab { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 12.5px; font-weight: 700; }
.hs-lab em { font-style: normal; color: var(--teal); font-variant-numeric: tabular-nums; }
.hs-ln { display: block; height: 6px; border-radius: 3px; background: #E3E9E7; }
.hs-ln2 { width: 72%; margin-top: 7px; }
.hs-strip { position: relative; display: flex; gap: 3px; height: 46px; border-radius: 6px; }
.hs-ph { flex-basis: 0; min-width: 0; overflow: hidden; display: grid; align-content: center; border-radius: 6px; background: #E4EFEB; white-space: nowrap; transition: background-color .4s, box-shadow .4s; }
.hs-ph b { padding: 0 11px; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.hs-ph small { padding: 0 11px; font-size: 11px; color: var(--ink-2); }
.hs-dw { justify-items: start; }
.hs-strip.hit .hs-new { background: var(--foam); box-shadow: inset 0 0 0 1.5px var(--teal); }
.hs-fees { display: grid; }
.hs-fr { position: relative; display: flex; justify-content: space-between; align-items: center; height: 30px; margin: 0 -8px; padding: 0 8px; border-bottom: 1px solid var(--line); border-radius: 5px; font-size: 12.5px; transition: background-color .4s; }
.hs-fr > span { color: var(--ink-2); }
.hs-fr > b { font-weight: 600; font-variant-numeric: tabular-nums; }
.hs-frn { height: 0; clip-path: inset(0 -40px); border-bottom-width: 0; }
.hs-tot { border-bottom: 0; }
.hs-tot > span { color: var(--ink); font-weight: 600; }
.hs-tot > b { font-size: 14px; }
.hs-fr.hit { background: var(--foam-2); }
/* El valor anterior, tachado al lado del nuevo, hasta tu visto bueno */
.hs-old { display: inline-block; max-width: 0; margin-right: 0; overflow: hidden; vertical-align: bottom; opacity: 0; color: var(--ember-ink); font-weight: 500; white-space: nowrap; text-decoration: line-through; text-decoration-thickness: 1.5px; }
/* Lo cambiado lleva su marca en el margen hasta tu visto bueno */
.hs-fr.hit::before, .hs-strip.hit::before { content: ""; position: absolute; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: var(--teal); }
.hs-fr.hit::before { left: -14px; }
.hs-strip.hit::before { left: -22px; }

/* La conversación */
.hs-chat { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); }
.hs-ch { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--line); flex: none; }
.hs-ch > .kbot { width: 30px; height: 30px; border-radius: 9px; }
.hs-ch b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.hs-ch small { display: block; font-size: 11.5px; color: var(--ink-3); }
.hs-log { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 16px; overflow: hidden; }
.hs-m { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.45; }
.hs-m > .kbot { width: 26px; height: 26px; border-radius: 8px; }
.hs-m > p { padding: 8px 11px; border-radius: 4px 12px 12px 12px; background: #F1F4F3; }
.hs-me { justify-content: flex-end; }
.hs-me > p { border-radius: 12px 4px 12px 12px; background: var(--deep); color: #fff; }
.hs-me > img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.hs-slot { display: grid; }
.hs-slot > * { grid-area: 1 / 1; }
.hs-wk > .hs-dots { display: flex; gap: 4px; padding: 12px 13px; }
.hs-dots i { width: 6px; height: 6px; border-radius: 50%; background: #9AA6AC; animation: hs-dot 1.2s infinite; }
.hs-dots i:nth-child(2) { animation-delay: .15s; }
.hs-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes hs-dot { 0%, 60%, 100% { opacity: .35; translate: 0 0; } 30% { opacity: 1; translate: 0 -3px; } }
.hs-exp { flex: 1; display: grid; gap: 7px; justify-items: start; padding: 10px 12px 12px; border-radius: 4px 12px 12px 12px; background: #F1F4F3; }
.hs-it { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 9px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.hs-it .ic, .hs-it img { width: 15px; height: 15px; flex: none; }
.hs-it .ic { color: var(--teal); }
.hs-sw { justify-items: start; margin-top: 4px; }
.hs-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 8px; background: var(--deep); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: box-shadow .3s; }
.hs-btn.ready { box-shadow: 0 0 0 3px #F1F4F3, 0 0 0 5px var(--teal); }
.hs-ok { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 4px; border-radius: 99px; background: var(--foam-2); color: var(--ok); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.hs-ok img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.hs-ok .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.hs-comp { display: flex; align-items: center; gap: 8px; margin: 0 14px 14px; padding: 6px 6px 6px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); flex: none; }
.hs-in { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; height: 28px; overflow: hidden; font-size: 13px; white-space: nowrap; }
/* el marcador no ocupa sitio: el cursor se queda al principio, como en un campo real */
.hs-typ:empty::before { content: "Message Kelp"; position: absolute; top: 50%; translate: 0 -50%; color: var(--ink-3); }
.hs-car { width: 1.5px; height: 16px; margin-left: 1px; background: var(--ink); opacity: 0; }
.hs-in.on .hs-car { opacity: 1; animation: hs-blink 1s steps(1) infinite; }
@keyframes hs-blink { 50% { opacity: 0; } }
.hs-snd { width: 32px; height: 32px; border-radius: 9px; background: #C5D0CD; display: grid; place-items: center; flex: none; transition: background-color .3s; }
.hs-snd.on { background: var(--deep); }
.hs-snd svg { width: 15px; height: 15px; fill: #fff; }

/* ---- 1 · Lo que la firma ya sabe: la hoja en blanco y las tres capas que la completan.
   La pila es 3D ortográfica: .sab-iso inclina (rotateX) y .sab-rz gira (rotateZ); cada capa
   flota a su altura (z) y al final todas se posan y la hoja vuelve de frente ---- */
#s-sab { --ch: 440px; }
.sab-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sab-w { fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; }
.sab-src { position: absolute; left: 0; top: 0; width: 150px; padding: 8px 10px 9px; display: grid; gap: 6px; }
.sab-sh { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.sab-live { width: 7px; height: 7px; margin: 0 1px; border-radius: 50%; background: #2DB37A; box-shadow: 0 0 0 3px rgb(45 179 122 / .2); }
.sab-tl { display: flex; gap: 6px; }
.sab-tl > img { width: 26px; height: 26px; padding: 5px; border-radius: 8px; background: #F4F7F6; box-shadow: inset 0 0 0 1px var(--line); }
.sab-won { position: relative; width: 20px; height: 26px; margin-right: 6px; border-radius: 3px; background: #fff linear-gradient(var(--deep) 0 0) 0 0 / 100% 5px no-repeat; box-shadow: 0 0 0 1px var(--line-2); }
.sab-won::before { content: ""; position: absolute; left: 4px; right: 4px; top: 10px; height: 10px; background: repeating-linear-gradient(#DCE4E1 0 2px, transparent 2px 5px); }
.sab-won b { position: absolute; right: -6px; bottom: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
.sab-won b .ic { width: 9px; height: 9px; color: #fff; stroke-width: 3.2; }
.sab-iso { position: absolute; left: 202px; top: 88px; width: 196px; height: 264px; transform-style: preserve-3d; }
.sab-rz { position: absolute; inset: 0; transform-style: preserve-3d; }
.sab-pg { position: absolute; inset: 0; border-radius: 6px; }
.sab-base { background: #fff; box-shadow: 0 0 0 1px rgb(1 33 32 / .08), 0 30px 50px -24px rgb(1 33 32 / .5); }
/* --a: 1 mientras la capa flota (lámina translúcida con canto); 0 cuando se ha posado */
.sab-ly { --a: 1; background: rgb(255 255 255 / calc(var(--a) * .34)); box-shadow: inset 0 0 0 1.5px rgb(0 74 72 / calc(var(--a) * .45)), 0 18px 30px -18px rgb(1 33 32 / calc(var(--a) * .4)); }
.sab-car { position: absolute; left: 16px; top: 28px; width: 1.5px; height: 18px; background: var(--ink); animation: hs-blink 1s steps(1) infinite; }
.sab-drop { position: absolute; left: 16px; right: 16px; top: 92px; height: 84px; display: grid; place-content: center; justify-items: center; gap: 6px; border-radius: 8px; border: 1.5px dashed var(--line-2); color: var(--ink-3); font-size: 11px; font-weight: 600; }
.sab-drop svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sab-band { position: absolute; left: 0; right: 0; top: 0; height: 16px; display: flex; align-items: center; padding: 0 12px; border-radius: 6px 6px 0 0; background: var(--deep); }
.sab-band i { width: 8px; height: 8px; border-radius: 2px; background: var(--foam); }
.sab-hd { position: absolute; left: 16px; width: 58px; height: 7px; border-radius: 3px; background: rgb(1 33 32 / .75); }
.sab-ln { position: absolute; left: 16px; right: 16px; height: 5px; border-radius: 3px; background: #E3E9E7; }
.sab-s2 { right: 64px; }
.sab-fee { position: absolute; left: 16px; right: 16px; height: 18px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--line-2); }
.sab-fee i { width: 58px; height: 5px; border-radius: 3px; background: #E3E9E7; }
.sab-fee b { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sab-cli { position: absolute; left: 16px; top: 27px; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.sab-cli .co { width: 20px; height: 20px; font-size: 8.5px; border-radius: 5px; }
.sab-chip { position: absolute; left: 16px; top: 74px; height: 22px; display: flex; align-items: center; gap: 6px; padding: 0 9px; border-radius: 6px; background: var(--foam-2); font-size: 11px; font-weight: 600; white-space: nowrap; }
.sab-chip img { width: 13px; height: 13px; }
.sab-win { position: absolute; left: 16px; right: 16px; top: 143px; height: 25px; display: flex; align-items: center; gap: 6px; padding: 0 9px; border-radius: 6px; background: var(--foam-2); box-shadow: inset 0 0 0 1.5px var(--teal); font-size: 11px; font-weight: 600; white-space: nowrap; }
.sab-win .ic { width: 12px; height: 12px; color: var(--ok); stroke-width: 2.6; }
.sab-stamp { position: absolute; right: 12px; top: 133px; rotate: -8deg; padding: 1px 6px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ok); color: var(--ok); font-size: 9.5px; font-weight: 700; }
/* esquina superior derecha de cada capa: en la pila inclinada del móvil es su punto más alto, adonde llega su cable */
.sab-pin { position: absolute; right: 0; top: 0; }
.sab-k { position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 8px; opacity: 0; z-index: 6; box-shadow: 0 0 0 3px rgb(255 255 255 / .9), 0 8px 14px -6px rgb(1 33 32 / .5); }

/* Titulares de sección a todo el ancho de la cabecera */
.st-hd { grid-column: 1 / -1; }

/* ---- 2 · La estantería: documentos reales, para vender y para entregar ---- */
.env-s { position: relative; height: 624px; margin: 0 24px 24px; border-radius: 18px; }
.env-cv { --cw: 1100px; --ch: 568px; }
.env-trk { position: absolute; inset: 0; }
.env-row { position: absolute; left: 0; right: 0; top: 0; height: 278px; display: flex; gap: 16px; padding-left: 156px; }
.env-row + .env-row { top: 290px; }
.env-row::after { content: ""; position: absolute; left: 140px; right: -10px; top: 212px; height: 8px; border-radius: 4px; background: rgb(255 255 255 / .6); box-shadow: 0 12px 20px -10px rgb(1 33 32 / .3); }
.env-lab { position: absolute; left: 0; top: 96px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.env-it { position: relative; z-index: 1; width: 224px; display: grid; grid-template-rows: 212px auto; justify-items: center; }
.env-doc { position: relative; align-self: end; display: grid; gap: 7px; align-content: start; background: #fff; border-radius: 4px; overflow: hidden; text-align: left; box-shadow: 0 0 0 1px rgb(1 33 32 / .07), 0 18px 30px -18px rgb(1 33 32 / .5); transition: translate .45s var(--ease-out), box-shadow .45s; }
.env-it.on .env-doc { translate: 0 -12px; box-shadow: 0 0 0 2px var(--teal), 0 30px 40px -20px rgb(1 33 32 / .55); }
.env-pt { width: 148px; height: 198px; padding: 30px 16px 14px; gap: 8px; }
.env-ls { width: 216px; height: 150px; padding: 16px 18px; gap: 8px; }
.env-band { position: absolute; left: 0; right: 0; top: 0; height: 16px; background: var(--deep); }
.env-k { font-size: 10.5px; font-weight: 700; color: var(--teal); }
.env-h { font-size: 13.5px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.env-l { display: block; height: 4px; border-radius: 2px; background: #E3E9E7; }
.env-s2 { width: 70%; }
.env-tb { display: grid; gap: 4px; margin-top: 4px; }
.env-tb i { height: 11px; border-bottom: 1px dashed var(--line-2); }
.env-lg { position: absolute; right: 9px; bottom: 9px; width: 17px; height: 17px; }
.env-sl { display: grid; gap: 6px; padding: 10px; border-radius: 3px; background: #F1F5F3; box-shadow: inset 0 0 0 1px var(--line); }
.env-obj { display: flex; align-items: center; gap: 5px; justify-self: start; padding: 3px 8px; border-radius: 99px; background: var(--ember-2); color: var(--ember-ink); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.env-obj .ic { width: 11px; height: 11px; }
.env-cr { display: grid; grid-template-columns: repeat(2, 24px); gap: 7px; margin: 2px 0; }
.env-case { display: flex; align-items: baseline; gap: 5px; font-size: 10.5px; color: var(--ink-2); }
.env-case b { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--ok); }
.env-kpi { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 4px; }
.env-kpi b { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.env-kpi b + b { font-size: 14px; color: var(--ink-3); }
.env-bars { display: flex; align-items: flex-end; gap: 8px; height: 62px; margin-top: 2px; border-bottom: 1px solid var(--line-2); }
.env-bars i { flex: 1; border-radius: 2px 2px 0 0; background: #BFE0D5; }
.env-bars i:last-child { background: var(--teal); }
.env-ac { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.env-ac .ic { width: 11px; height: 11px; color: var(--ok); stroke-width: 3; }
.env-ac i { flex: 1; height: 4px; border-radius: 2px; background: #E3E9E7; }
.env-ac img { width: 17px; height: 17px; border-radius: 50%; object-fit: cover; }
.env-gt { position: relative; height: 80px; margin-top: 4px; }
.env-gt i { position: absolute; top: 0; height: 9px; border-radius: 3px; background: #9FD2C2; }
.env-gt i:nth-child(2) { top: 21px; }
.env-gt i:nth-child(3) { top: 42px; background: var(--teal); }
.env-gt i:nth-child(4) { top: 63px; }
.env-gt em { position: absolute; top: 40px; width: 12px; height: 12px; margin-left: 4px; rotate: 45deg; border-radius: 2px; background: #C98A2B; box-shadow: 0 0 0 2px #fff; }
.env-fin { background: var(--deep); color: #F2FBF8; }
.env-fin .env-h { font-size: 18px; }
.env-fin .env-l { width: 60%; background: rgb(198 238 227 / .25); }
.env-vb { position: absolute; left: 16px; bottom: 12px; display: flex; align-items: center; gap: 6px; padding: 2px 9px 2px 2px; border-radius: 99px; background: var(--foam); color: var(--deep); font-size: 10.5px; font-weight: 700; }
.env-vb img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.env-cap { display: grid; gap: 2px; margin-top: 18px; text-align: center; }
.env-cap b { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.env-cap span { font-size: 13px; line-height: 1.35; color: var(--ink-2); opacity: 0; transition: opacity .35s; }
.env-it.on .env-cap span { opacity: 1; }

/* ---- 3 · Después de enviarlo: tres escenas pequeñas en fila que se animan por turnos;
   la que no actúa se atenúa. Todo se lee sin texto: una carpeta con versiones, un cambio
   marcado en el documento y una pieza ganadora que se copia ---- */
.dsp { display: grid; grid-template-columns: repeat(3, 1fr); }
.dsp-c { border-right: 1px solid var(--line); }
.dsp-c:last-child { border-right: 0; }
.dsp-s { position: relative; height: 320px; margin: 20px; border-radius: 16px; --cw: 330px; --ch: 270px; }
.dsp-t { padding: 4px 32px 40px; }
.dsp-t h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.dsp-t p { margin-top: 6px; max-width: 34ch; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.con-k, .rev-k, .reu-k { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 7px; opacity: 0; z-index: 6; box-shadow: 0 0 0 3px rgb(255 255 255 / .9), 0 8px 14px -6px rgb(1 33 32 / .5); }

/* Conectado: la carpeta de la cuenta, con las versiones anteriores dentro; la nueva entra delante */
.con-back { position: absolute; left: 56px; top: 92px; width: 218px; height: 158px; border-radius: 3px 10px 10px 10px; background: #DDBE85; }
.con-tab { position: absolute; left: 56px; top: 74px; width: 84px; height: 20px; border-radius: 8px 8px 0 0; background: #DDBE85; }
.con-sh { position: absolute; width: 84px; height: 104px; padding: 9px; border-radius: 3px; background: #FBFAF7; box-shadow: 0 0 0 1px rgb(1 33 32 / .06); }
.con-sh img { width: 14px; height: 14px; }
.con-lab { display: flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px; border-radius: 6px; background: #FFFDF8; box-shadow: 0 1px 2px rgb(60 40 0 / .2); font-size: 12px; font-weight: 600; color: var(--ink); }
.con-lab .co { width: 20px; height: 20px; font-size: 8.5px; border-radius: 5px; }
.con-pg { position: absolute; left: 117px; top: 98px; width: 96px; height: 124px; display: grid; gap: 7px; align-content: start; padding: 26px 12px 0; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px rgb(1 33 32 / .08), 0 6px 14px -8px rgb(1 33 32 / .35); }
.con-pg em { position: absolute; right: 7px; top: 7px; padding: 1px 6px; border-radius: 99px; background: var(--tint); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 10px; font-style: normal; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.con-pg i { display: block; height: 5px; border-radius: 3px; background: #E3E9E7; }
.con-pg i:first-of-type { width: 60%; background: rgb(1 33 32 / .7); }
.con-doc em { background: var(--foam-2); box-shadow: none; color: var(--ok); }
.con-s2 { width: 72%; }
.con-sent { position: absolute; left: 8px; bottom: 8px; display: flex; align-items: center; gap: 4px; padding: 3px 6px 3px 4px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px var(--line-2); }
.con-sent img { width: 12px; height: 12px; }
.con-sent .ic { width: 11px; height: 11px; color: var(--ok); stroke-width: 3; }
.con-front { position: absolute; left: 56px; top: 160px; width: 218px; height: 90px; display: grid; place-items: center; border-radius: 6px 6px 10px 10px; background: linear-gradient(#F1D9AA, #EBCF98); box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), 0 -8px 16px -10px rgb(60 40 0 / .35); }

/* Revisable: el cliente pide un cambio; Kelp tacha y reescribe la línea, sube la versión y tú das el visto bueno */
.rev-doc { position: absolute; left: 30px; top: 36px; width: 158px; height: 200px; display: grid; gap: 10px; align-content: start; padding: 16px 16px 0; border-radius: 5px; }
.rev-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rev-hd .co { width: 20px; height: 20px; font-size: 8.5px; border-radius: 5px; }
.rev-hd i { width: 48px; height: 6px; border-radius: 3px; background: rgb(1 33 32 / .7); }
.rev-v { position: absolute; right: 12px; top: 16px; }
.rev-v em { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 99px; background: var(--tint); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 10.5px; font-style: normal; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rev-v .rev-v3 { background: var(--ember-2); box-shadow: none; color: var(--ember-ink); }
.rev-v .rev-vok { background: var(--foam-2); box-shadow: none; color: var(--ok); }
.rev-vok .ic { width: 10px; height: 10px; stroke-width: 3; }
.rev-l { display: block; height: 5px; border-radius: 3px; background: #E3E9E7; }
.rev-s2 { width: 70%; }
.rev-ch { position: relative; height: 22px; }
.rev-ch::before { content: ""; position: absolute; left: -10px; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: var(--teal); opacity: 0; transition: opacity .3s; }
.rev-ch.on::before { opacity: 1; }
.rev-old { position: absolute; left: 0; right: 0; top: 2px; height: 5px; border-radius: 3px; background: #E3E9E7; transition: background-color .3s; }
.rev-ch.on .rev-old { background: #F0DDBE; }
.rev-x { position: absolute; left: -3px; right: -3px; top: 3.5px; height: 2px; border-radius: 1px; background: #C98A2B; transform-origin: left; transform: scaleX(0); }
.rev-new { position: absolute; left: 0; width: 82%; top: 14px; height: 6px; border-radius: 3px; background: var(--teal); transform-origin: left; transform: scaleX(0); }
.rev-sw { position: absolute; left: 16px; bottom: 16px; justify-items: start; }
.rev-btn { width: 32px; height: 32px; border-radius: 9px; background: var(--deep); color: #fff; display: grid; place-items: center; transition: box-shadow .3s; }
.rev-btn .ic { width: 15px; height: 15px; stroke-width: 2.6; }
.rev-btn.ready { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--teal); }
.rev-done { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 4px; border-radius: 99px; background: var(--foam-2); color: var(--ok); }
.rev-done img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.rev-done .ic { width: 14px; height: 14px; stroke-width: 2.8; }
.rev-ask { position: absolute; left: 204px; top: 50px; display: flex; align-items: flex-end; gap: 7px; }
.rev-ask img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; order: 2; box-shadow: 0 0 0 2px #fff; }
.rev-ask .card { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 11px; border-radius: 12px 12px 4px 12px; }
.rev-ask .card .ic { width: 17px; height: 17px; color: var(--teal); }
.rev-ask .card i { width: 34px; height: 5px; border-radius: 3px; background: #E3E9E7; }

/* Reutilizable: la pieza de la propuesta ganada se copia en las dos siguientes */
.reu-doc { position: absolute; top: 72px; width: 96px; height: 138px; display: grid; gap: 8px; align-content: start; padding: 11px 10px 0; border-radius: 5px; }
.reu-doc .co { width: 18px; height: 18px; font-size: 8px; border-radius: 5px; margin-bottom: 2px; }
.reu-doc > i { display: block; height: 5px; border-radius: 3px; background: #E3E9E7; }
.reu-doc > .reu-s2 { width: 66%; }
.reu-blk { position: relative; display: flex; align-items: center; gap: 3px; height: 24px; padding: 0 7px; border-radius: 6px; background: var(--foam-2); box-shadow: inset 0 0 0 1.5px var(--teal); transition: box-shadow .3s; }
.reu-blk b { flex: 1; height: 7px; border-radius: 2px; background: #9FD2C2; }
.reu-blk b:nth-child(2) { background: var(--teal); }
.reu-blk.on { box-shadow: inset 0 0 0 1.5px var(--teal), 0 0 0 4px rgb(0 74 72 / .14); }
.reu-slot { height: 24px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--line-2); background: repeating-linear-gradient(135deg, transparent 0 5px, var(--tint) 5px 6px); }
.reu-st { position: absolute; left: 50%; bottom: 13px; translate: -50% 0; rotate: -8deg; padding: 1px 7px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--ok); color: var(--ok); font-size: 10.5px; font-weight: 700; }
.reu-fly { position: absolute; left: 0; top: 0; width: 76px; opacity: 0; z-index: 5; }
/* la sombra de vuelo va en una capa aparte y se apaga al posarse en su hueco */
.reu-fly::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 10px 18px -8px rgb(1 33 32 / .45); transition: opacity .35s; }
.reu-fly.set::after { opacity: 0; }

@media (max-width: 980px) {
  .dsp { grid-template-columns: 1fr; }
  .dsp-c { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 700px) {
  /* Hero en vertical: el documento y la conversación son dos pantallas en fila del ancho del
     lienzo; la ventana pasa a la conversación cuando hablas con Kelp y al documento cuando lo cambia */
  #hstudio { height: 540px; }
  .hs-cv { --cw: calc(100% - 24px); --ch: 504px; }
  .hs-top { gap: 8px; padding: 0 12px; }
  .hs-crumb { margin-left: 2px; padding-left: 10px; }
  .hs-crumb i, .hs-doc { display: none; }
  .hs-body { grid-template-columns: 100% 100%; }
  .hs-page { left: 10px; top: 10px; translate: none; width: calc(100% - 58px); padding: 16px 16px 22px; }   /* a la derecha, el margen donde trabaja Kelp */
  .hs-title { font-size: 19px; }
  .hs-strip.hit::before { left: -12px; }
  .hs-fr.hit::before { left: -12px; }
  .hs-ph b, .hs-ph small { padding: 0 7px; }
  .hs-ph:not(.hs-new) { min-width: max-content; }
  .hs-log { gap: 12px; padding: 14px; }
  .hs-it { white-space: normal; text-wrap: balance; }
  /* #sabe en vertical: cada fuente aparece arriba, una cada vez, y su capa baja a la pila,
     que se inclina debajo */
  #s-sab { height: 470px; --cw: calc(100% - 24px); --ch: 430px; }
  .sab-iso { left: calc(50% - 98px); top: 83px; }
  .sab-stamp { font-size: 10.5px; }
  /* La estantería en móvil: una sola balda que se desliza hasta el documento que presenta Kelp,
     centrado, con los vecinos asomando; cada grupo lleva su rótulo encima */
  .env-s { height: 334px; margin: 0 16px 16px; }
  .env-cv { --cw: 100%; --ch: 306px; }
  .env-trk { inset: 28px auto 0 0; display: flex; gap: 40px; }
  .env-row, .env-row + .env-row { position: relative; top: auto; left: auto; right: auto; flex: none; padding-left: 0; }
  .env-row::after { left: 0; right: 0; }
  .env-lab { top: -24px; font-size: 13px; color: var(--ink-2); }
  .dsp-s { margin: 16px 10px; }   /* a 360 px el lienzo de 330 cabe sin encogerse */
}