/* ============================================================
   Kelp · Gestión de cuenta. Solo las escenas de esta página;
   bloques de caso, banda, cierre y FAQ son del sistema.
   ============================================================ */
.pul-bot.busy svg, .sig-bot.busy svg, .ren-bot.busy svg, .amp-k.busy svg { animation: turn 2.1s var(--ease) infinite; }

/* ---- Hero: tu cartera. Cada cuenta es un bloque del tamaño de lo que factura (flex-grow en
   miles de euros al año) y del color de su salud: verde si está sana, ámbar si se enfría,
   claro si crece. Sin cifras por cuenta: el estado se lee por el color y el total, arriba ---- */
#cartera { height: 600px; }
.cart-cv { --cw: 1104px; --ch: 500px; --cart-cold: #E7B25C; }
.cart-hd { position: absolute; left: 0; right: 0; top: 0; height: 64px; display: flex; align-items: flex-end; justify-content: space-between; }
.cart-tot { margin-left: 4px; }
.cart-tot small { display: block; font-size: 13px; font-weight: 600; line-height: 1.2; color: rgb(198 238 227 / .6); }
.cart-tot p { display: flex; align-items: baseline; gap: 7px; margin-top: 5px; white-space: nowrap; }
.cart-sum { font-size: 32px; font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; color: #F2FBF8; font-variant-numeric: tabular-nums; }
.cart-tot em { font-style: normal; font-size: 15px; font-weight: 500; color: rgb(198 238 227 / .6); }
.cart-plus { align-self: center; margin-left: 6px; padding: 3px 10px; border-radius: 99px; background: var(--foam); color: var(--deep); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* la leyenda: cada estado se enciende la primera vez que aparece en el mapa */
.cart-key { display: flex; gap: 22px; margin-bottom: 6px; }
.cart-k { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgb(198 238 227 / .4); white-space: nowrap; transition: color .4s; }
.cart-k::before { content: ""; width: 14px; height: 14px; border-radius: 4px; opacity: .45; transition: opacity .4s; }
.cart-k.on { color: #F2FBF8; }
.cart-k.on::before { opacity: 1; }
.cart-kok::before { background: #4FA488; }
.cart-kcold::before { background: var(--cart-cold); }
.cart-kup::before { background: var(--foam); }
/* el mapa */
.cart-map { position: absolute; left: 0; right: 0; top: 88px; bottom: 0; display: flex; gap: 8px; }
.cart-col, .cart-row { display: flex; gap: 8px; flex-basis: 0; min-width: 0; min-height: 0; }
.cart-col { flex-direction: column; }
.cart-acc { position: relative; flex-basis: 0; min-width: 0; min-height: 0; padding: 16px 18px; border-radius: 14px; overflow: hidden; color: #F2FBF8; background: linear-gradient(160deg, rgb(79 164 136 / .62), rgb(79 164 136 / .34)); box-shadow: inset 0 0 0 1px rgb(198 238 227 / .2), inset 0 1px 0 rgb(255 255 255 / .1); transition: color .5s; }
.cart-acc > b { position: relative; display: block; font-size: 17px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-cold, .cart-up { position: absolute; inset: 0; border-radius: inherit; opacity: 0; }
.cart-cold { background: linear-gradient(160deg, #EDBE72, #D99B48); box-shadow: inset 0 0 0 1px rgb(255 240 210 / .5); }
.cart-up { background: linear-gradient(160deg, #E4F8F1, var(--foam)); box-shadow: 0 0 0 1px rgb(255 255 255 / .6), 0 0 40px 4px rgb(198 238 227 / .28); }
.cart-acc.dk { color: var(--deep); }

/* ---- 01 · Vigilar: la lista de cuentas; Kelp la recorre y sube la que se enfría ---- */
.pul-list { position: absolute; left: 46px; top: 24px; width: 398px; height: 372px; overflow: hidden; }
.pul-hd { display: flex; align-items: center; gap: 9px; height: 50px; padding: 0 18px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.pul-hd img { width: 17px; height: 17px; }
.pul-cols, .pul-row { display: grid; grid-template-columns: 1fr 98px 58px; gap: 14px; align-items: center; padding: 0 18px; }
.pul-cols { height: 32px; border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.pul-rows { position: relative; height: 290px; }
.pul-row { position: absolute; left: 0; right: 0; height: 58px; border-bottom: 1px solid var(--line); font-size: 13px; background: #fff; }
.pul-n { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.pul-n b { font-weight: 600; }
.pul-d { justify-self: start; margin-left: -9px; padding: 3px 9px; border-radius: 99px; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; transition: background-color .4s, color .4s; }
.pul-d b { font-weight: inherit; }
.pul-sw { justify-items: start; }
.pul-row.cold .pul-d { background: var(--ember-2); color: var(--ember-ink); font-weight: 600; }
.pul-row.fresh .pul-d { background: var(--foam-2); color: var(--ok); font-weight: 600; }
.pul-bars { display: flex; align-items: flex-end; gap: 3px; height: 24px; }
.pul-bars i { width: 6px; border-radius: 2px; background: #BFD9CF; transition: background-color .4s; }
.pul-row.cold .pul-bars i { background: #E7B25C; }
.pul-row.fresh .pul-bars i:last-child { background: var(--teal); }
.pul-scan { position: absolute; left: 0; right: 0; top: 0; height: 58px; background: rgb(0 74 72 / .06); box-shadow: inset 3px 0 0 var(--teal); z-index: 2; pointer-events: none; }
.pul-bot { position: absolute; left: 6px; top: 0; width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 0 0 3px rgb(255 255 255 / .9), 0 10px 20px -8px rgb(1 33 32 / .5); z-index: 5; }
.pul-mail { position: absolute; left: 262px; top: 214px; width: 338px; height: 184px; display: flex; flex-direction: column; box-shadow: 0 0 0 1px rgb(1 33 32 / .07), 0 30px 60px -24px rgb(1 33 32 / .55); z-index: 6; }
.pul-mh { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.pul-mh .kbot { width: 22px; height: 22px; border-radius: 6px; }
.pul-mh img { width: 16px; height: 16px; margin-left: auto; }
.pul-to { display: flex; align-items: center; gap: 7px; padding: 11px 14px 0; font-size: 12px; color: var(--ink-3); }
.pul-to .co { width: 20px; height: 20px; border-radius: 50%; font-size: 10px; }
.pul-to b { color: var(--ink); font-weight: 600; }
.pul-tx { padding: 9px 14px 0; font-size: 13.5px; line-height: 1.45; }
.pul-tx span { display: inline-block; }
.pul-ft { margin-top: auto; display: flex; align-items: center; justify-content: flex-end; padding: 10px 14px 12px; }
.pul-btn { display: inline-flex; align-items: center; height: 30px; padding: 0 16px; border-radius: 7px; background: var(--deep); color: #fff; font-size: 12.5px; font-weight: 600; transition: box-shadow .3s; }
.pul-btn.ready { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--teal); }

/* ---- 02 · Enterarse: la prensa del día; Kelp recorta la noticia y trae la jugada ---- */
.sig-pg { position: absolute; left: 18px; top: 22px; width: 282px; height: 376px; padding: 14px 16px; border-radius: 3px; background: #FBFAF6; overflow: hidden; box-shadow: 0 0 0 1px rgb(1 33 32 / .08), 0 18px 36px -18px rgb(1 33 32 / .45); }
.sig-p1 { rotate: -1.6deg; z-index: 4; }
.sig-p2 { rotate: 1.4deg; z-index: 3; }
.sig-p3 { z-index: 1; }
.sig-mast { display: block; padding-bottom: 6px; margin-bottom: 14px; border-bottom: 3px double rgb(1 33 32 / .45); font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.sig-sk { display: grid; gap: 8px; }
.sig-sk i, .sig-cols i, .sig-ls i { display: block; height: 5px; border-radius: 2px; background: #DAD8D0; }
.sig-sk .sig-hd { height: 12px; width: 82%; margin-top: 6px; background: #BDBBB2; }
.sig-sk .sig-img { height: 96px; background: #E8E5DC; }
.sig-hole { display: block; height: 174px; margin: 0 -2px 14px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px rgb(1 33 32 / .16); background: repeating-linear-gradient(135deg, transparent 0 7px, rgb(1 33 32 / .035) 7px 8px); }
.sig-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.sig-clip { position: absolute; left: 32px; top: 84px; width: 254px; height: 172px; padding: 10px; border-radius: 3px; background: #FBFAF6; z-index: 2; transition: box-shadow .3s; }
.sig-clip.up { box-shadow: 0 0 0 1px rgb(1 33 32 / .1), 0 24px 40px -16px rgb(1 33 32 / .55); }
.sig-clip.in { box-shadow: 0 0 0 1px rgb(1 33 32 / .1), 0 8px 16px -10px rgb(1 33 32 / .4); }
.sig-clip > b { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; }
.sig-cb { display: flex; gap: 10px; margin-top: 12px; }
.sig-ph { width: 66px; height: 74px; border-radius: 2px; background: #E4E1D7; display: grid; place-items: center; color: #A6A398; flex: none; }
.sig-ph .ic { width: 26px; height: 26px; }
.sig-ls { flex: 1; display: grid; gap: 8px; align-content: start; padding-top: 4px; }
.sig-ls i:nth-child(4) { width: 64%; }
.sig-cut { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 5; }
.sig-cut path { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; }
.sig-bot { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 8px; box-shadow: 0 0 0 3px rgb(255 255 255 / .9), 0 8px 16px -6px rgb(1 33 32 / .5); z-index: 6; }
.sig-news { position: absolute; inset: 0; z-index: 4; }
/* la ficha del contacto en el CRM: el recorte se queda en ella, el cargo se actualiza y Kelp propone el gesto */
.sig-ct { position: absolute; left: 310px; top: 30px; width: 288px; z-index: 3; display: grid; justify-items: start; gap: 12px; padding-bottom: 16px; }
.sig-ch { display: flex; align-items: center; gap: 8px; width: 100%; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.sig-ch img { width: 16px; height: 16px; }
.sig-id { display: flex; align-items: center; gap: 12px; padding: 4px 16px 0; }
.sig-av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #3A5BA0; color: #fff; font-size: 15px; font-weight: 600; }
.sig-nm b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.sig-role { display: grid; margin-top: 2px; justify-items: start; }
.sig-role small { padding: 1px 6px; margin-left: -6px; border-radius: 5px; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); white-space: nowrap; transition: background-color .5s; }
.sig-role em { font-style: normal; font-weight: 700; color: var(--ink); }
.sig-role.new small { background: var(--ember-2); }
.sig-src { display: flex; align-items: center; gap: 6px; margin-left: 16px; padding: 3px 10px 3px 7px; border-radius: 99px; background: var(--foam-2); color: var(--ok); font-size: 12px; font-weight: 600; }
.sig-src .ic { width: 13px; height: 13px; }
.sig-att { display: block; width: 160px; height: 108px; margin-left: 16px; }
.sig-dr { display: flex; align-items: center; gap: 8px; width: calc(100% - 32px); margin-left: 16px; padding: 8px 8px 8px 8px; border-radius: 9px; box-shadow: 0 0 0 1px var(--line-2); font-size: 12.5px; }
.sig-dr .kbot { width: 22px; height: 22px; border-radius: 6px; }
.sig-dr img { width: 15px; height: 15px; }
.sig-dr b { font-weight: 600; white-space: nowrap; }
.sig-rv { margin-left: auto; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; background: var(--deep); color: #fff; font-size: 11.5px; font-weight: 600; transition: box-shadow .3s; }
.sig-rv.ready { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--teal); }

/* ---- 03 · Preparar a tiempo: arriba hoy y la fecha de renovación, con el margen entre las
   dos; debajo, el dossier que Kelp monta hoja a hoja, cada una desde su fuente ---- */
.ren-ln { position: absolute; left: 64px; right: 64px; top: 57px; height: 2px; border-radius: 2px; background: rgb(1 33 32 / .16); }
.ren-br { position: absolute; left: 0; top: 0; width: 600px; height: 60px; overflow: visible; }
.ren-br path { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100 100; }
.ren-mg { position: absolute; left: 300px; top: 31px; translate: -50% -50%; padding: 3px 12px; border-radius: 99px; background: var(--foam-2); box-shadow: inset 0 0 0 1px rgb(0 74 72 / .22); color: var(--ok); font-size: 13px; font-weight: 600; white-space: nowrap; }
.ren-node { position: absolute; top: 52px; translate: -50% 0; display: grid; justify-items: center; text-align: center; white-space: nowrap; }
.ren-node > i { width: 12px; height: 12px; margin-bottom: 8px; border-radius: 50%; background: var(--deep); box-shadow: 0 0 0 4px #FBF9F4; }
.ren-node b { font-size: 13px; font-weight: 600; line-height: 1.25; }
.ren-node small { font-size: 12px; line-height: 1.3; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ren-now { left: 64px; }
.ren-end { left: 536px; }
.ren-end > i { background: #E7B25C; }
.ren-flag { position: absolute; left: calc(50% - 1px); top: -28px; width: 2px; height: 34px; border-radius: 1px; background: var(--ink-2); }
.ren-flag .co { position: absolute; left: 2px; top: 0; border-radius: 1px 6px 6px 1px; }
.ren-rdy { position: absolute; left: 92px; top: 76px; }
.ren-src { position: absolute; left: 40px; width: 48px; height: 48px; border-radius: 13px; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 1px rgb(1 33 32 / .07), 0 10px 20px -12px rgb(1 33 32 / .45); transition: box-shadow .3s; }
.ren-src img { width: 24px; height: 24px; }
.ren-src.on { box-shadow: 0 0 0 2px var(--teal), 0 10px 20px -12px rgb(1 33 32 / .45); }
.ren-pg { position: absolute; left: 168px; width: 280px; height: 186px; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px rgb(1 33 32 / .07), 0 -8px 18px -12px rgb(1 33 32 / .3), 0 24px 44px -22px rgb(1 33 32 / .5); }
.ren-ph { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 600; }
.ren-ph img { width: 16px; height: 16px; }
.ren-ph b { margin-left: auto; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ren-b .ren-ph b { color: var(--ok); }
.ren-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; padding: 14px; }
.ren-grid i { position: relative; height: 34px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px var(--line-2); overflow: hidden; }
.ren-grid i::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: var(--t); }
.ren-grid i::after { content: ""; position: absolute; left: 5px; right: 7px; top: 14px; height: 3px; border-radius: 2px; background: #E4EAE8; box-shadow: 0 7px 0 #E4EAE8; }
.ren-bars { display: flex; align-items: flex-end; gap: 22px; height: 118px; margin: 0 22px; padding: 16px 12px 0; border-bottom: 1.5px solid var(--line-2); }
.ren-bars i { flex: 1; border-radius: 5px 5px 0 0; background: #BFD9CF; }
.ren-bars i:last-child { background: var(--teal); }
.ren-c .ren-ph .co { margin-left: auto; width: 24px; height: 24px; }
.ren-lines { display: grid; gap: 10px; padding: 18px 16px 0; }
.ren-lines i { display: block; height: 6px; border-radius: 3px; background: #D9E2DF; transform-origin: left; }
.ren-sw { position: absolute; right: 14px; bottom: 14px; }
.ren-btn { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 7px; background: var(--deep); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: box-shadow .3s; }
.ren-btn.ready { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--teal); }
.ren-bot { position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 0 0 3px rgb(255 255 255 / .9), 0 10px 20px -8px rgb(1 33 32 / .5); z-index: 6; }

/* ---- 04 · Acordarse: la ficha de la persona, el día que toca y el mensaje ---- */
#s-per { --ch: 440px; }
.per-mail { position: absolute; left: 0; top: 0; width: 300px; height: 98px; padding: 12px 14px; }
.per-mh { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.per-mh img { width: 16px; height: 16px; }
.per-mh b { font-weight: 600; }
.per-mh em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.per-sk { display: block; width: 78%; height: 6px; margin: 12px 0 9px; border-radius: 3px; background: #E4EAE8; }
.per-q { font-size: 13.5px; line-height: 1.4; }
.per-hl { padding: 1px 3px; margin: 0 -3px; border-radius: 4px; font-weight: 600; background-image: linear-gradient(#FBE2A8, #FBE2A8); background-repeat: no-repeat; background-size: 0% 100%; }
.per-card { position: absolute; left: 0; top: 118px; width: 300px; height: 302px; padding: 0 16px; }
.per-top { display: flex; align-items: center; gap: 11px; height: 76px; margin: 0 -16px 6px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.per-top b { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.per-top small { display: block; font-size: 12px; color: var(--ink-3); }
.per-av { width: 44px; height: 44px; border-radius: 50%; background: #3A5BA0; color: #fff; font-size: 18px; font-weight: 600; display: grid; place-items: center; flex: none; }
.per-kb { position: relative; margin-left: auto; width: 26px; height: 26px; border-radius: 8px; }
.per-n { display: flex; align-items: center; gap: 10px; height: 64px; margin: 0 -8px; padding: 0 8px; border-radius: 9px; font-size: 13.5px; transition: background-color .4s, box-shadow .4s; }
.per-n + .per-n { box-shadow: 0 -1px 0 var(--line); }
.per-n b { font-weight: 600; }
.per-n small { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.per-n.on { background: var(--ember-2); box-shadow: inset 0 0 0 1.5px #E7B25C; }
.per-ic { width: 34px; height: 34px; border-radius: 10px; background: #F4F6F5; display: grid; place-items: center; flex: none; }
.per-ic img { width: 17px; height: 17px; }
.per-res { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 99px; background: var(--deep); color: var(--foam); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.per-res .ic { width: 11px; height: 11px; stroke-width: 2.4; }
.per-fly { position: absolute; left: 0; top: 0; display: flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 7px; background: var(--deep); color: var(--foam); font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 16px -8px rgb(1 33 32 / .6); z-index: 8; }
.per-wk { position: absolute; left: 324px; top: 0; width: 276px; height: 98px; padding: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.per-dy { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; border-radius: 8px; transition: background-color .35s, color .35s; }
.per-dy small { font-size: 11.5px; font-weight: 600; color: var(--ink-3); transition: color .35s; }
.per-dy b { font-size: 30px; font-weight: 500; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.per-dy.on { background: var(--deep); color: #F2FBF8; }
.per-dy.on small { color: rgb(198 238 227 / .7); }
.per-flag { position: absolute; right: 9px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: #E7B25C; box-shadow: 0 0 0 3px var(--ember-2); }
.per-dy .rp { width: 82px; height: 82px; margin: -41px 0 0 -41px; border-radius: 12px; box-shadow: 0 0 0 2px var(--teal); }
.per-wa { position: absolute; left: 324px; top: 116px; width: 276px; height: 324px; overflow: hidden; display: flex; flex-direction: column; }
.per-wh { display: flex; align-items: center; gap: 9px; height: 50px; padding: 0 12px; background: #F6F6F6; border-bottom: 1px solid #E2E2E2; flex: none; }
.per-wh .per-av { width: 30px; height: 30px; font-size: 13px; }
.per-wh b { font-size: 14px; font-weight: 600; }
.per-wb { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 12px 10px; background: #EFE7DE; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; color: #111B21; }
.per-old { display: block; flex: none; width: 58%; height: 30px; border-radius: 9px; background: #fff; box-shadow: 0 1px .5px rgb(0 0 0 / .12); align-self: flex-start; }
.per-old.per-mine { width: 44%; background: #DCF8C6; align-self: flex-end; }
.per-sent, .per-rep { max-width: 86%; padding: 6px 9px 5px; border-radius: 9px; font-size: 13.5px; line-height: 1.36; box-shadow: 0 1px .5px rgb(0 0 0 / .13); }
.per-sent { align-self: flex-end; background: #DCF8C6; }
.per-rep { align-self: flex-start; background: #fff; }
.per-sent small, .per-rep small { float: right; margin: 6px 0 -3px 8px; font-size: 10.5px; color: #667781; }
.per-sent small span { color: #53BDEB; }
.per-in { display: flex; align-items: center; gap: 8px; padding: 8px 10px 12px; background: #F6F6F6; flex: none; }
.per-fd { flex: 1; min-width: 0; min-height: 36px; display: flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px #E2E2E2; }
.per-fd .kbot { width: 24px; height: 24px; border-radius: 50%; }
.per-dr { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; font-size: 12.5px; line-height: 1.3; color: #111B21; }
.per-send { width: 34px; height: 34px; border-radius: 50%; background: #00A884; display: grid; place-items: center; flex: none; }
.per-send svg { width: 16px; height: 16px; fill: #fff; }

/* ---- 05 · Crecer: lo que pide en la reunión y por correo se convierte en ampliación ---- */
.amp-meet { position: absolute; left: 0; top: 0; width: 340px; height: 222px; padding: 8px; border-radius: 12px; background: #1E2528; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 24px 44px -20px rgb(1 33 32 / .6); }
.amp-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.amp-tile { position: relative; border-radius: 8px; background: #2E3A3D; display: grid; place-items: center; transition: box-shadow .3s; }
.amp-tile small { position: absolute; left: 8px; bottom: 5px; font-size: 10.5px; font-weight: 600; color: rgb(255 255 255 / .85); }
.amp-face { width: 38px; height: 38px; border-radius: 50%; font-size: 12.5px; object-fit: cover; }
.amp-k .amp-face { background: var(--foam); color: var(--deep); }
.amp-k.on { box-shadow: inset 0 0 0 2px var(--foam); }
.amp-cap { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 10px; border-radius: 8px; background: rgb(0 0 0 / .45); color: #fff; font-size: 12.5px; white-space: nowrap; flex: none; }
.amp-cap img { width: 16px; height: 16px; }
.amp-cap b { font-weight: 600; color: rgb(255 255 255 / .65); }
.amp-hl { padding: 1px 3px; margin: 0 -3px; border-radius: 4px; background-image: linear-gradient(#FBE2A8, #FBE2A8); background-repeat: no-repeat; background-size: 0% 100%; transition: color .3s; }
.amp-cap .amp-hl.on { color: var(--ink); }
.amp-mail { position: absolute; left: 0; top: 240px; width: 340px; height: 76px; padding: 11px 14px; }
.amp-mh { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.amp-mh img { width: 16px; height: 16px; }
.amp-mh b { font-weight: 600; }
.amp-mail p { margin-top: 8px; font-size: 13.5px; }
.amp-prop { position: absolute; left: 364px; top: 0; width: 236px; height: 316px; padding: 0 16px; overflow: hidden; }
.amp-ph { display: flex; align-items: center; gap: 9px; height: 52px; margin: 0 -16px 6px; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.amp-it { display: grid; align-items: center; height: 64px; border-bottom: 1px dashed var(--line-2); }
.amp-it > * { grid-area: 1 / 1; }
.amp-sl i { display: block; width: 72%; height: 8px; border-radius: 4px; background: #E9EDEC; }
.amp-fi { display: flex; flex-direction: column; }
.amp-fi b { font-size: 13.5px; font-weight: 600; }
.amp-fi em { font-style: normal; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.amp-tot { display: flex; justify-content: flex-end; padding-top: 16px; }
.amp-tot b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ok); font-variant-numeric: tabular-nums; }
.amp-chip { position: absolute; left: 0; top: 0; display: flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 7px; background: var(--deep); color: var(--foam); font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 16px -8px rgb(1 33 32 / .6); z-index: 8; }
.amp-grow { position: absolute; left: 0; top: 336px; width: 600px; height: 84px; padding: 14px 18px; display: grid; grid-template-columns: 1fr auto; gap: 12px 16px; align-items: center; }
.amp-acc { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; }
.amp-val { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.amp-val b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.amp-bar { grid-column: 1 / -1; display: flex; height: 12px; border-radius: 6px; background: #E9EDEC; overflow: hidden; }
.amp-bar i { display: block; height: 100%; }
.amp-a { width: 65.9%; background: var(--teal); }
.amp-b { width: 34.1%; background: #E7B25C; transform-origin: left; transform: scaleX(0); }

/* ---- 06 · Heredar: la historia de la cuenta se queda aunque cambie quien la lleva ---- */
.rel-acc { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; }
.rel-shelf { position: absolute; left: 0; top: 40px; width: 600px; height: 190px; }
.rel-o { position: absolute; bottom: 44px; width: 70px; padding: 10px 9px; border-radius: 5px 5px 2px 2px; background: #fff; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 0 0 1px rgb(1 33 32 / .07), 0 12px 22px -14px rgb(1 33 32 / .5); transition: box-shadow .35s; }
.rel-o img { width: 16px; height: 16px; margin-bottom: 4px; }
.rel-o > i { display: block; height: 4px; border-radius: 2px; background: #E4EAE8; }
.rel-o > i:nth-of-type(2) { width: 80%; }
.rel-o > i:nth-of-type(3) { width: 60%; }
.rel-o.on { box-shadow: 0 0 0 2px var(--teal), 0 12px 22px -14px rgb(1 33 32 / .5); }
.rel-doc { padding-top: 15px; background: linear-gradient(var(--teal) 0 6px, #fff 0); }
.rel-sig svg { width: 50px; height: 20px; margin-top: auto; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.rel-mini { display: flex; align-items: flex-end; gap: 4px; height: 44px; margin-top: auto; }
.rel-mini i { width: 9px; border-radius: 2px 2px 0 0; background: #4E9C82; }
.rel-line { position: absolute; left: 0; right: 0; top: 146px; height: 3px; border-radius: 2px; background: var(--deep); }
.rel-kb { position: absolute; left: 0; top: 132px; width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 0 0 4px #F4E6CB; }
.rel-y { position: absolute; top: 162px; translate: -50% 0; font-size: 12px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rel-who { position: absolute; left: 0; top: 262px; width: 228px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.rel-who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.rel-who b { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.rel-who small { display: block; font-size: 12px; color: var(--ink-3); }
.rel-st { justify-items: start; }
.rel-who .rel-bye { color: var(--ember-ink); font-weight: 600; }
.rel-brf { position: absolute; left: 252px; top: 244px; width: 348px; height: 176px; padding: 0 16px; }
.rel-bh { display: flex; align-items: center; gap: 9px; height: 50px; margin: 0 -16px 2px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.rel-bh .kbot { width: 24px; height: 24px; border-radius: 7px; }
.rel-bh b { font-size: 14px; font-weight: 600; }
.rel-clk { margin-left: auto; display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 99px; background: var(--foam-2); color: var(--ok); font-size: 11.5px; font-weight: 600; }
.rel-clk .ic { width: 13px; height: 13px; }
.rel-r { display: flex; align-items: center; gap: 10px; height: 40px; font-size: 13px; font-weight: 600; }
.rel-r + .rel-r { box-shadow: 0 -1px 0 var(--line); }
.rel-r > .ic { width: 15px; height: 15px; color: var(--teal); }
.rel-ck { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--deep); color: var(--foam); display: grid; place-items: center; }
.rel-ck .ic { width: 11px; height: 11px; stroke-width: 3; }
.rel-pk { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 3px; background: var(--teal); box-shadow: 0 0 0 3px rgb(0 74 72 / .18); z-index: 6; }

/* ============================================================
   Móvil (≤ 700 px): cada escena recompone su lienzo en vertical, de 330 px de ancho (el hero,
   352), para que se lea a tamaño real (a 360 px de pantalla el sistema lo encoge a ~0,9).
   Mismas piezas y mismo gesto; lo que iba en fila se apila
   ============================================================ */
@media (max-width: 700px) {
  /* Hero · la leyenda arriba, el total debajo y el mapa traspuesto: cada columna pasa a ser
     una franja; los bloques siguen midiendo lo que factura cada cuenta */
  #cartera { height: 520px; }
  .cart-cv { --cw: 352px; --ch: 480px; }
  .cart-hd { height: 78px; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 10px; }
  .cart-tot small { display: none; }
  .cart-tot p { margin-top: 0; }
  .cart-sum { font-size: 30px; }
  .cart-key { order: -1; gap: 16px; margin: 0; }
  .cart-k { gap: 6px; font-size: 12.5px; }
  .cart-k::before { width: 12px; height: 12px; }
  .cart-map { top: 94px; flex-direction: column; }
  .cart-col { flex-direction: row; }
  .cart-row { flex-direction: column; }
  .cart-acc { padding: 10px; border-radius: 12px; }
  .cart-acc > b { font-size: 14px; white-space: normal; }

  /* 01 · la lista a lo ancho, con Kelp en su margen; el seguimiento sube por encima */
  #s-pul { --cw: 330px; --ch: 410px; height: 470px; }
  .pul-list { left: 36px; width: 294px; }
  .pul-hd { padding: 0 14px; }
  .pul-cols, .pul-row { grid-template-columns: 1fr 64px 52px; gap: 8px; padding: 0 12px; }
  .pul-cols { line-height: 1.15; }
  .pul-bars { gap: 2px; }
  .pul-bars i { width: 4.5px; }
  .pul-bot { left: 3px; }
  .pul-mail { left: 16px; top: 206px; width: 314px; }

  /* 02 · el periódico ocupa la escena; al recortar la noticia deja sitio a la ficha, que
     aparece en su lugar */
  #s-sig { --cw: 330px; --ch: 380px; height: 420px; }
  .sig-pg { left: 15px; top: 10px; width: 300px; height: 360px; }
  .sig-clip { left: 29px; top: 72px; }
  .sig-ct { left: 21px; top: 10px; }

  /* 03 · hoy y la renovación a lo ancho; las fuentes en el margen y el dossier al lado */
  #s-ren { --cw: 330px; --ch: 420px; height: 480px; }
  .ren-br { width: 330px; }
  .ren-ln { left: 40px; right: 40px; }
  .ren-mg { left: 165px; }
  .ren-now { left: 40px; }
  .ren-end { left: 290px; }
  .ren-rdy { left: 62px; }
  .ren-src { left: 8px; }
  .ren-pg { left: 76px; width: 250px; }
  .ren-grid { gap: 6px; padding: 12px; }
  .ren-bars { gap: 14px; margin: 0 16px; }

  /* 04 · el correo y los días arriba, la ficha en medio y el WhatsApp debajo */
  #s-per { --cw: 330px; --ch: 496px; height: 556px; }
  .per-mail { width: 206px; height: 92px; padding: 10px 12px; }
  .per-sk { margin: 9px 0 7px; }
  .per-q { font-size: 13px; line-height: 1.3; }
  .per-wk { left: 216px; width: 114px; height: 92px; padding: 6px; gap: 4px; }
  .per-dy b { font-size: 22px; }
  .per-dy .rp { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
  .per-card { top: 102px; width: 330px; height: 198px; padding: 0 14px; }
  .per-top { height: 56px; margin: 0 -14px 4px; padding: 0 14px; }
  .per-av { width: 36px; height: 36px; font-size: 15px; }
  .per-n { height: 46px; }
  .per-ic { width: 30px; height: 30px; }
  .per-wa { left: 0; top: 312px; width: 330px; height: 184px; }
  .per-wh { height: 40px; }
  .per-old { display: none; }
  .per-wb { padding: 8px 10px; }
  .per-in { padding: 6px 10px 8px; }

  /* 05 · la reunión en una tira, el correo, la ampliación y la cuenta que crece, apilados */
  #s-amp { --cw: 330px; --ch: 464px; height: 504px; }
  .amp-meet { width: 330px; height: 122px; }
  .amp-grid { grid-template-columns: repeat(4, 1fr); }
  .amp-face { width: 32px; height: 32px; font-size: 11px; }
  .amp-mail { top: 132px; width: 330px; height: 64px; padding: 9px 14px; }
  .amp-mail p { margin-top: 5px; }
  .amp-prop { left: 0; top: 206px; width: 330px; height: 172px; }
  .amp-ph { height: 44px; margin-bottom: 0; }
  .amp-it { height: 42px; }
  .amp-fi { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .amp-tot { padding-top: 8px; }
  .amp-grow { top: 388px; width: 330px; height: 76px; padding: 12px 14px; gap: 10px 12px; }

  /* 06 · la estantería se encoge entera (los rótulos se agrandan para leerse igual); la
     persona y el resumen, debajo */
  #s-rel { --cw: 330px; --ch: 430px; height: 470px; }
  .rel-shelf { zoom: .55; }
  .rel-y { font-size: 20px; }
  .rel-kb { width: 44px; height: 44px; top: 125px; border-radius: 12px; }
  .rel-kb svg { width: 28px; height: 28px; }
  .rel-who { top: 160px; width: 330px; padding: 12px 14px; }
  .rel-who img { width: 42px; height: 42px; }
  .rel-brf { left: 0; top: 250px; width: 330px; }
}