/* ============================================================
   Kelp · Precio. Solo lo propio de esta página; hero, cabeceras,
   diferencias, cierre y FAQ son del sistema (kelp.css).
   ============================================================ */

/* ---- Hero: el fichaje, contado entero en el organigrama de la firma: la propuesta junto al
   puesto vacío, Kelp que lo ocupa y trabaja para todos, y la firma que crece dentro de una cuota ---- */
#fichaje { height: 600px; }
.fi-cv { --cw: 740px; --ch: 420px; zoom: 1.1; }
.fi-dyn { position: absolute; inset: 0 0 0 20px; }
.fi-tree { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fi-tree path { fill: none; stroke: rgb(198 238 227 / .3); stroke-width: 1.5; }
.fi-tree .fi-kl { stroke-dasharray: 4 5; transition: stroke .4s; }
.fi-tree .fi-kl.on { stroke: rgb(198 238 227 / .75); }
.fi-tree .fi-nb { stroke-dasharray: 1; stroke-dashoffset: 1; }
.fi-p, .fi-slot, .fi-k { position: absolute; width: 186px; height: 56px; border-radius: 12px; }
/* dónde está cada uno en el organigrama */
.fi-el { left: 257px; top: 24px; }
.fi-jo { left: 27px; top: 156px; }
.fi-ca { left: 487px; top: 156px; }
.fi-slot, .fi-k { left: 257px; top: 156px; }
.fi-ma { left: 2px; }
.fi-an { left: 112px; }
.fi-lu { left: 222px; }
.fi-pa { left: 382px; }
.fi-ana { left: 492px; }
.fi-no { left: 602px; }
.fi-tree-m { display: none; }
.fi-p { display: flex; align-items: center; gap: 10px; padding: 0 12px; background: #fff; box-shadow: 0 18px 36px -18px rgb(0 0 0 / .6); }
.fi-p img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.fi-p b, .fi-k b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.fi-p small, .fi-k small { display: block; font-size: 12px; line-height: 1.3; color: var(--ink-3); white-space: nowrap; }
/* marca de trabajo recibido: el símbolo de Kelp en la esquina de quien lo recibe */
.fi-bd { position: absolute; width: 20px; height: 20px; border-radius: 6px; right: -6px; top: -6px; box-shadow: 0 0 0 2px #fff; }
.fi-bd svg { width: 14px; height: 14px; }
.fi-a { position: absolute; top: 292px; width: 96px; display: grid; justify-items: center; gap: 6px; }
.fi-ph { position: relative; width: 48px; height: 48px; }
.fi-ph img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2.5px rgb(198 238 227 / .3), 0 12px 24px -10px rgb(0 0 0 / .6); }
.fi-ph .fi-bd { right: -5px; top: auto; bottom: -3px; border-radius: 50%; box-shadow: 0 0 0 2px #0B3F3B; }
.fi-a > b { font-size: 12.5px; font-weight: 600; color: #F2FBF8; white-space: nowrap; line-height: 1.2; }
.fi-a em { margin-top: -2px; font-style: normal; font-size: 10.5px; font-weight: 600; line-height: 1; padding: 3px 7px; border-radius: 99px; background: var(--foam); color: var(--deep); }
.fi-slot { display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px rgb(198 238 227 / .4); background: repeating-linear-gradient(135deg, transparent 0 7px, rgb(198 238 227 / .04) 7px 8px); font-size: 13px; font-weight: 600; color: rgb(198 238 227 / .7); }
.fi-k { display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--foam); color: var(--deep); z-index: 4;
  box-shadow: 0 0 0 6px rgb(198 238 227 / .14), 0 20px 40px -14px rgb(0 0 0 / .65); }
.fi-k .kbot { width: 34px; height: 34px; border-radius: 10px; }
.fi-k small { color: var(--teal); font-weight: 600; }
.fi-chip { position: absolute; left: 0; top: 0; z-index: 9; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 8px; border-radius: 99px;
  background: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 12px 26px -8px rgb(0 0 0 / .55); }
.fi-chip img { width: 16px; height: 16px; }
/* la propuesta cuelga del puesto vacío: alcance y precio cerrados, y tú la aceptas */
.fi-tree .fi-pl { stroke: rgb(198 238 227 / .5); stroke-dasharray: 3 4; }
.fi-prop { position: absolute; left: 250px; top: 232px; width: 200px; padding: 12px 14px 12px; display: flex; flex-direction: column; box-shadow: 0 30px 60px -24px rgb(0 0 0 / .6); }
.fi-dh { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.fi-dh .ic { width: 16px; height: 16px; color: var(--teal); }
.fi-r { display: grid; grid-template-columns: 1fr auto 20px; align-items: center; gap: 10px; height: 38px; border-bottom: 1px solid var(--line); }
.fi-r span { color: var(--ink-3); font-size: 13px; }
.fi-r b { font-size: 13.5px; font-weight: 600; }
.fi-ck { width: 20px; height: 20px; border-radius: 50%; background: var(--deep); color: var(--foam); display: grid; place-items: center; }
.fi-ck .ic { width: 11px; height: 11px; stroke-width: 3; }
.fi-ft { display: flex; align-items: center; padding-top: 10px; }
.fi-acc { display: inline-grid; }
.fi-acc > * { grid-area: 1 / 1; justify-self: start; align-self: center; }
.fi-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 18px; border-radius: 8px; background: var(--deep); color: #fff; font-size: 13px; font-weight: 600; }
.fi-acc .tag { font-size: 12.5px; padding: 4px 11px; }
/* toda la firma dentro de una cuota: el marco abarca a todos, también a quien entra */
.fi-fr { position: absolute; left: -18px; top: 8px; width: 736px; height: 404px; border-radius: 22px; box-shadow: inset 0 0 0 1.5px rgb(198 238 227 / .45); }
.fi-q { position: absolute; left: 24px; top: 0; translate: 0 -50%; padding: 6px 14px; border-radius: 99px; background: var(--foam); color: var(--deep); font-size: 13px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 12px 26px -10px rgb(0 0 0 / .55); }

/* ---- Cómo se empieza: los dos pasos lado a lado ---- */
.emp { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.emp-p { display: flex; flex-direction: column; padding: 24px 24px 40px; }
.emp-p:first-child { border-right: 1px solid var(--line); }
.emp-ar { position: absolute; left: 50%; top: 149px; translate: -50% -50%; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 1px var(--line-2), 0 10px 22px -10px rgb(1 33 32 / .45); color: var(--deep); }
.emp-ar .ic { width: 18px; height: 18px; }
.emp-v { position: relative; height: 250px; border-radius: 18px; }
.emp-cv { --cw: 500px; --ch: 226px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.emp-row { display: grid; grid-template-columns: 1fr auto 22px; align-items: center; gap: 12px; height: 48px; padding: 0 14px 0 12px; }
.emp-row > b { font-size: 13.5px; font-weight: 600; }
.emp-vis { display: flex; align-items: center; gap: 6px; }
.emp-tl { width: 32px; height: 32px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); display: grid; place-items: center; }
.emp-tl img { width: 17px; height: 17px; }
.emp-dc { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 8px; border-radius: 8px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; font-weight: 600; }
.emp-dc .ic { width: 13px; height: 13px; color: var(--teal); }
.emp-ppl { gap: 0; }
.emp-ppl img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; margin-left: -7px; }
.emp-ppl img:first-child { margin-left: 0; }
.emp-ck { width: 22px; height: 22px; border-radius: 50%; background: var(--deep); color: var(--foam); display: grid; place-items: center; }
.emp-ck .ic { width: 12px; height: 12px; stroke-width: 3; }
.emp-run { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 28px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.emp-trk { position: relative; height: 4px; border-radius: 2px; background: rgb(1 33 32 / .12); }
.emp-fl { position: absolute; inset: 0; border-radius: 2px; background: var(--teal); transform-origin: left; }
.emp-go { position: absolute; left: 22%; bottom: 12px; translate: -50% 0; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 4px; border-radius: 99px;
  background: var(--deep); color: #fff; font-size: 12px; white-space: nowrap; box-shadow: 0 8px 18px -8px rgb(1 33 32 / .7); }
.emp-go::after { content: ""; position: absolute; left: 50%; bottom: -5px; translate: -50% 0; border: 5px solid transparent; border-bottom: 0; border-top-color: var(--deep); }
.emp-go .kbot { width: 18px; height: 18px; border-radius: 50%; background: var(--foam); color: var(--deep); }
.emp-br { position: relative; align-self: center; padding: 0 14px 14px; font-size: 13px; font-weight: 600; color: var(--ink); }
.emp-br::after { content: ""; position: absolute; left: -150px; right: -150px; bottom: 0; height: 9px; border: 1.5px solid rgb(1 33 32 / .22); border-bottom: 0; border-radius: 8px 8px 0 0; }
.emp-pcs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.emp-pc { display: grid; justify-items: center; align-content: center; gap: 8px; height: 74px; padding: 0 6px; font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.2; }
.emp-pc .ic { width: 22px; height: 22px; color: var(--teal); }
.emp-who { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 18px; padding: 0 4px; }
.emp-g { display: grid; gap: 7px; }
.emp-g > b { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.emp-kt { justify-items: end; }
.emp-fc { display: flex; }
.emp-fc img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; margin-left: -8px; box-shadow: 0 0 0 2px #fff; }
.emp-fc img:first-child { margin-left: 0; }
.emp-kt .emp-fc img { box-shadow: 0 0 0 2px var(--deep); }
.emp-t { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 28px clamp(8px, 2vw, 32px) 0; }
.emp-n { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.emp-t .h3 { margin-top: 8px; }
.emp-pr { margin-top: 10px; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.emp-pr b { color: var(--ink); font-weight: 600; }
.emp-l { display: grid; gap: 7px; margin-top: 18px; }
.emp-l li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; }
.emp-l .ic { width: 16px; height: 16px; margin-top: 3px; color: var(--teal); stroke-width: 2.2; }
.emp-sub { align-self: stretch; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line-2); font-size: 13px; font-weight: 600; color: var(--ink-3); }
.emp-sub + .emp-l { margin-top: 10px; }
.emp-t > .btn { margin-top: auto; }
.emp-t > .emp-l:last-of-type { margin-bottom: 30px; }

/* ---- Un crédito es trabajo hecho: tres tamaños de trabajo y sus fichas ---- */
.cre { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 24px; }
.cre-bg { position: absolute; left: 24px; right: 24px; top: 0; height: 380px; border-radius: 18px; }
.cre-c { position: relative; z-index: 1; }
.cre-c + .cre-c .cre-vis { box-shadow: inset 1px 0 0 rgb(1 33 32 / .07); }
.cre-vis { position: relative; height: 380px; }
.cre-msg, .cre-doc, .cre-ew { position: absolute; left: 50%; translate: -50% 0; }
.cre-msg { top: 60px; width: 252px; }
.cre-mh { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; }
.cre-mh img { width: 15px; height: 15px; }
.cre-mh em { margin-left: auto; font-style: normal; font-weight: 500; font-size: 11px; color: var(--ink-3); }
.cre-mb { display: flex; gap: 9px; padding: 12px 12px 14px; }
.cre-mb .kbot { width: 26px; height: 26px; border-radius: 8px; }
.cre-mb > div { flex: 1; }
.cre-mb b { display: block; font-size: 12px; font-weight: 600; }
.cre-mb p { font-size: 12.5px; color: var(--ink-2); margin-top: 1px; }
.cre-mb i { display: block; height: 5px; margin-top: 7px; border-radius: 3px; background: #E4EAE8; transform-origin: left; }
.cre-doc { top: 36px; width: 196px; padding: 12px 14px 14px; }
.cre-dh { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.cre-dh img { width: 14px; height: 14px; }
.cre-dt { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.cre-dl { display: block; height: 5px; margin-top: 8px; border-radius: 3px; background: #EEF1F0; }
.cre-dl i { display: block; height: 100%; border-radius: 3px; background: #CBD5D2; transform-origin: left; }
.cre-df { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--line-2); font-size: 11.5px; color: var(--ink-2); }
.cre-df b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cre-ew { top: 46px; width: 262px; display: grid; justify-items: center; gap: 14px; }
.cre-wb { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 6px; border-radius: 99px; background: var(--deep); color: #F2FBF8; font-size: 12.5px; font-weight: 600; box-shadow: 0 10px 22px -10px rgb(1 33 32 / .6); }
.cre-wb .kbot { width: 26px; height: 26px; border-radius: 50%; background: var(--foam); color: var(--deep); }
.cre-fd { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px 6px; width: 100%; }
.cre-fd span { position: relative; height: 30px; border-radius: 3px 6px 6px 6px; background: #fff; box-shadow: 0 0 0 1px rgb(1 33 32 / .08), 0 6px 12px -8px rgb(1 33 32 / .4);
  display: grid; place-items: center; padding-top: 3px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.cre-fd span::before { content: ""; position: absolute; left: 0; top: -4px; width: 18px; height: 5px; border-radius: 3px 3px 0 0; background: #fff; box-shadow: 0 -1px 0 rgb(1 33 32 / .08); }
.cre-pile { position: absolute; left: 50%; bottom: 44px; width: 76px; height: 0; translate: -50% 0; }
.cre-pile::before { content: ""; position: absolute; left: -10px; right: -10px; bottom: -14px; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgb(1 33 32 / .22), transparent); }
/* una ficha de crédito vista de lado: cara con el símbolo y canto */
.cre-co { position: absolute; left: 0; width: 76px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(120% 140% at 35% 25%, #E6F6F0, #B5E0D2 70%); box-shadow: inset 0 0 0 1.5px rgb(0 74 72 / .28), 0 6px 0 #1E6A60, 0 7px 0 #0B3F3B; }
.cre-co svg { width: 34px; height: 17px; fill: var(--teal); opacity: .75; }
.cre-t { padding: 28px clamp(16px, 2.2vw, 28px) 48px; }
.cre-c + .cre-c .cre-t { border-left: 1px solid var(--line); }
.cre-k { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--teal); }
.cre-k i { width: 11px; height: 11px; border-radius: 50%; background: var(--foam); box-shadow: inset 0 0 0 1.5px var(--teal); }
.cre-k i:last-of-type { margin-right: 4px; }
.cre-h { margin-top: 10px; font-size: 22px; line-height: 1.2; letter-spacing: var(--track); font-weight: var(--w-head); }
.cre-t p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 34ch; }

/* ---- La cuota: los créditos del mes como una fila de fichas ---- */
.cuo-v { position: relative; height: 296px; margin: 0 24px; border-radius: 18px; }
.cuo-cv { --cw: 1016px; --ch: 214px; }
.cuo-dyn { position: absolute; inset: 0; }
.cuo-top { display: flex; align-items: baseline; justify-content: space-between; }
.cuo-t { font-size: 15px; font-weight: 600; }
.cuo-use { display: flex; align-items: baseline; gap: 22px; font-size: 13px; color: var(--ink-2); }
.cuo-use b { margin-left: 6px; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.cuo-use b small { font-size: 15px; font-weight: 500; color: var(--ink-3); }
.cuo-tot { transition: color .3s; }
.cuo-tot.on { color: var(--ok); }
.cuo-row { position: absolute; left: 0; top: 118px; display: flex; gap: 4px; }
.cuo-co { position: relative; width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1.5px rgb(0 74 72 / .28), 0 3px 6px -3px rgb(1 33 32 / .35); transition: background-color .25s, box-shadow .25s; }
.cuo-co svg { width: 18px; height: 18px; fill: rgb(0 74 72 / .28); transition: fill .25s; }
.cuo-co.on { background: var(--teal); box-shadow: inset 0 0 0 1.5px var(--teal), 0 3px 6px -3px rgb(1 33 32 / .5); }
.cuo-co.on svg { fill: var(--foam); }
.cuo-co.dark { background: var(--deep); box-shadow: inset 0 0 0 1.5px var(--deep); }
.cuo-co.dark svg { fill: rgb(198 238 227 / .7); }
.cuo-co.x { background: transparent; box-shadow: inset 0 0 0 1.5px rgb(1 33 32 / .22); }
.cuo-co.x svg { fill: transparent; }
.cuo-co.x.in { background: #fff; box-shadow: inset 0 0 0 1.5px rgb(0 74 72 / .28), 0 3px 6px -3px rgb(1 33 32 / .35); }
.cuo-co.x.in svg { fill: rgb(0 74 72 / .28); }
.cuo-co.x.in.on { background: var(--teal); box-shadow: inset 0 0 0 1.5px var(--teal); }
.cuo-co.x.in.on svg { fill: var(--foam); }
.cuo-co.x.in.dark { background: var(--deep); box-shadow: inset 0 0 0 1.5px var(--deep); }
.cuo-co.x.in.dark svg { fill: rgb(198 238 227 / .7); }
/* el tramo ampliable: una línea discontinua que abarca desde arriba las fichas de más, con las caras de quien las gasta dentro */
.cuo-ext { position: absolute; top: 42px; height: 72px; display: flex; justify-content: center; padding-top: 5px; font-size: 12px; font-weight: 600; color: var(--ink-3);
  border-top: 1.5px dashed rgb(1 33 32 / .25); border-inline: 1.5px dashed rgb(1 33 32 / .25); border-radius: 8px 8px 0 0; transition: color .3s, border-color .3s; }
.cuo-el { display: block; }
/* al ampliarse, el trazo discontinuo se funde en uno continuo (encima, con su propia opacidad) */
.cuo-ext::before { content: ""; position: absolute; inset: -1.5px -1.5px 0; border: 1.5px solid rgb(14 107 84 / .55); border-bottom: 0; border-radius: inherit; opacity: 0; transition: opacity .3s; }
.cuo-ext.on { color: var(--ok); border-color: transparent; }
.cuo-ext.on::before { opacity: 1; }
.cuo-f { position: absolute; top: 70px; width: 32px; height: 32px; border-radius: 50%; }
.cuo-f img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 6px 12px -6px rgb(1 33 32 / .5); }
.cuo-f.moon { display: grid; place-items: center; background: var(--deep); box-shadow: 0 0 0 2px #fff; color: var(--foam); }
.cuo-f.moon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cuo-f::after { content: ""; position: absolute; left: 50%; top: 36px; width: 1.5px; height: 8px; translate: -50% 0; background: rgb(1 33 32 / .25); }
.cuo-cap { position: absolute; top: 166px; left: 0; translate: -50% 0; display: flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 8px; background: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 0 0 1px var(--line), 0 10px 20px -12px rgb(1 33 32 / .5); }
.cuo-cap small { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.cuo-cap::before { content: ""; position: absolute; left: var(--nx, 50%); top: -5px; width: 9px; height: 9px; translate: -50% 0; rotate: 45deg; background: #fff; box-shadow: -1px -1px 0 var(--line); }
.cuo-lk { margin-top: 10px; font-size: 14px; }

@media (max-width: 1180px) {
  .fi-cv { zoom: 1; }
  .emp-cv { zoom: .86; }
  .cuo-cv { zoom: .9; }
}
@media (max-width: 980px) {
  #fichaje { height: 500px; }
  .emp-cv { zoom: 1; }
  .emp { grid-template-columns: 1fr; }
  .emp-p:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
  .emp-ar { display: none; }
  .cre { grid-template-columns: 1fr; }
  .cre-bg { display: none; }
  .cre-vis { height: 360px; margin-top: 16px; border-radius: 18px; background: linear-gradient(160deg, #E4F4EE, #F6EEDA); }
  .cre-c + .cre-c .cre-vis { box-shadow: none; }
  .cre-c + .cre-c .cre-t { border-left: 0; }
  .cuo-cv { zoom: .74; }
}
@media (max-width: 860px) {
  .fi-cv { zoom: .88; }
  .cuo-cv { zoom: .62; }
}
@media (max-width: 700px) {
  /* Hero en vertical: el mismo organigrama en tres columnas (Jorge, el puesto nuevo, Carmen) y
     cada equipo en lista bajo su director; la propuesta cuelga del puesto, en la columna central */
  #fichaje { height: 408px; }
  .fi-cv { --cw: 340px; --ch: 360px; zoom: 1; }
  .fi-dyn { inset: 0; }
  .fi-tree:not(.fi-tree-m) { display: none; }
  .fi-tree-m { display: block; }
  .fi-p, .fi-slot, .fi-k { width: 104px; height: 80px; }
  .fi-p, .fi-k { flex-direction: column; justify-content: center; gap: 5px; padding: 0 6px; text-align: center; }
  .fi-p img { width: 30px; height: 30px; }
  .fi-p b, .fi-k b { font-size: 12.5px; }
  .fi-p small, .fi-k small { font-size: 11px; }
  .fi-k .kbot { width: 30px; height: 30px; border-radius: 9px; }
  .fi-slot { font-size: 12px; }
  .fi-el { left: 95px; top: 22px; width: 150px; height: 50px; flex-direction: row; justify-content: flex-start; gap: 9px; padding: 0 12px; text-align: left; }
  .fi-jo { left: 0; top: 118px; }
  .fi-slot, .fi-k { left: 118px; top: 118px; }
  .fi-ca { left: 236px; top: 118px; }
  .fi-a { width: 82px; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; justify-items: start; align-content: center; column-gap: 6px; row-gap: 3px; height: 30px; }
  .fi-a .fi-ph { grid-row: 1 / 3; width: 28px; height: 28px; }
  .fi-ph img { width: 28px; height: 28px; box-shadow: 0 0 0 2px rgb(198 238 227 / .3), 0 8px 16px -8px rgb(0 0 0 / .6); }
  .fi-ph .fi-bd { width: 16px; height: 16px; right: -5px; bottom: -4px; }
  .fi-ph .fi-bd svg { width: 11px; height: 11px; }
  .fi-a > b { align-self: center; grid-row: 1 / 3; font-size: 11px; }
  .fi-a.fi-new > b { grid-row: 1; align-self: end; }
  .fi-a em { margin: 0; font-size: 10px; padding: 2px 6px; }
  .fi-ma { left: 14px; top: 222px; }
  .fi-an { left: 14px; top: 262px; }
  .fi-lu { left: 14px; top: 302px; }
  .fi-ana { left: 258px; top: 222px; }
  .fi-no { left: 258px; top: 262px; }
  .fi-pa { left: 258px; top: 302px; }
  .fi-prop { left: 112px; top: 214px; width: 126px; padding: 10px 6px; }
  .fi-dh { gap: 6px; padding-bottom: 8px; font-size: 13px; }
  .fi-r { gap: 4px; grid-template-columns: 1fr auto 16px; height: 32px; }
  .fi-r span, .fi-r b { font-size: 11.5px; }
  .fi-ck { width: 16px; height: 16px; }
  .fi-ck .ic { width: 9px; height: 9px; }
  .fi-ft { padding-top: 8px; }
  .fi-btn { height: 30px; padding: 0 14px; font-size: 12.5px; }
  .fi-fr { left: -8px; top: 0; width: 356px; height: 356px; border-radius: 18px; }
  .fi-q { left: 14px; padding: 5px 12px; font-size: 12px; }
  .emp-p { padding: 16px 12px 40px; }
  /* Cómo se empieza: lienzos de móvil sin encoger. En el piloto cada fila pone su nombre arriba
     y sus piezas debajo; en la suscripción la llave de la cuota se estrecha a lo ancho del lienzo */
  .emp-v { height: 330px; }
  .emp-p + .emp-p .emp-v { height: 250px; }
  .emp-cv { --cw: 334px; --ch: 306px; }
  .emp-p + .emp-p .emp-cv { --ch: 226px; }
  .emp-row { grid-template-columns: 1fr 22px; grid-template-areas: "b ck" "vis vis"; row-gap: 8px; height: auto; padding: 10px 12px 12px; }
  .emp-row > b { grid-area: b; }
  .emp-row > .emp-ck { grid-area: ck; }
  .emp-vis { grid-area: vis; }
  .emp-run { margin-top: 30px; gap: 10px; }
  .emp-br::after { left: -100px; right: -100px; }
  .emp-pcs { gap: 6px; }
  .emp-pc { height: 70px; font-size: 12px; }
  .cre { padding: 0 12px; }
  /* Un crédito: en una columna, el trabajo a la izquierda y su pila de fichas a la derecha, sobre
     la misma base: la escena cabe en 200 px en vez de dejar aire entre el trabajo y la pila */
  .cre-vis { height: 200px; }
  .cre-msg, .cre-doc, .cre-ew { left: 14px; top: auto; bottom: 26px; translate: 0 0; }
  .cre-ew { width: 244px; }
  .cre-pile { left: auto; right: 22px; bottom: 30px; translate: 0 0; }
  /* La cuota: las 30 fichas en tres filas de diez (24 de la cuota y 6 ampliables al final); el
     rótulo de cada trabajo va debajo, centrado, y la cara de quien lo pide sobre su grupo */
  .cuo-v { height: 392px; margin: 0 12px; }
  .cuo-cv { --cw: 330px; --ch: 356px; zoom: 1; }
  .cuo-top { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cuo-t { font-size: 14px; }
  .cuo-use { gap: 18px; }
  .cuo-use b { font-size: 20px; }
  .cuo-row { top: 100px; width: 330px; flex-wrap: wrap; gap: 62px 3px; }
  .cuo-ext { height: 52px; padding-top: 3px; }
  .cuo-f { width: 28px; height: 28px; }
  .cuo-f img { width: 28px; height: 28px; }
  .cuo-f.moon svg { width: 13px; height: 13px; }
  .cuo-f::after { top: 31px; height: 6px; }
  .cuo-cap { top: 328px; }
  .cuo-cap::before { display: none; }
}