/* ============================================================
   Kelp · Conexiones. Solo las escenas y piezas de esta página;
   hero, bloque de texto con escena, cierre, nav y pie son del sistema.
   ============================================================ */

/* ---- Hero: vuestras herramientas entre 3.200. El muro (conexiones.js pinta el catálogo real de
   media/muro-conexiones.webp en un canvas; las doce de la firma, .mw i) y, encima, el circuito de la
   firma: las herramientas que salen del muro, la línea que Kelp traza y el dato que circula ---- */
#mapa { height: 600px; }
.map-cv { --cw: 1104px; --ch: 480px; --ts: 46px; --ks: 60px; }
.map-dyn { position: absolute; inset: 0; }
.mw { position: absolute; inset: 0; opacity: .3; will-change: opacity; }
.mw-c { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.mw i { position: absolute; width: 30px; height: 30px; padding: 5px; border-radius: 8px; display: grid; place-items: center;
  background: #fff; opacity: var(--o, 1); }
.mw i img { width: 20px; height: 20px; object-fit: contain; filter: grayscale(1); }
.mw-bd { position: absolute; left: 0; top: 0; border-radius: 30px; background: rgb(3 38 36 / .78); box-shadow: 0 0 0 1px rgb(198 238 227 / .1), 0 30px 60px -30px rgb(0 0 0 / .6); }
.mw-loop { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.mw-rd { stroke: rgb(198 238 227 / .12); stroke-width: 2; }
.mw-ln { stroke: rgb(198 238 227 / .7); stroke-width: 2.5; stroke-dasharray: 1 1; }
.mw-cur { stroke: var(--foam); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 22; }
.mw-t, .mw-k { position: absolute; left: 0; top: 0; display: grid; place-items: center; }
.mw-t { width: var(--ts); height: var(--ts); border-radius: 12px; background: #fff; box-shadow: 0 0 0 0 rgb(198 238 227 / 0); transition: box-shadow .35s; }
.mw-t img { width: 58%; height: 58%; object-fit: contain; }
.mw-t.lit { box-shadow: 0 0 0 3px rgb(198 238 227 / .35), 0 0 24px 4px rgb(198 238 227 / .35); }
.mw-t.on { box-shadow: 0 0 0 3px var(--foam), 0 10px 22px -8px rgb(0 0 0 / .55); }
.mw-t.hot { box-shadow: 0 0 0 3px var(--foam), 0 0 26px 6px rgb(198 238 227 / .55); }
.mw-k { width: var(--ks); height: var(--ks); border-radius: 17px; background: var(--foam); color: var(--deep); box-shadow: 0 0 0 6px rgb(198 238 227 / .12), 0 16px 30px -12px rgb(0 0 0 / .6); }
.mw-k svg { width: 60%; height: 60%; fill: currentColor; }
.mw-k.busy > svg { animation: turn 2.1s var(--ease) infinite; }
.mw-pk { position: absolute; left: 0; top: 0; z-index: 3; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--foam); color: var(--deep);
  box-shadow: 0 0 0 5px rgb(198 238 227 / .18), 0 0 18px 4px rgb(198 238 227 / .4); }
.mw-pk .ic { width: 14px; height: 14px; stroke-width: 2.2; }
.mw-sum { position: absolute; left: 0; bottom: 0; height: 34px; display: flex; align-items: center; gap: 18px; }
.mw-st { justify-items: start; }
.mw-st > span { display: flex; align-items: baseline; gap: 7px; font-size: 13.5px; font-weight: 500; color: rgb(198 238 227 / .72); white-space: nowrap; }
.mw-st b, .mw-zero b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: #F2FBF8; font-variant-numeric: tabular-nums; }
.mw-zero { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-radius: 99px; background: var(--foam); color: var(--deep); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.mw-zero b { color: var(--deep); }

/* ---- 01 · Dos formas: dos paneles separados, cada uno con su escena y sus pasos ---- */
.mod { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.mod-p { padding: 24px 24px 48px; }
.mod-p + .mod-p { border-left: 1px solid var(--line); }
.mod-s { position: relative; height: 368px; border-radius: 18px; --cw: 520px; --ch: 320px; }
.mod-t { padding: 30px clamp(8px, 2vw, 32px) 0; }
.mod-t > p { margin-top: 12px; max-width: 44ch; font-size: 17px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.mod-t .vsteps { margin-top: 18px; }

/* El anillo: vuestras herramientas alrededor de Kelp. Las dos escenas parten de él */
.rim-w { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rim-w line { stroke: rgb(0 74 72 / .32); stroke-width: 1.5; stroke-dasharray: 1 1; }
.rim-t { position: absolute; z-index: 2; width: 54px; height: 54px; border-radius: 15px; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow-card); }
.rim-t::after { content: ""; position: absolute; inset: -5px; border-radius: 19px; box-shadow: 0 0 0 2px var(--teal); opacity: 0; transition: opacity .3s; }
.rim-t.hot::after { opacity: 1; }
.rim-lg { width: 26px; height: 26px; object-fit: contain; }
.rim-sl { position: absolute; width: 54px; height: 54px; border-radius: 15px; border: 1.5px dashed rgb(1 33 32 / .22); }

/* Kelp en el centro: en A se queda como está; en B crece con lo que pasa a vivir en él */
.rim-kw { position: absolute; left: 185px; top: 0; z-index: 3; width: 150px; height: 320px; display: flex; align-items: center; }
.rim-k { width: 100%; padding: 7px 7px 1px; border-radius: 16px; background: var(--deep); box-shadow: 0 0 0 6px rgb(1 33 32 / .06), 0 18px 34px -14px rgb(1 33 32 / .6); }
.rim-kh { display: flex; align-items: center; gap: 9px; height: 36px; margin-bottom: 6px; padding-left: 3px; font-size: 14px; font-weight: 600; color: #F2FBF8; }
.rim-kh .kbot { width: 30px; height: 30px; border-radius: 8px; background: var(--foam); color: var(--deep); }

/* A · Sobre vuestras herramientas: Kelp se conecta a cada una y el equipo sigue en ellas */
.sob-sy { position: absolute; right: -7px; top: -7px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--deep); color: var(--foam); box-shadow: 0 0 0 2px #fff; }
.sob-sy .ic { width: 12px; height: 12px; stroke-width: 2.2; }
.sob-fc { position: absolute; left: -9px; bottom: -9px; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 4px 10px -4px rgb(1 33 32 / .5); }
.sob-pk { position: absolute; left: 0; top: 0; z-index: 1; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgb(0 74 72 / .18); }

/* B · En lugar de ellas: la herramienta entra en Kelp y deja su hueco */
.alt-r { height: 0; overflow: hidden; }
.alt-r span { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 10px; border-radius: 9px; background: rgb(198 238 227 / .1); font-size: 13px; font-weight: 600; color: #F2FBF8; }
.alt-r .ic { width: 15px; height: 15px; color: var(--foam); }

/* ---- 02 · MCP: seis entradas, un Kelp. A la izquierda, las barras de escritura de los seis
   asistentes (su logo y su color); a la derecha, Kelp con sus tres piezas. Las líneas las traza
   conexiones.js de cada barra a la pieza que responde ---- */
.mcp-cv { --bw: 376px; --kw: 166px; }
.mcp-w { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.mcp-w path { stroke: rgb(0 74 72 / .28); stroke-width: 1.5; stroke-dasharray: 3 5; }
.mcp-w .mcp-hl { stroke: var(--teal); stroke-dasharray: 1; stroke-dashoffset: 1; }
.mcp-in { position: absolute; left: 0; width: var(--bw); height: 46px; padding: 0 7px 0 13px; border-radius: 23px; display: flex; align-items: center; gap: 10px;
  background: #fff; box-shadow: 0 0 0 1px rgb(1 33 32 / .08), 0 10px 24px -16px rgb(1 33 32 / .45); transition: box-shadow .3s; }
.mcp-in.on { box-shadow: 0 0 0 2px var(--ac), 0 14px 28px -14px rgb(1 33 32 / .5); }
.mcp-lg { width: 20px; height: 20px; object-fit: contain; flex: none; }
.mcp-tx { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink); white-space: nowrap; }
.mcp-kc { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px 0 3px; border-radius: 7px; background: rgb(0 74 72 / .08); color: var(--teal); font-weight: 600; flex: none; }
.mcp-kc .kbot { width: 20px; height: 20px; border-radius: 5px; }
.mcp-kc .kbot svg { width: 14px; height: 14px; }
.mcp-q { overflow: hidden; }
.mcp-q > span { display: block; }
.mcp-r { position: relative; z-index: 6; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--deep); color: var(--foam); }
.mcp-r .ic { width: 15px; height: 15px; }
.mcp-go { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--ac); }
.mcp-go svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mcp-k { position: absolute; right: 0; top: 0; width: var(--kw); padding: 10px; border-radius: 18px; display: grid; gap: 8px;
  background: var(--deep); box-shadow: 0 0 0 6px rgb(1 33 32 / .06), 0 24px 44px -20px rgb(1 33 32 / .65); }
.mcp-kh { display: flex; align-items: center; gap: 9px; height: 34px; padding-left: 2px; font-size: 14.5px; color: #F2FBF8; }
.mcp-kh b { font-weight: 600; }
.mcp-kh .kbot { width: 32px; height: 32px; border-radius: 9px; background: var(--foam); color: var(--deep); }
.mcp-kh .kbot svg { width: 21px; height: 21px; }
.mcp-cap { height: 44px; padding: 0 10px 0 7px; border-radius: 11px; display: flex; align-items: center; gap: 9px; background: rgb(255 255 255 / .06);
  color: rgb(198 238 227 / .75); font-size: 13px; transition: background-color .3s, color .3s; }
.mcp-cap b { font-weight: 600; white-space: nowrap; }
.mcp-ci { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgb(198 238 227 / .12); color: var(--foam); flex: none; transition: background-color .3s; }
.mcp-ci .ic { width: 15px; height: 15px; }
.mcp-cap.on { background: var(--foam); color: var(--deep); }
.mcp-cap.on .mcp-ci { background: var(--deep); }
.mcp-tag { position: absolute; left: 0; top: 0; padding: 2px 7px; border-radius: 6px; background: #fff; color: var(--teal); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; box-shadow: 0 0 0 1px rgb(0 74 72 / .22); }
.mcp-pk { position: absolute; left: 0; top: 0; z-index: 5; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgb(0 74 72 / .18); }

/* ---- 03 · Catálogo: en catalogo.css ---- */

/* ---- 04 · Varias cuentas: un carril por cuenta, de su señal hasta Kelp. El carril sigue dentro
   de Kelp, así que ningún dato se mezcla con los de otra cuenta; cada dato lleva su origen ---- */
.cue-cv { --kx: 416px; --ch: 408px; }
.cue-k { position: absolute; left: var(--kx); right: 0; top: 0; bottom: 0; border-radius: 16px; background: var(--deep);
  box-shadow: 0 0 0 6px rgb(1 33 32 / .05), 0 26px 46px -22px rgb(1 33 32 / .62); }
.cue-kh { position: absolute; left: 12px; right: 10px; top: 13px; height: 30px; display: flex; align-items: center; gap: 9px; }
.cue-kh .kbot { width: 30px; height: 30px; border-radius: 8px; background: var(--foam); color: var(--deep); }
.cue-q { justify-items: start; }
.cue-q b { font-size: 14px; font-weight: 600; color: #F2FBF8; }
.cue-qp { height: 26px; padding: 0 11px; border-radius: 99px; display: flex; align-items: center; background: var(--foam); color: var(--deep); font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* El carril: fuera de Kelp, una banda clara que se abre de la cuenta a Kelp; dentro, su continuación */
.cue-l { position: absolute; left: 0; right: 0; top: var(--y); height: 32px; transition: opacity .45s; }
.cue-l.dim { opacity: .34; }
.cue-tr { position: absolute; left: 0; top: 0; width: var(--kx); height: 32px; border-radius: 10px 0 0 10px; border: 1px dashed rgb(1 33 32 / .2); border-right: 0; }
.cue-tr i, .cue-tr b { position: absolute; inset: -1px; border-radius: inherit; }
.cue-tr i { background: rgb(255 255 255 / .74); box-shadow: inset 0 0 0 1px rgb(1 33 32 / .05); transform-origin: left; }
.cue-tr b { background: var(--foam); box-shadow: inset 0 0 0 1.5px rgb(0 74 72 / .45); transform-origin: right; }
.cue-in { position: absolute; left: var(--kx); right: 6px; top: 0; height: 32px; border-radius: 0 9px 9px 0; background: rgb(198 238 227 / .09); transition: background-color .45s; }
.cue-l.hot .cue-in { background: rgb(198 238 227 / .2); }
.cue-pt { position: absolute; left: calc(var(--kx) - 4px); top: 12px; z-index: 2; width: 8px; height: 8px; border-radius: 50%; background: #2C4F4C;
  transition: background-color .3s, box-shadow .3s; }
.cue-pt.on { background: var(--foam); box-shadow: 0 0 0 3px rgb(198 238 227 / .16); }
.cue-pt.hit { box-shadow: 0 0 0 6px rgb(198 238 227 / .3); }

/* La señal de la cuenta: la cara del socio, o el logo con su etiqueta, o la bandera del portal */
.cue-sg { position: absolute; left: 3px; top: 2px; z-index: 1; height: 28px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.cue-tl { position: relative; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px rgb(1 33 32 / .08); flex: none; transition: box-shadow .3s; }
.cue-tl > img { width: 16px; height: 16px; object-fit: contain; }
.cue-fc { border-radius: 50%; }
.cue-fc > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cue-sg.hot .cue-tl { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--teal); }
.cue-bd { position: absolute; right: -5px; bottom: -4px; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgb(1 33 32 / .3); }
.cue-bd img { width: 10px; height: 10px; }

/* Las banderas de los dos portales */
.cue-es { background: linear-gradient(#C60B1E 0 27%, #FFC400 27% 73%, #C60B1E 73%); }
.cue-mx { background: radial-gradient(circle, #8C5A2B 0 13%, transparent 15%), linear-gradient(90deg, #006847 0 34%, #fff 34% 66%, #CE1126 66%); }

/* El dato: una ficha con su origen a la izquierda (la misma señal que su carril) */
.cue-d { position: absolute; left: 136px; top: 4px; z-index: 3; height: 24px; padding: 2px 8px 2px 2px; border-radius: 99px; display: flex; align-items: center; gap: 6px;
  background: #fff; color: var(--teal); box-shadow: 0 0 0 1px rgb(1 33 32 / .06), 0 6px 14px -6px rgb(1 33 32 / .45); transition: box-shadow .35s; }
.cue-d .ic { width: 13px; height: 13px; }
.cue-d.hot { box-shadow: 0 0 0 2px var(--foam), 0 0 20px 3px rgb(198 238 227 / .5); }
.cue-mk { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: inset 0 0 0 1px rgb(1 33 32 / .1); }
.cue-ml { padding: 3px; object-fit: contain; background: rgb(1 33 32 / .05); }

/* ---- 05 · Sin migración: tres pasos, cada uno con su pieza arriba ---- */
.mig { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.mig-c { padding: 24px 24px 44px; border-right: 1px solid var(--line); }
.mig-c:last-child { border-right: 0; }
.mig-v { position: relative; height: 230px; margin-bottom: 26px; border-radius: 16px; display: grid; place-items: center; }
.mig-n { font-size: 13px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mig-t { margin-top: 6px; font-size: 22px; line-height: 1.2; letter-spacing: var(--track); font-weight: var(--w-head); }
.mig-c > p { margin-top: 8px; max-width: 34ch; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
/* 01: los interruptores de conexión */
.mig-sw { width: 248px; padding: 4px 16px; }
.mig-r { display: flex; align-items: center; gap: 11px; height: 50px; font-size: 13.5px; font-weight: 600; }
.mig-r + .mig-r { border-top: 1px solid var(--line); }
.mig-r img { width: 20px; height: 20px; object-fit: contain; }
.mig-tg { position: relative; margin-left: auto; width: 34px; height: 20px; border-radius: 99px; background: rgb(1 33 32 / .14); transition: background-color .3s; }
.mig-tg::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: translate .3s var(--ease-out); }
.mig-tg.on { background: var(--teal); }
.mig-tg.on::after { translate: 14px 0; }
/* 02: la videollamada de implantación, vuestro equipo y el de Kelp */
.mig-mt { width: 272px; }
.mig-call { padding: 8px 8px 10px; border-radius: 14px; background: #202124; box-shadow: 0 18px 36px -16px rgb(0 0 0 / .55); }
.mig-cg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mig-p { position: relative; height: 56px; border-radius: 8px; overflow: hidden; background: #3C4043; }
.mig-p img { width: 100%; height: 100%; object-fit: cover; }
.mig-p::after { content: ""; position: absolute; inset: 0; border-radius: 8px; box-shadow: inset 0 0 0 2.5px #8AB4F8; opacity: 0; transition: opacity .3s; }
.mig-p.on::after { opacity: 1; }
.mig-ct { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.mig-ct i { width: 24px; height: 24px; border-radius: 50%; background: #3C4043; }
.mig-ct .mig-end { width: 36px; border-radius: 99px; background: #EA4335; }
/* los dos equipos de la llamada, cada uno bajo su columna */
.mig-gr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; padding: 0 8px; }
.mig-gr span { padding-top: 7px; border-top: 2px solid rgb(1 33 32 / .22); text-align: center; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.mig-gr .mig-gk { border-color: #C58A3A; color: var(--ember-ink); }

/* 03 · el relevo: el equipo de Kelp lleva el primer tramo con Kelp y Kelp sigue solo */
.mig-rl { position: relative; width: 290px; height: 140px; }
.mig-tr { position: absolute; left: 0; right: 0; top: 78px; height: 4px; border-radius: 2px; background: rgb(1 33 32 / .1); }
.mig-tr i { position: absolute; top: 0; height: 100%; transform-origin: left; }
.mig-fq { left: 0; width: 45%; border-radius: 2px 0 0 2px; background: #C58A3A; }
.mig-fk { left: 45%; width: 55%; border-radius: 0 2px 2px 0; background: var(--teal); }
.mig-sg { position: absolute; top: 106px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.mig-sq { left: 0; width: 45%; }
.mig-sk { left: 45%; width: 55%; }
.mig-tm { position: absolute; left: 0; top: 62px; display: flex; }
.mig-tm img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
.mig-tm img + img { margin-left: -10px; }
.mig-tm em { position: absolute; bottom: calc(100% + 7px); left: 50%; translate: -50% 0; white-space: nowrap; font-size: 13px; font-weight: 600; font-style: normal; color: var(--ember-ink); }
.mig-k { position: absolute; left: 67px; top: 65px; width: 30px; height: 30px; box-shadow: 0 0 0 2px #fff; }

/* Pantallas estrechas: los paneles uno sobre otro, las escenas a escala y el catálogo en tres
   columnas (la capa responsive completa del revamp está pendiente) */
@media (max-width: 980px) {
  .mod { grid-template-columns: 1fr; }
  .mod-p + .mod-p { border-left: 0; border-top: 1px solid var(--line); }
  .mig { grid-template-columns: 1fr; }
  .mig-c { border-right: 0; border-bottom: 1px solid var(--line); }
  .mig-c:last-child { border-bottom: 0; }
}
@media (max-width: 700px) {
  #mapa { height: 380px; }
  .map-cv { --cw: calc(100% - 24px); --ch: 340px; --ts: 36px; --ks: 46px; }
  .mw-st > span, .mw-zero { font-size: 12.5px; }
  .mw-st b, .mw-zero b { font-size: 17px; }
  .mw-sum { gap: 10px; }
  .mod-p { padding: 16px 16px 40px; }
  /* el anillo, a tamaño real: conexiones.js lo recoloca en una elipse del ancho de la caja */
  .mod-s { height: 344px; }
  .rim-cv { --cw: 100%; }
  .rim-kw { left: calc(50% - 62px); width: 124px; }
  #s-mcp { height: 440px; margin: 16px; }
  .mcp-cv { --cw: calc(100% - 16px); --ch: 400px; --bw: calc(100% - 54px); --kw: 46px; }
  .mcp-in { gap: 6px; padding: 0 5px 0 10px; }
  .mcp-lg { width: 18px; height: 18px; }
  .mcp-tx { gap: 5px; font-size: 12px; }
  .mcp-kc { padding-right: 7px; }
  .mcp-go { display: none; }
  .mcp-k { padding: 6px; gap: 6px; }
  .mcp-kh { height: 38px; padding: 0 0 0 1px; }
  .mcp-kh b, .mcp-cap b { display: none; }
  .mcp-cap { height: 38px; padding: 0 0 0 1px; }
  .mcp-ci { width: 34px; height: 34px; }
  .mcp-kh .kbot { width: 34px; height: 34px; }
  .cue-cv { --cw: 350px; --kx: 186px; }
  .cue-qp { padding: 0 9px; font-size: 12px; }
  .mig-c { padding: 16px 16px 36px; }
}