/* ============================================================
   Kelp · Casos de uso (hub). El recorrido entero: el ciclo de un
   cliente en el hero, un capítulo por caso de uso y, entre
   capítulos, lo que cada etapa le pasa a la siguiente.
   Hero, bloques, cierre y pie son del sistema.
   ============================================================ */

/* ---- Hero: el ciclo de un cliente. Cinco etapas en un anillo y la memoria en el centro;
   Kelp da la vuelta y cada etapa deja su resultado ---- */
#ciclo { height: 668px; }
.cyc-cv { --cw: 1100px; --ch: 560px; zoom: 1.12; }
.cyc-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cyc-base { fill: none; stroke: rgb(198 238 227 / .22); stroke-width: 1.5; stroke-dasharray: 2 6; }
.cyc-chev path { fill: none; stroke: rgb(198 238 227 / .5); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cyc-prog { fill: none; stroke: var(--foam); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0 360; filter: drop-shadow(0 0 6px rgb(198 238 227 / .45)); }
.cyc-dyn { position: absolute; inset: 0; }
.cyc-mem { position: absolute; left: 488px; top: 200px; width: 124px; height: 124px; border-radius: 50%; background: #06302C; color: #F2FBF8; text-align: center; transition: background-color .5s, color .5s, box-shadow .6s;
  display: grid; place-content: center; justify-items: center; gap: 7px;
  box-shadow: 0 0 0 1px rgb(198 238 227 / .28), 0 0 0 12px rgb(198 238 227 / .04), 0 24px 48px -16px rgb(0 0 0 / .6); }
.cyc-mem > .ic { width: 26px; height: 26px; color: var(--foam); transition: color .5s; }
.cyc-mem b { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.cyc-mem .rp { width: 124px; height: 124px; margin: -62px 0 0 -62px; box-shadow: 0 0 0 2px var(--foam); }
.cyc-mem.hit { background: var(--foam); color: var(--deep); box-shadow: 0 0 0 1.5px var(--foam), 0 0 0 12px rgb(198 238 227 / .12), 0 0 80px 10px rgb(198 238 227 / .3); }
.cyc-mem.hit > .ic { color: var(--deep); }
.cyc-st { position: absolute; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 16px; display: grid; place-items: center; z-index: 2;
  background: #0D4843; color: rgb(198 238 227 / .85); box-shadow: inset 0 0 0 1px rgb(198 238 227 / .3); transition: background-color .35s, box-shadow .35s, color .35s, scale .2s; }
.cyc-st > .ic { width: 22px; height: 22px; }
.cyc-st:hover { scale: 1.06; }
.cyc-st.on { background: #fff; color: var(--deep); box-shadow: 0 0 0 7px rgb(198 238 227 / .16), 0 16px 32px -12px rgb(0 0 0 / .6); }
.cyc-st.dn { background: var(--foam); color: var(--deep); box-shadow: 0 10px 24px -12px rgb(0 0 0 / .6); }
.cyc-ok { position: absolute; right: -7px; top: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--deep); color: var(--foam); display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--foam); opacity: 0; transition: opacity .3s; }
.cyc-ok .ic { width: 11px; height: 11px; stroke-width: 3; }
.cyc-st.dn .cyc-ok { opacity: 1; }
.cyc-lb { position: absolute; translate: -50% -50%; display: grid; justify-items: center; font-size: 14px; font-weight: 600; line-height: 1.25; white-space: nowrap;
  color: rgb(198 238 227 / .55); transition: color .35s; }
.cyc-lb small { font-size: 11px; font-weight: 600; color: rgb(198 238 227 / .4); font-variant-numeric: tabular-nums; }
.cyc-lb.on, .cyc-lb.dn { color: #F2FBF8; }
.cyc-a { position: absolute; width: 260px; height: 62px; display: flex; align-items: center; gap: 11px; padding: 0 12px 0 11px; z-index: 3;
  box-shadow: 0 24px 48px -18px rgb(0 0 0 / .65), 0 0 0 1px rgb(1 33 32 / .06); }
.cyc-lg { width: 38px; height: 38px; border-radius: 10px; background: #F2F5F4; display: grid; place-items: center; flex: none; }
.cyc-lg img { width: 20px; height: 20px; object-fit: contain; }
.cyc-tx { display: grid; gap: 5px; min-width: 0; }
.cyc-tx b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cyc-sub { display: flex; align-items: center; gap: 8px; }
.cyc-cl { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.cyc-cl .co { width: 15px; height: 15px; border-radius: 4px; font-size: 6.5px; }
.cyc-sub .tag { font-size: 11px; padding: 1px 7px; }
.cyc-ppl { position: absolute; right: 12px; top: 9px; display: flex; }
.cyc-ppl .co, .cyc-ppl img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; margin-left: -6px; font-size: 8.5px; }
.cyc-chip { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 9px; border-radius: 99px; z-index: 6;
  background: var(--foam); color: var(--deep); font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 12px 26px -8px rgb(0 0 0 / .55); }
.cyc-chip .ic { width: 15px; height: 15px; }

/* ---- Capítulo: un caso de uso, con su sitio en el ciclo y su enlace ---- */
.cu-ch { display: grid; grid-template-columns: 5fr 7fr; background: var(--white); }
.cu-ch-t { display: flex; align-items: center; gap: 26px; padding: 40px clamp(24px, 4.5vw, 56px); border-right: 1px solid var(--line); }
.cu-mini { width: 96px; height: 96px; flex: none; overflow: visible; }
.cu-mb { fill: var(--paper); stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 2 4; }
.cu-mp { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 360; transition: stroke-dasharray 1.1s var(--ease-out) .15s; }
.cu-mini.in .cu-mp { stroke-dasharray: var(--sw) 360; }
.cu-md { fill: #fff; stroke: rgb(1 33 32 / .25); stroke-width: 1.5; }
.cu-md.dn { fill: var(--teal); stroke: #fff; stroke-width: 2; }
.cu-md.cur { fill: var(--deep); stroke: var(--foam); stroke-width: 4; paint-order: stroke; }
.cu-mini use { fill: none; stroke: var(--deep); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cu-n { font-size: 13px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cu-ch-t .h3 { margin-top: 6px; }
.cu-ch-t .h3 a:hover { color: var(--teal); }
.cu-ch-t p { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.cu-ch-l { padding: 40px clamp(24px, 4.5vw, 56px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px; }
.cu-li { display: grid; gap: 10px; }
.cu-li li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; }
.cu-li .ic { width: 16px; height: 16px; margin-top: 3px; color: var(--teal); stroke-width: 2.2; }

/* ---- Relevo: la etiqueta ámbar del paso de una etapa a la siguiente ---- */
.cu-k { align-self: flex-start; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 7px; background: var(--ember-2); color: var(--ember-ink);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cu-a { color: var(--teal); font-weight: 600; }

/* ---- A · Preparar: el «sí» del contacto cae en el calendario como evento, y el evento
   gira como un naipe con el dossier en el reverso ---- */
.reu-cal { position: absolute; left: 14px; top: 64px; width: 290px; height: 332px; overflow: hidden; }
.reu-ch { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.reu-ch img { width: 16px; height: 16px; }
.reu-ch b { font-size: 14px; font-weight: 600; }
.reu-days { display: grid; grid-template-columns: repeat(5, 50px); height: 46px; margin-left: 30px; align-items: center; }
.reu-days span { display: grid; justify-items: center; font-size: 10.5px; font-weight: 600; line-height: 1.25; color: var(--ink-3); }
.reu-days b { font-size: 14px; font-weight: 600; color: var(--ink); }
.reu-grid { position: absolute; left: 30px; top: 92px; width: 250px; height: 232px;
  background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 58px), repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 50px); }
.reu-h { position: absolute; left: -28px; margin-top: 2px; font-size: 9.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.reu-bz { position: absolute; width: 46px; border-radius: 5px; background: #E9EEF3; box-shadow: inset 3px 0 0 #C9D3DD; }
.reu-slot, .reu-evt { position: absolute; left: 152px; top: 60px; width: 46px; height: 54px; border-radius: 5px; }
.reu-evt { padding: 5px 5px 0; background: #3A5BA0; color: #fff; font-size: 9.5px; font-weight: 500; line-height: 1.2; overflow: hidden; transition: box-shadow .3s; }
.reu-evt b { display: block; font-weight: 600; margin-bottom: 2px; }
.reu-evt.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3A5BA0; }
.reu-msg { position: absolute; left: 136px; top: 10px; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 10px; border-radius: 16px 16px 16px 4px;
  box-shadow: 0 0 0 1px rgb(1 33 32 / .06), 0 18px 36px -14px rgb(1 33 32 / .5); }
.reu-msg > .co { width: 30px; height: 30px; border-radius: 50%; font-size: 10px; }
.reu-msg small { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--ink-3); }
.reu-msg small img { width: 12px; height: 12px; }
.reu-msg b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
/* El naipe: dos caras, el evento delante y el dossier detrás */
.reu-card { position: absolute; left: 330px; top: 28px; width: 252px; height: 364px; z-index: 4; perspective: 1100px; }
.reu-in { position: absolute; inset: 0; transform-style: preserve-3d; }
.reu-f, .reu-b { position: absolute; inset: 0; overflow: hidden; border-radius: 16px; background: #fff; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 0 0 1px rgb(1 33 32 / .07), 0 30px 60px -24px rgb(1 33 32 / .5); }
.reu-f { box-shadow: inset 0 0 0 9px #fff, inset 0 0 0 10.5px rgb(58 91 160 / .28), 0 0 0 1px rgb(1 33 32 / .07), 0 30px 60px -24px rgb(1 33 32 / .5); }
.reu-b { transform: rotateY(180deg); }
.reu-ix { position: absolute; left: 22px; top: 20px; display: grid; font-size: 11px; font-weight: 600; line-height: 1.2; color: #3A5BA0; }
.reu-ix b { font-size: 18px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.reu-ix-b { left: auto; top: auto; right: 22px; bottom: 20px; rotate: 180deg; }
.reu-gc { position: absolute; right: 22px; top: 22px; width: 20px; height: 20px; }
.reu-em { position: absolute; left: 0; right: 0; top: 80px; display: grid; justify-items: center; gap: 10px; text-align: center; }
.reu-em > .co { width: 72px; height: 72px; border-radius: 20px; font-size: 24px; }
.reu-em > b { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.reu-ppl { display: flex; }
.reu-ppl .co, .reu-ppl img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; margin-left: -6px; font-size: 9.5px; }
.reu-at { position: absolute; left: 50%; bottom: 78px; translate: -50% 0; display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 8px 0 8px; border-radius: 10px;
  background: var(--foam-2); box-shadow: inset 0 0 0 1.5px var(--teal); white-space: nowrap; }
.reu-at b { font-size: 13.5px; font-weight: 600; }
.reu-at .kbot { width: 24px; height: 24px; border-radius: 7px; }
.reu-pg { width: 22px; height: 28px; border-radius: 3px; display: grid; place-items: center; color: var(--teal); background: #fff; box-shadow: inset 0 0 0 1px #C9DAD4; }
.reu-pg .ic { width: 12px; height: 12px; }
.reu-bh { display: flex; align-items: center; gap: 10px; height: 58px; margin-bottom: 6px; padding: 0 18px; background: var(--deep); color: var(--foam); }
.reu-bh b { font-size: 15px; font-weight: 600; }
.reu-bh .kbot { background: rgb(198 238 227 / .14); }
.reu-bh .co { margin-left: auto; }
.reu-r { display: flex; align-items: center; gap: 12px; margin: 0 18px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.reu-r:last-child { border-bottom: 0; }
.reu-r i { width: 40px; height: 40px; border-radius: 10px; background: #F2F5F4; display: grid; place-items: center; flex: none; }
.reu-r img, .reu-r .ic { width: 19px; height: 19px; object-fit: contain; }
.reu-r .ic { color: var(--teal); }
.reu-r b { font-size: 14px; font-weight: 600; }

/* ---- B · Pasar: la propuesta ganada se desmonta en el proyecto. Cada parte se despega como
   una tira de papel y encaja en Asana como tarea; la propuesta queda vacía con su sello ---- */
.tra-doc { position: absolute; left: 8px; top: 20px; width: 244px; height: 380px; border-radius: 6px; padding: 44px 20px 18px; overflow: hidden;
  box-shadow: 0 0 0 1px rgb(1 33 32 / .07), 0 30px 60px -24px rgb(1 33 32 / .45); }
.tra-band, .mem-band { position: absolute; left: 0; right: 0; top: 0; height: 28px; display: flex; align-items: center; gap: 8px; padding: 0 20px;
  background: var(--deep); color: var(--foam); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.tra-band i, .mem-band i { width: 11px; height: 11px; border-radius: 3px; background: var(--foam); }
.tra-ti { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 4px; }
.tra-sec, .tra-strip { display: grid; gap: 6px; padding: 8px; border-radius: 5px; }
.tra-sec { margin: 8px -8px 0; transition: background-color .35s, box-shadow .35s; }
.tra-sec > b, .tra-strip > b { font-size: 12px; font-weight: 700; }
/* El hueco que deja la tira al despegarse */
.tra-sec.gone { box-shadow: inset 0 0 0 1.5px rgb(1 33 32 / .12); background: repeating-linear-gradient(135deg, transparent 0 6px, rgb(1 33 32 / .035) 6px 7px); }
.tra-sec.gone > * { visibility: hidden; }
.tra-strip { position: absolute; left: 0; top: 0; z-index: 6; background: #fff; box-shadow: 0 0 0 1px rgb(1 33 32 / .08), 0 18px 32px -12px rgb(1 33 32 / .5); }
.tra-l, .mem-l { display: block; height: 6px; }
.tra-l i, .mem-l i { display: block; height: 100%; border-radius: 3px; background: #D9E2DF; }
.tra-his { grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.tra-lgs { display: flex; gap: 5px; }
.tra-lgs img { width: 16px; height: 16px; }
.tra-st { position: absolute; right: 18px; bottom: 20px; rotate: -10deg; padding: 4px 12px; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--ok); color: var(--ok);
  font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.tra-prj { position: absolute; left: 280px; top: 20px; width: 312px; height: 380px; }
.tra-ph { display: flex; align-items: center; gap: 9px; height: 48px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--line); }
.tra-ph img { width: 18px; height: 18px; }
.tra-ph b { font-size: 13.5px; font-weight: 600; }
.tra-ph .kbot { width: 24px; height: 24px; margin-left: auto; }
.tra-team { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 16px; }
.tra-av { display: flex; }
.tra-av img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; margin-right: -6px; }
.tra-state { justify-items: end; margin-left: auto; }
.tra-t { display: grid; grid-template-columns: 18px 1fr auto 26px; gap: 10px; align-items: center; margin: 0 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.tra-cb { width: 17px; height: 17px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(1 33 32 / .25); transition: background-color .3s, box-shadow .3s; }
.tra-cb.run { box-shadow: inset 0 0 0 1.5px var(--teal); background: conic-gradient(var(--teal) 0 50%, transparent 0); }
.tra-t > b { font-size: 13.5px; font-weight: 600; }
.tra-d { padding: 2px 7px; border-radius: 6px; background: var(--ember-2); color: var(--ember-ink); font-size: 11.5px; font-weight: 600; }
.tra-t > img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.tra-att { display: flex; gap: 8px; margin: 0 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.tra-att span { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 8px; box-shadow: 0 0 0 1px var(--line-2); font-size: 12.5px; font-weight: 600; }
.tra-att img { width: 15px; height: 15px; }

/* ---- C · Facturar: un solo entregable recibe tres sellos. El informe se entrega, la factura
   se le grapa detrás y, cuando entra la transferencia, cae el sello de cobrado ---- */
.fac-pk { position: absolute; inset: 0; }
.fac-rep, .fac-inv { position: absolute; background: #fff; border-radius: 5px; box-shadow: 0 0 0 1px rgb(1 33 32 / .07), 0 30px 60px -26px rgb(1 33 32 / .5); }
.fac-rep { left: 86px; top: 60px; width: 262px; height: 332px; padding: 22px 24px; display: grid; align-content: start; gap: 9px; }
.fac-inv { left: 262px; top: 92px; width: 250px; height: 304px; rotate: 3.5deg; padding: 22px 20px 0 104px; display: grid; align-content: start; gap: 9px; }
.fac-rh, .fac-ih { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.fac-rh img, .fac-ih img { width: 17px; height: 17px; }
.fac-rh .co { width: 18px; height: 18px; border-radius: 5px; font-size: 7.5px; margin-left: auto; }
.fac-ti, .fac-am { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.fac-l { display: block; height: 6px; }
.fac-l i { display: block; height: 100%; border-radius: 3px; background: #DDE5E2; }
.fac-ch { display: flex; align-items: flex-end; gap: 10px; height: 50px; margin: 6px 0 4px; padding: 0 4px 0 0; border-bottom: 1px solid var(--line-2); }
.fac-ch i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: #CFE3DC; }
.fac-ch i:last-child { background: var(--teal); }
/* La grapa cruza el borde del informe: mitad sobre él, mitad sobre la factura */
.fac-grapa { position: absolute; left: 330px; top: 158px; width: 36px; height: 6px; rotate: -50deg; border-radius: 3px; z-index: 2;
  background: linear-gradient(#F1F4F4, #7F8C8B); box-shadow: 0 1px 2px rgb(0 0 0 / .4), inset 0 0 0 1px rgb(1 33 32 / .18); }
/* Sello de goma: estado arriba, fecha debajo, con la tinta de su color */
.fac-st { position: absolute; z-index: 3; display: grid; justify-items: center; padding: 5px 13px 6px; border-radius: 7px; box-shadow: inset 0 0 0 2.5px currentColor;
  font-size: 20px; font-weight: 800; letter-spacing: .07em; line-height: 1.1; text-transform: uppercase; mix-blend-mode: multiply; }
.fac-st small { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; }
.fac-st-e { left: 108px; top: 330px; rotate: -7deg; color: var(--teal); }
.fac-st-f { left: 374px; top: 324px; rotate: 6deg; color: #3E5470; }
.fac-st-c { left: 266px; top: 254px; rotate: -10deg; color: var(--ok); background: rgb(230 246 240 / .55); }
.fac-rec { position: absolute; left: 404px; top: 238px; z-index: 7; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 12px;
  box-shadow: 0 0 0 1.5px var(--teal), 0 14px 28px -12px rgb(1 33 32 / .55); white-space: nowrap; }
.fac-rec img { width: 17px; height: 17px; }
.fac-rec b { font-size: 12.5px; font-weight: 600; }
.fac-rec small { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
/* Notificación del banco, como llega al móvil */
.fac-bank { position: absolute; left: 324px; top: 12px; width: 266px; z-index: 8; display: flex; align-items: center; gap: 12px; padding: 11px 14px 11px 11px; border-radius: 18px;
  background: rgb(250 250 250 / .9); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 0 0 1px rgb(1 33 32 / .06), 0 22px 44px -18px rgb(1 33 32 / .55); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; }
.fac-bi { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; flex: none; background: linear-gradient(#1C4F8C, #0E3566); color: #fff; }
.fac-bi .ic { width: 22px; height: 22px; stroke-width: 1.6; }
.fac-bt { flex: 1; display: grid; gap: 1px; min-width: 0; font-size: 12.5px; line-height: 1.3; color: #1C1C1E; }
.fac-bt small { display: flex; font-size: 12.5px; color: rgb(60 60 67 / .6); }
.fac-bt small em { margin-left: auto; font-style: normal; }
.fac-bt b { font-weight: 600; }
.fac-bt > span { font-variant-numeric: tabular-nums; }

/* ---- D · Encuadernar: las portadas de los entregables del año se apilan mes a mes, cada una
   con su cifra en una pestaña, y el día de la renovación Kelp las encuaderna en un dossier ---- */
.fic-pad { position: absolute; left: 464px; top: 26px; width: 112px; height: 124px; }
.fic-sh { position: absolute; inset: 0; overflow: hidden; display: grid; justify-items: center; align-content: start; text-align: center; border-radius: 10px; }
.fic-mo { width: 100%; padding: 6px 0; background: #3E5470; color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fic-sh > b { font-size: 46px; font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; margin-top: 6px; font-variant-numeric: tabular-nums; }
.fic-sh small { font-size: 11.5px; font-weight: 600; color: var(--ember-ink); }
.fic-ren .fic-mo { background: #C98A2B; }
.fic-stk { position: absolute; left: 36px; top: 70px; width: 220px; height: 290px; }
.fic-cov { position: absolute; inset: 0; padding: 22px 20px; display: grid; align-content: start; gap: 9px; border-radius: 4px; background: #fff;
  box-shadow: inset 0 6px 0 var(--b), 0 0 0 1px rgb(1 33 32 / .08), 0 22px 44px -22px rgb(1 33 32 / .5); }
.fic-ch { display: flex; align-items: center; justify-content: space-between; margin-bottom: 78px; }
.fic-ch img { width: 22px; height: 22px; }
.fic-ch .co { width: 20px; height: 20px; border-radius: 5px; font-size: 7.5px; }
.fic-cov > b { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 6px; }
.fic-l { display: block; height: 6px; }
.fic-l i { display: block; height: 100%; border-radius: 3px; background: #DDE5E2; }
/* Pestaña de índice: sale del canto derecho de su portada con la cifra que consiguió */
.fic-tab { position: absolute; left: 100%; top: var(--ty); height: 34px; display: flex; align-items: center; padding: 0 14px 0 30px; border-radius: 0 9px 9px 0;
  background: var(--foam-2); color: var(--ok); font-size: 13px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
  box-shadow: inset 4px 0 0 var(--b), 0 0 0 1px rgb(1 33 32 / .08), 0 10px 18px -12px rgb(1 33 32 / .45); }
.fic-bd { position: absolute; inset: 0; display: grid; align-content: start; gap: 0; padding: 22px 22px 20px 34px; border-radius: 4px; color: #F2FBF8;
  background: linear-gradient(#0B3B37, #062B28); box-shadow: 0 0 0 1px rgb(0 0 0 / .1), 0 26px 50px -22px rgb(1 33 32 / .65); }
.fic-bh { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: rgb(198 238 227 / .75); }
.fic-bh .co { width: 20px; height: 20px; border-radius: 5px; font-size: 7.5px; }
.fic-bt { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 14px 0 12px; color: #fff; }
.fic-fg { display: grid; padding: 8px 0; border-top: 1px solid rgb(198 238 227 / .18); font-size: 11.5px; line-height: 1.3; color: rgb(198 238 227 / .7); }
.fic-fg b { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--foam); font-variant-numeric: tabular-nums; }
/* Canutillo: las anillas del encuadernado sobre el canto izquierdo */
.fic-spine { position: absolute; left: 1px; top: 26px; bottom: -6px; width: 24px; border-radius: 4px;
  background: repeating-linear-gradient(to bottom, #2B3A39 0 6px, transparent 6px 13px); filter: drop-shadow(0 2px 2px rgb(0 0 0 / .35)); }

/* ---- E · Volver: el fichero de la memoria y el primer borrador de la siguiente ---- */
.mem-dr { position: absolute; left: 22px; top: 136px; width: 304px; height: 264px; }
.mem-back { position: absolute; left: 10px; right: 10px; top: 120px; height: 20px; border-radius: 8px 8px 0 0; background: #CFC6B4; }
.mem-ix { position: absolute; left: 22px; right: 22px; top: calc(12px + var(--y)); height: 150px; display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px;
  border-radius: 9px 9px 0 0; background: #fff; box-shadow: 0 -1px 0 rgb(1 33 32 / .06), 0 -8px 18px -12px rgb(0 0 0 / .45); }
/* Cada ficha nueva entra por detrás de las ya archivadas: baja sin pasar nunca por encima de su texto */
.mem-ix:nth-child(2) { z-index: 2; }
.mem-ix:nth-child(3) { z-index: 1; }
.mem-ix > b { font-size: 13px; font-weight: 600; line-height: 18px; }
.mem-tab { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; flex: none; }
.mem-g { background: var(--foam-2); color: var(--ok); }
.mem-a { background: var(--ember-2); color: var(--ember-ink); }
.mem-b { background: #E6EEF6; color: #3E5470; }
.mem-front { position: absolute; left: 0; right: 0; bottom: 0; height: 130px; z-index: 3; border-radius: 12px; display: grid; place-content: center; justify-items: center; gap: 12px;
  background: linear-gradient(#F6F1E7, #E9E1D1); box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgb(1 33 32 / .08), 0 28px 50px -22px rgb(0 0 0 / .7); }
.mem-plate { display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 6px; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--deep);
  box-shadow: 0 0 0 1px rgb(1 33 32 / .12), inset 0 -1px 0 rgb(1 33 32 / .06); }
.mem-plate .ic { width: 15px; height: 15px; color: var(--teal); }
.mem-handle { width: 74px; height: 12px; border-radius: 6px; background: linear-gradient(#274542, #0B2826); box-shadow: 0 2px 3px rgb(0 0 0 / .3); }
.mem-doc { position: absolute; left: 356px; top: 24px; width: 230px; height: 372px; border-radius: 6px; padding: 44px 18px 18px; overflow: hidden;
  box-shadow: 0 0 0 1px rgb(1 33 32 / .07), 0 30px 60px -24px rgb(0 0 0 / .6); }
.mem-ti { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.mem-sec { display: grid; gap: 8px; margin-top: 20px; }
.mem-slot { display: block; height: 30px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px rgb(1 33 32 / .14); background: repeating-linear-gradient(135deg, transparent 0 6px, rgb(1 33 32 / .03) 6px 7px); }
.mem-cp { position: absolute; left: 0; top: 0; z-index: 6; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 6px; border-radius: 8px; background: #fff;
  font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 0 0 1.5px var(--teal), 0 10px 22px -10px rgb(0 0 0 / .5); }
.mem-caret { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 7px; z-index: 7; box-shadow: 0 0 0 2px #fff, 0 6px 12px -4px rgb(0 0 0 / .5); }

/* ---- Pantallas estrechas ---- */
@media (max-width: 1100px) {
  .cu-ch { grid-template-columns: 1fr; }
  .cu-ch-t { border-right: 0; padding-bottom: 0; }
}
@media (max-width: 700px) {
  .cu-ch-t { gap: 18px; padding-top: 32px; }
  .cu-mini { width: 72px; height: 72px; }
  .cu-ch-l { padding-top: 22px; padding-bottom: 32px; }
  /* Hero en vertical: el anillo arriba, a tamaño real, y cada resultado sale de su etapa a una
     bandeja común bajo el anillo. Las posiciones de las etapas las calcula el JS desde el lienzo */
  #ciclo { height: 448px; }
  .cyc-cv { --cw: 372px; --ch: 424px; zoom: 1; }
  .cyc-mem { left: 142px; top: 116px; width: 88px; height: 88px; gap: 4px; }
  .cyc-mem > .ic { width: 20px; height: 20px; }
  .cyc-mem b { font-size: 11px; }
  .cyc-mem .rp { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
  .cyc-lb { font-size: 13px; }
  /* Relevos: cada lienzo se recompone en vertical a 340 px, sin encoger el texto */
  #s-reu, #s-tra, #s-fac, #s-fic, #s-mem { margin: 12px; }
  .cu-cv { --cw: 340px; }
  #s-reu { height: 444px; --ch: 420px; }
  .reu-cal { left: 4px; top: 58px; }
  .reu-msg { left: 112px; top: 6px; }
  .reu-card { left: 84px; top: 40px; }
  #s-tra { height: 508px; --ch: 484px; }
  .tra-doc { left: 0; top: 0; width: 340px; height: 196px; padding: 40px 16px 14px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; align-content: start; }
  .tra-ti { grid-column: 1 / -1; margin-bottom: 0; }
  .tra-st { top: 34px; bottom: auto; right: 16px; font-size: 14px; }
  .tra-prj { left: 0; top: 208px; width: 340px; height: 276px; }
  .tra-team { height: 44px; }
  .tra-t { padding: 9px 0; }
  .tra-att { padding-top: 10px; }
  #s-fac { height: 424px; --ch: 400px; }
  .fac-rep { left: 10px; top: 70px; width: 214px; height: 300px; padding: 20px 18px; }
  .fac-inv { left: 126px; top: 96px; width: 206px; height: 276px; padding: 20px 10px 0 106px; }
  .fac-am { font-size: 19px; }
  .fac-grapa { left: 208px; top: 154px; }
  .fac-st { font-size: 16px; padding: 4px 10px 5px; }
  .fac-st small { font-size: 11px; }
  .fac-st-e { left: 24px; top: 304px; }
  .fac-st-f { left: 230px; top: 300px; }
  .fac-st-c { left: 132px; top: 226px; }
  .fac-rec { left: 150px; top: 198px; }
  .fac-bank { left: 20px; top: 6px; width: 300px; }
  #s-fic { height: 444px; --ch: 420px; }
  .fic-pad { left: 214px; top: 10px; }
  .fic-stk { left: 12px; top: 146px; width: 160px; height: 256px; }
  .fic-cov { padding: 18px 14px; }
  .fic-ch { margin-bottom: 56px; }
  .fic-cov > b { font-size: 17px; }
  .fic-tab { padding: 0 12px 0 24px; }
  .fic-bd { padding: 16px 12px 14px 30px; }
  .fic-bt { font-size: 18px; margin: 10px 0 8px; }
  .fic-fg { padding: 6px 0; }
  .fic-fg b { font-size: 19px; }
  #s-mem { height: 494px; --ch: 470px; }
  .mem-doc { left: 20px; top: 0; width: 300px; height: 204px; padding: 40px 18px 14px; }
  .mem-sec { margin-top: 12px; }
  .mem-sec:last-child { display: none; }
  .mem-dr { left: 18px; top: 206px; }
}