/* ============================================================
   Kelp · home. Solo lo específico de la home; el sistema está
   en kelp.css.
   ============================================================ */
.stage-inner { position: absolute; inset: 0; }
.stage .frond { position: absolute; z-index: -1; width: 900px; height: 900px; left: -300px; bottom: -480px; fill: rgb(198 238 227 / .07); rotate: -18deg; }
.stage-cap { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; font-size: 13px; color: rgb(198 238 227 / .7); }
.stage-cap b { color: var(--foam); font-weight: 600; }
.sim-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--foam); opacity: .7; transform-origin: 0 50%; scale: 0 1; }
.marq { overflow: hidden; padding: 30px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marq-track { display: flex; align-items: center; gap: 72px; width: max-content; animation: marq 70s linear infinite; }
.marq-track img { height: 30px; width: auto; max-width: 120px; object-fit: contain; filter: grayscale(1) brightness(.32); opacity: .7; }
.teams { --t-line: #E1E1E1; --t-ink: #242424; --t-ink-2: #616161; --t-ink-3: #8a8a8a; --t-brand: #5B5FC7;
  position: absolute; left: 50%; top: 60px; translate: -50% 0; width: 940px; height: 560px;
  display: grid; grid-template-columns: 64px 272px 1fr; grid-template-rows: 44px 1fr;
  background: #fff; color: var(--t-ink); border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 40px 90px -24px rgb(0 0 0 / .55), 0 12px 24px -12px rgb(0 0 0 / .25);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, var(--font), sans-serif; font-size: 13px; line-height: 1.42; text-align: left; }
.t-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: #EBEBEB; border-bottom: 1px solid var(--t-line); }
.t-top .arr2 { display: flex; gap: 12px; color: var(--t-ink-3); margin-left: 64px; }
.t-search { flex: 0 1 440px; margin-inline: auto; height: 28px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--t-line); display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--t-ink-3); font-size: 12.5px; }
.t-me { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; }
.t-me img, .pav img { width: 100%; height: 100%; object-fit: cover; }
.t-rail { background: #EBEBEB; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 8px; }
.t-rail a { width: 56px; padding: 7px 0 5px; border-radius: 6px; display: grid; justify-items: center; gap: 3px; font-size: 10px; color: var(--t-ink-2); position: relative; }
.t-rail a .ic { width: 20px; height: 20px; stroke-width: 1.5; }
.t-rail a.on { color: var(--t-brand); background: #fff; }
.t-rail a.on::before { content: ""; position: absolute; left: -4px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--t-brand); }
.t-list { background: #F5F5F5; border-right: 1px solid var(--t-line); display: flex; flex-direction: column; min-width: 0; }
.t-list-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; font-size: 17px; font-weight: 700; }
.t-list-h span { display: flex; gap: 12px; color: var(--t-ink-2); }
.t-sec { padding: 6px 16px; font-size: 11.5px; color: var(--t-ink-2); font-weight: 600; }
.t-items { padding: 0 6px; display: grid; gap: 1px; }
.t-item { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 6px; width: 100%; text-align: left; }
.t-item:hover { background: rgb(0 0 0 / .04); }
.t-item[aria-selected="true"] { background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.t-item > span:nth-child(2) { min-width: 0; }
.t-item .nm { display: block; font-weight: 600; font-size: 13px; }
.t-item .pv { display: block; font-size: 12px; color: var(--t-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-item .tm { font-size: 11px; color: var(--t-ink-3); align-self: start; margin-top: 2px; }
.t-item.unread .nm, .t-item.unread .pv { font-weight: 700; color: var(--t-ink); }
.gav { width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 600; background: var(--c, #6b6b6b); }
.teams .kbot { width: 32px; height: 32px; }
.t-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.t-head { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-bottom: 1px solid var(--t-line); flex: none; }
.t-head .nm { font-size: 15px; font-weight: 700; }
.t-head .tabs { display: flex; gap: 16px; margin-left: 12px; align-self: stretch; font-size: 13px; color: var(--t-ink-2); }
.t-head .tabs span { display: grid; align-items: center; }
.t-head .tabs .on { color: var(--t-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--t-brand); }
.t-head .ppl { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--t-ink-2); font-size: 12px; }
.t-thread { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 16px 22px 10px; }
.t-day { font-size: 11.5px; color: var(--t-ink-3); display: flex; align-items: center; gap: 10px; }
.t-day::before, .t-day::after { content: ""; flex: 1; height: 1px; background: var(--t-line); }
.m { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; }
.m .pav { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; }
.m .who { font-size: 12px; color: var(--t-ink-2); display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.m .who b { color: var(--t-ink); font-weight: 600; }
.m .apptag { font-size: 10px; font-weight: 600; padding: 0 4px; border-radius: 3px; background: #EBEBEB; color: var(--t-ink-2); }
.m .bub { display: inline-block; max-width: 470px; padding: 8px 12px; border-radius: 6px; background: #F5F5F5; }
.m .bub p + p, .m .bub p + ul, .m .bub ul + p { margin-top: 5px; }
.m .bub ul { padding-left: 1.1em; list-style: disc; }
.m .mention { color: var(--t-brand); font-weight: 600; }
.m.k .bub { background: #fff; box-shadow: 0 0 0 1px var(--t-line), 0 1px 2px rgb(0 0 0 / .05); }
.m .react { display: inline-flex; margin-top: 4px; font-size: 11px; padding: 1px 7px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--t-line); }
.acard { margin-top: 8px; width: 330px; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--t-line); }
.acard .ah { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--t-line); font-weight: 600; font-size: 12.5px; }
.acard .ah .doc { width: 22px; height: 26px; border-radius: 3px; background: var(--foam-2); box-shadow: inset 0 0 0 1px rgb(0 74 72 / .25); display: grid; place-items: center; color: var(--teal); }
.acard .ah .doc .ic { width: 12px; height: 12px; }
.acard .ah small { display: block; font-weight: 400; color: var(--t-ink-2); font-size: 11.5px; }
.acard .ab { display: flex; gap: 6px; padding: 8px 11px; }
.acard .ab span { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--t-line); }
.acard .ab span.p { background: var(--deep); color: #fff; box-shadow: none; }
.typing { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t-ink-3); }
.typing .kbot { width: 22px; height: 22px; border-radius: 5px; }
.t-compose { margin: 6px 22px 16px; height: 40px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--t-line), inset 0 -2px 0 var(--t-brand); display: flex; align-items: center; padding: 0 12px; color: var(--t-ink-3); flex: none; }
.cyc { display: grid; grid-template-columns: 340px 1fr; border-top: 1px solid var(--line); }
.cyc-nav { border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.cyc-it { position: relative; flex: 1; display: flex; flex-direction: column; border-bottom: 1px solid var(--line); transition: background-color .2s; }
.cyc-it:last-child { border-bottom: 0; }
.cyc-it:has(.cyc-tab[aria-selected="true"]) { background: #fff; }
.cyc-tab { display: block; width: 100%; text-align: left; padding: 22px clamp(24px, 4vw, 44px); flex: 1; }
.cyc-more { display: none; align-self: flex-start; margin: -12px clamp(24px, 4vw, 44px) 20px; font-size: 14px; }
.cyc-it:has(.cyc-tab[aria-selected="true"]) .cyc-more { display: inline-flex; }
.cyc-tab .t { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.012em; color: var(--ink-3); transition: color .2s; }
.cyc-tab .d { display: block; font-size: 14.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.45; transition: color .2s; }
.cyc-tab:hover .t { color: var(--ink); }
.cyc-tab[aria-selected="true"] .t { color: var(--ink); }
.cyc-tab[aria-selected="true"] .d { color: var(--ink-2); }
.cyc-tab .bar { position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--deep); transform-origin: top; scale: 1 0; }
.cyc-tab[aria-selected="true"] .bar { scale: 1 1; }
.cyc-stage { position: relative; height: 620px; display: flex; flex-direction: column; }
.scene { position: absolute; inset: 0; }
.scene[hidden] { display: none; }
@keyframes caret { 50% { opacity: 0; } }
.cyc-stage .scene { position: relative; inset: auto; flex: 1; display: flex; flex-direction: column; }
.cyc-stage .scene[hidden] { display: none; }
.scene .cvw { position: relative; flex: 1; }
/* posiciones fijas del lienzo de escritorio (en móvil, cada escena recoloca las suyas) */
.cap-lab { position: absolute; left: 0; top: 32px; }
.cap-n1, .cap-n2 { position: absolute; top: 340px; }
.cap-n1 { left: 0; }
.cap-n2 { left: 150px; }
.cap-hub { position: absolute; left: 368px; top: 142px; }
.ope-h1 { left: 0; }
.ope-h2 { left: 548px; }
.ope-hub { position: absolute; left: 360px; top: 150px; }
.vp-pan { position: absolute; inset: 0; }
.msrc:nth-of-type(1) { top: 56px; }
.msrc:nth-of-type(2) { top: 124px; }
.msrc:nth-of-type(3) { top: 192px; }
.msrc:nth-of-type(4) { top: 260px; }
.d2-cur { display: none; }
.cv .lab { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.cv .cnt { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cv .cnt b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-right: 5px; }
.beam { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.beam path { fill: none; stroke: rgb(0 74 72 / .3); stroke-width: 1.5; stroke-dasharray: 2 5; }
.beam .pk { fill: var(--teal); }
.av-grid { position: absolute; left: 0; top: 64px; display: grid; grid-template-columns: repeat(6, 36px); gap: 10px; }
.av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; background: #E3E8E6; color: #8A9694; position: relative; transition: filter .4s, box-shadow .4s; overflow: hidden; filter: grayscale(1) opacity(.45); }
.av.sent { background: #fff; color: var(--teal); box-shadow: inset 0 0 0 1.5px var(--teal); }
.av.replied { background: var(--foam); color: var(--deep); box-shadow: none; }
.av.replied::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; border-radius: 50%; background: var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C6EEE3' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 8px no-repeat; box-shadow: 0 0 0 2px #EAF6F1; }
.av.new { background: #fff; color: var(--ember-ink); box-shadow: inset 0 0 0 1.5px #E7B25C; }
.cal { position: absolute; left: 510px; top: 36px; width: 290px; padding: 14px; }
.cal-g { display: grid; grid-template-columns: 34px repeat(5, 1fr); grid-template-rows: 20px repeat(5, 44px); margin-top: 10px; }
.cal-g .d { font-size: 11px; font-weight: 600; color: var(--ink-3); text-align: center; }
.cal-g .h { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 3px; }
.cal-g .c { border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.mt { position: absolute; height: 38px; border-radius: 7px; background: var(--deep); color: var(--foam); font-size: 10.5px; font-weight: 600; display: flex; place-items: center; gap: 4px; align-items: center; justify-content: center; }
.mt.you { background: var(--teal); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--teal); }
.play { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 5px 10px; border-radius: 99px; background: var(--foam-2); color: var(--ok); font-size: 12px; font-weight: 600; }
.play .ic { width: 13px; height: 13px; }
.kb { position: absolute; left: 0; top: 0; width: 500px; height: 400px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rings { position: absolute; left: 0; top: 34px; display: grid; grid-template-columns: repeat(4, 104px); gap: 14px 12px; }
.ring { display: grid; justify-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink-2); position: relative; transition: opacity .5s; }
.ring .rw { position: relative; width: 78px; height: 78px; }
.ring svg { width: 78px; height: 78px; rotate: -90deg; }
.ring .bg { fill: none; stroke: rgb(1 33 32 / .08); stroke-width: 7; }
.ring .fg { fill: none; stroke: var(--teal); stroke-width: 7; stroke-linecap: round; transition: stroke .3s; }
.ring.bad .fg { stroke: #E7B25C; }
.ring .rv { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ring .rw::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; box-shadow: 0 0 0 2px var(--teal); opacity: 0; transition: opacity .25s, box-shadow .3s; }
.ring.focus .rw::after { opacity: 1; box-shadow: 0 0 0 2px #E7B25C; }
.day2 { margin: 0 clamp(24px, 4.5vw, 56px); padding: 26px 28px 20px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgb(1 33 32 / .35); }
.d2-h { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.d2-h b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.d2-h span { font-size: 13px; color: var(--ink-3); }
.d2-h .clock { font-size: 40px; line-height: 1; font-weight: 500; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.d2 { --lab: 132px; --tot: 118px; position: relative; display: grid; grid-template-columns: var(--lab) 1fr var(--tot); row-gap: 14px; align-items: center; }
.trk { position: relative; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.trk .sky { position: absolute; inset: 0; background: linear-gradient(90deg, #FDEBD0 0%, #FFF9F0 9%, #FAFBFA 30%, #F6FAF8 58%, #DCEFE7 68.5%, #2C6E63 73.5%, #0B3F3B 78%, #012120 100%); }
.trk.cop .sky { opacity: .45; }
.shift.sh-nt { background: var(--deep); color: var(--foam); }
.ln-n { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; z-index: 1; }
.ln-n .gdot { width: 24px; height: 24px; border-radius: 7px; background: #E9EDEC; display: grid; place-items: center; color: var(--ink-3); }
.ln-n .gdot .ic { width: 13px; height: 13px; }
.ln-n .kbot { width: 24px; height: 24px; border-radius: 7px; }
.ln { position: relative; height: 58px; z-index: 1; }
.ln.big { height: 132px; }
.ln.you { height: 22px; }
.ln-t { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; font-size: 12.5px; color: var(--ink-3); z-index: 1; }
.ln-t b { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.shift { position: absolute; top: 2px; height: 18px; border-radius: 99px; background: rgb(1 33 32 / .08); font-size: 10.5px; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; padding-left: 10px; }
.ev { position: absolute; top: 50%; translate: -50% -50%; opacity: 0; }
.ev.blip { width: 10px; height: 10px; border-radius: 50%; background: #9AA5A3; box-shadow: 0 0 0 4px rgb(154 165 163 / .18); }
.ev.blip span { position: absolute; top: -22px; left: 50%; translate: -50% 0; white-space: nowrap; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.ev.job { translate: 0 -50%; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 8px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgb(1 33 32 / .08), 0 6px 14px -8px rgb(1 33 32 / .35); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.ev.job .ic { width: 13px; height: 13px; color: var(--teal); }
.ev.job.hi { background: var(--deep); color: var(--foam); }
.ev.job.hi .ic { color: var(--foam); }
.ev.job.nt { background: rgb(198 238 227 / .12); color: #EAF7F2; box-shadow: inset 0 0 0 1px rgb(198 238 227 / .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ev.job.nt .ic { color: var(--foam); }
.ev.job.r1 { top: 20%; }
.ev.job.r2 { top: 50%; }
.ev.job.r3 { top: 80%; }
.axis2 { position: relative; height: 18px; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.axis2 span { position: absolute; translate: -50% 0; }
.axis2 span:first-child { translate: 0 0; }
.playhead { position: absolute; top: -8px; bottom: 24px; width: 2px; background: var(--deep); left: 132px; pointer-events: none; z-index: 2; }
.playhead::before { content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--deep); box-shadow: 0 0 0 3px #fff; }
.band-in { padding: clamp(72px, 8vw, 104px) clamp(24px, 4.5vw, 56px); display: grid; grid-template-columns: 1fr 660px; gap: 40px; align-items: center; }
.mtabs { margin-top: 32px; display: grid; gap: 2px; }
/* la pestaña activa despliega su descripción abriendo hueco (0fr → 1fr), no de golpe */
.mtab { position: relative; overflow: hidden; display: grid; grid-template-rows: auto 0fr; text-align: left; padding: 13px 16px; border-radius: 12px; color: rgb(198 238 227 / .55); transition: background-color .25s, color .25s, grid-template-rows .4s var(--ease); }
.mtab b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.mtab span { display: block; min-height: 0; overflow: hidden; opacity: 0; font-size: 14px; margin-top: 0; line-height: 1.45; color: rgb(198 238 227 / .72); transition: opacity .25s, margin-top .4s var(--ease); }
.mtab:hover { color: var(--foam); }
.mtab[aria-selected="true"] { grid-template-rows: auto 1fr; background: rgb(198 238 227 / .08); color: #F2FBF8; box-shadow: inset 0 0 0 1px rgb(198 238 227 / .12); }
.mtab[aria-selected="true"] span { opacity: 1; margin-top: 3px; transition: opacity .3s .12s, margin-top .4s var(--ease); }
/* la barra de la pestaña que termina se funde con ella, en vez de desaparecer de golpe */
.mtab .prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--foam); transform-origin: left; transform: scaleX(0); opacity: 0; transition: opacity .25s; }
.mtab[aria-selected="true"] .prog { opacity: .8; }
.stagebox { position: relative; height: 640px; }
.art-wrap { position: absolute; left: 346px; top: 0; bottom: 8px; width: 330px; display: flex; align-items: center; }
.art { position: relative; width: 330px; }
.art .card { font-size: 13px; }
.art .c-h { padding: 12px 14px; }
.art .c-b { padding: 14px; }
.wall7 { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--line); }
.wall7 .cell { position: relative; height: 112px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.wall7 .cell:nth-child(7n) { border-right: 0; }
.wall7 img { position: absolute; left: 50%; top: 50%; translate: -50% -50%; max-height: 30px; max-width: 112px; width: auto; height: auto; filter: grayscale(1) brightness(.3); opacity: .72; }
.wall-cap { padding: 14px clamp(24px, 4.5vw, 56px); font-size: 13px; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 clamp(24px, 4.5vw, 56px) clamp(56px, 7vw, 88px); }
.cellb { border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line); display: flex; flex-direction: column; }
.cellb .vis { position: relative; height: 360px; overflow: hidden; }
.cellb .txt { padding: 22px 26px 24px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cellb .txt b { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.cellb .txt span { font-size: 15px; color: var(--ink-2); }
.cellb .txt .link { margin-left: auto; font-size: 14px; }
.wkrow { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; gap: 12px; }
.wkc { width: 164px; padding: 14px; border-radius: 14px; background: #fff; box-shadow: 0 20px 40px -18px rgb(0 0 0 / .55); display: grid; gap: 6px; }
.wkh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.wkh .kbot { width: 30px; height: 30px; border-radius: 8px; }
.sw2 { display: inline-grid; justify-items: end; }
.sw2 > * { grid-area: 1 / 1; }
.wkc b { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.wkc .task { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.wkc .task .ic { width: 12px; height: 12px; }
.wkc .wprog { display: block; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 6px; }
.wkc .wprog i { display: block; height: 100%; width: 0; background: var(--teal); }
.sdh { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: var(--ink-3); }
.fan { position: absolute; left: 50%; top: 50%; width: 330px; height: 170px; translate: -50% -50%; }
.appw { position: absolute; left: 0; top: 0; width: 330px; border-radius: 12px; background: #fff; box-shadow: 0 24px 50px -20px rgb(0 0 0 / .6); overflow: hidden; font-size: 13px; transform-origin: 50% 120%; }
.appw-h { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 12.5px; }
.appw-h img { width: 18px; height: 18px; }
.appw-b { padding: 14px; display: grid; gap: 8px; }
.appw-b .me { justify-self: end; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); padding: 7px 11px; border-radius: 10px; }
.appw-b .kk { display: flex; gap: 8px; align-items: flex-start; }
.appw-b .kk .kbot { width: 24px; height: 24px; border-radius: 6px; }
.appw-b .kk > span:last-child { background: var(--foam-2); padding: 7px 11px; border-radius: 10px; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0 clamp(24px, 4.5vw, 56px) clamp(56px, 7vw, 88px); }
.trio .cellb .vis { height: 330px; }
.trio .cellb .txt { display: block; }
.trio .cellb .txt b { display: block; font-size: 17px; }
.trio .cellb .txt span { display: block; margin-top: 4px; font-size: 14.5px; }
.ans { position: absolute; left: 24px; right: 24px; top: 36px; }
.ans .c-b { font-size: 13.5px; line-height: 1.65; color: #33403f; }
.cite { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; margin-left: 3px; border-radius: 4px; background: var(--ember); color: var(--ember-ink); font-size: 10.5px; font-weight: 700; vertical-align: 1px; transition: background-color .2s, color .2s; }
.cite.on { background: var(--ember-ink); color: #fff; }
.pop { position: absolute; top: 0; left: 0; width: 250px; padding: 11px 13px; font-size: 12px; line-height: 1.45; box-shadow: 0 0 0 1px rgb(1 33 32 / .08), 0 18px 40px -16px rgb(1 33 32 / .45); }
.pop .tip { position: absolute; top: -6px; left: var(--tx, 24px); width: 12px; height: 12px; background: #fff; rotate: 45deg; box-shadow: -1px -1px 0 rgb(1 33 32 / .08); }
.pop b { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.pop b .ic { width: 13px; height: 13px; color: var(--teal); }
.pop small { display: block; color: var(--ink-3); font-size: 11px; margin: 1px 0 6px; }
.pop p { color: var(--ink-2); }
.pop mark { background: var(--ember); color: inherit; border-radius: 2px; padding: 0 1px; }
.auto { position: absolute; left: 22px; right: 22px; top: 50%; translate: 0 -50%; }
.auto-r { display: grid; grid-template-columns: 1fr 196px; align-items: center; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.auto-r:first-of-type { border-top: 0; }
.seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: 8px; background: #EEF1F0; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.seg > span { position: relative; z-index: 1; text-align: center; padding: 4px 0; transition: color .25s; }
.seg > span.on { color: var(--ink); }
.seg .th { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 6px; background: #fff; box-shadow: 0 1px 3px rgb(1 33 32 / .15); }
.av img, .flyer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av.sent { filter: grayscale(.2) opacity(.9); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--teal); }
.av.replied { filter: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--deep); overflow: visible; }
.av.replied img { border-radius: 50%; }
.av.new { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #E7B25C; filter: none; }
.av.new.replied { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--deep); }
.av.replied::after { right: -3px; bottom: -3px; z-index: 2; }
.flyer { position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #fff, 0 8px 18px -6px rgb(1 33 32 / .5); z-index: 15; opacity: 0; }
.mt .ic { width: 14px; height: 14px; stroke-width: 2; }
.mt b { font-size: 10.5px; font-weight: 700; }
.plan { position: absolute; left: 0; top: 318px; }
.torb { position: absolute; width: 40px; height: 40px; border-radius: 11px; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 1px var(--line), 0 6px 14px -8px rgb(1 33 32 / .4); opacity: .45; transition: opacity .3s, transform .3s, box-shadow .3s; }
.torb img { width: 18px; height: 18px; }
.torb.on { opacity: 1; transform: scale(1.15); box-shadow: 0 0 0 2px var(--teal), 0 8px 18px -8px rgb(1 33 32 / .5); }
.beam circle { stroke: rgb(0 74 72 / .25); stroke-width: 1.5; stroke-dasharray: 2 6; }
.acts2 { position: absolute; left: 520px; top: 20px; width: 280px; display: grid; gap: 14px; }
.act { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-card); opacity: 0; }
.act b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.aic { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.aic.doc { background: var(--foam-2); color: var(--teal); }
.aic.doc .ic { width: 22px; height: 22px; }
.aic.cal3 { background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); display: flex; flex-direction: column; font-size: 20px; font-weight: 600; line-height: 1; gap: 2px; }
.aic.cal3 small { font-size: 9.5px; font-weight: 700; color: #D9534F; letter-spacing: .06em; }
.aic.eur { background: var(--deep); color: var(--foam); font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.ring.scan .rw::after { opacity: 1; }
.aw { background: #fff; border-radius: 14px; overflow: hidden; color: var(--ink); box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 40px 80px -30px rgb(0 0 0 / .7); }
.aw-top { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; background: #F7F8F7; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.aw-top img, .aw-top .kbot { width: 18px; height: 18px; border-radius: 5px; }
.aw-top .kbot svg { width: 13px; height: 13px; }
.aw-top .sp { margin-left: auto; font-weight: 500; color: var(--ink-3); font-size: 11.5px; }
.aw-b { padding: 16px 18px 18px; }
.aw-t { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.aw-sec { margin-top: 14px; }
.aw-sec h6 { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.aw-li { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; font-size: 12.5px; line-height: 1.4; }
.aw-li .ic { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--teal); stroke-width: 2.2; }
.aw-li.hot { background: var(--foam-2); margin: 0 -8px; padding: 6px 8px; border-radius: 7px; font-weight: 600; }
.aw-li.q .ic { color: var(--ember-ink); }
.aw-kpi { display: flex; align-items: baseline; gap: 10px; }
.aw-kpi .v { font-size: 46px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.aw-kpi .v small { font-size: 20px; letter-spacing: -0.02em; color: var(--ink-3); margin-left: 2px; }
.aw-kpi .d { font-size: 12px; font-weight: 600; color: var(--ember-ink); background: var(--ember-2); padding: 3px 8px; border-radius: 99px; }
.aw-chart { position: relative; margin: 12px -4px 8px; height: 120px; }
.aw-chart svg { width: 100%; height: 100%; overflow: visible; }
.aw-tip { position: absolute; padding: 3px 8px; border-radius: 6px; background: var(--deep); color: var(--foam); font-size: 11px; font-weight: 700; translate: -50% -130%; white-space: nowrap; }
.aw-cta { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: var(--deep); color: #fff; }
.aw-cta .kbot { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--foam); color: var(--deep); }
.aw-cta span { flex: 1; font-size: 13px; font-weight: 600; }
.aw-cta small { display: block; font-size: 11px; font-weight: 500; color: rgb(198 238 227 / .7); }
.aw-cta b { font-size: 15px; color: var(--foam); }
.cov { position: relative; height: 400px; }
.cov .pg3, .cov .pg2 { position: absolute; border-radius: 8px; background: #F3F4F2; box-shadow: 0 0 0 1px rgb(1 33 32 / .08); }
.cov .pg3 { inset: 26px -18px -18px 26px; opacity: .6; }
.cov .pg2 { inset: 13px -9px -9px 13px; }
.cov .pg1 { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .7); display: flex; flex-direction: column; }
.cov .hero2 { position: relative; height: 210px; padding: 22px 24px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: #22306B; }
.cov .hero2::before { content: ""; position: absolute; inset: -30%; background: radial-gradient(40% 50% at 80% 20%, #5B6BC0 0, transparent 70%), radial-gradient(45% 50% at 10% 90%, #3A4E9E 0, transparent 70%); filter: blur(10px); }
.cov .hero2 > * { position: relative; }
.cov .mono { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.cov .mono i { width: 22px; height: 22px; border-radius: 6px; background: #fff; color: #22306B; font-style: normal; font-size: 11px; letter-spacing: 0; display: grid; place-items: center; }
.cov h5 { font-size: 24px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.08; }
.cov h5 small { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0; opacity: .75; margin-top: 8px; }
.cov .toc { padding: 16px 24px; display: grid; gap: 9px; }
.cov .toc div { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); border-bottom: 1px dashed var(--line-2); padding-bottom: 7px; }
.cov .toc b { font-weight: 600; color: var(--ink); }
.cov .ftr { margin-top: auto; display: flex; gap: 6px; padding: 12px 24px 16px; flex-wrap: wrap; }
.cov .ftr span { font-size: 10.5px; font-weight: 600; color: var(--ok); background: var(--foam-2); padding: 3px 8px; border-radius: 99px; }
.deal-h { display: flex; align-items: center; gap: 10px; }
.deal-h .co { width: 36px; height: 36px; border-radius: 9px; background: #7A4E8C; color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.deal-h b { display: block; font-size: 14.5px; font-weight: 600; }
.deal-h small { display: block; font-size: 11.5px; color: var(--ink-3); }
.deal-amt { margin-top: 14px; font-size: 34px; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 12px; }
.stages i { height: 6px; border-radius: 3px; background: #E4E9E7; }
.stages i.on { background: #FF7A59; }
.stg-l { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; color: var(--ink-3); }
.stg-l b { color: #D2553A; font-weight: 700; }
.aw.night { background: #0A2A28; color: #EAF7F2; box-shadow: 0 0 0 1px rgb(198 238 227 / .14), 0 40px 80px -30px rgb(0 0 0 / .7); }
.aw.night .aw-top { background: rgb(255 255 255 / .04); border-color: rgb(198 238 227 / .1); color: rgb(198 238 227 / .8); }
.aw.night .aw-top .sp { color: rgb(198 238 227 / .5); }
.nt-h { display: flex; align-items: center; gap: 12px; }
.nt-h .moon { width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F5F1DC, #CFC8A6); box-shadow: 0 0 24px 4px rgb(245 241 220 / .25); }
.nt-h b { font-size: 16px; font-weight: 600; }
.nt-h small { display: block; font-size: 11.5px; color: rgb(198 238 227 / .6); }
.nt-list { position: relative; margin-top: 16px; padding-left: 18px; display: grid; gap: 12px; }
.nt-list::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1.5px; background: rgb(198 238 227 / .2); }
.nt-it { position: relative; display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.nt-it::before { content: ""; position: absolute; left: -17px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--foam); box-shadow: 0 0 0 3px #0A2A28; }
.nt-it small { font-size: 11.5px; color: rgb(198 238 227 / .55); font-variant-numeric: tabular-nums; }
.nt-it .ic { width: 15px; height: 15px; color: var(--foam); stroke-width: 2.2; }
.burn-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.burn-kpis div { padding: 10px 12px; border-radius: 10px; background: #F7F8F7; }
.burn-kpis small { display: block; font-size: 11px; color: var(--ink-3); }
.burn-kpis b { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.burn-kpis .a b { color: #C98A2B; }
.burn-kpis .p b { color: var(--teal); }
.msrc { position: absolute; left: 32px; width: 44px; height: 44px; border-radius: 12px; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow-card); }
.msrc img { width: 22px; height: 22px; }
.msrc .ic { width: 20px; height: 20px; color: var(--teal); }
.mhub { position: absolute; left: 196px; top: 148px; width: 64px; height: 64px; border-radius: 18px; background: var(--deep); display: grid; place-items: center; box-shadow: 0 0 0 8px rgb(255 255 255 / .35), 0 16px 30px -12px rgb(1 33 32 / .55); }
.mhub svg { width: 38px; height: 38px; fill: var(--foam); }
.mhub .rp { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 22px; }
.mshelf { position: absolute; right: 30px; top: 50%; translate: 0 -50%; width: 206px; padding: 6px; }
.mrow { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 9px; font-size: 13px; font-weight: 600; }
.mrow .ic { width: 16px; height: 16px; color: var(--teal); }
.mrow b { margin-left: auto; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mdot { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgb(255 255 255 / .8); opacity: 0; z-index: 4; }
.mwires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mwires path { fill: none; stroke: rgb(0 74 72 / .28); stroke-width: 1.4; stroke-dasharray: 2 5; }
.wkc .outp { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 8px; border-radius: 8px; background: var(--foam-2); font-size: 11.5px; font-weight: 600; color: var(--ok); opacity: 0; }
.wkc .outp .ic { width: 12px; height: 12px; }
.wkc .tools2 { display: flex; gap: 5px; margin-top: 2px; }
.wkc .tools2 img { width: 16px; height: 16px; }
.lib { position: absolute; left: 30px; top: 50%; translate: 0 -50%; display: grid; gap: 12px; }
.libi { width: 132px; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 11px; background: #fff; box-shadow: var(--shadow-card); font-size: 11.5px; font-weight: 600; line-height: 1.25; }
.libi .pg0 { width: 26px; height: 32px; border-radius: 3px; background: #F1F4F3; box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; color: var(--teal); flex: none; }
.libi .pg0 .ic { width: 13px; height: 13px; }
.sdoc2 { position: absolute; right: 30px; top: 30px; bottom: -10px; width: 280px; background: #fff; border-radius: 8px 8px 0 0; box-shadow: 0 0 0 1px rgb(1 33 32 / .07), 0 30px 60px -24px rgb(1 33 32 / .45); padding: 18px 20px; }
.sdoc2 .sdh { margin-bottom: 8px; }
.sdoc2 h5 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.slot2 { margin-top: 10px; height: 52px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--line-2); background: repeating-linear-gradient(135deg, transparent 0 6px, rgb(1 33 32 / .03) 6px 7px); position: relative; overflow: hidden; }
.slot2 .fillb { position: absolute; inset: 0; padding: 9px 10px; background: #fff; box-shadow: inset 2px 0 0 var(--teal); display: grid; gap: 5px; align-content: start; opacity: 0; }
.slot2 .fillb b { font-size: 11px; font-weight: 600; }
.slot2 .fillb i { display: block; height: 5px; border-radius: 3px; background: #E4EAE8; }
.flyb { position: absolute; left: 0; top: 0; width: 40px; height: 28px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1.5px var(--teal), 0 10px 20px -8px rgb(1 33 32 / .5); opacity: 0; z-index: 5; }
.gtrack { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gtrack line { stroke: rgb(0 74 72 / .3); stroke-width: 2; stroke-dasharray: 3 6; }
.gtrack line { transition: stroke .4s; }
.gtrack .l2.open { stroke: var(--teal); }
.fn { position: absolute; top: 150px; display: grid; justify-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink-2); translate: -50% 0; }
.fk { left: 16%; }
.fy { left: 52%; top: 60px; }
.fc { left: 84%; }
.fn .kbot { width: 50px; height: 50px; border-radius: 14px; box-shadow: 0 12px 24px -10px rgb(1 33 32 / .5); }
.fn .kbot svg { width: 32px; height: 32px; }
.youa { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #fff, 0 12px 24px -10px rgb(1 33 32 / .5); }
.youa img { width: 100%; height: 100%; object-fit: cover; }
.pend, .okb { position: absolute; top: -4px; right: -8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 700; box-shadow: 0 0 0 3px #fff; }
.pend { background: #E7B25C; color: #fff; opacity: 0; }
.okb { background: var(--deep); color: var(--foam); opacity: 0; }
.okb .ic, .okc .ic { width: 12px; height: 12px; stroke-width: 3; }
.clb { position: relative; width: 50px; height: 50px; border-radius: 14px; background: #fff; display: grid; place-items: center; color: var(--teal); box-shadow: 0 12px 24px -10px rgb(1 33 32 / .45); }
.clb > .ic { width: 22px; height: 22px; }
.okc { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--deep); color: var(--foam); display: grid; place-items: center; box-shadow: 0 0 0 3px #fff; opacity: 0; }
.gate { position: absolute; left: 52%; top: 150px; width: 0; height: 50px; }
.gpost { position: absolute; left: -4px; top: -6px; width: 8px; height: 62px; border-radius: 4px; background: var(--deep); }
.gbar { position: absolute; left: 0; top: 18px; width: 74px; height: 8px; border-radius: 4px; background: repeating-linear-gradient(90deg, #E7B25C 0 12px, #fff 12px 24px); box-shadow: 0 0 0 1px rgb(1 33 32 / .15); transform-origin: 0 50%; translate: 0 0; rotate: 90deg; }
.envl { position: absolute; left: 0; top: 0; width: 38px; height: 28px; border-radius: 6px; background: #fff; display: grid; place-items: center; color: var(--teal); box-shadow: 0 0 0 1px var(--line-2), 0 10px 20px -8px rgb(1 33 32 / .5); opacity: 0; z-index: 3; }
.envl .ic { width: 17px; height: 17px; }
.certs3 { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.ct { position: relative; overflow: hidden; display: grid; grid-template-columns: 104px 1fr; column-gap: 22px; align-items: center; padding: 30px clamp(20px, 3vw, 40px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); outline: none; transition: background-color .25s; }
.ct:nth-child(3n) { border-right: 0; }
.ct:nth-last-child(-n+3) { border-bottom: 0; }
.ct:hover, .ct:focus-visible, .ct.on { background: #fff; }
.ct-svg { width: 104px; height: auto; aspect-ratio: 220 / 180; color: var(--deep); overflow: visible; transition: transform .35s var(--ease-out); }
.ct:hover .ct-svg, .ct:focus-visible .ct-svg, .ct.on .ct-svg { transform: translateY(-4px); }
.ct-svg .cl { fill: none; stroke: currentColor; stroke-width: 2.9; stroke-linecap: round; stroke-linejoin: round; }
.ct-svg .ct-t { font-family: var(--font); font-weight: 600; }
.ct p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.cert-ring, .lbeam { transform-box: view-box; }
.cert-ring { transform-origin: 110px 88px; }
.ct-svg .lbeam { transform-origin: 110px 60px; }
.ct-svg .chk path, .ct-svg .sig path { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ct:hover .cert-ring, .ct.on .cert-ring { animation: cert-spin 14s linear infinite; }
  @keyframes cert-spin { to { transform: rotate(360deg); } }
  .ct:hover .iso-globo path:nth-of-type(n+3):nth-of-type(-n+8), .ct:hover .iso-globo path:nth-of-type(n+10):nth-of-type(-n+15),
  .ct.on .iso-globo path:nth-of-type(n+3):nth-of-type(-n+8), .ct.on .iso-globo path:nth-of-type(n+10):nth-of-type(-n+15) { animation: cert-glint 3.4s ease-in-out var(--gw, 0s) infinite; }
  .iso-globo path:nth-of-type(8), .iso-globo path:nth-of-type(15) { --gw: 0s; }
  .iso-globo path:nth-of-type(7), .iso-globo path:nth-of-type(14) { --gw: .3s; }
  .iso-globo path:nth-of-type(6), .iso-globo path:nth-of-type(13) { --gw: .6s; }
  .iso-globo path:nth-of-type(3), .iso-globo path:nth-of-type(10) { --gw: .9s; }
  .iso-globo path:nth-of-type(4), .iso-globo path:nth-of-type(11) { --gw: 1.2s; }
  .iso-globo path:nth-of-type(5), .iso-globo path:nth-of-type(12) { --gw: 1.5s; }
  @keyframes cert-glint { 0%, 100% { opacity: .3; stroke-width: 2.2; } 45% { opacity: 1; stroke-width: 4.2; } }
  .ct:hover .ens-cursor, .ct.on .ens-cursor { animation: ens-blink 1.15s steps(1) infinite; }
  @keyframes ens-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
  .ct:hover .lbeam, .ct.on .lbeam { animation: beam-rock 2.6s ease-in-out infinite; }
  @keyframes beam-rock { 0%, 100% { rotate: 0deg; } 30% { rotate: -6deg; } 70% { rotate: 5deg; } }
  .ct:hover .chk path, .ct:hover .sig path, .ct.on .chk path, .ct.on .sig path { animation: redraw 1.8s var(--ease) infinite; }
  @keyframes redraw { 0% { stroke-dashoffset: 1; } 55%, 100% { stroke-dashoffset: 0; } }
}
.ct .glint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgb(198 238 227 / .55) 50%, transparent 65%); translate: -120% 0; }
.journey { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 64px; padding-top: 34px; }
.jtrack { position: absolute; left: 0; right: 0; top: 0; height: 12px; }
.jtrack::before, .jfill { content: ""; position: absolute; left: 16.66%; right: 16.66%; top: 5px; height: 2px; border-radius: 2px; background: rgb(198 238 227 / .16); }
.jfill { background: var(--foam); transform-origin: left; transform: scaleX(0); }
.jn { position: absolute; top: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--deep); box-shadow: inset 0 0 0 2px rgb(198 238 227 / .35); transition: background-color .3s, box-shadow .3s; }
.jn.n0 { left: 16.66%; }
.jn.n1 { left: 50%; }
.jn.n2 { left: 83.33%; }
.jn.on { background: var(--foam); box-shadow: 0 0 0 5px rgb(198 238 227 / .18); }
.jcard { padding: 14px 14px 22px; border-radius: 18px; background: rgb(255 255 255 / .045); box-shadow: inset 0 0 0 1px rgb(198 238 227 / .12); transition: background-color .4s, box-shadow .4s; }
.jcard.on { background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(198 238 227 / .3); }
.jcard .when { display: block; margin: 18px 8px 0; font-size: 12.5px; font-weight: 600; color: var(--foam); }
.jcard b { display: block; margin: 6px 8px 0; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: #F2FBF8; }
.jcard .d { display: block; margin: 6px 8px 0; font-size: 14px; line-height: 1.5; color: rgb(198 238 227 / .68); }
.jvis { height: 170px; border-radius: 12px; background: #F4F7F6; overflow: hidden; position: relative; }
.call { position: absolute; inset: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ctile { position: relative; border-radius: 9px; overflow: hidden; background: #1E2B2A; display: grid; place-items: center; }
.ctile img { width: 100%; height: 100%; object-fit: cover; }
.ctile > span:last-child { position: absolute; left: 6px; bottom: 6px; font-size: 10px; font-weight: 600; color: #fff; background: rgb(0 0 0 / .45); padding: 2px 6px; border-radius: 4px; }
.ctile.t2 { background: var(--deep); }
.ctile.t2 .kbot { width: 46px; height: 46px; border-radius: 13px; background: rgb(198 238 227 / .1); }
.ctile.t2 .kbot svg { width: 30px; height: 30px; }
.rec { position: absolute; left: 50%; top: 8px; translate: -50% 0; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 99px; background: #fff; font-size: 10.5px; font-weight: 700; color: var(--ink); box-shadow: 0 4px 10px -4px rgb(0 0 0 / .3); }
.rec i { width: 7px; height: 7px; border-radius: 50%; background: #E0493A; }
.chk { position: absolute; inset: 16px 16px; display: grid; gap: 8px; align-content: start; }
.ci { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 12px; font-weight: 600; color: var(--ink-3); transition: color .3s; }
.ci .ic { width: 16px; height: 16px; padding: 3px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); color: transparent; stroke-width: 3; flex: none; transition: all .3s; }
.ci.done { color: var(--ink); }
.ci.done .ic { background: var(--deep); color: var(--foam); box-shadow: none; }
.cbar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 4px; }
.cbar i { display: block; height: 100%; width: 0; background: var(--teal); }
.team { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 16px; }
.row5 { display: flex; }
.row5 img, .row5 .kj { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #F4F7F6; margin-left: -10px; }
.row5 img:first-child { margin-left: 0; }
.row5 .kj { border-radius: 50%; }
.row5 .kj svg { width: 28px; height: 28px; }
.joined { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; background: var(--foam-2); color: var(--ok); font-size: 12px; font-weight: 600; }
.joined .ic { width: 13px; height: 13px; stroke-width: 2.5; }
.tool { position: absolute; left: 0; top: 50px; width: 470px; height: 256px; overflow: hidden; }
.tm { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); transition: background-color .3s; }
.tm img, .tm .kbot { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.tm .kbot svg { width: 20px; height: 20px; }
.tm b { display: block; font-size: 13px; font-weight: 600; }
.tm small { display: block; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.tm.warn { background: var(--ember-2); }
.colh { position: absolute; top: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); display: flex; align-items: baseline; gap: 8px; }
.colh b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rqs, .dns { position: absolute; top: 30px; width: 252px; height: 370px; }
.rqs { left: 0; }
.dns { left: 548px; }
.rq, .dn { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px 0 8px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-card); font-size: 12.5px; font-weight: 600; opacity: 0; }
.rq > img:first-child, .rq .cal4 { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.rq .cal4 { display: grid; place-items: center; background: var(--foam-2); color: var(--teal); }
.rq .cal4 .ic { width: 15px; height: 15px; }
.rq span { flex: 1; line-height: 1.25; }
.rq .chn { width: 16px; height: 16px; }
.rq.cur { box-shadow: 0 0 0 2px var(--teal), var(--shadow-card); }
.rq.done { opacity: .5; }
.dn img { width: 20px; height: 20px; margin-left: 4px; }
.dn span { flex: 1; line-height: 1.25; }
.dn .ck { width: 20px; height: 20px; border-radius: 50%; background: var(--deep); color: var(--foam); display: grid; place-items: center; flex: none; }
.dn .ck .ic { width: 11px; height: 11px; stroke-width: 3; }
.torb img { width: 22px; height: 22px; }
.beam .tl2 { stroke: var(--teal); stroke-width: 2; stroke-dasharray: none; opacity: 0; }
.watch { position: absolute; left: 0; top: -10px; display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.watch .kbot { width: 26px; height: 26px; border-radius: 7px; }
.watch .kbot svg { width: 17px; height: 17px; }
.ring .rn { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.ring.bad .rn { color: var(--ember-ink); }
.sig { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; background: var(--ember-2); color: var(--ember-ink); font-size: 12px; font-weight: 700; box-shadow: 0 0 0 1px rgb(138 90 23 / .2), 0 8px 16px -8px rgb(138 90 23 / .5); opacity: 0; white-space: nowrap; z-index: 6; }
.sig .ic { width: 13px; height: 13px; stroke-width: 2.2; }
.mp { position: relative; margin: 0 clamp(24px, 4.5vw, 56px); height: 520px; border-radius: 20px; }
.board { position: absolute; left: 40px; top: 40px; width: 612px; height: 440px; overflow: hidden; }
.bh { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-bottom: 1px solid var(--line); font-size: 14px; }
.bh b { font-weight: 600; }
.bh .muted { font-size: 12.5px; }
.ppl2 { margin-left: auto; display: flex; }
.ppl2 img, .ppl2 .kp { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; margin-left: -6px; }
.ppl2 .kp .kbot { width: 26px; height: 26px; border-radius: 50%; }
.ppl2 .kp .kbot svg { width: 16px; height: 16px; }
.bcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 14px 16px 0; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.blane { position: absolute; left: 0; right: 0; top: 96px; bottom: 0; }
.blane::before { content: ""; position: absolute; inset: 0 16px 16px; background: linear-gradient(90deg, transparent calc(33.33% - 6px), var(--line) calc(33.33% - 6px), var(--line) calc(33.33% - 5px), transparent calc(33.33% - 5px), transparent calc(66.66% + 5px), var(--line) calc(66.66% + 5px), var(--line) calc(66.66% + 6px), transparent calc(66.66% + 6px)); }
.bcard { position: absolute; left: 0; top: 0; width: 184px; height: 82px; padding: 11px 12px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgb(1 33 32 / .09), 0 2px 4px rgb(1 33 32 / .04); display: flex; flex-direction: column; justify-content: space-between; z-index: 2; transition: box-shadow .3s; }
.bcard b { font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
.bcard.lift { box-shadow: 0 0 0 1.5px var(--teal), 0 18px 30px -12px rgb(1 33 32 / .45); z-index: 6; }
.bfoot { display: flex; align-items: center; gap: 6px; }
.ca { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; }
.ca img { width: 100%; height: 100%; object-fit: cover; }
.ca.none { box-shadow: inset 0 0 0 1.5px var(--line-2); border: 0; background: repeating-linear-gradient(45deg, transparent 0 3px, rgb(1 33 32 / .06) 3px 4px); }
.ca.k .kbot { width: 24px; height: 24px; border-radius: 50%; }
.ca.k .kbot svg { width: 15px; height: 15px; }
.cas { justify-items: start; }
.cst { justify-items: start; }
.cbadge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 99px; background: var(--foam-2); color: var(--ok); font-size: 10.5px; font-weight: 700; white-space: nowrap; opacity: 0; }
.cbadge .ic { width: 11px; height: 11px; }
.chan2 { position: absolute; right: 40px; top: 40px; width: 340px; height: 440px; overflow: hidden; display: flex; flex-direction: column; }
.c2h { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; flex: none; }
.c2h img { width: 18px; height: 18px; }
.c2h .muted { margin-left: auto; font-size: 12px; }
.c2b { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 14px 16px 18px; }
.mm { display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: start; }
.mm .ca { width: 28px; height: 28px; }
.mm .ca.k .kbot { width: 28px; height: 28px; }
.mm b { font-size: 12px; font-weight: 600; }
.mm p { margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--ink); padding: 7px 10px; border-radius: 4px 10px 10px 10px; background: #F4F6F5; }
.mm .men { color: #4F55C4; font-weight: 600; }
.mm[data-i="1"] p, .mm[data-i="2"] p, .mm[data-i="5"] p { background: var(--foam-2); }
.mpk { z-index: 11; }
.mpk .klab { position: absolute; left: 30px; top: 30px; padding: 2px 8px; border-radius: 99px 99px 99px 4px; background: var(--deep); color: var(--foam); font-size: 11px; font-weight: 600; }
.mp-pts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 48px; border-top: 1px solid var(--line); }
.mp-pts > div { padding: 26px clamp(24px, 3.5vw, 44px) 34px; border-right: 1px solid var(--line); }
.mp-pts > div:last-child { border-right: 0; }
.mp-pts .ic { width: 20px; height: 20px; color: var(--teal); margin-bottom: 14px; }
.mp-pts b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.mp-pts span { display: block; margin-top: 5px; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.alrt { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: #E7A23B; color: #fff; font-size: 15px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 3px #fff, 0 6px 14px -4px rgb(138 90 23 / .6); opacity: 0; z-index: 7; }
.rings.focus .ring:not(.bad) { opacity: .32; }
/* ---- Ciclo · Venta: el pipeline de HubSpot. Una sola oportunidad avanza de columna en
   columna; en cada una Kelp le engancha lo que ha hecho (la propuesta, la probabilidad,
   los datos del CRM, el seguimiento) y la arrastra a la siguiente hasta Ganada.
   Lienzo 800 × 420: columnas de 184 px en x = 14, 210, 406, 602; la tarjeta mide 194 px ---- */
.vp-cv { --ch: 420px; }
.vp-hs { position: absolute; inset: 0; overflow: hidden; }
.vp-top { display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.vp-top img { width: 18px; height: 18px; }
.vp-pipe { margin-left: 6px; padding: 3px 10px; border-radius: 6px; background: #F1F4F3; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.vp-cols { position: absolute; left: 14px; right: 14px; top: 58px; bottom: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.vp-col { overflow: hidden; padding: 0 8px; border-radius: 10px; background: #F4F7F6; box-shadow: inset 0 0 0 1px rgb(1 33 32 / .05); transition: background-color .4s, box-shadow .4s; }
.vp-col.on { background: var(--foam-2); box-shadow: inset 0 0 0 1px rgb(14 107 84 / .22); }
.vp-ch { display: flex; align-items: center; justify-content: space-between; height: 38px; font-size: 12.5px; }
.vp-ch b { font-weight: 600; }
.vp-n { display: grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 11px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.vp-gs { display: grid; gap: 8px; }
.vp-g { display: grid; align-content: start; gap: 8px; height: 50px; padding: 12px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgb(1 33 32 / .06); }
.vp-g i { display: block; width: 40%; height: 7px; border-radius: 4px; background: #E9EEEC; }
.vp-g i:first-child { width: 64%; background: #DAE2DF; }
.vp-deal { position: absolute; left: 22px; top: 96px; z-index: 6; display: grid; align-content: start; gap: 8px; width: 168px; height: 194px; padding: 11px 12px 12px; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1.5px var(--teal), 0 14px 28px -16px rgb(1 33 32 / .45); font-size: 12px; transition: box-shadow .3s; }
.vp-deal.drag { box-shadow: 0 0 0 1.5px var(--teal), 0 30px 44px -16px rgb(1 33 32 / .55); }
.vp-deal.won { box-shadow: 0 0 0 2px var(--ok), 0 14px 28px -16px rgb(1 33 32 / .45); }
.vp-dh { display: flex; align-items: center; gap: 8px; }
.vp-dh b { font-size: 13px; font-weight: 600; }
.vp-co { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #3A5BA0; color: #fff; font-size: 10px; font-weight: 700; }
.vp-pr { display: flex; align-items: center; gap: 8px; }
.vp-bar { flex: 1; height: 6px; border-radius: 3px; background: #EDF1F0; overflow: hidden; }
.vp-fill { display: block; height: 100%; border-radius: 3px; background: var(--teal); transform-origin: left; transform: scaleX(.2); }
.vp-deal.won .vp-fill { background: var(--ok); }
.vp-pp { min-width: 44px; text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.vp-pp b { font-size: 15px; font-weight: 600; color: var(--ink); }
.vp-f { display: flex; align-items: center; justify-content: space-between; height: 20px; margin: 0 -5px; padding: 0 5px; border-radius: 5px; }
.vp-f > span:first-child { color: var(--ink-3); }
.vp-f b { font-weight: 600; }
.vp-emp { display: block; width: 44px; height: 6px; border-radius: 3px; background: #EDF1F0; }
.vp-att { display: grid; justify-items: start; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.vp-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 6px; border-radius: 6px; background: var(--foam-2); color: var(--ok); font-size: 11px; font-weight: 600; white-space: nowrap; }
.vp-chip .ic { width: 12px; height: 12px; }
.vp-doc { position: absolute; left: 204px; top: 92px; z-index: 7; display: grid; align-content: start; gap: 7px; width: 132px; height: 168px; padding: 0 14px 14px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px rgb(1 33 32 / .07), 0 24px 44px -18px rgb(1 33 32 / .5); overflow: hidden; }
.vp-band { display: block; height: 16px; margin: 0 -14px 6px; background: var(--deep); }
.vp-doc b { margin-bottom: 3px; font-size: 12.5px; font-weight: 600; }
.vp-ln { display: block; height: 6px; border-radius: 3px; background: #E4EAE8; transform-origin: left; }
.vp-ln:nth-child(even) { width: 76%; }
.vp-src { position: absolute; left: 0; top: 0; z-index: 8; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 8px 16px -8px rgb(1 33 32 / .45); }
.vp-src img { width: 16px; height: 16px; }
.vp-env { position: absolute; left: 0; top: 0; z-index: 8; display: grid; place-items: center; width: 34px; height: 26px; border-radius: 5px; background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 8px 18px -8px rgb(1 33 32 / .5); color: var(--teal); }
.vp-env .ic { width: 16px; height: 16px; }

/* ---- Ciclo · Ejecución: la tira de ocho semanas del proyecto. Cada semana Kelp deja
   sus entregables encima; en la 6 el bloque de Jorge se alarga (desvío), Kelp pasa dos
   bloques a los huecos de Ana y la tira vuelve a verde; al cerrar, el informe sale al
   cliente. Lienzo 800 × 420: semanas de 92,5 px desde x = 60 ---- */
.w8-cv { --ch: 384px; }
.w8-h { position: absolute; left: 0; top: 6px; display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
.w8-h .ic { width: 16px; height: 16px; color: var(--teal); }
.w8-h b { font-weight: 600; font-variant-numeric: tabular-nums; }
.w8-st { justify-items: start; margin-left: 8px; }
.w8-cl { position: absolute; right: 0; top: 0; display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; }
.w8-lg { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 6px 14px -8px rgb(1 33 32 / .35); }
.w8-lg img { width: 24px; height: 24px; }
.w8-ck { position: absolute; right: -6px; top: -6px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ok); color: #fff; box-shadow: 0 0 0 2px #fff; }
.w8-ck .ic { width: 11px; height: 11px; stroke-width: 3; }
.w8-sep { position: absolute; top: 58px; width: 1px; height: 296px; background: rgb(1 33 32 / .07); }
.w8-now { position: absolute; top: 52px; width: 92.5px; height: 304px; border-radius: 12px; background: rgb(255 255 255 / .6); box-shadow: inset 0 0 0 1px rgb(1 33 32 / .08); }
.w8-av { position: absolute; left: 14px; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
.w8-b { position: absolute; z-index: 1; width: 82.5px; height: 32px; border-radius: 8px; background: #D6E2DE; transition: background-color .35s, box-shadow .35s; }
.w8-b.done { background: #2F8F72; }
.w8-b.late { z-index: 2; background: #E7B25C; box-shadow: 0 0 0 3px rgb(231 178 92 / .28); }
.w8-free { position: absolute; width: 82.5px; height: 32px; border-radius: 8px; border: 1.5px dashed rgb(1 33 32 / .18); }
.w8-f { position: absolute; z-index: 3; display: grid; place-items: end center; width: 34px; height: 42px; padding-bottom: 7px; border-radius: 4px 10px 4px 4px; background: #fff; box-shadow: 0 0 0 1px rgb(1 33 32 / .1), 0 6px 12px -6px rgb(1 33 32 / .4); }
.w8-f::before { content: ""; position: absolute; right: 0; top: 0; width: 10px; height: 10px; border-radius: 0 0 0 3px; background: linear-gradient(225deg, transparent 50%, #E1E8E5 50%); }
.w8-f img { width: 18px; height: 18px; }
.w8-rep { left: 0; top: 0; z-index: 8; place-items: center; padding: 0; background: var(--deep); color: var(--foam); }
.w8-rep::before { background: linear-gradient(225deg, transparent 50%, var(--teal) 50%); }
.w8-rep .ic { width: 17px; height: 17px; }
.w8-d { position: absolute; top: 364px; width: 92.5px; text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-3); }

@media (max-width: 1180px) {
  .stage-inner { zoom: .84; }
  .band-in { grid-template-columns: 1fr; }
  .trio { grid-template-columns: 1fr 1fr; }
  .trio .cellb:last-child { grid-column: 1 / -1; }
}
@media (max-width: 1040px) {
  .cyc { grid-template-columns: 1fr; }
  .cyc-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .cyc-it { flex: none; border-bottom: 0; border-right: 1px solid var(--line); }
  .cyc-tab { width: auto; padding: 16px 22px; }
  .cyc-it:has(.cyc-tab[aria-selected="true"]) .cyc-more { display: none; }
  .cyc-tab .d { display: none; }
  .cyc-tab .bar { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 2px; transform-origin: left; }
  .cyc-tab[aria-selected="true"] .bar { scale: 1 1; }
  .day { overflow-x: auto; }
}
@media (max-width: 980px) {
  .bento { grid-template-columns: 1fr; }
}

/* ---- 25 años: lo que Kelp trae de serie ---- */
.serie { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.serie-h { grid-column: 1 / -1; padding: 20px clamp(24px, 4.5vw, 56px); border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.serie-h b { font-weight: 600; color: var(--ink); }
.serie-i { display: grid; grid-template-columns: 36px 1fr; gap: 4px 14px; align-content: start; padding: 24px clamp(24px, 3vw, 40px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.serie-i:nth-child(3n+1) { border-right: 0; }
.serie-i:nth-last-child(-n+3) { border-bottom: 0; }
.sr-ic { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--foam-2); color: var(--teal); }
.sr-ic .ic { width: 18px; height: 18px; }
.serie-i b { font-size: 15.5px; font-weight: 600; }
.sr-d { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 860px) { .serie { grid-template-columns: 1fr; } .serie-i { border-right: 0; } .serie-i:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); } .serie-i:last-child { border-bottom: 0; } }

/* ---- Conexiones: enlace a la página, sobre la banda oscura ---- */
.conn-go { margin-top: 22px; color: var(--foam); }
.conn-go:hover { color: #fff; }

/* ============================================================
   Móvil (≤ 700 px). El escritorio no cambia: cada escena tiene aquí su
   composición vertical (o su cámara) y home.js coloca lo que depende de
   ella en su rama MOB. Nada de lienzos de escritorio encogidos.
   ============================================================ */
@media (max-width: 700px) {
  /* ---- Hero: Teams como en el móvil, las conversaciones en una fila de pestañas ---- */
  .hero .stage { height: 560px; }
  .stage-cap { display: none; }
  .teams { left: 12px; right: 12px; top: 16px; bottom: 16px; width: auto; height: auto; translate: none; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); border-radius: 14px; }
  .t-top, .t-rail, .t-list-h, .t-sec { display: none; }
  .t-list { border-right: 0; border-bottom: 1px solid var(--t-line); }
  .t-items { display: flex; gap: 6px; padding: 8px; overflow-x: auto; scrollbar-width: none; }
  .t-items::-webkit-scrollbar { display: none; }
  .t-item { flex: none; width: auto; min-height: 44px; grid-template-columns: 26px auto; gap: 8px; padding: 6px 12px 6px 7px; border-radius: 9px; }
  .t-item .pv, .t-item .tm { display: none; }
  .t-item .gav, .t-item .kbot { width: 26px; height: 26px; border-radius: 6px; }
  .t-head { height: 48px; padding: 0 14px; gap: 8px; }
  .t-head .nm { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .t-head .tabs { margin-left: 4px; gap: 12px; }
  .t-thread { padding: 12px 14px 8px; gap: 10px; }
  .m { grid-template-columns: 28px minmax(0, 1fr); gap: 9px; }
  .m .pav, .teams .m .kbot { width: 28px; height: 28px; }
  .m .bub { max-width: 100%; }
  .acard { width: auto; max-width: 100%; }
  .t-compose { margin: 4px 14px 12px; height: 38px; }

  /* ---- Ciclo: escena a tamaño real, cada una con su lienzo vertical; la tira de pasos en lista ---- */
  .cyc-stage { height: auto; }
  .cyc-stage .scene { flex: none; }
  .cyc-stage [data-scene="cap"] { --vh: 548px; }
  .cyc-stage [data-scene="ven"] { --vh: 420px; }
  .cyc-stage [data-scene="eje"] { --vh: 384px; }
  .cyc-stage [data-scene="ope"] { --vh: 580px; }
  .cyc-stage [data-scene="cue"] { --vh: 506px; }
  .cyc-stage .cvw { flex: none; height: calc(var(--vh) + 40px); }
  /* centrado sin porcentajes: si fit() lo reduce con zoom (pantallas de menos de 380 px), sigue centrado */
  .cyc-stage .cv { --cw: 360px; --ch: var(--vh); left: 0; right: 0; margin-inline: auto; translate: 0 -50%; }
  .cyc .stepbar { grid-template-columns: 1fr; }
  .cyc .sbs { display: flex; align-items: baseline; gap: 10px; padding: 10px 18px; border-right: 0; border-top: 1px solid rgb(1 33 32 / .08); }
  .cyc .sbs:first-child { border-top: 0; }
  .cyc .sbs i:not(.pr) { flex: none; min-width: 42px; margin: 0; white-space: nowrap; }

  /* Captación: contactos arriba, Kelp en medio, la agenda debajo */
  .cap-lab { top: 0; }
  .cap-cv .av-grid { top: 22px; grid-template-columns: repeat(10, 30px); gap: 6px; }
  .cap-cv .av { width: 30px; height: 30px; }
  .cap-n1, .cap-n2 { top: 134px; }
  .cap-n2 { left: auto; right: 0; }
  .cap-hub { left: 148px; top: 176px; }
  .cap-cv .cal { left: 0; top: 262px; width: 360px; }
  .cap-cv .cal-g { grid-template-rows: 20px repeat(5, 40px); }
  .cap-cv .mt { height: 34px; }

  /* Venta: el pipeline a tamaño real; la cámara sigue a la oportunidad de columna en columna */
  .vp-cv { --cw: calc(100% - 16px); overflow: hidden; }
  .vp-pan { right: auto; width: 800px; }

  /* Ejecución: las ocho semanas caben en el ancho (home.js recoloca las piezas) */
  .w8-cv .w8-now, .w8-cv .w8-d { width: 37.5px; }
  .w8-cv .w8-b, .w8-cv .w8-free { width: 33.5px; }
  .w8-cv .w8-f { width: 28px; height: 34px; padding-bottom: 5px; }
  .w8-cv .w8-f img { width: 16px; height: 16px; }
  .w8-cv .w8-f::before { width: 8px; height: 8px; }
  .w8-cv .w8-av { left: 16px; }
  .w8-h { gap: 5px; font-size: 13.5px; }
  .w8-st { margin-left: 4px; }
  .w8-cl { gap: 7px; font-size: 13.5px; }
  .w8-lg { width: 34px; height: 34px; }

  /* Operaciones: encargos arriba, Kelp y sus herramientas en medio, lo hecho debajo */
  .ope-cv .rqs, .ope-cv .dns { left: 0; width: 360px; height: 156px; }
  .ope-cv .rqs { top: 26px; }
  .ope-h2 { left: 0; top: 400px; }
  .ope-cv .dns { top: 424px; }
  .ope-hub { left: 140px; top: 250px; }

  /* Gestión de cuenta: las ocho cuentas arriba y lo que prepara Kelp debajo */
  .cue-cv .rings { grid-template-columns: repeat(4, 80px); gap: 14px 12px; }
  .cue-cv .ring .rw, .cue-cv .ring svg { width: 66px; height: 66px; }
  .cue-cv .ring .rv { font-size: 14px; }
  .cue-cv .ring .rn { font-size: 11.5px; white-space: nowrap; }
  .cue-cv .acts2 { left: 40px; top: 252px; width: 300px; gap: 12px; }

  /* ---- Un día cualquiera: los carriles a todo el ancho; lo último que entrega Kelp, debajo ---- */
  .day2 { margin: 0 8px; padding: 20px 12px 16px; }
  .d2-h { gap: 12px; }
  .d2-h .clock { font-size: 32px; }
  .d2 { grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: dense; row-gap: 8px; }
  .d2 > div:empty { display: none; }
  .d2 > .ln, .d2 .trk, .d2 .axis2 { grid-column: 1 / -1; }
  .d2 .ln-n, .d2 .ln-t { position: relative; z-index: 3; align-self: stretch; align-items: center; margin-top: 6px; background: #fff; }
  .shift { justify-content: center; padding: 0 3px; font-size: 10px; white-space: nowrap; overflow: hidden; }
  /* las piezas del carril quedan por encima del cabezal, que pasa por detrás */
  .d2 .trk .ln { z-index: 3; }
  .ln.big { height: 104px; }
  .ev.job { justify-content: center; width: 28px; height: 28px; padding: 0; font-size: 0; }
  .ev.job.cur { box-shadow: 0 0 0 2px var(--teal), 0 6px 14px -8px rgb(1 33 32 / .35); }
  .ev.job.nt.cur { box-shadow: 0 0 0 2px var(--foam); }
  .ev.blip span { left: 0; translate: -10px 0; padding: 1px 7px; border-radius: 99px; background: rgb(255 255 255 / .9); opacity: 0; transition: opacity .3s; }
  .ev.blip.cur span { opacity: 1; }
  .axis2 span:nth-child(even) { display: none; }
  .d2-cur { display: flex; justify-content: center; height: 30px; margin-top: 10px; }
  .d2-cur .ev { position: static; translate: none; opacity: 1; }
  .d2-cur .ev.job { width: auto; padding: 0 11px 0 9px; font-size: 12px; }
  .d2-cur .ev.job.nt { background: var(--deep); color: var(--foam); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dlist .diff, .mp-pts > div { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 14px; padding: 16px 20px; }
  .dlist .diff .ic, .mp-pts .ic { grid-row: span 2; margin: 2px 0 0; }

  /* ---- Trabaja con todo tu equipo: el tablero arriba y el canal debajo, sin pisarse ---- */
  .mp { margin: 0; height: auto; padding: 12px; border-radius: 0; display: grid; gap: 12px; }
  .board, .chan2 { position: relative; left: auto; right: auto; top: auto; width: auto; }
  .board { height: 352px; }
  .chan2 { height: 300px; }
  .bh { padding: 0 14px; }
  .bh .muted { display: none; }
  .bcols { gap: 8px; padding: 12px 10px 0; }
  .blane { top: 84px; }
  .blane::before { inset: 0 10px 12px; background: linear-gradient(90deg, transparent calc(33.33% - 2px), var(--line) calc(33.33% - 2px), var(--line) calc(33.33% - 1px), transparent calc(33.33% - 1px), transparent calc(66.66% + 1px), var(--line) calc(66.66% + 1px), var(--line) calc(66.66% + 2px), transparent calc(66.66% + 2px)); }
  .bcard { width: calc((100% - 36px) / 3); height: 80px; padding: 9px; }
  .bcard b { font-size: 12.5px; }
  .cst { display: none; }
  .cbadge { justify-content: center; width: 22px; height: 22px; padding: 0; font-size: 0; }
  .mp-pts { grid-template-columns: 1fr; margin-top: 28px; }
  .mp-pts > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .mp-pts > div:last-child { border-bottom: 0; }

  /* ---- Banda de WhatsApp: pestañas en fila, el móvil y debajo lo que entrega ---- */
  .band-in { grid-template-columns: minmax(0, 1fr); padding: 56px 0 40px; gap: 22px; }
  .band-in .h2 { padding-inline: 20px; }
  .mtabs { display: flex; gap: 6px; margin-top: 22px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
  .mtabs::-webkit-scrollbar { display: none; }
  .mtab { flex: none; grid-template-rows: auto; min-height: 44px; padding: 11px 15px; box-shadow: inset 0 0 0 1px rgb(198 238 227 / .14); }
  .mtab b { font-size: 14.5px; white-space: nowrap; }
  .mtab span { display: none; }
  .stagebox { height: 690px; overflow-anchor: none; }
  .stagebox .iph { left: 50%; translate: -50% 0; height: 420px; }
  .art-wrap { left: 50%; top: 396px; bottom: auto; height: 294px; translate: -50% 0; align-items: flex-start; }
  .cov { height: 294px; }
  .cov .hero2 { height: 148px; }

  /* ---- 25 años: doce logos en tres columnas ---- */
  .wall7 { grid-template-columns: repeat(3, 1fr); }
  .wall7 .cell { height: 84px; }
  .wall7 .cell:nth-child(7n) { border-right: 1px solid var(--line); }
  .wall7 .cell:nth-child(3n) { border-right: 0; }
  .wall7 .cell:nth-child(n+13) { display: none; }
  .wall7 img { max-width: 92px; max-height: 26px; }
  .serie-i { padding: 18px 20px; }

  /* ---- De qué está hecho Kelp: cada microescena compuesta para el ancho del móvil ---- */
  .bento, .trio { padding-inline: 16px; }
  .cellb .vis { height: 330px; }
  .cellb .txt { padding: 18px 20px 20px; }
  .msrc { width: 40px; height: 40px; top: 24px; }
  .msrc:nth-of-type(1) { top: 24px; left: 10px; }
  .msrc:nth-of-type(2) { top: 24px; left: 63px; }
  .msrc:nth-of-type(3) { top: 24px; left: 116px; }
  .msrc:nth-of-type(4) { top: 24px; left: 169px; }
  .mhub { left: 78px; top: 158px; }
  .mshelf { right: 12px; top: 190px; width: 160px; }
  .mrow { gap: 8px; padding: 9px 8px; }
  .wkrow { flex-direction: column; gap: 10px; width: calc(100% - 32px); }
  .wkc { width: auto; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; padding: 10px 13px; }
  .wkh { display: contents; }
  .wkh .kbot { grid-row: span 2; }
  .wkh .sw2 { grid-column: 3; grid-row: 1; }
  .wkc b { grid-column: 2; grid-row: 1; }
  .wkc .task { grid-column: 2; }
  .wkc .tools2 { grid-column: 3; grid-row: 2; justify-content: flex-end; margin: 0; }
  .wkc .outp { padding-block: 5px; }
  /* el resultado ocupa el sitio de la barra ya llena */
  .wkc .wprog, .wkc .outp { grid-column: 1 / -1; grid-row: 3; align-self: center; margin-top: 5px; }
  .lib { left: 12px; }
  .libi { width: 116px; }
  .sdoc2 { right: 12px; top: 24px; width: 204px; padding: 16px; }
  .fan { width: 270px; translate: calc(-50% - 36px) -50%; }
  .appw { width: 270px; }

  /* ---- Confianza: escenas a tamaño real y los sellos en carrusel ---- */
  .trio { grid-template-columns: 1fr; }
  .trio .cellb .vis { height: 290px; }
  .ans { left: 16px; right: 16px; top: 24px; }
  .auto { left: 14px; right: 14px; }
  .auto-r { grid-template-columns: minmax(0, 1fr) 172px; padding: 11px 12px; }
  .certs3 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; padding-inline: 20px; scrollbar-width: none; }
  .certs3::-webkit-scrollbar { display: none; }
  .ct { flex: none; width: 76%; grid-template-columns: 1fr; row-gap: 14px; align-content: start; padding: 26px 22px 28px; border-bottom: 0; scroll-snap-align: start; }
  .ct:nth-child(3n) { border-right: 1px solid var(--line); }
  .ct:first-child { border-left: 1px solid var(--line); }
  .ct-svg { width: 88px; }

  /* ---- Cierre: el recorrido en carrusel; avanza solo con la etapa ---- */
  .jscroll { margin: 48px -24px 0; padding: 0 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; scrollbar-width: none; }
  .jscroll::-webkit-scrollbar { display: none; }
  .journey { grid-template-columns: repeat(3, 272px); gap: 12px; width: max-content; margin-top: 0; }
  .jcard { scroll-snap-align: start; }
}
@media (max-width: 380px) {
  .shift { font-size: 9.5px; letter-spacing: -0.01em; }
  .bcard b { font-size: 12px; }
  /* los lienzos de 360 px del ciclo se reducen un poco para dejar margen (el de Venta es la ventana de su cámara) */
  .cyc-stage .cv:not(.vp-cv) { zoom: .92; }
}