/* ============================================================
   Kelp · Expert Workers. Solo las escenas de esta página;
   hero, bloques, cabeceras, cierre y pie son del sistema.
   ============================================================ */

/* ---- La cara de un Expert Worker: el símbolo de Kelp con la insignia de su puesto ---- */
.ewf { position: relative; width: 30px; height: 30px; border-radius: 9px; background: var(--deep); display: grid; place-items: center; flex: none; }
.ewf > svg { width: 66%; height: 66%; fill: var(--foam); }
.ewf > i { position: absolute; right: -5px; bottom: -5px; width: 16px; height: 16px; border-radius: 50%; background: #fff; color: var(--teal); display: grid; place-items: center; box-shadow: 0 0 0 1.5px var(--deep); transition: background-color .3s, color .3s; }
.ewf > i .ic { width: 9px; height: 9px; stroke-width: 2.4; }
.ewf.busy > svg { animation: turn 2.1s var(--ease) infinite; }
.ewf.lg { width: 52px; height: 52px; border-radius: 15px; }
.ewf.lg > i { width: 22px; height: 22px; right: -6px; bottom: -6px; box-shadow: 0 0 0 2px var(--deep); }
.ewf.lg > i .ic { width: 12px; height: 12px; }
.ewf.sm { width: 22px; height: 22px; border-radius: 7px; }
.ewf.sm > i { width: 12px; height: 12px; right: -4px; bottom: -4px; box-shadow: 0 0 0 1px var(--deep); }
.ewf.sm > i .ic { width: 7px; height: 7px; stroke-width: 2.6; }

/* ---- Hero: una conversación que Kelp reparte. Al principio solo está el chat; Kelp saca
   uno a uno a los cuatro Expert Workers (cada uno abre su herramienta), trabajan,
   Investigación le pasa el análisis a Propuestas y cada resultado vuelve al chat; al
   volver, su puesto se retira. Termina como empezó: el chat, con el trabajo hecho ---- */
#reparto { height: 600px; }
.rep-cv { --cw: 1104px; --ch: 480px; }
.rep-dyn { position: absolute; inset: 0; }
.rep-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rep-w { fill: none; stroke: var(--foam); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: .55; }
.rep-desk { position: absolute; width: 300px; height: 216px; display: flex; flex-direction: column; overflow: hidden; transform-origin: 29px 23px; box-shadow: 0 24px 48px -20px rgb(0 0 0 / .6); transition: box-shadow .4s; }
.rep-i { left: 0; top: 0; }
.rep-p { left: 0; top: 264px; }
.rep-a { left: 804px; top: 0; }
.rep-s { left: 804px; top: 264px; }
.rep-desk.on { box-shadow: 0 0 0 2px var(--foam), 0 24px 48px -20px rgb(0 0 0 / .6); }
.rep-dh { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-bottom: 1px solid var(--line); flex: none; }
.rep-dh b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.rep-dh > img { width: 16px; height: 16px; margin-left: auto; }
.rep-ck { width: 18px; height: 18px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; }
.rep-ck .ic { width: 11px; height: 11px; stroke-width: 3; }
.rep-db { position: relative; flex: 1; padding: 12px 14px; display: grid; gap: 8px; align-content: start; }
.rep-dt { font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em; }
.rep-ln { display: block; height: 6px; }
.rep-ln i { display: block; height: 100%; border-radius: 3px; background: #DCE4E1; transform-origin: left; }
.rep-slot { display: flex; align-items: center; justify-content: center; height: 54px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--line-2); background: repeating-linear-gradient(135deg, transparent 0 6px, rgb(1 33 32 / .025) 6px 7px); font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.rep-fee { display: flex; justify-content: space-between; padding-top: 7px; border-top: 1px dashed var(--line-2); font-size: 12px; color: var(--ink-2); }
.rep-fee b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.rep-pl { position: relative; display: block; height: 14px; }
.rep-pl i { position: absolute; left: 0; top: 4px; height: 6px; border-radius: 3px; background: #DCE4E1; }
.rep-pl u { position: absolute; left: -3px; top: 0; width: 96%; height: 14px; border-radius: 3px; background: var(--foam); transform-origin: left; }
.rep-ana { position: absolute; left: 14px; top: 142px; width: 272px; height: 54px; padding: 8px 10px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1.5px var(--teal), 0 12px 24px -12px rgb(1 33 32 / .5); display: grid; gap: 5px; z-index: 6; }
.rep-ana b { font-size: 11px; font-weight: 700; color: var(--teal); }
.rep-bar { display: flex; gap: 3px; height: 20px; }
.rep-bar i { flex: var(--f); display: flex; align-items: center; padding: 0 8px; border-radius: 4px; font-style: normal; font-size: 11px; font-weight: 600; white-space: nowrap; background: var(--teal); color: #fff; }
.rep-bar i + i { background: var(--foam); color: var(--deep); }
/* la semana, sin horas: cinco días y lo que ya hay en ellos */
.rep-cal { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 16px repeat(3, 38px); gap: 5px 6px; padding: 2px 0 0; background: linear-gradient(var(--line) 0 0) 0 21px / 100% 1px no-repeat; }
.rep-dd { text-align: center; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.rep-bz { border-radius: 5px; background: #EDF1EF; box-shadow: inset 2px 0 0 #C9D3CF; }
.rep-due { border-radius: 5px; background: var(--ember-2); box-shadow: inset 2px 0 0 #E7B25C; color: var(--ember-ink); font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.rep-ev { padding: 4px 3px; border-radius: 5px; background: var(--teal); color: #fff; display: grid; align-content: space-between; justify-items: center; box-shadow: 0 8px 16px -8px rgb(1 33 32 / .6); }
.rep-ev b { font-size: 9.5px; font-weight: 700; line-height: 1.1; }
.rep-ev span { display: flex; }
.rep-ev img { width: 14px; height: 14px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--teal); }
.rep-ev img + img { margin-left: -4px; }
.rep-to { display: flex; align-items: center; gap: 9px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.rep-to .co { width: 26px; height: 26px; border-radius: 50%; font-size: 9.5px; }
.rep-to b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.rep-to small { display: block; font-size: 11px; color: var(--ink-3); }
.rep-rdy { justify-self: start; margin-top: 2px; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 99px; background: var(--foam-2); color: var(--ok); font-size: 11.5px; font-weight: 600; }
/* la conversación, con el aspecto de un chat de Teams */
.rep-chat { position: absolute; left: 372px; top: 0; width: 360px; height: 480px; display: flex; flex-direction: column; overflow: hidden; background: #F5F5F5; box-shadow: 0 30px 60px -24px rgb(0 0 0 / .7); z-index: 2; }
.rep-ch { display: flex; align-items: center; gap: 9px; height: 50px; padding: 0 16px; background: #fff; border-bottom: 1px solid var(--line); flex: none; }
.rep-ch .kbot { width: 30px; height: 30px; border-radius: 50%; }
.rep-ch b { font-size: 14px; font-weight: 600; }
.rep-ch small { font-size: 12.5px; font-weight: 600; color: #5B5FC7; padding: 3px 0; box-shadow: inset 0 -2px 0 #5B5FC7; margin-left: 6px; }
.rep-ch img { width: 18px; height: 18px; margin-left: auto; }
.rep-th { flex: 1; padding: 16px 14px 10px; display: flex; flex-direction: column; gap: 12px; }
.rep-me { align-self: flex-end; max-width: 78%; padding: 8px 11px; border-radius: 8px; background: #E8EBFA; font-size: 13px; line-height: 1.4; }
.rep-km { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: start; }
.rep-km > .kbot { width: 28px; height: 28px; border-radius: 50%; }
.rep-kb { padding: 9px 11px; border-radius: 8px; background: #fff; font-size: 13px; line-height: 1.4; box-shadow: 0 1px 2px rgb(0 0 0 / .08); display: grid; gap: 7px; }
.rep-team { display: flex; align-items: center; gap: 11px; min-height: 38px; padding-top: 8px; border-top: 1px solid var(--line); }
.rep-team .ewf.done > i { background: var(--ok); color: #fff; }
.rep-row { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 10px; border-radius: 7px; border: 1px dashed var(--line-2); font-size: 12.5px; font-weight: 600; transition: background-color .3s, border-color .3s; }
.rep-row.on { border-style: solid; border-color: var(--line); background: #F7F8F8; }
.rep-row img { width: 16px; height: 16px; }
.rep-sw { justify-items: start; margin-top: 2px; }
.rep-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 7px; background: var(--deep); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--teal); }
.rep-okb { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 7px; background: var(--foam-2); color: var(--ok); font-size: 12.5px; font-weight: 600; }
.rep-okb .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.rep-cmp { margin: 0 14px 12px; height: 36px; padding: 0 12px; border-radius: 6px; background: #fff; box-shadow: inset 0 -2px 0 #C7C9E8; display: flex; align-items: center; font-size: 12.5px; color: var(--ink-3); flex: none; }
/* lo que viaja entre el chat y los puestos */
.rep-ft { position: absolute; left: 0; top: 0; z-index: 9; box-shadow: 0 0 0 2px var(--foam), 0 12px 24px -8px rgb(0 0 0 / .55); }
.rep-tok { position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 9px; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 1.5px var(--foam), 0 12px 24px -8px rgb(0 0 0 / .55); z-index: 8; }
.rep-tok img { width: 17px; height: 17px; }

/* ---- 1 · Qué es: la ficha de un Expert Worker, compuesta de un vistazo; cada parte, con su nota ---- */
#anatomia { position: relative; height: 520px; margin: 0 24px 24px; border-radius: 18px; }
.ana-cv { --cw: 1104px; --ch: 440px; }
.ana-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ana-lines path { fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: .4; transition: opacity .4s; }
.ana-lines path.on { opacity: 1; }
.ana-c { position: absolute; width: 290px; display: grid; gap: 3px; text-align: right; }
.ana-c.ana-r { text-align: left; }
.ana-c b { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; transition: color .4s; }
.ana-c.on b { color: var(--teal); }
.ana-c span { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); text-wrap: balance; }
.ana-f { position: absolute; left: 362px; top: 0; width: 380px; height: 440px; overflow: hidden; box-shadow: 0 0 0 1px rgb(1 33 32 / .07), 0 30px 60px -28px rgb(1 33 32 / .45); }
.ana-z { position: relative; padding: 0 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; transition: background-color .4s; }
.ana-z.hit { background: var(--foam-2); }
.ana-z1 { height: 112px; }
.ana-z2, .ana-z3 { height: 72px; }
.ana-z4 { height: 104px; }
.ana-z5 { height: 80px; border-bottom: 0; }
.ana-ph { position: absolute; left: 22px; top: 50%; width: 46%; height: 10px; margin-top: -5px; border-radius: 5px; background: #EEF2F0; }
.ana-z1 .ana-ph { left: 94px; margin-top: -12px; width: 40%; }
.ana-z1 .ana-ph + .ana-ph, .ana-z4 .ana-ph + .ana-ph { margin-top: 8px; width: 58%; }
.ana-z4 .ana-ph { margin-top: -14px; }
.ana-z1 .ana-ph:first-child::before { content: ""; position: absolute; left: -72px; top: -16px; width: 52px; height: 52px; border-radius: 15px; background: #EEF2F0; }
.ana-id { display: flex; align-items: center; gap: 18px; }
.ana-id b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.ana-id small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-2); }
.ana-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ana-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12.5px; font-weight: 600; }
.ana-tl { width: 40px; height: 40px; border-radius: 11px; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 1px var(--line), 0 8px 16px -10px rgb(1 33 32 / .45); }
.ana-tl img { width: 21px; height: 21px; }
.ana-doc { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px 0 9px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 6px 12px -8px rgb(1 33 32 / .4); font-size: 12.5px; font-weight: 600; }
.ana-doc img { width: 15px; height: 15px; }
.ana-ctl { display: flex; align-items: center; gap: 10px; width: 100%; font-size: 13.5px; font-weight: 600; }
.ana-ctl img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #3A73A8; }
.ana-ok { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; background: var(--deep); color: var(--foam); display: grid; place-items: center; }
.ana-ok .ic { width: 14px; height: 14px; stroke-width: 2.6; }

/* ---- 2 · A la vista: un documento del equipo con la autoría en el margen. Cada línea lleva
   a su izquierda una franja del color de quien la escribió y, donde empieza cada autor, su
   cara. El Expert Worker escribe su parte y su franja crece con ella; Marta corrige una
   línea y esa línea pasa a su color; el dato que falta es un hueco con la cara de Jorge,
   que lo rellena ---- */
.au-doc { --kc: #14916F; position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: #F8FAFD; }
.au-top { display: flex; align-items: center; gap: 10px; height: 54px; flex: none; padding: 0 18px; border-bottom: 1px solid var(--line); background: #fff; font-size: 14px; }
.au-top > img { width: 22px; height: 22px; }
.au-top > b { font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.au-ppl { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.au-ppl img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cc); }
.au-ppl .ewf { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--kc); }
.au-page { --gut: 88px; position: relative; flex: 1; margin: 16px 22px 0; padding: 22px 30px 0 var(--gut); background: #fff; box-shadow: 0 0 0 1px rgb(1 33 32 / .06), 0 2px 6px rgb(1 33 32 / .06); }
.au-b + .au-b { margin-top: 18px; }
.au-ln { position: relative; display: flex; align-items: center; gap: 8px; height: 30px; font-size: 15px; white-space: nowrap; }
.au-bar { position: absolute; left: calc(26px - var(--gut)); top: 0; bottom: 0; width: 6px; background: var(--cc); transform-origin: 50% 0; transition: background-color .4s; }
.au-ln:first-child .au-bar { top: 3px; border-radius: 3px 3px 0 0; }
.au-ln:last-child .au-bar { bottom: 3px; border-radius: 0 0 3px 3px; }
.au-ln.by .au-bar { background: var(--by); }
.au-av { position: absolute; left: calc(-8px - var(--gut) / 2); top: 2px; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
.au-hs { display: block; width: 38%; height: 10px; border-radius: 5px; background: #B9C6C2; }
.au-sk { display: block; height: 8px; border-radius: 4px; background: #DCE4E1; }
.au-hl { height: 36px; font-size: 17px; }
.au-hl .au-av { top: 5px; width: 26px; height: 26px; border-radius: 8px; }
.au-hl b { font-weight: 600; letter-spacing: -0.01em; }
.au-wk { justify-items: start; }
.au-wk > :first-child { border-radius: 3px; transition: background-color .2s; }
.au-wk.sel > :first-child { background: rgb(58 115 168 / .2); }
.au-by { font-weight: 600; color: var(--by); }
.au-fee { justify-items: start; }
.au-gap { display: inline-flex; align-items: center; gap: 5px; width: 70px; height: 28px; padding: 0 3px; border-radius: 14px; background: var(--ember-2); box-shadow: inset 0 0 0 1px #E7B25C; }
.au-gap img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.au-gap i { font-style: normal; font-size: 14px; font-weight: 700; color: var(--ember-ink); }
/* el cursor de cada uno, con su nombre encima */
.au-car { position: absolute; left: 0; top: 0; z-index: 2; width: 2px; height: 20px; border-radius: 1px; background: var(--cc); }
.au-car > b { position: absolute; left: 0; bottom: 100%; margin-bottom: 1px; display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 6px 6px 6px 0; background: var(--cc); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.au-car > b svg { width: 12px; height: 12px; fill: var(--foam); }

/* ---- 3 · Los puestos: la plantilla en una fila, como la página de equipo de una firma.
   Cada puesto se reconoce por su objeto de trabajo, un glifo grande (el documento, el sobre,
   la lupa, la cámara, el maletín); el símbolo de Kelp va pequeño, como insignia, y gira en
   el puesto activo. Debajo, una sola ficha enseña qué hace, sus herramientas y su autonomía ---- */
#plantilla { margin: 0 24px 24px; padding: 56px 32px 48px; border-radius: 18px; }
.pue-row { display: flex; justify-content: center; gap: 36px; }
.pue-m { width: 140px; display: grid; justify-items: center; align-content: start; gap: 16px; text-align: center; }
.pue-m > b { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; text-wrap: balance; transition: color .3s; }
.pue-pf { position: relative; width: 128px; height: 128px; border-radius: 28px; display: grid; place-items: center; background: radial-gradient(110% 90% at 30% 12%, #0F5953 0, var(--deep) 72%); box-shadow: 0 18px 32px -18px rgb(1 33 32 / .6); transition: box-shadow .35s, translate .35s var(--ease-out); }
.pue-g { width: 60px; height: 60px; color: var(--foam); stroke-width: 1.3; }
.pue-k { position: absolute; right: -8px; bottom: -8px; width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px #F6EBD6, 0 6px 12px -6px rgb(1 33 32 / .45); }
.pue-k svg { width: 20px; height: 20px; fill: var(--deep); }
.pue-pf.busy .pue-k svg { animation: turn 2.1s var(--ease) infinite; }
.pue-m.on .pue-pf { translate: 0 -5px; box-shadow: 0 0 0 4px #FBF4E6, 0 0 0 6px var(--teal), 0 24px 36px -18px rgb(1 33 32 / .6); }
.pue-open .pue-pf { background: repeating-linear-gradient(135deg, rgb(255 255 255 / .5) 0 7px, rgb(1 33 32 / .035) 7px 8px); box-shadow: inset 0 0 0 1.5px rgb(1 33 32 / .2); }
.pue-open .pue-pf > span { font-size: 40px; font-weight: 300; line-height: 1; color: var(--ink-3); }
.pue-open.on .pue-pf { box-shadow: inset 0 0 0 1.5px rgb(1 33 32 / .2), 0 0 0 4px #FBF4E6, 0 0 0 6px var(--teal); }
/* la ficha del puesto activo, con su pico apuntando al retrato */
.pue-bio { position: relative; max-width: 880px; margin: 40px auto 0; background: #fff; border-radius: 14px; box-shadow: var(--shadow-card); }
.pue-nib { position: absolute; left: 0; top: -7px; width: 14px; height: 14px; margin-left: -7px; background: #fff; rotate: 45deg; border-radius: 3px 0 0 0; box-shadow: -1px -1px 0 rgb(1 33 32 / .07); }
.pue-cap { display: grid; justify-items: stretch; }
.pue-ci { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 28px; min-height: 72px; padding: 12px 24px; }
.pue-ci > p { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.pue-tl { display: flex; gap: 6px; }
.pue-tl > span { width: 32px; height: 32px; border-radius: 9px; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 1px var(--line-2); }
.pue-tl img { width: 18px; height: 18px; object-fit: contain; }
.pue-tl .pue-any { width: auto; padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pue-au { display: inline-flex; align-items: center; gap: 8px; padding-left: 24px; border-left: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.pue-au img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px #3A73A8; }
.pue-ai { width: 24px; height: 24px; border-radius: 50%; background: var(--foam-2); color: var(--ok); display: grid; place-items: center; }
.pue-ai .ic { width: 13px; height: 13px; stroke-width: 2.2; }

/* ---- 4 · Aprenden: tu corrección se convierte en regla. El Expert Worker estudia vuestras
   propuestas ganadas y apunta su criterio. En su borrador tachas una expresión y escribes
   la de la casa; la corrección sube a su criterio como una regla más, y en el siguiente
   documento ya escribe la forma correcta. Dos tamaños: 17 (el texto del documento) y 13 ---- */
.ap-pw { position: absolute; top: 150px; width: 72px; height: 92px; padding: 10px 9px; border-radius: 6px; display: grid; gap: 6px; align-content: start; }
.ap-pw:nth-child(1) { left: 40px; }
.ap-pw:nth-child(2) { left: 144px; }
.ap-pw:nth-child(3) { left: 248px; }
.ap-pw > img { width: 14px; height: 14px; margin-bottom: 2px; }
.ap-pw > i { display: block; width: 100%; height: 5px; border-radius: 3px; background: #E1E8E5; }
.ap-pw > span { position: absolute; left: 50%; bottom: -10px; translate: -50% 0; padding: 2px 8px; border-radius: 99px; background: var(--foam-2); color: var(--ok); font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 0 0 2px #fff; }
.ap-doc { position: absolute; left: 0; top: 20px; width: 356px; height: 380px; padding: 0 22px; border-radius: 10px; }
.ap-dh { display: flex; align-items: center; gap: 8px; height: 46px; margin: 0 -22px; padding: 0 22px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.ap-dh img { width: 16px; height: 16px; }
.ap-dh .co { margin-left: auto; }
.ap-lb { display: block; margin-top: 22px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.ap-tx { margin-top: 34px; font-size: 17px; line-height: 1.5; letter-spacing: -0.01em; }
.ap-tx > span { display: inline; }
.ap-w { position: relative; border-radius: 5px; padding: 0 2px; margin: 0 -2px; transition: background-color .4s, color .4s; }
.ap-w.ok { background: var(--foam); color: var(--teal); }
/* tu corrección, a boli azul: la tachadura y encima la expresión de la casa */
.ap-st { position: absolute; left: -2px; right: 0; top: 52%; height: 2px; border-radius: 1px; background: #3A73A8; transform-origin: left; }
.ap-fix { position: absolute; left: 2px; bottom: 88%; font-style: italic; font-weight: 600; color: #3A73A8; white-space: nowrap; }
.ap-ln { display: grid; gap: 11px; margin-top: 26px; }
.ap-ln i { display: block; height: 7px; border-radius: 4px; background: #DCE4E1; transform-origin: left; }
.ap-ew { position: absolute; left: 380px; top: 70px; width: 220px; padding: 16px 16px 18px; }
.ap-eh { display: flex; align-items: center; gap: 12px; }
.ap-eh b { font-size: 13px; font-weight: 600; }
.ap-ew .ap-lb { margin-top: 18px; }
.ap-rules { margin-top: 8px; }
.ap-r { display: flex; align-items: center; gap: 8px; height: 38px; overflow: hidden; box-shadow: inset 0 1px var(--line); font-size: 13px; font-weight: 600; white-space: nowrap; }
.ap-r .ic { width: 14px; height: 14px; color: var(--ok); stroke-width: 2.4; }
.ap-rn { margin: 0 -8px; padding: 0 8px; border-radius: 8px; transition: background-color .5s, box-shadow .4s; }
.ap-rn.new { background: #E8F0F8; }
.ap-rn.hit { box-shadow: inset 0 0 0 2px var(--teal); background: var(--foam-2); }
.ap-r s, .ap-fly s { font-weight: 500; color: var(--ink-3); text-decoration-color: #3A73A8; text-decoration-thickness: 2px; }
.ap-fly { position: absolute; left: 0; top: 0; z-index: 8; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 99px; background: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 0 0 2px #3A73A8, 0 14px 26px -10px rgb(1 33 32 / .45); opacity: 0; }
.ap-ew .ewf { transition: box-shadow .4s; }
.ap-ew.on .ewf { box-shadow: 0 0 0 5px rgb(0 74 72 / .16), 0 0 0 1.5px var(--teal); }

/* ---- 5 · De noche: la pantalla de bloqueo del móvil, de las 23:40 a las 7:40 ---- */
#s-noc { --ch: 500px; }
.noc-ph { position: absolute; left: 159px; top: 34px; width: 282px; height: 582px; }
.noc-ph .iph { zoom: .92; }
.noc-wall, .noc-dawn, .noc-dim { position: absolute; inset: 0; }
.noc-wall { background: radial-gradient(120% 70% at 50% 0%, #1B3F58 0, transparent 70%), linear-gradient(180deg, #0C1B2B 0%, #0B2A33 55%, #0D3A3A 100%); }
.noc-dawn { opacity: 0; background: radial-gradient(90% 60% at 50% 100%, #F4B97A 0, transparent 75%), linear-gradient(180deg, #1E4B5E 0%, #3E7C7E 48%, #D99A6A 100%); }
.noc-dim { background: rgb(0 0 0 / .32); }
.noc-sb { position: relative; z-index: 1; height: 46px; display: flex; align-items: center; justify-content: flex-end; padding: 6px 26px 0; }
.noc-isl { position: absolute; left: 50%; top: 10px; translate: -50% 0; width: 96px; height: 28px; border-radius: 20px; background: #000; }
.noc-ics { display: flex; align-items: center; gap: 5px; }
.noc-ics svg { height: 11px; width: auto; fill: #fff; }
.noc-fo { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 6px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; font-size: 12.5px; font-weight: 600; color: rgb(255 255 255 / .85); }
.noc-fo svg { width: 13px; height: 13px; fill: #fff; }
.noc-date { position: relative; z-index: 1; justify-items: center; margin-top: 10px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; font-size: 17px; font-weight: 600; color: rgb(255 255 255 / .9); }
.noc-time { position: relative; z-index: 1; display: block; text-align: center; margin-top: -4px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; font-size: 84px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.noc-list { position: relative; z-index: 1; margin: 22px 12px 0; height: 300px; }
.noc-n { position: absolute; left: 0; right: 0; top: 0; height: 60px; padding: 10px 12px; border-radius: 18px; background: rgb(255 255 255 / .2); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; }
.noc-ap { width: 30px; height: 30px; border-radius: 8px; background: #fff; display: grid; place-items: center; }
.noc-ap img { width: 18px; height: 18px; }
.noc-n b { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.noc-n em { font-style: normal; font-weight: 400; font-size: 11.5px; opacity: .7; }
.noc-n div > span { display: block; font-size: 12.5px; line-height: 1.3; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1180px) {
  /* la ficha y sus notas, una debajo de otra, cuando no caben a los lados */
  #anatomia { height: auto; padding: 28px 16px 32px; }
  .ana-cv { position: static; translate: none; width: auto; height: auto; display: grid; justify-items: center; gap: 14px; }
  .ana-lines { display: none; }
  .ana-f { position: relative; left: auto; top: auto; order: -1; width: min(380px, 100%); height: auto; margin-bottom: 8px; }
  .ana-c, .ana-c.ana-r { position: static; width: min(380px, 100%); text-align: left; }
}
@media (max-width: 1040px) {
  .pue-row { display: grid; grid-template-columns: repeat(3, 140px); gap: 32px 48px; }
  .pue-ci { grid-template-columns: 1fr auto; }
  .pue-au { grid-column: 1 / -1; padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .pue-nib { display: none; }
}
@media (max-width: 700px) {
  #s-vis { --cw: calc(100% - 24px); }
  .au-top { padding: 0 12px; gap: 8px; font-size: 13px; }
  .au-ppl { gap: 6px; }
  .au-page { --gut: 62px; margin: 12px 10px 0; padding-right: 14px; }
  #plantilla { margin-inline: 12px; padding: 32px 12px 16px; }
  .pue-row { grid-template-columns: repeat(3, 1fr); gap: 24px 10px; }
  .pue-m { width: auto; gap: 12px; }
  .pue-m > b { font-size: 13.5px; }
  .pue-pf { width: 76px; height: 76px; border-radius: 18px; }
  .pue-g { width: 38px; height: 38px; stroke-width: 1.4; }
  .pue-k { width: 26px; height: 26px; right: -6px; bottom: -6px; }
  .pue-k svg { width: 15px; height: 15px; }
  .pue-ci { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
  .pue-ci > p { font-size: 15px; }
  /* aprenden: el borrador arriba y el Expert Worker con su criterio debajo, sin reducir el texto */
  #s-apr { height: 640px; margin: 12px; --cw: 340px; --ch: 600px; }
  .ap-pw { top: 110px; }
  .ap-pw:nth-child(1) { left: 20px; }
  .ap-pw:nth-child(2) { left: 128px; }
  .ap-pw:nth-child(3) { left: 236px; }
  .ap-doc { top: 0; width: 340px; height: 300px; padding: 0 18px; }
  .ap-dh { margin: 0 -18px; padding: 0 18px; }
  .ap-ln i:nth-child(n+4) { display: none; }
  .ap-ew { left: 0; top: 322px; width: 340px; }
  /* de noche: el lienzo se ciñe al móvil, que se ve a su tamaño real */
  #s-noc { --cw: 282px; }
  .noc-ph { left: 0; }
  /* hero en vertical: el chat en medio y los cuatro puestos arriba y abajo (en escritorio, a los
     lados). Cada puesto enseña lo esencial de su herramienta a tamaño de lectura; los cables
     los traza el script desde la geometría */
  #reparto { height: auto; padding: 20px 0; }
  .rep-cv { position: relative; left: auto; top: auto; translate: none; margin-inline: auto; --cw: 340px; --ch: 740px; }
  .rep-desk { width: 166px; height: 134px; }
  .rep-i, .rep-a { top: 0; }
  .rep-p, .rep-s { top: 606px; }
  .rep-a, .rep-s { left: 174px; }
  .rep-dh { height: 44px; gap: 8px; padding: 0 10px; }
  .rep-dh b { font-size: 12.5px; line-height: 1.15; }
  .rep-dh .ewf { width: 26px; height: 26px; border-radius: 8px; }
  .rep-dh > img { width: 15px; height: 15px; }
  .rep-ck { position: absolute; right: -6px; top: -6px; box-shadow: 0 0 0 2px #fff; }
  .rep-desk { overflow: visible; }
  .rep-db { padding: 9px 10px; gap: 6px; overflow: hidden; border-radius: 0 0 12px 12px; }
  .rep-dt { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rep-pl:nth-of-type(n+4), .rep-p .rep-ln + .rep-ln, .rep-s .rep-dt, .rep-s .rep-ln { display: none; }
  .rep-slot { height: 30px; font-size: 11px; }
  .rep-fee { padding-top: 5px; font-size: 11.5px; }
  .rep-ana { left: 4px; top: 70px; width: 158px; height: 56px; padding: 7px 8px; }
  .rep-bar i { flex: auto; padding: 0 5px; font-size: 10.5px; }
  .rep-cal { grid-template-columns: 0 0 repeat(3, 1fr); grid-template-rows: 14px 6px 38px 0; gap: 4px 0; background-position: 0 17px; }
  .rep-cal > * { margin-inline: 3px; }
  .rep-dd:nth-child(-n+2), .rep-bz:not(:nth-of-type(3)) { display: none; }
  .rep-dd:nth-child(3) { grid-column: 3; }
  .rep-dd:nth-child(4) { grid-column: 4; }
  .rep-dd:nth-child(5) { grid-column: 5; }
  .rep-due { font-size: 10.5px; }
  .rep-ev b { font-size: 10.5px; }
  .rep-to { gap: 8px; padding-bottom: 7px; }
  .rep-to b { font-size: 12px; }
  .rep-rdy { height: 24px; padding: 0 9px; font-size: 11px; }
  .rep-chat { left: 0; top: 162px; width: 340px; height: 416px; }
  .rep-ch { height: 44px; padding: 0 12px; }
  .rep-th { padding: 12px 10px 8px; gap: 10px; }
  .rep-me { max-width: 84%; }
  .rep-row { height: 30px; }
  .rep-cmp { display: none; }
}