/* nod · "Descubre nod": recorrido con scroll por cinco escenas, con el mismo lenguaje visual que la app
   (lienzo con puntos, tarjetas y nodos, tokens del sistema de diseño). */
.dn{--ink:var(--foreground);border-top:1px solid var(--border)}
.dn-head{max-width:1120px;margin:0 auto;padding:96px 24px 8px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.dn-head h2{margin:0;font-family:'Geist',system-ui,sans-serif;font-weight:500;font-size:var(--text-display-lg);line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.dn-head p{margin:0;font-size:1rem;color:var(--text-secondary);text-wrap:pretty;max-width:46ch}
.dn-grid{max-width:1120px;margin:0 auto;padding:48px 24px 96px;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:56px;align-items:center;box-sizing:border-box;width:100%}

/* ---------- Texto ---------- */
.dn-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:40px}
.dn-k{font-family:"Geist Mono",ui-monospace,monospace;font-size:.75rem;letter-spacing:-.02em;color:var(--text-secondary);display:flex;align-items:center;gap:10px}
.dn-k::after{content:"";height:1px;width:28px;background:var(--border-strong)}
.dn-step h3{margin:14px 0 10px;font-family:'Geist',system-ui,sans-serif;font-weight:500;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.dn-step p{margin:0;font-size:1.0625rem;line-height:1.55;color:var(--text-secondary);text-wrap:pretty;max-width:38ch}
.dn-note{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:.8125rem;color:var(--text-secondary)}
.dn-note svg{width:15px;height:15px;flex:none}
.dn-dots{display:none}

/* ---------- Escenario ---------- */
.dn-stage{position:relative;aspect-ratio:4/3;width:100%;container-type:inline-size;border-radius:var(--radius-panel);overflow:hidden;background-color:var(--surface-muted);background-image:radial-gradient(circle,var(--border-strong) .9px,transparent 1.1px);background-size:20px 20px;border:1px solid var(--border);box-shadow:var(--shadow-resting);color:var(--ink);isolation:isolate;user-select:none}
.dn-defs{position:absolute;width:0;height:0}
/* cqw solo vale dentro del contenedor: por eso la escala de letra va en cada capa y no en el escenario */
.dn-stage>*{font-size:1.62cqw}
.dn-stage svg{overflow:visible}
.dn-l{position:absolute;inset:0}

/* ---------- 1 · Cerebro ---------- */
/* Ilustraciones históricas (Vicq d'Azyr y Ramón y Cajal) teñidas de rosa: se cargan al acercarse a la sección */
.dn{--pink:oklch(66% .14 355);--pink-2:oklch(82% .07 355)}
.dn-brain{transition:opacity .8s var(--ease-standard),filter .8s,transform 1s var(--ease-in-out)}
.dn-brain>*{position:absolute;opacity:0;transition:opacity .9s var(--ease-standard),transform 1.1s var(--ease-enter)}
/* Composición: el corte lateral en el centro; el cerebro visto desde abajo arriba a la derecha y las neuronas abajo a la izquierda, sueltos */
.dn-vicq1{left:19%;top:9%;width:62%;aspect-ratio:1000/937;background:var(--pink);-webkit-mask:var(--mi) center/contain no-repeat;mask:var(--mi) center/contain no-repeat;transform:scale(.96)}
.dn-vicq2{left:auto;right:-4%;top:-6%;width:30%;aspect-ratio:760/821;background:var(--pink-2);-webkit-mask:var(--mi) center/contain no-repeat;mask:var(--mi) center/contain no-repeat;transform:rotate(12deg) translateY(-4%)}
.dn-cajal{left:-6%;top:52%;width:34%;aspect-ratio:820/694;background:var(--pink-2);-webkit-mask:var(--mi) center/contain no-repeat;mask:var(--mi) center/contain no-repeat;transform:rotate(-8deg) translateY(4%)}
.dn.dn-img .dn-vicq2{--mi:url("/assets/discover/vicq-dazyr-2.webp")}
.dn.dn-img .dn-vicq1{--mi:url("/assets/discover/vicq-dazyr-1.webp")}
.dn.dn-img .dn-cajal{--mi:url("/assets/discover/ramon-y-cajal.webp")}
.dn[data-s="1"] .dn-brain>*{opacity:1}
.dn[data-s="1"] .dn-vicq1{transform:none;transition-delay:.15s}
.dn[data-s="1"] .dn-vicq2{opacity:.65;transform:rotate(12deg);transition-delay:.35s}
.dn[data-s="1"] .dn-cajal{opacity:.6;transform:rotate(-8deg)}
.dn:not([data-s="1"]) .dn-brain{opacity:0;filter:blur(6px);transform:scale(1.06)}
/* Créditos de las ilustraciones: icono de información en la esquina; se abre al pasar el ratón o al pulsar */
.dn-sw{position:relative;width:100%}
.dn-info{position:absolute;left:12px;bottom:12px;z-index:50;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.dn[data-s="1"] .dn-info{opacity:1;visibility:visible}
.dn-ib{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border-radius:9999px;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);box-shadow:var(--shadow-resting);cursor:pointer;transition:color .2s,border-color .2s}
.dn-ib svg{width:17px;height:17px}
.dn-ib:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.dn-info.open .dn-ib{color:var(--foreground);border-color:var(--border-strong)}
.dn-pop{position:absolute;left:0;bottom:calc(100% + 8px);width:max-content;max-width:min(370px,calc(100vw - 64px));padding:10px 12px;border-radius:var(--radius-inner);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-floating);font-size:.75rem;line-height:1.55;color:var(--text-secondary);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .2s,transform .2s,visibility .2s}
.dn-info.open .dn-pop{opacity:1;visibility:visible;transform:none}
@media (hover:hover) and (pointer:fine){.dn-ib:hover{color:var(--foreground);border-color:var(--border-strong)}.dn-info:hover .dn-pop{opacity:1;visibility:visible;transform:none}}
.dn-pop a{color:var(--foreground);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:2px}
.dn-pop strong{display:block;margin-bottom:4px;color:var(--foreground);font-weight:500}

/* Tareas sueltas: flotan dentro del cerebro y luego vuelan a sus proyectos */
.dn-chips{z-index:6;pointer-events:none}
.dn-chip{position:absolute;left:var(--x1);top:var(--y1);transform:rotate(var(--r));display:inline-flex;align-items:center;gap:.5em;height:2.6em;padding:0 .9em;box-sizing:border-box;white-space:nowrap;border-radius:.6em;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-raised);color:var(--foreground);font-weight:500;font-size:1.05em;transition:left 1s var(--ease-in-out) var(--dl,0ms),top 1s var(--ease-in-out) var(--dl,0ms),transform 1s var(--ease-in-out) var(--dl,0ms),opacity .5s,box-shadow .8s var(--dl,0ms),border-color .8s var(--dl,0ms)}
.dn-chip i{width:.65em;height:.65em;border-radius:50%;border:1.3px solid var(--text-muted,#a3a7ae);flex:none}
.dn-chip span{display:block}
.dn[data-s="1"] .dn-chip{animation:dnFloat 5.5s ease-in-out infinite alternate;animation-delay:var(--fd)}
@keyframes dnFloat{from{translate:0 0}to{translate:var(--fx) var(--fy)}}
.dn[data-s="2"] .dn-chip{left:var(--x2);top:var(--y2);transform:none;box-shadow:var(--shadow-resting);height:2.4em;font-size:1em}
/* "Entregar el TFG" viaja con su subproyecto: primero a la tarjeta TFG y luego, con ella, dentro de Universidad */
.dn[data-s="2"] .dn-chip.c3{animation:dnC3 2.1s var(--ease-in-out) both}
@keyframes dnC3{0%{left:var(--x1);top:var(--y1);transform:rotate(var(--r))}38%,57%{left:41.5%;top:73%;transform:none}100%{left:var(--x2);top:var(--y2);transform:none}}
.dn:not([data-s="1"]):not([data-s="2"]) .dn-chip{opacity:0;transition-duration:.35s}
.dn[data-s="3"] .dn-chip{left:var(--x2);top:var(--y2)}

/* ---------- 2 · Proyectos ---------- */
.dn-s2{transition:transform 1.1s var(--ease-in-out),opacity .7s var(--ease-standard) .25s;transform-origin:22% 64%}
.dn-card{position:absolute;box-sizing:border-box;border-radius:1em;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-resting);opacity:0;transform:translateY(1.2em) scale(.97);transition:opacity .6s var(--ease-standard),transform .7s var(--ease-enter)}
.dn-card h4{margin:0;display:flex;align-items:center;gap:.55em;padding:1em 1.1em .6em;font:600 1.15em/1.2 'Geist',system-ui,sans-serif;color:#1d1f24;letter-spacing:-.01em}
.dn-card h4 b{width:.75em;height:.75em;border-radius:.22em;flex:none}
.dn-card h4 em{margin-left:auto;font:400 .75em/1 "Geist Mono",ui-monospace,monospace;color:#7b7f87;font-style:normal}
.dn-c1{left:5%;top:15%;width:31%;height:68%}
.dn-c2{left:39%;top:15%;width:27%;height:44%}
.dn-c3{left:69%;top:15%;width:26%;height:36%}
.dn-sub{left:39%;top:64%;width:26%;height:26%;border-style:dashed;border-color:var(--border-strong);transition:left .9s var(--ease-in-out) 1.2s,top .9s var(--ease-in-out) 1.2s,width .9s var(--ease-in-out) 1.2s,opacity .5s var(--ease-standard) .2s,transform .6s var(--ease-enter) .2s,border-color .6s 2s}
.dn-sub h4{font-size:1em;padding:.8em 1em .4em}
.dn-sub-tag{position:absolute;right:.8em;top:.75em;font:500 .72em/1 "Geist Mono",ui-monospace,monospace;color:#7b7f87}
.dn[data-s="2"] .dn-card{opacity:1;transform:none}
.dn[data-s="2"] .dn-c2{transition-delay:.08s}.dn[data-s="2"] .dn-c3{transition-delay:.16s}
.dn[data-s="2"] .dn-sub,.dn[data-s="3"] .dn-sub{left:8%;top:50%;width:25%;border-color:var(--accent-line)}
.dn[data-s="3"] .dn-s2,.dn[data-s="4"] .dn-s2,.dn[data-s="5"] .dn-s2{transform:scale(3.4);opacity:0;transition:transform 1.1s var(--ease-in-out),opacity .6s var(--ease-standard) .2s}
.dn[data-s="3"] .dn-card{opacity:1;transform:none;transition:none}

/* ---------- 3 y 4 · El panel de nod ---------- */
.dn-panel{position:absolute;left:4%;top:6%;width:92%;height:88%;z-index:8;box-sizing:border-box;border-radius:1.1em;background:var(--surface,#fff);border:1px solid var(--border,#e5e6e9);box-shadow:0 2px 4px oklch(24% .02 260 / .06),0 24px 60px oklch(24% .02 260 / .16);overflow:hidden;color:var(--foreground,#1d1f24);font-family:Inter,system-ui,sans-serif;opacity:0;transform:scale(.3);transform-origin:20% 70%;transition:transform 1.1s var(--ease-in-out),opacity .5s var(--ease-standard) .35s}
.dn[data-s="3"] .dn-panel,.dn[data-s="4"] .dn-panel{opacity:1;transform:none}
.dn[data-s="5"] .dn-panel{opacity:0;transform:perspective(60em) rotateX(48deg) rotateZ(-24deg) scale(.7);transition:transform 1s var(--ease-in-out),opacity .7s .25s}
.dn-ph{position:absolute;left:0;right:0;top:0;height:11%;display:flex;align-items:center;gap:.8em;padding:0 1.1em;border-bottom:1px solid var(--border,#e5e6e9);box-sizing:border-box}
.dn-logo{width:1.9em;height:1.9em;flex:none}
.dn-proj{display:inline-flex;align-items:center;gap:.4em;height:2.2em;padding:0 .7em 0 .9em;border:1px solid var(--border,#e5e6e9);border-radius:.6em;font-weight:500;white-space:nowrap}
.dn-proj .par{color:var(--text-secondary,#6b6f77)}
.dn-proj svg{width:1em;height:1em;color:var(--text-secondary,#6b6f77)}
.dn-tog{margin-left:auto;display:flex;gap:.2em;padding:.22em;border-radius:.7em;background:var(--surface-muted,#f2f3f4)}
.dn-tog span{position:relative;z-index:1;display:inline-flex;align-items:center;height:1.9em;padding:0 .8em;border-radius:.5em;font-weight:500;color:var(--text-secondary,#6b6f77);transition:color .3s}
.dn-tog .on{color:var(--foreground,#1d1f24)}
.dn-tog-k{position:absolute;z-index:0;height:1.9em;border-radius:.5em;background:var(--surface,#fff);box-shadow:0 1px 2px oklch(24% .02 260 / .12);transition:left .45s var(--ease-in-out),width .45s var(--ease-in-out)}
.dn-tog{position:relative}
.dn-tog .dn-tog-k{position:absolute;z-index:0;padding:0;left:.22em;top:.22em;width:var(--w1,4.5em)}
.dn-today-b{display:inline-flex;align-items:center;gap:.4em;height:2.2em;padding:0 .8em;border-radius:.6em;background:var(--accent-subtle,#e8f0fe);color:var(--accent-strong,#0b4fc4);font-weight:500;margin-left:auto;white-space:nowrap;transition:box-shadow .3s,transform .2s}
.dn-today-b svg{width:1.1em;height:1.1em}
.dn-pb{position:absolute;left:0;right:0;top:11%;bottom:0;background-image:radial-gradient(circle,#d4d6da .09em,transparent .1em);background-size:1.5em 1.5em}
.dn-pb>svg{position:absolute;inset:0;width:100%;height:100%}

/* Nodos */
.dn-n{position:absolute;box-sizing:border-box;width:24%;height:15%;padding:.75em .9em;border-radius:.8em;background:var(--surface,#fff);border:1px solid var(--border,#e5e6e9);box-shadow:0 1px 2px oklch(24% .02 260 / .06);opacity:0;transform:translateY(.6em) scale(.96);transition:opacity .45s var(--ease-standard),transform .5s var(--ease-enter),left .9s var(--ease-in-out),top .9s var(--ease-in-out)}
.dn-n .st{display:flex;align-items:center;gap:.45em;font-size:.82em;color:var(--text-secondary,#6b6f77)}
.dn-n .st i{width:.62em;height:.62em;border-radius:50%;border:1.3px solid #a3a7ae}
.dn-n .st i.doing{border-color:#b98a1b;background:#b98a1b}.dn-n .st i.done{border-color:#3d8a2a;background:#3d8a2a}
.dn-n .st .rep{margin-left:auto;width:1em;height:1em;color:var(--accent,#2563eb)}
.dn-n .tt{margin-top:.5em;font-weight:500;font-size:1.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dn-n.sub{width:22%;height:14%}
#dnN1{left:6%;top:14%}#dnN2{left:38%;top:14%}#dnN3{left:70%;top:14%}
#dnC1{left:72%;top:47%}#dnC2{left:72%;top:69%}
.dn-ln{fill:none;stroke:#a3a7ae;stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--ease-in-out),opacity .4s}
.dn-ln.sub{stroke-dasharray:none}
.dn-ln-d{stroke-dasharray:4 4;opacity:0;transition:opacity .5s}
.dn-hd{fill:none;stroke:#a3a7ae;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .3s}

/* Ficha abierta */
.dn-x{position:absolute;left:32%;top:33%;width:36%;height:52%;box-sizing:border-box;padding:1em 1.1em;border-radius:1em;background:var(--surface,#fff);border:1px solid var(--border-strong,#d3d5d9);box-shadow:0 18px 40px oklch(24% .02 260 / .16);opacity:0;transform:translateY(-1em) scale(.92);transform-origin:50% 0;transition:opacity .4s var(--ease-standard),transform .5s var(--ease-enter)}
.dn-x h5{margin:0;font:600 1.18em/1.2 'Geist',system-ui,sans-serif;letter-spacing:-.01em}
.dn-pills{position:relative;display:flex;gap:.2em;margin-top:.8em;padding:.22em;border-radius:.65em;background:var(--surface-muted,#f2f3f4);font-size:.86em}
.dn-pills span{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.35em;height:2em;border-radius:.5em;color:var(--text-secondary,#6b6f77);white-space:nowrap;transition:background .3s,color .3s,box-shadow .3s}
.dn-pills i{width:.55em;height:.55em;border-radius:50%;background:#a3a7ae}.dn-pills .p2 i{background:#b98a1b}.dn-pills .p3 i{background:#3d8a2a}
.dn-pills .p1{background:#fff;color:var(--foreground,#1d1f24);box-shadow:0 1px 2px oklch(24% .02 260 / .12)}
.dn-dates{position:relative;display:flex;gap:.5em;margin-top:.8em}
.dn-dates span{flex:1;display:flex;align-items:center;height:2.3em;padding:0 .7em;border-radius:.55em;border:1px solid var(--border-strong,#d3d5d9);font-size:.88em;color:#9a9ea6;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.dn-dates b{font-weight:400;color:var(--foreground,#1d1f24);opacity:0;transition:opacity .3s}
.dn-nl{margin:.8em 0 .35em;font-size:.82em;color:var(--text-secondary,#6b6f77);font-weight:500}
.dn-note-b{height:3.6em;padding:.55em .7em;box-sizing:border-box;border-radius:.55em;border:1px solid var(--border-strong,#d3d5d9);font-size:.9em}
.dn-type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:0;border-right:1.5px solid transparent}
.dn-addsub{display:inline-flex;align-items:center;gap:.4em;margin-top:.8em;height:2.2em;padding:0 .8em;border-radius:9em;border:1px solid var(--border,#e5e6e9);font-size:.86em;font-weight:500;transition:background .2s,transform .15s}
.dn-addsub svg{width:1em;height:1em}

/* Secuencia de la escena 3 (con retardos al entrar) */
.dn[data-s="3"] .dn-n,.dn[data-s="4"] .dn-n{opacity:1;transform:none}
.dn[data-s="3"] #dnN1{transition-delay:.7s}.dn[data-s="3"] #dnN2{transition-delay:.85s}.dn[data-s="3"] #dnN3{transition-delay:1s}
.dn[data-s="3"] .dn-ln.a,.dn[data-s="4"] .dn-ln.a{stroke-dashoffset:0}
.dn[data-s="3"] .dn-ln.a{transition-delay:1.3s}
.dn[data-s="3"] .dn-hd.a,.dn[data-s="4"] .dn-hd.a{opacity:1}
.dn[data-s="3"] .dn-hd.a{transition-delay:1.85s}
.dn[data-s="3"] .dn-x{opacity:1;transform:none;transition-delay:2.1s}
.dn[data-s="3"] .dn-pills .p1{background:transparent;color:var(--text-secondary,#6b6f77);box-shadow:none;transition-delay:2.8s}
.dn[data-s="3"] .dn-pills .p2{background:#fff;color:var(--foreground,#1d1f24);box-shadow:0 1px 2px oklch(24% .02 260 / .12);transition-delay:2.8s}
.dn[data-s="3"] #dnN2 .st i,.dn[data-s="4"] #dnN2 .st i{border-color:#b98a1b;background:#b98a1b;transition:all .3s 2.8s}
.dn[data-s="3"] .dn-dates b{opacity:1;transition-delay:3.3s}
.dn[data-s="3"] .dn-dates b+b{transition-delay:3.55s}
.dn[data-s="3"] .dn-type{animation:dnType 1.1s steps(22,end) 3.9s forwards,dnCaret .7s step-end 3.9s 3}
@keyframes dnType{to{max-width:16em}}
@keyframes dnCaret{50%{border-right-color:var(--foreground,#1d1f24)}}
.dn[data-s="3"] .dn-addsub{animation:dnPress .35s ease 5.2s}
@keyframes dnPress{50%{transform:scale(.94);background:var(--surface-muted,#f2f3f4)}}
.dn[data-s="3"] .dn-n.sub{transition-delay:5.5s}.dn[data-s="3"] #dnC2{transition-delay:5.75s}
.dn[data-s="3"] .dn-ln.s,.dn[data-s="4"] .dn-ln.s{stroke-dashoffset:0}
.dn[data-s="3"] .dn-ln.s{transition-delay:5.6s}
/* En la escena 4 la ficha se cierra y los subnodos cuelgan de "Redacción" */
.dn[data-s="4"] .dn-ln-d{opacity:1}
.dn[data-s="4"] #dnN2 .tt::after{content:""}

/* Escena 4: calendario, nodos de hoy y archivo (data-t lo marca discover.js) */
.dn-cal{position:absolute;left:0;right:0;top:11%;bottom:0;background:var(--surface,#fff);opacity:0;transition:opacity .45s var(--ease-standard);padding:1.2em 1.4em;box-sizing:border-box}
.dn-cal-h{display:flex;align-items:baseline;gap:.6em;font:600 1.25em/1 'Geist',system-ui,sans-serif;letter-spacing:-.01em}
.dn-cal-h small{font:400 .66em/1 "Geist Mono",ui-monospace,monospace;color:var(--text-secondary,#6b6f77)}
.dn-cal-g{position:absolute;left:1.4em;right:1.4em;top:3.6em;bottom:1.2em;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(5,1fr);border-top:1px solid var(--border,#e5e6e9);border-left:1px solid var(--border,#e5e6e9)}
.dn-cal-g span{border-right:1px solid var(--border,#e5e6e9);border-bottom:1px solid var(--border,#e5e6e9);padding:.3em .4em;font:400 .76em/1 "Geist Mono",ui-monospace,monospace;color:var(--text-secondary,#6b6f77)}
.dn-cal-g span.out{color:#c4c7cc}
.dn-cal-g span.td{color:#fff;position:relative}
.dn-cal-g span.td::before{content:"";position:absolute;left:.12em;top:.02em;width:1.75em;height:1.75em;border-radius:50%;background:var(--accent,#2563eb);z-index:-1}
.dn-cal-g span.td{z-index:0}
.dn-bars{position:absolute;left:1.4em;right:1.4em;top:3.6em;bottom:1.2em}
.dn-bar{position:absolute;height:1.45em;border-radius:.45em;font-size:.76em;font-weight:500;display:flex;align-items:center;padding:0 .6em;box-sizing:border-box;white-space:nowrap;overflow:hidden;transform-origin:0 50%;transform:scaleX(.2);opacity:0;transition:transform .55s var(--ease-enter),opacity .3s}
.dn-bar.done{background:#dcebd6;color:#285c1b}.dn-bar.doing{background:#f6e5bd;color:#6f5210}.dn-bar.todo{background:#e8eaee;color:#3b3f46}.dn-bar.acc{background:var(--accent-subtle,#e8f0fe);color:var(--accent-strong,#0b4fc4)}
.dn[data-t="1"] .dn-cal{opacity:1}
.dn[data-t="1"] .dn-bar{transform:none;opacity:1}
.dn[data-t="1"] .dn-bar:nth-child(2){transition-delay:.08s}.dn[data-t="1"] .dn-bar:nth-child(3){transition-delay:.16s}.dn[data-t="1"] .dn-bar:nth-child(4){transition-delay:.24s}.dn[data-t="1"] .dn-bar:nth-child(5){transition-delay:.32s}
.dn-today{position:absolute;right:1.5%;top:13%;width:38%;z-index:5;box-sizing:border-box;padding:1.1em 1.1em;border-radius:1em;background:var(--surface,#fff);border:1px solid var(--border,#e5e6e9);box-shadow:0 18px 46px oklch(24% .02 260 / .2);opacity:0;transform:translateX(1.4em);transition:opacity .35s var(--ease-standard),transform .45s var(--ease-enter)}
.dn-today h5{margin:0;display:flex;align-items:center;gap:.45em;font:600 1.12em/1.2 'Geist',system-ui,sans-serif;color:var(--accent-strong,#0b4fc4)}
.dn-today h5 svg{width:1.1em;height:1.1em}
.dn-today p{margin:.35em 0 .9em;font-size:.82em;color:var(--text-secondary,#6b6f77);line-height:1.35}
.dn-tg{margin:.8em 0 .4em;font:500 .74em/1 "Geist Mono",ui-monospace,monospace;color:var(--text-secondary,#6b6f77);text-transform:uppercase;letter-spacing:.02em}
.dn-ti{display:flex;align-items:center;gap:.55em;height:2.5em;padding:0 .75em;border-radius:.6em;border:1px solid var(--border,#e5e6e9);font-weight:500;font-size:.92em;margin-bottom:.4em}
.dn-ti i{width:.6em;height:.6em;border-radius:50%;flex:none;background:#b98a1b}.dn-ti i.todo{background:none;border:1.3px solid #a3a7ae}
.dn-ti svg{margin-left:auto;width:1.05em;height:1.05em;color:var(--accent,#2563eb)}
.dn[data-t="3"] .dn-today{opacity:1;transform:none}
.dn[data-t="3"] .dn-today-b{box-shadow:0 0 0 .2em var(--accent-subtle,#e8f0fe),0 0 0 .32em var(--accent-line,#9fbdf0)}
.dn-arch{position:absolute;right:1.6%;bottom:2.5%;z-index:4;display:inline-flex;align-items:center;justify-content:center;gap:.35em;height:2.6em;min-width:2.6em;padding:0 .55em;box-sizing:border-box;border-radius:.65em;background:var(--accent-subtle);border:1px solid var(--accent-line);color:var(--accent-strong);font-weight:600;transition:transform .25s}
.dn-arch svg{width:1.35em;height:1.35em}
.dn-arch b{display:none;font-variant-numeric:tabular-nums}
.dn[data-t="5"] .dn-arch b{display:inline}
.dn[data-t="5"] .dn-arch{animation:dnBump .4s ease .55s}
@keyframes dnBump{50%{transform:scale(1.15)}}
.dn[data-t="5"] #dnN1{left:86%;top:86%;transform:scale(.15);opacity:0;transition:left .7s var(--ease-in-out),top .7s var(--ease-in-out),transform .7s var(--ease-in-out),opacity .3s .45s}
.dn[data-t="5"] .dn-ln.a1,.dn[data-t="5"] .dn-hd.a1{opacity:0}
.dn[data-s="4"] .dn-tog .dn-tog-k{left:.22em;width:var(--w1)}
.dn[data-t="1"] .dn-tog .dn-tog-k{left:var(--l2);width:var(--w2)}
.dn[data-t="1"] .dn-tog .t1{color:var(--text-secondary,#6b6f77)}.dn[data-t="1"] .dn-tog .t2{color:var(--foreground,#1d1f24)}

/* ---------- 5 · Capas y dispositivos ---------- */
.dn-3d{z-index:9;perspective:70em;perspective-origin:50% 30%;pointer-events:none}
.dn-scene3{--gap:12cqw;position:absolute;left:23%;top:33%;width:54%;height:46%;transform-style:preserve-3d;transform:rotateX(52deg) rotateZ(-32deg);transition:transform 1s var(--ease-in-out),opacity .6s}
.dn-lay{position:absolute;inset:0;transform-style:preserve-3d;opacity:0;transform:translateZ(0);transition:transform .9s var(--ease-in-out),opacity .5s}
/* Capas translúcidas: se ven las de abajo, algo desenfocadas */
.dn-lay .pl{position:absolute;inset:0;border-radius:1em;background:color-mix(in oklch,var(--surface) 30%,transparent);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);border:1px solid color-mix(in oklch,var(--accent) 35%,var(--border-strong));box-shadow:0 1.2em 2.4em oklch(24% .02 260 / .08)}
.dn-lay .lb{position:absolute;left:4%;bottom:6%;font:500 .95em/1 "Geist Mono",ui-monospace,monospace;color:var(--text-secondary)}
.dn-lay .b{position:absolute;height:15%;border-radius:.5em;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-resting)}
.dn-lay .b::before{content:"";position:absolute;left:8%;top:50%;width:.6em;height:.6em;margin-top:-.3em;border-radius:50%;border:1.2px solid var(--text-muted,#a3a7ae)}
.dn-lay .b[data-c="done"]::before{border-color:var(--success);background:var(--success)}
.dn-lay .b[data-c="doing"]::before{border-color:var(--warning);background:var(--warning)}
.dn-lay .b[data-c="acc"]{border-color:var(--accent-line);background:var(--accent-subtle)}
.dn-lay svg{position:absolute;inset:0;width:100%;height:100%}
.dn-lay path{fill:none;stroke:var(--text-muted,#a3a7ae);stroke-width:1.2;stroke-dasharray:3 3}
.dn[data-s="5"] .dn-lay{opacity:1;transform:translateZ(calc(var(--z) * var(--gap)))}
.dn[data-s="5"] .dn-lay:nth-child(1){transition-delay:.3s}.dn[data-s="5"] .dn-lay:nth-child(2){transition-delay:.45s}.dn[data-s="5"] .dn-lay:nth-child(3){transition-delay:.6s}
.dn[data-s="5"].dn-b .dn-scene3{transform:translate(0,-14%) rotateX(52deg) rotateZ(-32deg) scale(.12);opacity:0;transition:transform .8s var(--ease-in-out),opacity .4s .45s}
.dn[data-s="5"].dn-b .dn-lay{transform:translateZ(0);transition-delay:0s}
/* Al pasar el ratón por una capa, se adelanta; las de encima se apartan y las de debajo se atenúan */
.dn-lay .pl{transition:background .35s,border-color .35s,box-shadow .35s}
/* Zonas fijas para detectar la capa bajo el ratón (las capas visibles se mueven y no sirven para eso) */
.dn-hit{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.dn-hit i{position:absolute;inset:0;border-radius:1em;transform:translateZ(calc(var(--z) * var(--gap)))}
.dn[data-s="5"]:not(.dn-b) .dn-hit i{pointer-events:auto;cursor:pointer}
.dn.dn-lr .dn-lay{transition:transform .55s var(--ease-standard),opacity .35s var(--ease-standard)!important}
.dn[data-s="5"] .dn-lay.hot{transform:translateY(16%) translateZ(calc(var(--z) * var(--gap) + 2.5cqw))}
.dn[data-s="5"] .dn-lay.hot .pl{background:color-mix(in oklch,var(--surface) 90%,transparent);border-color:var(--accent-line);box-shadow:0 22px 48px oklch(24% .02 260 / .2)}
.dn[data-s="5"] .dn-lay.hot .lb{color:var(--foreground)}
.dn[data-s="5"] .dn-lay.above{transform:translateZ(calc(var(--z) * var(--gap) + 7cqw));opacity:.25}
.dn[data-s="5"] .dn-lay.below{opacity:.5}

/* Final: las capas se condensan en el logo de nod */
.dn-end{z-index:10;display:flex;align-items:center;justify-content:center;gap:.9em;pointer-events:none}
.dn-mark{width:9em;height:9em;transform:scale(.3);opacity:0;transition:transform .8s var(--ease-enter) .35s,opacity .4s .35s}
.dn-word{font:500 7em/1 'Geist',system-ui,sans-serif;letter-spacing:-.04em;color:var(--foreground);opacity:0;transform:translateX(-.25em);transition:opacity .5s .7s,transform .6s var(--ease-enter) .7s}
.dn[data-s="5"].dn-b .dn-mark,.dn[data-s="5"].dn-b .dn-word{transform:none;opacity:1}

/* ---------- Recorrido con scroll (solo con JS) ---------- */
.js .dn-track{height:600vh;position:relative}
.js .dn-sticky{position:sticky;top:var(--nav-h,0px);height:calc(100vh - var(--nav-h,0px));height:calc(100svh - var(--nav-h,0px));display:flex;align-items:center;overflow:hidden}
.js .dn-grid{padding-top:32px;padding-bottom:32px}
.js .dn-text{position:relative;display:flex;flex-direction:column;gap:32px}
.js .dn-steps{display:grid}
.js .dn-step{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease-standard),transform .6s var(--ease-enter);pointer-events:none}
.js .dn-step.on{opacity:1;transform:none;pointer-events:auto;transition-delay:.15s}
.js .dn-dots{display:flex;gap:6px}
.dn-dots button{position:relative;width:34px;height:24px;border:0;padding:0;background:none;cursor:pointer}
.dn-dots button::before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;border-radius:2px;background:var(--border-strong);transition:background .3s}
.dn-dots button[aria-current="step"]::before{background:var(--accent)}
.dn-dots button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:4px}
.js .dn-sw{max-width:min(100%,calc((100svh - 96px - var(--nav-h,0px)) * 4 / 3));justify-self:center}
.js .dn-head{padding-bottom:0}

/* Sin JS: se ve el panel y los textos uno debajo de otro */
html:not(.js) .dn-stage .dn-panel{opacity:1;transform:none}
html:not(.js) .dn-n{opacity:1;transform:none}
html:not(.js) .dn-ln{stroke-dashoffset:0}
html:not(.js) .dn-hd{opacity:1}

@media (max-width:860px){
  .dn-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .dn-sw{order:-1}
  .js .dn-sw{max-width:min(100%,calc((100svh - 300px - var(--nav-h,0px)) * 4 / 3))}
  .js .dn-text{min-height:210px;gap:18px;justify-content:flex-start}
  .dn-step h3{margin:10px 0 8px}
  .dn-step p{font-size:1rem}
  .dn-head{padding-top:72px}
  .js .dn-grid{padding-top:16px;padding-bottom:16px}
}
@media (prefers-reduced-motion:reduce){
  .dn *,.dn *::before,.dn *::after{transition:none!important;animation:none!important}
  .dn .dn-type{max-width:16em}
}
.dn-n .st .b{display:none}
.dn[data-s="3"] #dnN2 .st .a,.dn[data-s="4"] #dnN2 .st .a{display:none}
.dn[data-s="3"] #dnN2 .st .b,.dn[data-s="4"] #dnN2 .st .b{display:inline}
.dn[data-s="4"] .dn-ln.s{opacity:0}
.dn-pop a[href*="creativecommons"]{white-space:nowrap}
.dn-pro{margin-left:.15em;padding:.1em .45em;border-radius:9em;background:var(--surface);color:var(--accent-strong);font-size:.72em;font-weight:600;line-height:1.4}
.dn-note .pro-pill{flex:none}

/* Flechas verticales entre capas: de cada nodo a su subnodo, en la capa de debajo */
.dn-va-w{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;transition:opacity .3s}
.dn-va{position:absolute;width:0;height:calc(var(--gap) - 2px);transform-origin:0 0;transform:translateZ(calc(var(--z) * var(--gap))) rotateX(-90deg);border-left:2px solid var(--accent);opacity:0;transition:opacity .5s .9s}
.dn-va::after{content:"";position:absolute;left:-4.5px;bottom:1px;width:5px;height:5px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg)}
.dn[data-s="5"] .dn-va{opacity:1}
.dn.dn-hov .dn-va-w{opacity:0;transition-delay:0s}

/* Flechas del primer nivel al segundo: se dibujan por encima de las capas para que se vean nítidas */
.dn-pts{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.dn-pt{position:absolute;width:0;height:0;transform:translateZ(calc(var(--z) * var(--gap)))}
.dn-va2{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;opacity:0;transition:opacity .4s}
.dn-va2 path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round}
.dn[data-s="5"].dn-lr:not(.dn-b):not(.dn-hov) .dn-va2.ready{opacity:1}