/* ============================================================
   Kelp · Captación de clientes. Solo las escenas de esta página;
   hero, bloques de caso, banda, cierre y FAQ son del sistema.
   El hero es propio de esta página: la red de contactos de la firma (red-*).
   ============================================================ */

/* ---- Hero: la red de contactos de la firma. Tú y la firma en el centro; alrededor, por
   sectores y apagados, los contactos. Kelp enciende a quien tiene un motivo, le escribe, y
   cada respuesta baja como cita a tu semana ---- */
#red { height: 600px; }
.red-cv { --cw: 1104px; --ch: 520px; }
.red-dyn { position: absolute; inset: 0; }
.red-sp { position: absolute; left: 0; top: 0; width: 1104px; height: 520px; overflow: visible; pointer-events: none; }
.red-sp line { stroke: rgb(198 238 227 / .08); stroke-width: 1; }
.red-lit line { stroke: rgb(198 238 227 / .6); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.red-lab { position: absolute; translate: -50% 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: rgb(198 238 227 / .62); white-space: nowrap; }
.red-lab .ic { width: 14px; height: 14px; }
.red-dot { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: rgb(198 238 227 / .16); }
.red-c { position: absolute; width: 0; height: 0; }
.red-c img { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; filter: grayscale(1); opacity: .34; transition: filter .4s, opacity .4s, scale .4s, box-shadow .4s; }
.red-c.on { z-index: 2; }
.red-c.on img { filter: none; opacity: 1; scale: 1.3; box-shadow: 0 0 0 2px var(--foam), 0 0 0 7px rgb(198 238 227 / .14); }
.red-me { position: absolute; width: 0; height: 0; }
.red-me img { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgb(198 238 227 / .5), 0 0 0 12px rgb(198 238 227 / .08), 0 0 60px 14px rgb(198 238 227 / .16); }
.red-me b { position: absolute; top: 40px; translate: -50% 0; font-size: 13px; font-weight: 600; color: #F2FBF8; white-space: nowrap; }
.red-wk { position: absolute; overflow: hidden; box-shadow: 0 24px 48px -20px rgb(0 0 0 / .6); }
.red-wh { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 600; }
.red-wh img { width: 16px; height: 16px; }
.red-days { display: grid; grid-template-columns: repeat(5, 1fr); height: 96px; }
.red-days span { padding: 8px 12px; border-right: 1px solid var(--line); font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.red-days span:last-child { border-right: 0; }
.red-days b { margin-left: 5px; font-weight: 600; color: var(--ink); }
.red-ev { position: absolute; width: 158px; height: 46px; display: flex; align-items: center; gap: 9px; padding: 0 10px; border-radius: 8px; background: var(--foam-2); box-shadow: inset 3px 0 0 var(--teal); color: var(--ink); font-size: 12px; line-height: 1.25; z-index: 3; }
.red-ev b { display: block; font-weight: 600; white-space: nowrap; }
.red-ev small { display: block; font-size: 11px; color: var(--ink-3); }
.red-pair { display: flex; flex: none; }
.red-pair img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--foam-2); }
.red-pair img + img { margin-left: -7px; }
.red-tag { position: absolute; display: flex; align-items: center; height: 28px; padding: 0 7px; border-radius: 99px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 10px 24px -8px rgb(0 0 0 / .5); z-index: 4; }
.red-tag.r { translate: 22px -50%; }
.red-tag.l { translate: calc(-100% - 22px) -50%; flex-direction: row-reverse; }
.red-tag img, .red-tag .ic { width: 14px; height: 14px; }
.red-tag .ic { color: var(--teal); }
.red-tag b { overflow: hidden; padding: 0 4px 0 6px; font-weight: 600; }
.red-tag.l b { padding: 0 6px 0 4px; }
.red-q { position: absolute; margin-top: -26px; padding: 7px 11px; border-radius: 12px; background: #fff; color: var(--ink); font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; box-shadow: 0 12px 28px -10px rgb(0 0 0 / .55); z-index: 5; }
.red-q::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: #fff; rotate: 45deg; border-radius: 0 0 2px 0; }
.red-pk { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--foam); color: var(--deep); display: grid; place-items: center; box-shadow: 0 0 0 4px rgb(198 238 227 / .18); z-index: 6; }
.red-pk .ic { width: 12px; height: 12px; stroke-width: 2.2; }
.red-cnt { position: absolute; left: 0; display: grid; gap: 2px; }
.red-cnt p { display: flex; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 500; color: rgb(198 238 227 / .66); }
.red-cnt b { min-width: 30px; font-size: 26px; font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; color: #F2FBF8; }

/* ---- 01 · Elegir: la lista de contactos que Kelp repasa fila a fila ---- */
.pick-list { position: absolute; left: 36px; top: 8px; width: 564px; height: 404px; overflow: hidden; }
.pick-h { height: 46px; padding: 0 16px; font-size: 13px; }
.pick-h img { width: 16px; height: 16px; }
.pick-r { display: grid; grid-template-columns: 16px 30px 1fr auto; gap: 12px; align-items: center; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); transition: background-color .3s, opacity .4s; }
.pick-r.on { background: var(--foam-2); }
.pick-list.dim .pick-r:not(.pick-y) { opacity: .35; }
.pick-cb { width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--line-2); display: grid; place-items: center; color: #fff; transition: background-color .3s, box-shadow .3s; }
.pick-cb .ic { width: 11px; height: 11px; stroke-width: 3; opacity: 0; transition: opacity .3s; }
.pick-cb.on { background: var(--deep); box-shadow: none; }
.pick-cb.on .ic { opacity: 1; }
.pick-r .co, .pick-r > img { width: 30px; height: 30px; border-radius: 50%; font-size: 10.5px; }
.pick-r > img { object-fit: cover; }
.pick-n b { display: block; font-size: 13px; font-weight: 600; line-height: 1.25; }
.pick-n small { display: block; font-size: 11.5px; color: var(--ink-3); }
.pick-m { display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 8px; background: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 0 0 1.5px var(--teal), 0 8px 18px -10px rgb(1 33 32 / .45); }
.pick-m img, .pick-m .ic { width: 14px; height: 14px; }
.pick-m .ic { color: var(--teal); }
.pick-k { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 8px; box-shadow: 0 6px 14px -4px rgb(1 33 32 / .5); z-index: 4; }
.pick-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 50px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: var(--deep); color: var(--foam); font-size: 13px; font-weight: 600; }
.pick-bar > b { font-size: 16px; color: #fff; }
.pick-av { margin-left: auto; display: flex; }
.pick-av > * { width: 26px; height: 26px; border-radius: 50%; margin-left: -6px; box-shadow: 0 0 0 2px var(--deep); object-fit: cover; }

/* ---- 02 · Escribir: la plantilla tachada frente al mensaje que sale ---- */
.wr-tpl { position: absolute; left: 0; top: 96px; width: 196px; height: 228px; overflow: hidden; color: var(--ink-3); transition: opacity .4s; }
.wr-tpl.off { opacity: .6; }
.wr-mail { position: absolute; left: 220px; top: 58px; width: 380px; height: 304px; display: flex; flex-direction: column; overflow: hidden; }
.wr-bar { display: flex; align-items: center; height: 34px; padding: 0 14px; background: #EEF2F7; font-size: 12.5px; font-weight: 600; color: var(--ink); flex: none; }
.wr-tpl .wr-bar { color: var(--ink-3); }
.wr-bd { padding: 18px 16px; display: grid; gap: 14px; }
.wr-ln { position: relative; display: flex; align-items: center; height: 16px; font-size: 12.5px; }
.wr-tag { margin-left: 4px; padding: 0 5px; border-radius: 4px; background: #EDF1F5; color: #3E5470; font-size: 11.5px; font-weight: 600; }
.wr-sk { display: block; height: 6px; border-radius: 3px; background: #E4EAE8; }
.wr-x { position: absolute; left: -4px; right: -4px; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--ember-ink); transform-origin: left; }
.wr-to { display: flex; align-items: center; gap: 10px; height: 44px; margin: 0 18px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); flex: none; }
.wr-chip { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 3px; border-radius: 99px; background: #F4F6F5; color: var(--ink); font-weight: 600; }
.wr-chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.wr-txt { padding: 16px 18px 0; font-size: 14.5px; line-height: 1.65; }
.wr-hl { margin: 0 -2px; padding: 1px 2px; border-radius: 4px; transition: background-color .4s; }
.wr-hl.on { background: var(--ember); }
.wr-our.on { background: rgb(198 238 227 / .75); }
.wr-src { display: inline-grid; place-items: center; width: 20px; height: 20px; margin: 0 3px 0 5px; border-radius: 50%; background: #fff; vertical-align: -4px; box-shadow: 0 0 0 1.5px var(--teal), 0 4px 10px -4px rgb(1 33 32 / .4); }
.wr-src img, .wr-src .ic { width: 11px; height: 11px; }
.wr-src .ic { color: var(--teal); stroke-width: 2.4; }
.wr-sig { display: flex; align-items: center; gap: 9px; padding: 16px 18px 0; font-size: 13.5px; font-weight: 600; }
.wr-sig img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.wr-foot { margin-top: auto; padding: 16px 18px; border-top: 1px solid var(--line); }
.wr-sw { justify-items: start; align-items: center; }
.wr-send { display: inline-flex; align-items: center; height: 32px; padding: 0 20px; border-radius: 99px; background: #0B57D0; color: #fff; font-size: 13px; font-weight: 600; transition: box-shadow .3s; }
.wr-send.on { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #0B57D0; }
.wr-pen { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 7px; box-shadow: 0 6px 12px -4px rgb(1 33 32 / .5); z-index: 4; }

/* ---- 03 · Volver: tres meses con Nuria; Kelp espera semanas entre mensaje y mensaje ---- */
.bk-cal { position: absolute; left: 0; top: 6px; width: 600px; height: 258px; padding: 0 24px; }
.bk-h { display: flex; align-items: center; gap: 10px; height: 52px; margin: 0 -24px; padding: 0 24px; border-bottom: 1px solid var(--line); }
.bk-h .co { width: 28px; height: 28px; border-radius: 50%; font-size: 10.5px; }
.bk-h b { font-size: 13.5px; font-weight: 600; }
.bk-h small { font-size: 12px; color: var(--ink-3); }
.bk-st { margin-left: auto; }
.bk-ms { display: grid; grid-template-columns: repeat(3, 154px); justify-content: space-between; padding-top: 14px; }
.bk-m > b { display: block; height: 19px; margin-bottom: 6px; font-size: 13px; font-weight: 600; line-height: 19px; }
.bk-g { display: grid; grid-template-columns: repeat(7, 22px); grid-auto-rows: 22px; }
.bk-w { display: grid; place-items: center; font-size: 10.5px; font-weight: 600; color: var(--ink-3); }
.bk-d { display: grid; place-items: center; margin: 2px; border-radius: 50%; font-size: 10.5px; font-variant-numeric: tabular-nums; color: var(--ink-2); transition: background-color .25s, color .25s, opacity .4s; }
.bk-d.past { background: #E9EDEC; color: var(--ink-3); }
.bk-d.hit { background: var(--deep); color: var(--foam); font-weight: 700; }
.bk-d.re { background: var(--ok); color: #fff; font-weight: 700; }
.bk-d.fut { opacity: .3; }
.bk-ln { position: absolute; width: 0; border-left: 1.5px dashed rgb(0 74 72 / .4); transform-origin: top; }
.bk-mail { position: absolute; top: 292px; display: flex; white-space: nowrap; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #fff; box-shadow: var(--shadow-card); }
.bk-mail img { width: 16px; height: 16px; }
.bk-mail b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.bk-mail small { display: block; font-size: 11px; color: var(--ink-3); }
.bk-re { position: absolute; left: 411px; top: 360px; display: flex; align-items: flex-start; gap: 8px; }
.bk-re .co { width: 28px; height: 28px; border-radius: 50%; font-size: 10.5px; }
.bk-re p { padding: 7px 12px; border-radius: 3px 10px 10px 10px; background: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-card); }
.bk-k { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 7px; box-shadow: 0 0 0 3px #fff, 0 8px 16px -6px rgb(1 33 32 / .5); z-index: 4; }
.bk-k.busy svg { animation: turn 2.1s var(--ease) infinite; }

/* ---- 04 · Responder: tres formularios entran de noche y los tres reciben respuesta en minutos;
   dos se despiden con una respuesta amable y el tercero baja a tu agenda como reunión ---- */
.web-lab { position: absolute; left: 30px; top: 6px; display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: rgb(198 238 227 / .7); }
.web-lab .ic { width: 14px; height: 14px; }
.web-row { position: absolute; left: 30px; width: 540px; height: 64px; display: flex; align-items: center; }
.web-form { display: flex; align-items: center; gap: 12px; width: 196px; height: 64px; padding: 0 14px; flex: none; }
.web-form img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.web-fl { flex: 1; display: grid; gap: 7px; }
.web-fl i { display: block; height: 6px; border-radius: 3px; background: #E4EAE8; }
.web-fl i + i { width: 62%; }
.web-t { position: absolute; left: 60px; top: -11px; display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 99px; background: var(--deep); color: var(--foam); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px rgb(198 238 227 / .25); }
.web-t .ic { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.web-ln { position: relative; width: 70px; height: 2px; flex: none; background: rgb(198 238 227 / .45); transform-origin: left; }
.web-ln small { position: absolute; left: 50%; bottom: 7px; translate: -50% 0; font-size: 11.5px; font-weight: 600; color: var(--foam); white-space: nowrap; }
.web-re { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 6px; border-radius: 10px; background: #fff; box-shadow: 0 12px 28px -12px rgb(0 0 0 / .55); font-size: 13px; font-weight: 600; white-space: nowrap; flex: none; }
.web-re .kbot { width: 28px; height: 28px; border-radius: 8px; }
.web-re .kbot svg { width: 18px; height: 18px; }
.web-say { justify-items: start; }
.web-a { display: flex; align-items: center; gap: 6px; height: 32px; margin-left: 12px; padding: 0 12px; border-radius: 99px; background: rgb(198 238 227 / .14); color: #F2FBF8; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px rgb(198 238 227 / .3); transition: background-color .3s, color .3s, box-shadow .3s; }
.web-a .ic { width: 15px; height: 15px; }
.web-a.ok { background: var(--foam); color: var(--deep); box-shadow: 0 0 0 4px rgb(198 238 227 / .2); }
.web-a.no { color: rgb(198 238 227 / .55); }
.web-cal { position: absolute; left: 30px; top: 300px; width: 540px; height: 112px; }
.web-ch { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 600; }
.web-ch img { width: 16px; height: 16px; }
.web-ch b { margin-left: auto; font-weight: 600; color: var(--ink-3); }
.web-day { position: absolute; left: 30px; right: 30px; top: 46px; bottom: 10px; }
.web-h { position: absolute; top: 0; font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.web-busy, .web-free, .web-ev { position: absolute; top: 18px; bottom: 0; border-radius: 7px; }
.web-busy { background: #E6ECF3; }
.web-free { box-shadow: inset 0 0 0 1.5px rgb(0 74 72 / .4); background: repeating-linear-gradient(135deg, transparent 0 6px, rgb(0 74 72 / .05) 6px 7px); }
.web-ev { display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--deep); color: var(--foam); font-size: 11.5px; line-height: 1.2; white-space: nowrap; z-index: 3; }
.web-ev img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; }
.web-ev b { display: block; font-weight: 600; }
.web-ev small { display: block; font-size: 10.5px; color: rgb(198 238 227 / .7); }

/* ---- 05 · Citar: el correo con dos huecos y la semana del socio; los huecos del texto se iluminan a la vez en la semana ---- */
.sl-mail { position: absolute; left: 0; top: 70px; width: 236px; overflow: hidden; }
.sl-bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.sl-bar > img { width: 16px; height: 16px; }
.sl-chip { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 3px; border-radius: 99px; background: #F4F6F5; color: var(--ink); font-weight: 600; white-space: nowrap; }
.sl-chip img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.sl-txt { padding: 14px 14px 0; font-size: 14px; line-height: 1.6; }
.sl-m { margin: 0 -2px; padding: 1px 2px; border-radius: 4px; white-space: nowrap; transition: background-color .4s; }
.sl-m.on { background: rgb(198 238 227 / .9); }
.sl-sig { display: flex; align-items: center; gap: 8px; padding: 12px 14px 14px; font-size: 13px; font-weight: 600; }
.sl-sig img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.sl-re { position: absolute; left: 0; top: 262px; width: 236px; display: flex; align-items: center; gap: 9px; padding: 12px 14px; }
.sl-re img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; }
.sl-re p { font-size: 13.5px; font-weight: 600; }
.sl-cal { position: absolute; right: 0; top: 4px; width: 350px; height: 412px; overflow: hidden; }
.sl-h { height: 40px; padding: 0 14px; font-size: 13px; }
.sl-h img { width: 16px; height: 16px; }
.sl-days { display: grid; grid-template-columns: 34px repeat(5, 1fr); height: 30px; border-bottom: 1px solid var(--line); }
.sl-days span { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.sl-days b { font-size: 14px; font-weight: 600; color: var(--ink); }
.sl-grid { position: absolute; left: 34px; right: 0; top: 70px; bottom: 0; background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 40px), repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 63.2px); }
.sl-hr { position: absolute; left: 0; width: 29px; text-align: right; font-size: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sl-ev { position: absolute; width: 57px; padding: 7px 6px; border-radius: 6px; background: #E6ECF3; display: grid; gap: 5px; align-content: start; overflow: hidden; }
.sl-ev i { display: block; height: 5px; border-radius: 3px; background: rgb(62 84 112 / .3); }
.sl-ev i + i { width: 60%; }
/* un hueco libre: Kelp lo encuentra (contorno) y, cuando el correo lo nombra, se ilumina igual que en el texto */
.sl-gap { position: absolute; width: 57px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgb(0 74 72 / .45); transition: background-color .4s, box-shadow .4s; }
.sl-gap.on { background: rgb(198 238 227 / .9); box-shadow: inset 0 0 0 1.5px var(--teal); }
.sl-mt { position: absolute; width: 57px; display: flex; align-items: center; gap: 4px; padding: 0 4px; border-radius: 6px; background: var(--deep); color: var(--foam); font-size: 10.5px; white-space: nowrap; overflow: hidden; }
.sl-mt img { width: 13px; height: 13px; border-radius: 50%; object-fit: cover; flex: none; }
.sl-mt b { font-weight: 600; }
.sl-k { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 7px; box-shadow: 0 0 0 3px #fff, 0 8px 16px -6px rgb(1 33 32 / .5); z-index: 6; }

/* ---- 06 · Parar: dos sobres programados van hacia Carlos; llega su no, los sobres se paran a
   medio camino y vuelven a la bandeja de salida, y junto a él queda la fecha para volver con su motivo ---- */
.no-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.no-path path { fill: none; stroke: rgb(1 33 32 / .28); stroke-width: 1.5; stroke-dasharray: 3 6; }
.no-box { position: absolute; left: 16px; top: 210px; width: 200px; height: 120px; }
.no-lab { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; white-space: nowrap; z-index: 5; }
.no-lab img { width: 16px; height: 16px; }
.no-k { width: 22px; height: 22px; border-radius: 7px; margin-left: 2px; }
.no-k svg { width: 15px; height: 15px; }
.no-tray { position: absolute; left: 6px; right: 6px; top: 0; height: 80px; border-radius: 12px 12px 0 0; background: linear-gradient(#D9DFDC, #EEF1EF); box-shadow: inset 0 3px 8px rgb(1 33 32 / .16); }
.no-lip { position: absolute; left: 0; right: 0; top: 44px; height: 76px; border-radius: 6px 6px 16px 16px; background: #fff; box-shadow: 0 -1px 0 rgb(1 33 32 / .06), 0 18px 34px -16px rgb(1 33 32 / .55); z-index: 4; }
.no-env { position: absolute; left: 0; top: 0; width: 84px; height: 58px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px rgb(1 33 32 / .1), 0 12px 22px -10px rgb(1 33 32 / .5); z-index: 3; transition: background-color .4s; }
.no-env i { position: absolute; left: 0; right: 0; top: 0; height: 34px; background: linear-gradient(to bottom right, transparent calc(50% - 1px), rgb(1 33 32 / .22) 50%, transparent calc(50% + 1px)) left / 50% 100% no-repeat, linear-gradient(to bottom left, transparent calc(50% - 1px), rgb(1 33 32 / .22) 50%, transparent calc(50% + 1px)) right / 50% 100% no-repeat; }
.no-env small { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 12px; font-weight: 700; color: var(--teal); font-variant-numeric: tabular-nums; }
.no-env.off { background: #EEF1F0; }
.no-env.off small { color: var(--ink-3); }
.no-who { position: absolute; left: 430px; top: 166px; width: 100px; display: grid; justify-items: center; gap: 2px; text-align: center; }
.no-who .co { width: 88px; height: 88px; border-radius: 50%; font-size: 24px; margin-bottom: 10px; box-shadow: 0 0 0 5px rgb(255 255 255 / .7), 0 16px 30px -14px rgb(1 33 32 / .6); }
.no-who b { font-size: 14px; font-weight: 600; white-space: nowrap; }
.no-who small { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.no-say { position: absolute; left: 330px; top: 92px; display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-radius: 14px 14px 14px 4px; white-space: nowrap; }
.no-say img { width: 16px; height: 16px; }
.no-say p { font-size: 14px; font-weight: 600; }
.no-hl { margin: 0 -3px; padding: 1px 3px; border-radius: 4px; transition: background-color .3s; }
.no-hl.on { background: var(--ember); }
.no-cal { position: absolute; left: 316px; top: 162px; width: 92px; height: 104px; border-radius: 8px; overflow: visible; background: #fff; display: grid; justify-items: center; align-content: start; rotate: 4deg; box-shadow: 0 0 0 1px rgb(1 33 32 / .08), 0 18px 30px -14px rgb(1 33 32 / .55); }
.no-mo { width: 100%; padding: 12px 0 6px; border-radius: 8px 8px 0 0; background: var(--deep); color: var(--foam); font-size: 12.5px; font-weight: 600; text-align: center; }
.no-cal b { margin-top: 10px; font-size: 30px; font-weight: 500; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.no-pin { position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F0A35A, #B5651D); box-shadow: 0 3px 5px rgb(1 33 32 / .35); z-index: 1; }
.no-tag { position: absolute; left: 0; top: 0; display: flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 7px; background: var(--ember); color: var(--ember-ink); font-size: 12.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 16px -8px rgb(1 33 32 / .5); z-index: 6; }

/* ---- Lo que no es: seis cosas tachadas sobre la banda oscura ---- */
.cap-nots { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 56px; border-top: 1px solid rgb(198 238 227 / .12); text-align: left; }
.cap-no { padding: 30px clamp(24px, 3.5vw, 44px) 36px; border-right: 1px solid rgb(198 238 227 / .12); border-bottom: 1px solid rgb(198 238 227 / .12); }
.cap-no:nth-child(3n) { border-right: 0; }
.cap-no:nth-last-child(-n+3) { border-bottom: 0; }
.cap-no b { display: block; color: #F2FBF8; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.cap-no > span:last-child { display: block; margin-top: 6px; font-size: 14.5px; color: rgb(198 238 227 / .68); line-height: 1.5; }
.cap-x { position: relative; display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; border-radius: 11px; color: var(--foam); box-shadow: inset 0 0 0 1px rgb(198 238 227 / .25); transition: color .4s; }
.cap-x .ic { width: 19px; height: 19px; }
.cap-x::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--ember); rotate: 45deg; scale: 0 1; transition: scale .35s var(--ease-out); }
.cap-nots.on .cap-x { color: rgb(198 238 227 / .45); }
.cap-nots.on .cap-x::after { scale: 1 1; }
.cap-no:nth-child(2) .cap-x::after { transition-delay: .12s; }
.cap-no:nth-child(3) .cap-x::after { transition-delay: .24s; }
.cap-no:nth-child(4) .cap-x::after { transition-delay: .36s; }
.cap-no:nth-child(5) .cap-x::after { transition-delay: .48s; }
.cap-no:nth-child(6) .cap-x::after { transition-delay: .6s; }

@media (max-width: 980px) {
  .cap-nots { grid-template-columns: 1fr 1fr; }
  .cap-no:nth-child(3n) { border-right: 1px solid rgb(198 238 227 / .12); }
  .cap-no:nth-child(2n) { border-right: 0; }
  .cap-no:nth-last-child(-n+3) { border-bottom: 1px solid rgb(198 238 227 / .12); }
  .cap-no:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 700px) {
  /* Hero en vertical: la red se recoloca por sectores alrededor de ti (lo hace el JS desde el
     lienzo); debajo, los contadores en fila y tu semana con las citas en su columna */
  #red { height: 492px; }
  .red-cv { --cw: 372px; --ch: 470px; }
  .red-sp { width: 372px; height: 470px; }
  .red-lab { font-size: 11.5px; }
  .red-cnt { display: flex; gap: 16px; }
  .red-cnt p { gap: 6px; font-size: 12px; }
  .red-cnt b { min-width: 0; font-size: 22px; }
  .red-days span { padding: 7px 7px; font-size: 11px; }
  .red-days b { margin-left: 3px; }
  .red-ev { width: 64px; height: 52px; padding: 0 7px; font-size: 11px; line-height: 1.2; }
  .red-ev b { white-space: normal; }
  .red-ev small { font-size: 10.5px; }
  .red-pair { display: none; }
  /* Bloques: cada lienzo se recompone en vertical a 340 px, sin encoger el texto */
  #s-pick, #s-write, #s-back, #s-web, #s-slot, #s-no { margin: 12px; --cw: 340px; }
  #s-pick { height: 428px; --ch: 404px; }
  .pick-list { left: 0; width: 340px; }
  .pick-r { grid-template-columns: 16px 1fr auto; gap: 10px; padding: 0 12px; }
  .pick-r > .co, .pick-r > img { display: none; }
  .pick-m { gap: 5px; padding: 0 8px; }
  #s-write { height: 506px; --ch: 482px; }
  .wr-tpl { top: 0; width: 210px; height: 188px; }
  .wr-tpl .wr-bd { padding: 12px 14px; gap: 9px; }
  .wr-tpl .wr-ln { height: 14px; }
  .wr-mail { left: 0; top: 184px; width: 340px; height: 298px; }
  #s-back { height: 468px; --ch: 444px; }
  .bk-cal { width: 340px; height: 230px; padding: 0 10px; }
  .bk-h { display: grid; grid-template-columns: 28px 1fr auto; column-gap: 10px; align-content: center; margin: 0 -10px; padding: 0 12px; }
  .bk-h .co { grid-row: span 2; }
  .bk-h small { grid-column: 2; line-height: 1.2; }
  .bk-st { grid-column: 3; grid-row: 1 / 3; }
  .bk-ms { grid-template-columns: repeat(3, 105px); }
  .bk-g { grid-template-columns: repeat(7, 15px); grid-auto-rows: 18px; }
  .bk-d { margin: 1px 0; border-radius: 5px; }
  #s-web { height: 444px; }
  .web-lab { left: 0; }
  .web-row { left: 0; width: 340px; }
  .web-form { width: 72px; gap: 6px; padding: 0 8px; }
  .web-form img { width: 28px; height: 28px; }
  .web-t { left: 10px; }
  .web-ln { width: 30px; }
  .web-ln small { bottom: 9px; }
  .web-re { gap: 6px; padding: 0 9px 0 5px; font-size: 12.5px; }
  .web-a { margin-left: 6px; padding: 0 9px; }
  .web-cal { left: 0; width: 340px; overflow: hidden; }
  .web-day { left: 14px; right: 0; }
  #s-slot { height: 440px; --cw: 350px; --ch: 416px; }
  .sl-cal { top: 0; }
  .sl-mail { left: 0; top: 162px; width: 350px; z-index: 2; box-shadow: 0 0 0 1px rgb(1 33 32 / .06), 0 24px 48px -18px rgb(1 33 32 / .55); }
  .sl-re { left: auto; right: 8px; top: 292px; width: auto; z-index: 3; }
  #s-no { height: 394px; --ch: 370px; }
  .no-box { left: 0; top: 230px; width: 160px; }
  .no-env { width: 78px; }
  .no-who { left: 246px; top: 176px; width: 94px; }
  .no-who .co { width: 72px; height: 72px; font-size: 20px; margin-bottom: 8px; }
  .no-say { left: 34px; top: 56px; }
  .no-cal { left: 146px; top: 118px; }
  .cap-nots { grid-template-columns: 1fr; }
  .cap-no { border-right: 0 !important; border-bottom: 1px solid rgb(198 238 227 / .12) !important; }
  .cap-no:last-child { border-bottom: 0 !important; }
}