/* ============================================================
   Kelp · Para consultoras. Solo lo propio de esta página: el hero
   (el archivo de la firma y la propuesta) y las escenas de "Te
   sonará" y de las cuatro capacidades. Los componentes de la
   familia están en vertical.css. Prefijo de clases: cn-.
   ============================================================ */

/* ---- Hero: el archivo de proyectos abajo, la propuesta de Industrias Velasco arriba ---- */
#archivo { height: 600px; }
.cn-cv { --cw: 1104px; --ch: 520px; --hx: 872px; --hy: 112px; --bdy: -110px; }
/* --hx, --hy: donde descansa Kelp; --bdy: a qué altura se pone sobre el archivador que abre
   (los lee consultoras.js) */
.cn-dyn { position: absolute; inset: 0; }
.cn-doc { position: absolute; left: 262px; top: 0; z-index: 3; width: 580px; box-shadow: 0 30px 60px -24px rgb(0 0 0 / .6); }
.cn-doc .c-h img { width: 15px; height: 15px; }
.cn-doc .c-h .end { display: flex; align-items: center; }
.cn-st { justify-items: end; }
.cn-send { display: inline-grid; place-items: center; height: 24px; margin-left: 8px; padding: 0 11px; border-radius: 6px; background: var(--deep); color: var(--foam); font-size: 12px; font-weight: 600; }
.cn-db { display: grid; grid-template-columns: 1fr 1fr; }
.cn-sec { position: relative; padding: 12px 18px 14px; }
.cn-sa { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
.cn-sb { border-right: 1px solid var(--line); }
.cn-sec::after { content: ""; position: absolute; left: 18px; right: 18px; top: 40px; bottom: 14px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px rgb(1 33 32 / .1); background-image: repeating-linear-gradient(135deg, transparent 0 7px, rgb(1 33 32 / .035) 7px 8px); transition: opacity .3s; }
.cn-sec.cn-f::after { opacity: 0; }
.cn-sh { display: flex; align-items: center; gap: 8px; height: 18px; }
.cn-sh > b { font-size: 12.5px; font-weight: 600; color: var(--ink-3); transition: color .3s; }
.cn-f .cn-sh > b { color: var(--ink); }
.cn-src { display: flex; align-items: center; gap: 5px; margin-left: auto; padding: 2px 9px; border-radius: 99px; background: var(--ember-2); color: var(--ember-ink); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.cn-src .ic { width: 12px; height: 12px; }
.cn-chev { display: flex; margin-top: 10px; }
.cn-chev span { flex: 1; height: 34px; display: grid; place-items: center; padding-left: 8px; background: #0E5A55; color: #fff; font-size: 12.5px; font-weight: 600;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); }
.cn-chev span:first-child { padding-left: 0; border-radius: 6px 0 0 6px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
.cn-chev span + span { margin-left: -9px; }
.cn-chev span:nth-child(2) { background: #2F7D72; }
.cn-chev span:nth-child(3) { background: #5E9E8E; }
.cn-fee { display: grid; margin-top: 8px; }
.cn-fee > span { display: flex; align-items: center; gap: 8px; height: 22px; font-size: 12.5px; color: var(--ink-2); }
.cn-fee i { width: 8px; height: 8px; border-radius: 2px; background: #0E5A55; }
.cn-fee > span:nth-child(2) i { background: #2F7D72; }
.cn-fee > span:nth-child(3) i { background: #5E9E8E; }
.cn-fee b { margin-left: auto; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.cn-fee > .cn-fee-t { height: 28px; margin-top: 4px; border-top: 1px solid var(--line); font-weight: 600; color: var(--ink); }
.cn-fee-t b { font-size: 15px; }
.cn-cred { display: grid; gap: 9px; margin-top: 12px; }
.cn-cred > span { display: flex; align-items: center; gap: 9px; height: 22px; font-size: 12.5px; font-weight: 600; }
.cn-cred i { flex: 1; height: 6px; margin-left: 6px; border-radius: 3px; background: #E4EAE8; }
/* el archivo: archivadores de proyectos pasados en una balda */
.cn-shelf { position: absolute; left: 140px; top: 350px; height: 140px; display: flex; align-items: flex-end; gap: 8px; }
.cn-bd { position: relative; z-index: 1; width: 44px; height: var(--h, 130px); border-radius: 6px 6px 3px 3px; background: linear-gradient(90deg, rgb(255 255 255 / .16), transparent 24%, transparent 76%, rgb(0 0 0 / .16)), var(--c);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08), 0 10px 18px -12px rgb(0 0 0 / .7); transition: translate .35s var(--ease-out), box-shadow .35s; }
.cn-bd > b { position: absolute; left: 50%; top: 10px; width: 22px; height: calc(100% - 46px); margin-left: -11px; display: grid; place-items: center; overflow: hidden; border-radius: 3px; background: #FBF7EE;
  box-shadow: inset 0 0 0 1px rgb(1 33 32 / .08); writing-mode: vertical-rl; rotate: 180deg; font-size: 10px; font-weight: 600; letter-spacing: .01em; color: var(--ink); white-space: nowrap; }
.cn-bd > i { position: absolute; left: 50%; bottom: 11px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: rgb(0 0 0 / .28); box-shadow: inset 0 2px 3px rgb(0 0 0 / .35), 0 0 0 3px rgb(255 255 255 / .14); }
.cn-bd.on { translate: 0 -14px; box-shadow: 0 0 0 2px var(--foam), 0 18px 28px -12px rgb(0 0 0 / .7); }
.cn-plank { position: absolute; left: 110px; top: 490px; width: 884px; height: 6px; border-radius: 3px; background: rgb(198 238 227 / .24); box-shadow: 0 10px 20px -8px rgb(0 0 0 / .5); }
.cn-cap { position: absolute; left: 110px; top: 504px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #F2FBF8; }
.cn-cap .ic { width: 15px; height: 15px; color: var(--foam); }
.cn-pg { position: absolute; left: 0; top: 0; z-index: 12; width: 24px; height: 30px; padding: 6px 4px; display: grid; align-content: start; gap: 3px; border-radius: 3px; background: #fff; box-shadow: 0 8px 16px -6px rgb(0 0 0 / .55); opacity: 0; }
.cn-pg i { height: 3px; border-radius: 2px; background: #C9D3D0; }
.cn-pg i:last-child { width: 60%; }

/* ---- Te sonará 01 · el mes de las propuestas: del fin de semana al martes ---- */
.cn-mo { position: absolute; inset: 0; overflow: visible; }
.cn-mo-h, .cn-mo-b { display: grid; grid-template-columns: repeat(7, 1fr); }
.cn-mo-h { height: 22px; align-items: center; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 600; color: var(--ink-3); text-align: center; }
.cn-mo-b { grid-auto-rows: 32px; background: linear-gradient(90deg, transparent calc(500% / 7), rgb(1 33 32 / .05) 0) 0 0 / 100% 100%; border-radius: 0 0 12px 12px; }
.cn-mo-b span { padding: 4px 0 0 6px; font-size: 10px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cn-mo-b span:nth-child(n+8) { border-top: 1px solid var(--line); }
/* cada propuesta, en el martes de su semana (--r); --f es la columna del fin de semana donde caía */
.cn-mo-d { position: absolute; left: calc(100% / 7 * 1.5 + 4px); top: calc(22px + var(--r) * 32px + 16px); width: 30px; height: 22px; margin: -10px 0 0 -11px; border-radius: 6px; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 4px 10px -5px rgb(1 33 32 / .45); }
.cn-mo-d img { width: 14px; height: 14px; }
.cn-mo .kbot { position: absolute; right: -9px; top: -9px; width: 22px; height: 22px; border-radius: 7px; box-shadow: 0 0 0 2px #fff; }

/* ---- Te sonará 02 · el plan de dedicación ---- */
.cn-sf { position: absolute; inset: 0; padding: 4px 16px; display: grid; align-content: center; }
.cn-sf-h, .cn-sf-r { display: grid; grid-template-columns: 92px 1fr 1fr; gap: 16px; align-items: center; height: 34px; }
.cn-sf-h { border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.cn-sf-who { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.cn-sf-who img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.cn-sf-who .kbot { width: 22px; height: 22px; border-radius: 6px; }
.cn-sf-t { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--ok); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cn-sf-p { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.cn-sf-p .co { width: 20px; height: 20px; font-size: 8.5px; }
.cn-sf-b { height: 10px; border-radius: 5px; background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.cn-sf-b i { display: block; height: 100%; border-radius: 5px; }
.cn-sf-s { width: 30%; background: #2F7D72; }
.cn-sf-k { width: 70%; background: var(--deep); }

/* ---- Te sonará 03 · tres versiones de lo mismo, una de la casa ---- */
.cn-v { position: absolute; top: 14px; width: 104px; display: grid; justify-items: center; gap: 8px; opacity: 0; }
.cn-v1 { left: 12px; }
.cn-v2 { left: 138px; }
.cn-v3 { left: 264px; }
.cn-v small { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.cn-vs { width: 104px; height: 76px; padding: 8px; display: grid; grid-template-rows: auto 1fr; gap: 6px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 10px 20px -14px rgb(1 33 32 / .45); }
.cn-vt { width: 62%; height: 6px; border-radius: 3px; background: #C9D3D0; }
.cn-vm { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; }
.cn-vm i { border-radius: 2px; background: #D7E9E3; }
.cn-v1 .cn-vm i:nth-child(4) { background: #5E9E8E; }
.cn-v2 .cn-vt { width: 44%; margin-left: auto; background: #E7C98F; }
.cn-v2 .cn-vm { grid-template-columns: 2fr 1fr; gap: 5px; }
.cn-v2 .cn-vm i { background: #F6E7C4; }
.cn-v2 .cn-vm i:nth-child(1) { background: #E2B36A; }
.cn-v3 .cn-vm { gap: 0; box-shadow: 0 0 0 1px #B8C4D3; }
.cn-v3 .cn-vm i { border-radius: 0; background: #EDF1F5; box-shadow: inset 0 0 0 .5px #B8C4D3; }
.cn-v3 .cn-vm i:nth-child(2) { background: #8FA3BD; }
.cn-hs { position: absolute; left: 110px; top: 2px; width: 160px; height: 146px; padding: 10px; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; }
.cn-hs-h { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; }
.cn-hs-h .kbot { width: 20px; height: 20px; border-radius: 6px; }
.cn-hs .cn-vm i { background: var(--foam); }
.cn-hs .cn-vm i:nth-child(1) { background: var(--deep); }
.cn-hs .cn-vm i:nth-child(4) { background: #E2B36A; }
.cn-hs-tm { display: flex; padding-left: 6px; }
.cn-hs-tm img { width: 22px; height: 22px; margin-left: -6px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; }

/* ---- Capacidad 1 · el pliego puntúa cada requisito; el marcador sube con cada respuesta ---- */
.cn-rfp { position: absolute; left: 0; top: 10px; width: 300px; height: 260px; }
.cn-kb { width: 22px; height: 22px; border-radius: 6px; margin-left: auto; }
.cn-rq { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px 10px; padding: 18px 16px 0; }
.cn-rq b { position: relative; justify-self: start; margin-left: -4px; padding: 1px 4px; font-size: 13.5px; font-weight: 600; }
.cn-rq mark { position: absolute; inset: 0; border-radius: 4px; background: #F4E3B5; transform-origin: left; }
.cn-rq b span { position: relative; }
.cn-rq em { padding: 2px 8px; border-radius: 99px; background: var(--foam-2); color: var(--ok); font-size: 12px; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; transition: background-color .3s, color .3s; }
.cn-rq em.cn-due { background: var(--tint); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); }
/* la respuesta de Kelp, escrita bajo cada requisito */
.cn-rq i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #9CCFC0; transform-origin: left; }
.cn-rq i:last-child { width: 72%; }
.cn-sc { position: absolute; left: 326px; top: 58px; width: 194px; height: 164px; display: grid; justify-items: center; align-content: start; padding-top: 16px; }
.cn-sc > small { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.cn-ga { width: 160px; height: 88px; margin-top: 6px; overflow: visible; fill: none; stroke-width: 14; stroke-linecap: round; }
.cn-ga-bg { stroke: #E4EAE8; }
.cn-ga-fg { stroke: var(--teal); stroke-dasharray: 100 100; }
.cn-sc > b { display: flex; align-items: baseline; gap: 4px; margin-top: -42px; font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.cn-sc > b small { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
.cn-pt { position: absolute; left: 0; top: 0; z-index: 5; padding: 3px 9px; border-radius: 99px; background: var(--teal); color: #fff; font-size: 12.5px; font-weight: 700; box-shadow: 0 8px 16px -8px rgb(0 74 72 / .6); opacity: 0; }

/* ---- Capacidad 2 · el borrador, en el formato de la casa ---- */
.cn-ds { position: absolute; left: 50px; top: 6px; width: 420px; height: 268px; }
.cn-ds .c-h img { width: 15px; height: 15px; }
.cn-ds-by { display: flex; align-items: center; gap: 6px; }
.cn-ds-by img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.cn-ds .cn-kb { margin-left: 10px; }
.cn-ds-b { position: relative; height: 168px; margin: 10px 14px 0; overflow: hidden; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 6px 14px -10px rgb(1 33 32 / .4); }
.cn-ds-bar { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--deep); transform-origin: left; }
.cn-ds-t { position: absolute; left: 16px; top: 14px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; transform-origin: left center; }
.cn-ds-ch { position: absolute; left: 16px; top: 50px; width: 186px; height: 90px; display: flex; align-items: flex-end; gap: 9px; border-bottom: 1px solid var(--line-2); }
.cn-ds-ch i { flex: 1; border-radius: 3px 3px 0 0; background: #2F7D72; }
.cn-ds-ch i:last-child { background: #E2B36A; }
.cn-ds-tx { position: absolute; left: 226px; top: 56px; width: 150px; display: grid; gap: 10px; }
.cn-ds-tx i { height: 6px; border-radius: 3px; background: #E4EAE8; }
.cn-ds-tx i:nth-child(2) { width: 84%; }
.cn-ds-tx i:nth-child(4) { width: 62%; }
.cn-ds-src { position: absolute; left: 16px; bottom: 12px; width: 120px; height: 4px; border-radius: 2px; background: #D5DFDB; }
.cn-ds-pg { position: absolute; right: 12px; bottom: 7px; font-size: 10.5px; font-weight: 600; color: var(--ink-3); }
.cn-ds-ok { position: absolute; right: 14px; bottom: 16px; }
.cn-ds-ap { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 7px; background: var(--deep); color: var(--foam); font-size: 12px; font-weight: 600; }

/* ---- Capacidad 3 · la reunión del viernes, preparada, y el acta el mismo día ---- */
.cn-cal { position: absolute; left: 0; top: 6px; width: 196px; height: 266px; }
.cn-cal .c-h img { width: 15px; height: 15px; }
.cn-cal-b { position: relative; height: 212px; margin: 6px 12px 0 50px; border-left: 1px solid var(--line);
  background: repeating-linear-gradient(transparent 0 15px, var(--line) 15px 16px, transparent 16px 56px); }
.cn-hr { position: absolute; left: -44px; width: 36px; font-size: 11px; font-weight: 600; line-height: 14px; color: var(--ink-3); text-align: right; }
.cn-ev { position: absolute; left: 6px; right: 0; top: 72px; height: 54px; padding: 7px 9px; border-radius: 7px; border-left: 3px solid var(--teal); background: var(--foam-2); transition: opacity .4s; }
.cn-ev b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.cn-ev small { display: block; font-size: 11px; color: var(--ink-3); }
.cn-ev.cn-dn { opacity: .5; }
.cn-now { position: absolute; left: -4px; right: 0; top: 146px; height: 2px; background: #D0473B; }
.cn-now::before { content: ""; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #D0473B; }
.cn-br { position: absolute; left: 222px; top: 6px; width: 298px; height: 192px; }
.cn-br .c-h img { width: 15px; height: 15px; }
.cn-br-b { display: grid; gap: 6px; padding: 10px 14px; }
.cn-br-r { display: flex; align-items: center; gap: 10px; height: 28px; font-size: 13px; font-weight: 600; }
.cn-br-r .ic { width: 22px; height: 22px; padding: 4px; border-radius: 50%; stroke-width: 2.4; }
.cn-br-ok { background: var(--foam-2); color: var(--ok); }
.cn-br-wa { background: var(--ember-2); color: var(--ember-ink); }
.cn-br-nx { background: #EDF1F5; color: #3E5470; }
.cn-br-l { justify-self: start; display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 7px; background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; font-weight: 600; }
.cn-br-l .ic { width: 14px; height: 14px; color: var(--teal); }
.cn-ml { position: absolute; left: 222px; top: 212px; width: 298px; height: 56px; display: flex; align-items: center; gap: 11px; padding: 0 14px; }
.cn-ml > img { width: 18px; height: 18px; }
.cn-ml b { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.cn-ml small { display: block; font-size: 11.5px; color: var(--ink-3); }
.cn-ml .tag { margin-left: auto; }

/* ---- Capacidad 4 · el proyecto cerrado deja su método; el siguiente, con otro equipo, arranca con él ---- */
.cn-pj { position: absolute; left: 0; top: 64px; width: 206px; height: 152px; }
.cn-pj-s { position: absolute; left: 0; right: 0; top: 0; padding: 14px; }
.cn-pj-a { opacity: 0; }
.cn-pj-h { display: flex; align-items: center; gap: 8px; }
.cn-pj-h b { font-size: 14px; font-weight: 600; }
.cn-pj-h .tag { margin-left: auto; }
.cn-pj-tm { display: flex; margin-top: 12px; padding-left: 6px; }
.cn-pj-tm img { width: 28px; height: 28px; margin-left: -6px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
.cn-pj-sl { position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* pieza de método: un documento con el cuadro de su tipo y dos líneas */
.cn-pj-sl i, .cn-col > i, .cn-tl { --c: #2F7D72; border-radius: 6px; box-shadow: 0 0 0 1px var(--line), 0 6px 12px -8px rgb(1 33 32 / .4);
  background: linear-gradient(var(--c) 0 0) 8px 50% / 10px 10px no-repeat, linear-gradient(#D5DFDB 0 0) 24px calc(50% - 4px) / 46% 4px no-repeat, linear-gradient(#E4EAE8 0 0) 24px calc(50% + 4px) / 30% 4px no-repeat, #fff; }
.cn-pj-sl i { height: 40px; }
.cn-pj-sl i:nth-child(2), .cn-col:nth-child(2) > i { --c: #C49A55; }
.cn-pj-sl i:nth-child(3), .cn-col:nth-child(3) > i { --c: #4A6178; }
.cn-pj-sl i.cn-e { background: none; box-shadow: none; outline: 1.5px dashed var(--line-2); outline-offset: -1.5px; }
.cn-lib { position: absolute; left: 236px; top: 8px; width: 284px; height: 262px; }
.cn-lib .c-h img { width: 15px; height: 15px; }
.cn-lib-b { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px; }
.cn-col { display: grid; gap: 7px; align-content: start; }
.cn-col > b { display: flex; align-items: center; gap: 5px; height: 20px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.cn-col > b .ic { width: 13px; height: 13px; color: var(--teal); }
.cn-col > i { height: 34px; }
.cn-col > i.cn-nw { box-shadow: 0 0 0 1.5px var(--teal), 0 6px 12px -8px rgb(0 74 72 / .5); }
.cn-tl { position: absolute; left: 0; top: 0; z-index: 5; width: 54px; height: 36px; opacity: 0; }

@media (max-width: 1180px) {
  .cn-cv { zoom: .86; }
}
@media (max-width: 700px) {
  /* Hero en vertical: la propuesta arriba, a todo el ancho, y el archivo debajo con menos
     archivadores (los que Kelp abre y algunos más); Kelp trabaja en el hueco entre los dos */
  #archivo { height: 572px; }
  .cn-cv { --cw: 340px; --ch: 532px; --hx: 296px; --hy: 312px; --bdy: -84px; zoom: 1; }
  .cn-doc { left: 0; width: 340px; }
  .cn-doc .c-h { flex-wrap: wrap; row-gap: 8px; }
  .cn-doc .c-h .end { margin-left: auto; }
  .cn-sec { padding: 12px 14px 14px; }
  .cn-sec::after { left: 14px; right: 14px; }
  .cn-chev span { font-size: 12px; }
  .cn-db { grid-template-columns: 1.25fr 1fr; }
  .cn-fee > span { gap: 6px; font-size: 12px; }
  .cn-fee b { white-space: nowrap; }
  .cn-fee-t b { font-size: 14px; }
  .cn-cred > span { font-size: 12px; }
  .cn-cred i { margin-left: 2px; }
  .cn-shelf { left: 2px; top: 356px; gap: 4px; }
  .cn-bd { width: 30px; }
  .cn-bd > b { width: 18px; margin-left: -9px; }
  .cn-bd > i { width: 12px; height: 12px; margin-left: -6px; bottom: 12px; }
  .cn-bd:is(:nth-child(1), :nth-child(3), :nth-child(7), :nth-child(11), :nth-child(14), :nth-child(15)) { display: none; }
  .cn-plank { left: 0; top: 496px; width: 340px; }
  .cn-cap { left: 0; top: 510px; }
  /* Te sonará 01: los números del mes, legibles */
  .cn-mo-h { font-size: 12px; }
  .cn-mo-b span { font-size: 12px; }
  .cn-v small { font-size: 12px; }

  /* Capacidad 1: el pliego y el marcador, lado a lado y más estrechos */
  .vt-cap:nth-child(1) .vt-cv { --cw: 360px; --ch: 270px; }
  .cn-rfp { width: 242px; height: 258px; }
  .cn-sc { left: 252px; top: 50px; width: 108px; height: 124px; padding-top: 14px; }
  .cn-ga { width: 92px; height: 51px; stroke-width: 13; }
  .cn-sc > b { margin-top: -8px; font-size: 22px; gap: 2px; }
  .cn-sc > b small { font-size: 11.5px; }

  /* Capacidad 2: el borrador a todo el ancho */
  .vt-cap:nth-child(2) .vt-cv { --cw: 340px; --ch: 280px; }
  .cn-ds { left: 0; width: 340px; }
  .cn-ds-ch { width: 164px; }
  .cn-ds-tx { left: 196px; width: 114px; }

  /* Capacidad 3: el calendario a la izquierda; la preparación y el acta, a la derecha */
  .vt-cap:nth-child(3) .vt-cv { --cw: 364px; --ch: 272px; }
  .cn-cal { width: 144px; }
  .cn-cal-b { margin: 6px 4px 0 38px; }
  .cn-hr { left: -36px; width: 30px; font-size: 11.5px; }
  .cn-ev small { font-size: 11.5px; }
  .cn-ev { padding: 7px 7px; }
  .cn-ev b { font-size: 12px; white-space: nowrap; }
  .cn-br { left: 152px; width: 212px; }
  .cn-ml { left: 152px; top: 210px; width: 212px; height: 62px; flex-wrap: wrap; align-content: center; gap: 3px 11px; padding: 0 14px; }
  .cn-ml .tag { margin-left: 29px; }

  /* Capacidad 4: el proyecto en una franja arriba y el método de la firma debajo */
  .vt-cap:nth-child(4) .vt-cv { --cw: 340px; --ch: 344px; }
  .cn-pj { top: 0; width: 340px; height: 104px; }
  .cn-pj-sl { left: 150px; }
  .cn-lib { left: 0; top: 116px; width: 340px; height: 228px; }
  .cn-col > i { height: 28px; }
}
