/* ============================================================
   Kelp · Venta consultiva. Solo las escenas de esta página;
   hero, bloques de caso, banda, cierre y FAQ son del sistema.
   ============================================================ */

/* ---- Hero: una venta de principio a fin. Arriba la fase, en medio lo que hace Kelp,
   abajo quién pone horas ---- */
#e2e { height: 600px; }
.e2e-cv { --cw: 1104px; --ch: 460px; }
.e2e-view, .e2e-pan, .e2e-dyn { position: absolute; inset: 0; }
.e2e-gl { position: absolute; left: 0; font-size: 12.5px; font-weight: 600; color: rgb(198 238 227 / .6); }
.e2e-who { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #F2FBF8; }
.e2e-who .kbot, .e2e-who img { width: 26px; height: 26px; }
.e2e-who .kbot { border-radius: 8px; background: var(--foam); color: var(--deep); }
.e2e-who img { border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgb(198 238 227 / .3); }
.e2e-track { position: absolute; left: 203px; width: 808px; top: 19px; height: 2px; border-radius: 2px; background: rgb(198 238 227 / .18); }
.e2e-fill { position: absolute; inset: 0; border-radius: 2px; background: var(--foam); transform-origin: left; transform: scaleX(0); }
.e2e-node { position: absolute; top: 14px; translate: -50% 0; display: grid; justify-items: center; gap: 10px; }
.e2e-node i { width: 12px; height: 12px; border-radius: 50%; background: #0B3F3B; box-shadow: inset 0 0 0 2px rgb(198 238 227 / .35); transition: background-color .3s, box-shadow .3s; }
.e2e-node b { font-size: 12.5px; font-weight: 600; color: rgb(198 238 227 / .6); white-space: nowrap; transition: color .3s; }
.e2e-node.on i { background: var(--foam); box-shadow: 0 0 0 5px rgb(198 238 227 / .15); }
.e2e-node.on b { color: #F2FBF8; }
.e2e-deal { position: absolute; top: 20px; translate: -50% -50%; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px 0 4px; border-radius: 99px; background: #fff; color: var(--ink); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 10px 24px -8px rgb(0 0 0 / .5); z-index: 5; }
.e2e-deal .co { border-radius: 50%; }
.e2e-slot { position: absolute; top: 62px; width: 186px; height: 252px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px rgb(198 238 227 / .14); background: repeating-linear-gradient(135deg, transparent 0 7px, rgb(198 238 227 / .03) 7px 8px); }
.e2e-a { position: absolute; top: 62px; width: 186px; height: 252px; display: flex; flex-direction: column; overflow: hidden; font-size: 12px; line-height: 1.4; box-shadow: 0 24px 48px -20px rgb(0 0 0 / .6); }
.e2e-h { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; flex: none; }
.e2e-h img, .e2e-h .ic { width: 15px; height: 15px; }
.e2e-h .ic { color: var(--teal); }
.e2e-h em { margin-left: auto; font-style: normal; font-weight: 500; font-size: 11px; color: var(--ink-3); }
.e2e-b { flex: 1; padding: 11px 12px; display: grid; gap: 8px; align-content: start; }
.e2e-f { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-top: 1px solid var(--line); font-size: 11.5px; font-weight: 600; color: var(--ok); flex: none; }
.e2e-f img { width: 15px; height: 15px; }
.e2e-wa .e2e-b { background: #EFE7DE; }
.e2e-bub { padding: 6px 8px; border-radius: 3px 8px 8px 8px; background: #fff; box-shadow: 0 1px .5px rgb(0 0 0 / .12); }
.e2e-bub.e2e-me { border-radius: 8px 3px 8px 8px; background: var(--foam-2); box-shadow: none; }
.e2e-pdf { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.e2e-pg { width: 20px; height: 24px; border-radius: 3px; background: #F1F7F4; box-shadow: inset 0 0 0 1px #D5DFDB; display: grid; place-items: center; color: var(--teal); flex: none; }
.e2e-pg .ic { width: 11px; height: 11px; }
.e2e-mu { font-size: 11.5px; color: var(--ink-3); }
.e2e-cold { color: var(--ember-ink); font-weight: 600; }
.e2e-li { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.e2e-li i { width: 18px; height: 18px; border-radius: 5px; background: var(--foam-2); color: var(--ok); font-style: normal; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; flex: none; }
.e2e-li .ic { width: 14px; height: 14px; color: var(--teal); }
.e2e-t { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.e2e-ln { display: grid; gap: 5px; }
.e2e-ln i { display: block; height: 5px; border-radius: 3px; background: #E4EAE8; }
.e2e-ln i:nth-child(2) { width: 88%; }
.e2e-ln i:nth-child(3) { width: 64%; }
.e2e-fee { display: flex; justify-content: space-between; padding-top: 7px; border-top: 1px dashed var(--line-2); color: var(--ink-2); }
.e2e-fee b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.e2e-src { justify-self: start; padding: 2px 8px; border-radius: 99px; background: var(--ember-2); color: var(--ember-ink); font-size: 11px; font-weight: 600; }
.e2e-ok { color: var(--ink); opacity: 0; }
.e2e-ok img { border-radius: 50%; object-fit: cover; }
.e2e-ok .ic { width: 14px; height: 14px; margin-left: auto; padding: 2px; border-radius: 50%; background: var(--deep); color: var(--foam); stroke-width: 3; }
.e2e-reply { display: flex; align-items: flex-start; gap: 7px; margin-top: 2px; opacity: 0; }
.e2e-reply span:last-child { padding: 6px 8px; border-radius: 3px 8px 8px 8px; background: #F4F6F5; font-weight: 600; }
.e2e-amt { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.e2e-amt small { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.e2e-team { display: flex; }
.e2e-team img, .e2e-team .kbot { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; margin-right: -6px; }
.e2e-team .kbot svg { width: 17px; height: 17px; }
.e2e-lane { position: absolute; left: 100px; right: 0; height: 52px; border-radius: 12px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(198 238 227 / .12); }
.e2e-k, .e2e-y { position: absolute; width: 170px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 600; white-space: nowrap; }
.e2e-k { top: 344px; background: var(--foam); color: var(--deep); }
.e2e-y { top: 408px; background: #fff; color: var(--ink); }

/* ---- 01 · Rellenar: la llamada con subtítulos en directo; tres palabras saltan del subtítulo a su
   campo de HubSpot, y tu nota de voz rellena el último ---- */
.rec-meet { position: absolute; left: 0; top: 79px; width: 322px; height: 262px; padding: 0 8px 8px; border-radius: 12px; background: #1E2528; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 24px 44px -20px rgb(1 33 32 / .6); }
.rec-mh { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px; font-size: 12.5px; font-weight: 600; color: rgb(255 255 255 / .9); }
.rec-mh img { width: 16px; height: 16px; }
.rec-live { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: rgb(255 255 255 / .6); }
.rec-live i { width: 7px; height: 7px; border-radius: 50%; background: #E5544B; }
.rec-tiles { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rec-tile { position: relative; border-radius: 8px; background: #2E3A3D; display: grid; place-items: center; transition: box-shadow .3s; }
.rec-tile.on { box-shadow: inset 0 0 0 2px #8AB4F8; }
.rec-tile small { position: absolute; left: 8px; bottom: 5px; font-size: 10.5px; font-weight: 600; color: rgb(255 255 255 / .85); }
.rec-face { width: 52px; height: 52px; border-radius: 50%; font-size: 15px; object-fit: cover; }
.rec-cc { display: grid; height: 58px; padding: 0 12px; border-radius: 8px; background: rgb(0 0 0 / .5); align-items: center; }
.rec-l { grid-area: 1 / 1; font-size: 14px; line-height: 1.35; color: #fff; }
.rec-l b { display: block; font-size: 11px; font-weight: 600; color: rgb(255 255 255 / .55); }
.rec-w { margin: 0 -3px; padding: 1px 3px; border-radius: 4px; transition: background-color .3s, color .3s; }
.rec-w.on { background: #FBE2A8; color: var(--ink); }
.rec-w.up { background: rgb(255 255 255 / .1); color: transparent; }
.rec-wa { position: absolute; left: 0; top: 140px; width: 322px; display: flow-root; border-radius: 12px; overflow: hidden; background: #EFE7DE; box-shadow: 0 24px 44px -20px rgb(1 33 32 / .5); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; }
.rec-wh { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; background: #F6F6F6; border-bottom: 1px solid #E2E2E2; font-size: 13px; font-weight: 600; }
.rec-wh img { width: 16px; height: 16px; }
.rec-wa .rec-vn { float: right; margin: 20px 18px 24px 0; }
.rec-wave i { transition: background-color .2s; }
.rec-wave i.on { background: #34B7F1; }
.rec-chip { position: absolute; left: 0; top: 0; height: 26px; padding: 0 9px; border-radius: 7px; background: var(--deep); color: var(--foam); font-size: 12.5px; font-weight: 600; display: flex; align-items: center; white-space: nowrap; box-shadow: 0 8px 16px -8px rgb(1 33 32 / .6); z-index: 8; }
.rec-card { position: absolute; left: 346px; top: 60px; width: 254px; height: 300px; padding: 0 16px; }
.rec-h { display: flex; align-items: center; gap: 10px; height: 64px; border-bottom: 1px solid var(--line); margin: 0 -16px 8px; padding: 0 16px; }
.rec-h b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.rec-h small { display: block; font-size: 11.5px; color: var(--ink-3); }
.rec-h img { width: 18px; height: 18px; margin-left: auto; }
.rec-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; height: 44px; margin: 0 -8px; padding: 0 8px; border-radius: 7px; font-size: 12.5px; transition: background-color .4s; }
.rec-f > span { color: var(--ink-3); white-space: nowrap; }
.rec-f b { font-weight: 600; white-space: nowrap; }
.rec-f .rec-e { font-weight: 500; color: var(--ink-3); font-style: italic; }
.rec-f.hit { background: var(--foam-2); }
.rec-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin: 2px 0 0; }
.rec-seg i { height: 5px; border-radius: 3px; background: #E4E9E7; transition: background-color .4s; }
.rec-seg i.on { background: var(--teal); }
.rec-by { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--ok); }
.rec-by .kbot { width: 20px; height: 20px; border-radius: 6px; }

/* ---- 02 · Escribir: la plantilla de la firma con los encabezados vacíos; cada nota de su fuente
   vuela a su hueco y se convierte en lo escrito ---- */
.prop-page { position: absolute; left: 150px; top: 0; width: 300px; height: 420px; border-radius: 6px; padding: 44px 22px 20px; overflow: hidden; box-shadow: 0 0 0 1px rgb(1 33 32 / .07), 0 30px 60px -24px rgb(1 33 32 / .45); }
.prop-band { position: absolute; left: 0; right: 0; top: 0; height: 28px; display: flex; align-items: center; gap: 8px; padding: 0 22px; background: var(--deep); color: var(--foam); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.prop-band i { width: 12px; height: 12px; border-radius: 3px; background: var(--foam); }
.prop-top { display: flex; align-items: center; font-size: 11px; color: var(--ink-3); }
.prop-k { width: 20px; height: 20px; border-radius: 6px; margin-left: auto; }
.prop-k svg { width: 13px; height: 13px; }
.prop-page h5 { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; margin: 4px 0 2px; }
.prop-sec { margin-top: 10px; display: grid; gap: 6px; }
.prop-lab { display: flex; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 700; }
.prop-num { color: var(--teal); font-variant-numeric: tabular-nums; }
.prop-gap { position: relative; height: 30px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgb(1 33 32 / .16); background: repeating-linear-gradient(135deg, transparent 0 6px, rgb(1 33 32 / .03) 6px 7px); transition: box-shadow .4s, background-color .4s; }
.prop-gap.full { box-shadow: none; background: none; }
.prop-gf { height: 52px; }
.prop-gt { height: 32px; }
.prop-in { display: grid; gap: 8px; align-content: center; height: 100%; }
.prop-l { display: block; height: 6px; }
.prop-l i { display: block; height: 100%; border-radius: 3px; background: #D9E2DF; transform-origin: left; }
.prop-fees { gap: 6px; font-size: 12px; }
.prop-fees span { display: flex; justify-content: space-between; padding-bottom: 5px; border-bottom: 1px dashed var(--line-2); }
.prop-fees b { font-weight: 600; font-variant-numeric: tabular-nums; }
.prop-team { display: flex; align-items: center; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.prop-team img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; margin-right: -6px; }
.prop-team img:last-of-type { margin-right: 8px; }
.prop-rev { position: absolute; left: 22px; bottom: 14px; display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 99px; background: var(--ember-2); color: var(--ember-ink); font-size: 12px; font-weight: 600; }
.prop-rev img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.prop-tag { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 9px; background: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 0 0 1.5px var(--teal), 0 12px 24px -12px rgb(1 33 32 / .5); z-index: 3; }
.prop-tag .ic, .prop-tag img { width: 15px; height: 15px; flex: none; }
.prop-tag .ic { color: var(--teal); }

/* ---- 03 · Aprender: la fila de ventas deja su porqué y Kelp lo filtra ---- */
.lrn-p { position: absolute; top: 0; width: 84px; display: grid; justify-items: center; gap: 8px; }
.lrn-doc { position: relative; width: 84px; height: 100px; padding: 10px 10px 0; border-radius: 4px; background: #fff; display: grid; gap: 6px; align-content: start; box-shadow: 0 0 0 1px rgb(1 33 32 / .07), 0 14px 26px -16px rgb(1 33 32 / .5); transition: box-shadow .3s; }
.lrn-doc .co { width: 18px; height: 18px; font-size: 8px; border-radius: 5px; margin-bottom: 2px; }
.lrn-doc i { display: block; height: 4px; border-radius: 2px; background: #E4EAE8; }
.lrn-doc i:nth-of-type(2) { width: 80%; }
.lrn-doc i:nth-of-type(3) { width: 60%; }
.lrn-st { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; rotate: -8deg; padding: 2px 7px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--ok); color: var(--ok); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.lost .lrn-st { box-shadow: inset 0 0 0 1.5px #C98A2B; color: var(--ember-ink); }
.lrn-p b { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.lrn-p.on .lrn-doc { box-shadow: 0 0 0 2px var(--teal), 0 14px 26px -16px rgb(1 33 32 / .5); }
.lrn-why { position: absolute; top: 136px; translate: -50% 0; height: 26px; padding: 0 10px; border-radius: 99px; background: var(--foam-2); color: var(--ok); font-size: 11.5px; font-weight: 600; display: flex; align-items: center; white-space: nowrap; }
.lrn-why.lost { background: var(--ember-2); color: var(--ember-ink); }
.lrn-hub { position: absolute; left: 268px; top: 180px; }
.lrn-pat { position: absolute; top: 196px; width: 188px; height: 32px; padding: 0 12px; border-radius: 9px; background: #fff; display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; box-shadow: 0 0 0 1.5px var(--teal), 0 12px 24px -12px rgb(1 33 32 / .5); z-index: 3; }
.lrn-pat .ic { width: 14px; height: 14px; color: var(--teal); stroke-width: 2.5; }
.lrn-pat small { margin-left: auto; font-size: 11px; color: var(--ok); }
.lrn-n { position: absolute; left: 150px; top: 272px; width: 300px; height: 146px; padding: 14px 16px; display: grid; gap: 10px; align-content: start; transition: box-shadow .3s; }
.lrn-n.on { box-shadow: 0 0 0 2px var(--teal), var(--shadow-card); }
.lrn-nh { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.lrn-slot { position: relative; height: 32px; }
.lrn-slot i { position: absolute; left: 0; top: 12px; width: 76%; height: 8px; border-radius: 4px; background: #E9EDEC; }

/* ---- 04 · Vigilar: un hilo con el cliente y los días que pasan sin respuesta ---- */
.thr-mail { position: absolute; left: 0; top: 36px; width: 380px; height: 348px; }
.thr-mail .c-h { height: 46px; font-size: 13px; }
.thr-mail .c-h img { width: 16px; height: 16px; }
.thr-m { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; padding: 14px 16px; }
.thr-m + .thr-m, .thr-sep + .thr-m { border-top: 1px solid var(--line); }
.thr-m > .kbot, .thr-m > .co { width: 30px; height: 30px; border-radius: 50%; font-size: 10.5px; }
.thr-m > .kbot svg { width: 19px; height: 19px; }
.thr-m b { display: block; font-size: 13px; font-weight: 600; }
.thr-m small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.thr-m p { font-size: 12.5px; line-height: 1.45; margin-top: 3px; }
.thr-sw { justify-items: start; margin-top: 10px; }
.thr-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; }
.thr-btn.ready { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--teal); }
.thr-sep { display: flex; align-items: center; gap: 10px; padding: 4px 16px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); transition: color .4s; }
.thr-sep::before, .thr-sep::after { content: ""; flex: 1; height: 1px; background: var(--line-2); transition: background-color .4s; }
.thr-sep.warn { color: var(--ember-ink); }
.thr-sep.warn::before, .thr-sep.warn::after { background: #E7B25C; }
.thr-cal { position: absolute; left: 410px; top: 103px; width: 190px; height: 214px; overflow: hidden; display: grid; justify-items: center; align-content: start; text-align: center; }
.thr-ch { width: 100%; padding: 10px 0; background: var(--deep); color: var(--foam); font-size: 12px; font-weight: 600; transition: background-color .4s; }
.thr-n { font-size: 84px; font-weight: 500; line-height: 1; letter-spacing: -0.05em; margin-top: 22px; font-variant-numeric: tabular-nums; transition: color .4s; }
.thr-ok { display: flex; align-items: center; gap: 6px; margin-top: 16px; padding: 4px 10px; border-radius: 99px; background: var(--foam-2); color: var(--ok); font-size: 12px; font-weight: 600; opacity: 0; }
.thr-ok .ic { width: 13px; height: 13px; stroke-width: 2.5; }
.thr-cal.warn .thr-ch { background: #C98A2B; }
.thr-cal.warn .thr-n { color: var(--ember-ink); }

/* ---- 05 · Pasar: el canal del proyecto ---- */
.hnd-ch { position: absolute; left: 60px; top: 22px; width: 480px; height: 376px; display: flex; flex-direction: column; }
.hnd-top img { width: 16px; height: 16px; }
.hnd-top { height: 50px; font-size: 13.5px; }
.hnd-ppl { margin-left: auto; display: flex; }
.hnd-ppl img, .hnd-ppl .kbot { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; margin-left: -6px; }
.hnd-ppl .kbot svg { width: 16px; height: 16px; }
.hnd-body { flex: 1; padding: 14px 18px; display: grid; gap: 14px; align-content: start; }
.hnd-sys { justify-self: center; display: flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 99px; background: #F4F6F5; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.hnd-sys img { width: 16px; height: 16px; }
.hnd-m { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }
.hnd-m > img, .hnd-m > .kbot { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.hnd-m > .kbot svg { width: 19px; height: 19px; }
.hnd-m > div { display: grid; gap: 6px; justify-items: start; }
.hnd-m b { font-size: 12.5px; font-weight: 600; }
.hnd-m p { font-size: 13px; line-height: 1.45; }
.hnd-men { color: #4F55C4; font-weight: 600; border-radius: 4px; transition: background-color .3s; }
.hnd-men.on { background: #E8E9FB; }
.hnd-pr { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--foam-2); font-size: 12.5px; font-weight: 600; }
.hnd-pr img, .hnd-pr .ic { width: 15px; height: 15px; }
.hnd-pr .ic { color: var(--teal); }
.hnd-att { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 2px; padding: 10px 12px; border-radius: 10px; box-shadow: 0 0 0 1px var(--line-2); }
.hnd-att img { width: 20px; height: 20px; }
.hnd-att b { display: block; font-size: 12.5px; font-weight: 600; }
.hnd-att small { display: block; font-size: 11.5px; color: var(--ink-3); }
.hnd-av { margin-left: auto; display: flex; }
.hnd-av img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; margin-left: -5px; }

/* ---- 06 · Preparar: el móvil en el centro ---- */
.brf-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.brf-wires path { fill: none; stroke: rgb(198 238 227 / .35); stroke-width: 1.5; stroke-dasharray: 2 5; }
.brf-n img { width: 24px; height: 24px; }

#s-brf { --ch: 500px; }
.brf-n { position: absolute; width: 50px; display: grid; justify-items: center; gap: 8px; }
.brf-n i { width: 50px; height: 50px; border-radius: 14px; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow-card); transition: box-shadow .3s; }
.brf-n small { font-size: 12px; font-weight: 600; color: rgb(198 238 227 / .8); white-space: nowrap; }
.brf-n.on i { box-shadow: 0 0 0 3px var(--foam), 0 14px 30px -12px rgb(0 0 0 / .6); }
.brf-n .ic { width: 20px; height: 20px; color: var(--teal); }
.brf-ph { position: absolute; left: 178px; top: 20px; width: 245px; height: 506px; }
.brf-ph .iph { zoom: .8; }
.brf-th { justify-content: flex-start; }
.brf-th .wm { opacity: 0; }
.brf-pk { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--foam); box-shadow: 0 0 0 4px rgb(198 238 227 / .2); opacity: 0; z-index: 5; }

/* ---- Pantallas estrechas ---- */
@media (max-width: 700px) {
  /* Hero: la venta entera no cabe a lo ancho; el lienzo es una ventana que sigue a la oportunidad
     y centra la fase en curso (el JS la desplaza con el trato). Lo ya hecho se funde por la
     izquierda bajo los rótulos y la fase siguiente asoma por la derecha */
  #e2e { height: 480px; }
  .e2e-cv { --cw: 372px; }
  .e2e-view { -webkit-mask: linear-gradient(to right, transparent 84px, #000 124px) no-repeat; mask: linear-gradient(to right, transparent 84px, #000 124px) no-repeat; }
  .e2e-deal { white-space: nowrap; }
  .e2e-lane { right: auto; width: 1004px; }
  .e2e-gl { font-size: 12px; }
  /* Bloques: cada lienzo se recompone en vertical a 340 px, sin encoger el texto */
  #s-rec, #s-prop, #s-lrn, #s-thr, #s-hnd, #s-brf { margin: 12px; --cw: 340px; }
  #s-rec { height: 448px; --ch: 424px; }
  .rec-card { left: 0; top: 0; width: 340px; height: 252px; }
  .rec-h { height: 52px; margin-bottom: 4px; }
  .rec-f { height: 38px; }
  .rec-by { bottom: 12px; }
  .rec-meet { top: 186px; width: 340px; height: 222px; z-index: 2; }
  .rec-face { width: 44px; height: 44px; }
  .rec-cc { height: 54px; }
  .rec-wa { top: 290px; width: 340px; }
  #s-prop { height: 444px; }
  .prop-page { left: 20px; }
  #s-lrn { height: 490px; --ch: 466px; }
  .lrn-p { width: 58px; gap: 6px; }
  .lrn-doc { width: 58px; height: 72px; padding: 8px 8px 0; gap: 5px; }
  .lrn-doc .co { width: 16px; height: 16px; font-size: 7.5px; }
  .lrn-st { bottom: 9px; padding: 1px 5px; }
  .lrn-hub { left: 138px; top: 168px; }
  .lrn-pat { top: 244px; }
  .lrn-pat + .lrn-pat { top: 282px; }
  .lrn-n { left: 20px; top: 326px; height: 140px; }
  #s-thr { height: 446px; --ch: 422px; }
  .thr-cal { left: 0; top: 0; width: 340px; height: 60px; display: flex; align-items: center; gap: 14px; padding-right: 14px; }
  .thr-ch { width: auto; align-self: stretch; display: flex; align-items: center; padding: 0 14px; }
  .thr-n { font-size: 40px; margin: 0; }
  .thr-ok { margin: 0 0 0 auto; }
  .thr-mail { top: 72px; width: 340px; height: 350px; }
  #s-hnd { height: 424px; --ch: 400px; }
  .hnd-ch { left: 0; top: 0; width: 340px; height: 400px; }
  .hnd-body { padding: 12px 14px; gap: 12px; }
  #s-brf { height: 504px; --ch: 480px; }
  .brf-ph { left: 47px; top: 108px; }
}