/* Lección 01 · Anatomía de un war room. Todo bajo #leccion-1 (la hoja interna también vive dentro del <article>).
   Movimiento (MOVIMIENTO_ESPECIFICACION): entrada cubic-bezier(.2,.7,.2,1), salida cubic-bezier(.4,0,1,1).
   Bloques 16 px → 0 en 520 ms, escalón 80 ms (máx. 5); íconos que se trazan una vez (700 ms); hoja interna 24 px en 420 ms
   y se va en 280 ms; cambios de estado 200 ms. Sólo transform, opacity y stroke-dashoffset. Los estados iniciales sólo
   existen bajo .l1-vivo (lo pone leccion-1.js): sin JS o con movimiento reducido, todo quieto y completo. */

/* La lección abierta sola no carga natalia.css: aquí va su Bodoni (misma ruta que la página, el navegador la reutiliza) */
@font-face{font-family:"Bodoni Moda";src:url('../../comun/fonts/bodoni-moda.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url('../../comun/fonts/bodoni-moda-italic.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:swap}

#leccion-1{--l1-tapa:#17151a;--l1-vidrio:rgb(255 255 255/.07);--l1-filo:rgb(255 255 255/.14);--l1-tenue:rgb(243 242 245/.62)}
#leccion-1 :is(ol,ul,dl,dd){margin:0;padding:0;list-style:none}
:where(#leccion-1 button){font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;border-radius:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
#leccion-1 .l1-solojs{display:none}
#leccion-1.l1-js .l1-solojs{display:revert}
#leccion-1 em{font-style:italic}

/* ——— Cabeza ——— */
#leccion-1 .lc-cab{display:grid;gap:12px;padding-top:40px;padding-bottom:4px}
#leccion-1 .l1-lede{max-width:28em;color:rgb(243 242 245/.66)}

/* Encabezados de escena */
#leccion-1 .l1-cabeza{display:grid;gap:12px;max-width:40em}
#leccion-1 .l1-h{font:400 clamp(30px,8vw,48px)/1.06 var(--didona);letter-spacing:-.012em;color:var(--platino-claro);text-wrap:balance}
#leccion-1 .l1-h em{display:block;color:var(--rosa-suave)}
#leccion-1 .lc-escena{display:grid;gap:28px;align-content:start;padding-top:56px;padding-bottom:56px}
#leccion-1 .lc-escena+.lc-escena{border-top:1px solid rgb(255 255 255/.06)}

/* ════════ 1 · La situación ════════ */
#leccion-1 .l1-ap{padding-top:36px;gap:24px}
#leccion-1 .l1-ap-texto{display:grid;gap:16px}
#leccion-1 .l1-caso{font:400 16px/1.5 var(--sans);color:var(--l1-tenue);max-width:30em}
#leccion-1 .l1-pregunta{font:400 clamp(29px,7.8vw,50px)/1.12 var(--didona);letter-spacing:-.01em;color:var(--platino-claro);text-wrap:pretty}
#leccion-1 .l1-pregunta span{display:block}
#leccion-1 .l1-pq{margin-top:.38em;font-size:1.12em;line-height:1.06}
#leccion-1 .l1-pq em{color:var(--rosa-suave)}

#leccion-1 .l1-exp{margin:0;padding:10px;display:grid;gap:4px;max-width:520px}
#leccion-1 .l1-video{position:relative;aspect-ratio:16/8.4;border-radius:15px;overflow:hidden;isolation:isolate;
 background:radial-gradient(80% 90% at 70% 30%,rgb(196 92 124/.30),rgb(196 92 124/0) 60%),radial-gradient(60% 80% at 15% 90%,rgb(217 215 220/.12),rgb(217 215 220/0) 60%),#110f13;
 box-shadow:inset 0 0 0 1px rgb(255 255 255/.08)}
#leccion-1 .l1-video-luz{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgb(255 255 255/.025) 0 1px,transparent 1px 4px);z-index:-1}
#leccion-1 .l1-play{position:absolute;left:50%;top:46%;width:58px;height:58px;margin:-29px 0 0 -29px;display:grid;place-items:center;border-radius:50%;
 background:rgb(255 255 255/.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgb(255 255 255/.28),inset 0 1px 0 rgb(255 255 255/.35),0 10px 30px rgb(0 0 0/.3)}
#leccion-1 .l1-play svg{width:24px;height:24px;margin-left:3px;fill:var(--platino-claro)}
#leccion-1 .l1-video-k,#leccion-1 .l1-video-e{position:absolute;bottom:22px;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
#leccion-1 .l1-video-k{left:14px;color:rgb(243 242 245/.7)}
#leccion-1 .l1-video-e{right:12px;padding:6px 9px;border-radius:999px;color:var(--rosa-suave);background:rgb(11 10 12/.55);box-shadow:inset 0 0 0 1px rgb(230 180 194/.45)}
#leccion-1 .l1-video-b{position:absolute;left:14px;right:14px;bottom:10px;height:2px;border-radius:2px;background:rgb(243 242 245/.16);overflow:hidden}
#leccion-1 .l1-video-b i{position:absolute;inset:0;background:var(--rosa-hilo);transform-origin:0 50%;transform:scaleX(.28)}

#leccion-1 .l1-libro{display:grid;padding:6px 8px 4px}
#leccion-1 .l1-renglon{display:grid;grid-template-columns:128px minmax(0,1fr);gap:10px;align-items:baseline;padding:12px 2px;border-bottom:1px solid rgb(255 255 255/.07)}
#leccion-1 .l1-renglon:last-child{border-bottom:0}
#leccion-1 .l1-renglon dt{display:flex;align-items:center;gap:8px;font:500 10px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--l1-tenue);white-space:nowrap}
#leccion-1 .l1-renglon dt::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;transform:translateY(-1px)}
#leccion-1 .l1-r-si dt::before{background:var(--platino)}
#leccion-1 .l1-r-no dt::before{box-shadow:inset 0 0 0 1.5px var(--rosa-hilo)}
#leccion-1 .l1-r-dicho dt::before{background:repeating-linear-gradient(90deg,var(--platino) 0 1.5px,transparent 1.5px 3px);border-radius:1px}
#leccion-1 .l1-renglon dd{font:400 15.5px/1.45 var(--sans);color:var(--platino-claro)}
#leccion-1 .l1-r-no dd{color:var(--rosa-suave)}
#leccion-1 .l1-ap-sigue .lc-boton svg,#leccion-1 .l1-mira svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ════════ 2 · La mesa ════════ */
#leccion-1 .l1-mesa{position:relative;isolation:isolate;margin-inline:-6px;padding:8px;border-radius:28px;
 background:radial-gradient(70% 50% at 50% 40%,rgb(243 221 228/.10),rgb(243 221 228/0) 70%),radial-gradient(60% 40% at 90% 100%,rgb(196 92 124/.14),rgb(196 92 124/0) 70%),rgb(255 255 255/.02);
 box-shadow:inset 0 0 0 1px rgb(255 255 255/.06)}
/* La mesa de luz: una retícula muy tenue bajo el cristal */
#leccion-1 .l1-mesa::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
 background:linear-gradient(rgb(255 255 255/.035) 1px,transparent 1px) 0 0/100% 22px,linear-gradient(90deg,rgb(255 255 255/.035) 1px,transparent 1px) 0 0/22px 100%;
 -webkit-mask:radial-gradient(75% 65% at 50% 45%,#000,transparent);mask:radial-gradient(75% 65% at 50% 45%,#000,transparent)}
#leccion-1 .l1-piezas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#leccion-1 .l1-piezas>li{display:flex;min-width:0}
#leccion-1 .l1-pieza{position:relative;isolation:isolate;flex:1;min-width:0;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;align-content:start;column-gap:10px;
 min-height:124px;padding:14px 14px 18px;border-radius:20px;text-decoration:none;color:var(--platino-claro);overflow:hidden;
 background:linear-gradient(160deg,rgb(255 255 255/.10),rgb(255 255 255/.04) 55%,rgb(230 180 194/.05));
 -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
 box-shadow:0 12px 40px rgb(0 0 0/.25),inset 0 1px 0 rgb(255 255 255/.16);-webkit-tap-highlight-color:transparent;
 transition:transform .2s var(--of-entra)}
#leccion-1 .l1-pieza::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
 background:linear-gradient(165deg,rgb(255 255 255/.35),rgb(255 255 255/.05) 45%,rgb(255 255 255/.04) 75%,rgb(230 180 194/.18));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
#leccion-1 .l1-pieza::after{content:"";position:absolute;inset:0 0 auto;height:44%;border-radius:inherit;z-index:-1;pointer-events:none;
 background:linear-gradient(120deg,rgb(255 255 255/.40),rgb(255 255 255/0) 42%);opacity:.32;-webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#leccion-1 .l1-pieza{background:rgb(30 27 32/.96)}}
#leccion-1 .l1-pz-n{grid-column:2;grid-row:1;justify-self:end;font:500 10.5px/1 var(--mono);letter-spacing:.1em;color:rgb(243 242 245/.45)}
#leccion-1 .l1-ic{grid-column:1;grid-row:1;width:44px;height:44px;overflow:visible}
#leccion-1 .l1-ic .t{fill:var(--l1-tapa)}
#leccion-1 .l1-pz-t{grid-column:1/-1;grid-row:2;margin-top:12px;font:400 21px/1.1 var(--didona);letter-spacing:-.005em;color:var(--platino-claro)}
#leccion-1 .l1-pz-s{grid-column:1/-1;grid-row:3;margin-top:5px;font:400 12.5px/1.35 var(--sans);color:rgb(243 242 245/.56);text-wrap:balance}
/* Ya vista: un hilo rosa al pie (sin cuenta ni puntaje) */
#leccion-1 .l1-pz-v{position:absolute;left:14px;right:14px;bottom:8px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--rosa-hilo),var(--rosa-suave));
 transform:scaleX(0);transform-origin:0 50%;opacity:0;transition:transform .5s var(--of-entra),opacity .2s var(--of-entra)}
#leccion-1 .l1-pieza.vista .l1-pz-v{transform:none;opacity:1}
#leccion-1 .l1-pieza.vista .l1-pz-n{color:var(--rosa-suave)}
#leccion-1 .l1-pieza:focus-visible{outline:2px solid var(--rosa-perla);outline-offset:3px}
#leccion-1 .l1-pieza:active{transform:scale(.98)}
@media (hover:hover){#leccion-1 .l1-pieza:hover{background:linear-gradient(160deg,rgb(255 255 255/.14),rgb(255 255 255/.06) 55%,rgb(230 180 194/.09))}}

/* Las fichas sin JavaScript: una lista legible bajo la mesa */
#leccion-1 .l1-fichas{display:grid;gap:14px}
#leccion-1.l1-js .l1-fichas{display:none}
#leccion-1 .l1-fichas .l1-f{padding:20px;border-radius:20px;background:rgb(255 255 255/.04);box-shadow:inset 0 0 0 1px rgb(255 255 255/.08)}

/* Ficha (en la lista y en la hoja) */
#leccion-1 .l1-f{display:grid;gap:14px;align-content:start}
#leccion-1 .l1-f-k{font:500 10.5px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--rosa-suave)}
#leccion-1 .l1-f-t{font:400 clamp(28px,7.4vw,36px)/1.08 var(--didona);letter-spacing:-.01em;color:var(--platino-claro);text-wrap:balance}
#leccion-1 .l1-f-que{font:400 18px/1.5 var(--sans);color:var(--platino-claro);text-wrap:pretty}
#leccion-1 .l1-f-dl{display:grid;gap:10px}
#leccion-1 .l1-f-b{display:grid;gap:6px;align-content:start;padding:14px 16px;border-radius:16px;background:rgb(255 255 255/.04);box-shadow:inset 0 0 0 1px rgb(255 255 255/.06)}
#leccion-1 .l1-f-b dt{font:500 10px/1.3 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--l1-tenue)}
#leccion-1 .l1-f-b dd{font:400 16px/1.5 var(--sans);color:rgb(243 242 245/.86);text-wrap:pretty}
#leccion-1 .l1-f-falta{background:linear-gradient(120deg,rgb(196 92 124/.16),rgb(196 92 124/.05));box-shadow:inset 0 0 0 1px rgb(196 92 124/.35)}
#leccion-1 .l1-f-falta dt{color:var(--rosa-suave)}
#leccion-1 .l1-f-preg{background:none;box-shadow:none;padding:6px 2px 4px}
#leccion-1 .l1-f-preg dd{font:italic 400 clamp(22px,6vw,27px)/1.2 var(--didona);color:var(--rosa-suave);text-wrap:balance}
#leccion-1 .l1-f-prueba dd{position:relative;padding-left:28px}
#leccion-1 .l1-f-prueba dd::before{content:"";position:absolute;left:2px;top:.28em;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--rosa-hilo)}
#leccion-1 .l1-f-prueba dd::after{content:"";position:absolute;left:7.5px;top:calc(.28em + 4px);width:4px;height:7px;border-right:1.5px solid var(--rosa-suave);border-bottom:1.5px solid var(--rosa-suave);transform:rotate(40deg)}
#leccion-1 .l1-f-fuente{font:400 12px/1.5 var(--mono);color:rgb(243 242 245/.48)}
#leccion-1 .l1-f-fuente a{color:rgb(243 242 245/.74);text-decoration:underline;text-decoration-color:rgb(196 92 124/.7);text-underline-offset:3px}
#leccion-1 .l1-f-fuente a:focus-visible{outline:2px solid var(--rosa-hilo);outline-offset:2px}

/* ——— La hoja interna ——— */
#leccion-1 .l1-hoja{position:fixed;inset:auto 0 0;width:100%;max-width:100%;max-height:100%;margin:0;padding:0;border:0;background:transparent;color:var(--platino-claro);overflow:visible;
 font:400 16px/1.55 var(--sans)}
#leccion-1 .l1-hoja:not([open]){display:none}
#leccion-1 .l1-hoja::backdrop{background:rgb(11 10 12/.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#leccion-1 .l1-hoja-in{position:relative;max-height:min(90svh,900px);overflow-y:auto;overscroll-behavior:contain;border-radius:26px 26px 0 0;
 padding:0 max(20px,env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));
 background:radial-gradient(80% 30% at 100% 0%,rgb(196 92 124/.22),rgb(196 92 124/0) 70%),rgb(22 20 25/.9);
 -webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);
 box-shadow:0 -20px 60px rgb(0 0 0/.45),inset 0 1px 0 rgb(255 255 255/.22),inset 0 0 0 1px rgb(255 255 255/.08)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#leccion-1 .l1-hoja-in{background:rgb(22 20 25/.98)}}
#leccion-1 .l1-hoja-barra{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;margin:0 calc(-1 * max(20px,env(safe-area-inset-right,0px)));padding:16px max(20px,env(safe-area-inset-right,0px)) 10px;
 background:linear-gradient(180deg,rgb(22 20 25/.96) 70%,rgb(22 20 25/0))}
#leccion-1 .l1-hoja-barra::before{content:"";position:absolute;left:50%;top:6px;width:36px;height:4px;margin-left:-18px;border-radius:4px;background:rgb(243 242 245/.22)}
#leccion-1 .l1-hb{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;color:var(--platino-claro);
 background:rgb(255 255 255/.07);box-shadow:inset 0 0 0 1px rgb(255 255 255/.14),inset 0 1px 0 rgb(255 255 255/.16);transition:background-color .18s var(--of-entra)}
#leccion-1 .l1-hb svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#leccion-1 .l1-hb:focus-visible{outline:2px solid var(--rosa-hilo);outline-offset:2px}
@media (hover:hover){#leccion-1 .l1-hb:hover{background:rgb(196 92 124/.24)}}
#leccion-1 .l1-hoja-pos{flex:1;margin:0;text-align:center;font:500 11px/1 var(--mono);letter-spacing:.12em;color:rgb(243 242 245/.5)}
#leccion-1 .l1-hoja-pos b{font-weight:500;color:var(--platino-claro)}
#leccion-1 .l1-hoja-cuerpo{display:grid;gap:16px;padding-top:6px}
#leccion-1 .l1-hoja-cuerpo:focus{outline:none}
#leccion-1 .l1-hoja-ic{display:grid;place-items:center;width:76px;height:76px;border-radius:22px;
 background:linear-gradient(150deg,rgb(255 255 255/.12),rgb(255 255 255/.03));box-shadow:inset 0 0 0 1px rgb(255 255 255/.14),inset 0 1px 0 rgb(255 255 255/.22),0 12px 40px rgb(0 0 0/.25)}
#leccion-1 .l1-hoja-ic .l1-ic{width:50px;height:50px}

/* ════════ 3 · Si falta ════════ */
#leccion-1 .l1-sf-cuerpo{display:grid;gap:20px}
#leccion-1 .l1-red{position:relative;width:100%;max-width:400px;aspect-ratio:340/380;margin-inline:auto}
#leccion-1 .l1-red-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#leccion-1 .l1-ar-base line{stroke:rgb(243 242 245/.22);stroke-width:1.2;transition:opacity .2s var(--of-entra)}
#leccion-1 .l1-ar-corte line{stroke:var(--rosa-hilo);stroke-width:1.8;stroke-dasharray:5 6;stroke-linecap:round;opacity:0;transition:opacity .2s var(--of-entra)}
#leccion-1 .l1-ar-corte line.on{opacity:1}
#leccion-1 .l1-ar-base line.off{opacity:0}
#leccion-1 .l1-clave{stroke:var(--rosa-hilo);stroke-width:2.4;stroke-linecap:round;transition:opacity .2s var(--of-entra)}
#leccion-1 .l1-red.hay-off .l1-clave{opacity:0}
#leccion-1 .l1-nodos{position:absolute;inset:0}
#leccion-1 .l1-nodo{position:absolute;left:calc(var(--x) / 340 * 100%);top:calc(var(--y) / 380 * 100%);width:112px;min-height:66px;margin:-22px 0 0 -56px;
 display:grid;justify-items:center;align-content:start;gap:5px;border-radius:14px}
#leccion-1 .l1-nd-c{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font:500 11.5px/1 var(--mono);letter-spacing:.04em;color:var(--platino-claro);
 background:#141216;box-shadow:inset 0 0 0 1.4px rgb(243 242 245/.55),0 6px 18px rgb(0 0 0/.35);transition:transform .2s var(--of-entra)}
#leccion-1 .l1-nd-c::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px dashed var(--rosa-suave);opacity:0;transform:scale(.98);transition:opacity .2s var(--of-entra),transform .2s var(--of-entra)}
#leccion-1 .l1-nd-rosa .l1-nd-c{background:#3a1a28;box-shadow:inset 0 0 0 1.4px var(--rosa-suave),0 6px 18px rgb(0 0 0/.35)}
#leccion-1 .l1-nd-t{padding:2px 7px;border-radius:7px;font:600 12.5px/1.25 var(--sans);font-stretch:104%;color:rgb(243 242 245/.82);background:rgb(15 13 17/.92);transition:opacity .2s var(--of-entra)}
#leccion-1 .l1-nodo[aria-pressed="true"] .l1-nd-c{transform:scale(.92)}
#leccion-1 .l1-nodo[aria-pressed="true"] .l1-nd-c::after{opacity:1;transform:none}
#leccion-1 .l1-nodo[aria-pressed="true"] .l1-nd-c{background:#0b0a0c;color:rgb(243 242 245/.4);box-shadow:inset 0 0 0 1px rgb(243 242 245/.18)}
#leccion-1 .l1-nodo[aria-pressed="true"] .l1-nd-t{color:var(--rosa-suave)}
#leccion-1 .l1-red.hay-off .l1-nodo[aria-pressed="false"] .l1-nd-t{opacity:.72}
#leccion-1 .l1-nodo:focus-visible{outline:2px solid var(--rosa-perla);outline-offset:2px}
@media (hover:hover){#leccion-1 .l1-nodo:hover .l1-nd-c{box-shadow:inset 0 0 0 1.4px var(--rosa-suave),0 6px 18px rgb(0 0 0/.35)}}

#leccion-1 .l1-efecto{padding:22px 20px 22px;min-height:236px}
#leccion-1 .l1-ef-in{display:grid;gap:12px;align-content:start}
#leccion-1 .l1-ef-g{font:400 clamp(22px,6vw,28px)/1.2 var(--didona);color:var(--platino-claro);text-wrap:pretty}
#leccion-1 .l1-ef-rel{font:400 14.5px/1.5 var(--sans);color:var(--l1-tenue)}
#leccion-1 .l1-ef-rel b{font-weight:600;color:var(--platino-claro)}
#leccion-1 .l1-ef-pl{margin-top:4px;font:500 10px/1.3 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--l1-tenue)}
#leccion-1 .l1-ef-q{font:italic 400 clamp(20px,5.4vw,24px)/1.22 var(--didona);color:var(--rosa-suave);text-wrap:balance}
#leccion-1 .l1-ef-pista{font:500 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--rosa-suave)}
#leccion-1 .l1-ef-acc{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}

/* ════════ 4 · Siete momentos ════════ */
#leccion-1 .l1-mo{padding-inline:0}
#leccion-1 .l1-mo>.l1-cabeza{padding-inline:var(--lc-px)}
#leccion-1 .l1-mo-cuerpo{display:grid;gap:14px;min-width:0}
#leccion-1 .l1-riel{position:relative;margin-inline:var(--lc-px)}
#leccion-1 .l1-riel-base,#leccion-1 .l1-riel-lleno{position:absolute;top:22px;left:calc(100% / 14);right:calc(100% / 14);height:1px}
#leccion-1 .l1-riel-base{background:rgb(243 242 245/.2)}
#leccion-1 .l1-riel-lleno{background:var(--rosa-hilo);transform-origin:0 50%;transform:scaleX(var(--p,0))}
#leccion-1 .l1-paradas{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
#leccion-1 .l1-paradas li{display:flex;justify-content:center;min-width:0}
#leccion-1 .l1-parada{display:grid;justify-items:center;gap:6px;width:100%;max-width:120px;min-height:44px;border-radius:12px}
#leccion-1 .l1-parada{position:relative}
#leccion-1 .l1-parada b{display:grid;place-items:center;width:34px;height:34px;margin:5px 0;border-radius:50%;font:italic 400 17px/1 var(--didona);color:rgb(243 242 245/.7);
 background:#141216;box-shadow:inset 0 0 0 1px rgb(243 242 245/.3);transition:transform .2s var(--of-entra)}
#leccion-1 .l1-parada span{display:none;font:500 10px/1.25 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgb(243 242 245/.5);text-align:center}
#leccion-1 .l1-parada.hecha b{color:var(--platino-claro);box-shadow:inset 0 0 0 1px var(--rosa-hilo)}
#leccion-1 .l1-parada[aria-current] b{color:#fff;background:var(--rosa-hilo);box-shadow:inset 0 0 0 1px var(--rosa-hilo),0 0 0 5px rgb(196 92 124/.2);transform:scale(1.04)}
#leccion-1 .l1-parada[aria-current] span{color:var(--rosa-suave)}
#leccion-1 .l1-parada:focus-visible{outline:2px solid var(--rosa-perla);outline-offset:2px}

#leccion-1 .l1-pista{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--lc-px);
 padding:6px var(--lc-px) 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch;position:relative}
#leccion-1 .l1-pista::-webkit-scrollbar{display:none}
#leccion-1 .l1-pista:focus-visible{outline:2px solid var(--rosa-hilo);outline-offset:-2px;border-radius:12px}
#leccion-1 .l1-mom{flex:0 0 min(84%,380px);scroll-snap-align:start;display:flex}
#leccion-1 .l1-mom-c{position:relative;isolation:isolate;flex:1;display:grid;gap:12px;align-content:start;padding:22px 20px 20px;border-radius:22px;
 background:linear-gradient(165deg,rgb(255 255 255/.09),rgb(255 255 255/.04) 50%,rgb(196 92 124/.06));
 -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:0 12px 40px rgb(0 0 0/.25),inset 0 1px 0 rgb(255 255 255/.16)}
#leccion-1 .l1-mom-c::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
 background:linear-gradient(170deg,rgb(255 255 255/.32),rgb(255 255 255/.05) 40%,rgb(230 180 194/.14));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#leccion-1 .l1-mom-c{background:rgb(30 27 32/.96)}}
#leccion-1 .l1-mom-k{display:flex;align-items:center;gap:12px;font:500 10px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--l1-tenue)}
#leccion-1 .l1-mom-k b{font:italic 400 42px/.8 var(--didona);letter-spacing:-.02em;color:var(--rosa-suave)}
#leccion-1 .l1-mom-t{font:400 30px/1.05 var(--didona);color:var(--platino-claro)}
#leccion-1 .l1-mom-q{font:italic 400 20px/1.25 var(--didona);color:var(--rosa-suave);text-wrap:balance}
#leccion-1 .l1-mom-x{font:400 15px/1.55 var(--sans);color:rgb(243 242 245/.78);text-wrap:pretty}
#leccion-1 .l1-mom-dl{display:grid;gap:0;margin-top:4px;border-top:1px solid rgb(255 255 255/.08)}
#leccion-1 .l1-mom-dl div{display:grid;grid-template-columns:4.8em minmax(0,1fr);gap:10px;align-items:baseline;padding:10px 0 0}
#leccion-1 .l1-mom-dl dt{font:500 10px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rosa-suave)}
#leccion-1 .l1-mom-dl dd{font:400 14.5px/1.45 var(--sans);color:var(--platino-claro)}
/* Sin JavaScript: los momentos se leen en columna */
#leccion-1:not(.l1-js) .l1-pista{flex-direction:column;overflow:visible}
#leccion-1:not(.l1-js) .l1-mom{flex-basis:auto}

/* ════════ 5 · Lo que te llevas ════════ */
#leccion-1 .l1-lista{position:relative;padding:20px 20px 14px 30px;max-width:760px}
#leccion-1 .l1-lista-hilo{position:absolute;left:16px;top:26px;bottom:26px;width:1.5px;border-radius:2px;background:linear-gradient(180deg,var(--rosa-hilo),rgb(196 92 124/.25));transform-origin:50% 0}
#leccion-1 .l1-preguntas{display:grid;gap:0}
#leccion-1 .l1-preguntas li{display:grid;grid-template-columns:2.2em minmax(0,1fr);column-gap:8px;padding:10px 0;border-bottom:1px solid rgb(255 255 255/.06);
 font:400 17px/1.3 var(--didona);color:var(--platino-claro);text-wrap:pretty}
#leccion-1 .l1-preguntas li:last-child{border-bottom:0}
#leccion-1 .l1-preguntas span{grid-row:1/span 2;padding-top:3px;font:500 10.5px/1.3 var(--mono);letter-spacing:.06em;color:var(--rosa-suave)}
#leccion-1 .l1-preguntas b{display:block;margin-bottom:3px;font:500 9.5px/1.3 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:rgb(243 242 245/.48)}
#leccion-1 .l1-mira{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;min-height:44px;max-width:520px;padding:18px 20px;border-radius:20px;
 text-decoration:none;color:var(--platino-claro);background:linear-gradient(120deg,rgb(196 92 124/.26),rgb(158 47 85/.12));box-shadow:inset 0 0 0 1px rgb(196 92 124/.85),inset 0 1px 0 rgb(255 255 255/.16),0 12px 40px rgb(0 0 0/.25)}
#leccion-1 .l1-mira-k{font:400 24px/1.1 var(--didona);color:var(--platino-claro)}
#leccion-1 .l1-mira-t{grid-column:1;font:400 14.5px/1.45 var(--sans);color:rgb(243 242 245/.74)}
#leccion-1 .l1-mira svg{grid-column:2;grid-row:1/span 2;width:22px;height:22px;stroke:var(--rosa-suave);transition:transform .18s var(--of-entra)}
#leccion-1 .l1-mira:focus-visible{outline:2px solid var(--rosa-perla);outline-offset:3px}
@media (hover:hover){#leccion-1 .l1-mira:hover svg{transform:translateX(4px)}}
#leccion-1 .l1-fuentes-nota{margin-top:14px;font:400 12.5px/1.5 var(--sans);color:rgb(243 242 245/.48)}

/* ════════ Movimiento (.l1-vivo) ════════ */
#leccion-1.l1-vivo [data-l1-entra]{opacity:0;transform:translateY(16px)}
#leccion-1.l1-vivo [data-l1-entra].en{opacity:1;transform:none;transition:opacity .52s var(--of-entra) var(--d,0ms),transform .52s var(--of-entra) var(--d,0ms)}
/* La pregunta de apertura llega por frases */
#leccion-1.l1-vivo .l1-pregunta>span{opacity:0;transform:translateY(14px)}
#leccion-1.l1-vivo .l1-pregunta.en>span{opacity:1;transform:none;transition:opacity .5s var(--of-entra),transform .5s var(--of-entra)}
#leccion-1.l1-vivo .l1-pregunta.en>span:nth-child(2){transition-delay:.14s}
#leccion-1.l1-vivo .l1-pregunta.en>span:nth-child(3){transition-delay:.32s}
#leccion-1.l1-vivo .l1-exp.en .l1-video-b i{animation:l1-barra .9s var(--of-entra) .3s both}
@keyframes l1-barra{from{transform:scaleX(0)}to{transform:scaleX(.28)}}
/* Piezas de la mesa: suben 16 px y su ícono se traza una vez */
#leccion-1.l1-vivo .l1-piezas>li{opacity:0;transform:translateY(16px) scale(.98)}
#leccion-1.l1-vivo .l1-mesa.en .l1-piezas>li{opacity:1;transform:none;transition:opacity .52s var(--of-entra) var(--d),transform .52s var(--of-entra) var(--d)}
#leccion-1 .l1-piezas>li{--d:calc(var(--r2) * 80ms)}
#leccion-1.l1-vivo .l1-mesa.en .l1-pieza .l1-ic .d{animation:l1-traza .7s var(--of-entra) calc(var(--d) + 140ms) backwards}
#leccion-1.l1-vivo .l1-mesa.en .l1-pieza .l1-ic .f{animation:l1-aparece .3s var(--of-entra) calc(var(--d) + 560ms) backwards}
#leccion-1.l1-vivo .l1-mesa:not(.en) .l1-ic{opacity:0}
@keyframes l1-traza{from{stroke-dasharray:1 1;stroke-dashoffset:1}to{stroke-dasharray:1 1;stroke-dashoffset:0}}
@keyframes l1-aparece{from{opacity:0}to{opacity:1}}
/* La red: la línea rosa se traza al llegar */
#leccion-1.l1-vivo .l1-red.en .l1-clave{animation:l1-traza .7s var(--of-entra) .35s backwards}
#leccion-1.l1-vivo .l1-red .l1-nodo{opacity:0;transform:scale(.98)}
#leccion-1.l1-vivo .l1-red.en .l1-nodo{opacity:1;transform:none;transition:opacity .36s var(--of-entra) calc(var(--k) * 60ms),transform .36s var(--of-entra) calc(var(--k) * 60ms)}
/* Cambio de efecto */
#leccion-1.l1-vivo .l1-ef-in.l1-cambia{animation:l1-cambia .22s var(--of-entra) both}
@keyframes l1-cambia{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* La lista para llevar: el hilo baja una vez */
#leccion-1.l1-vivo .l1-lista .l1-lista-hilo{transform:scaleY(0)}
#leccion-1.l1-vivo .l1-lista.en .l1-lista-hilo{transform:none;transition:transform .9s var(--of-entra) .2s}
/* Hoja interna */
#leccion-1.l1-vivo .l1-hoja[open] .l1-hoja-in{animation:l1-sube .42s var(--of-entra) both}
#leccion-1.l1-vivo .l1-hoja[open]::backdrop{animation:l1-aparece .32s var(--of-entra) both}
#leccion-1.l1-vivo .l1-hoja.sale .l1-hoja-in{animation:l1-baja .28s var(--of-sale) both}
#leccion-1.l1-vivo .l1-hoja.sale::backdrop{animation:l1-vela .28s var(--of-sale) both}
#leccion-1.l1-vivo .l1-hoja-cuerpo.l1-pasa{animation:l1-pasa .22s var(--of-entra) both}
#leccion-1.l1-vivo .l1-hoja-cuerpo .l1-ic .d{animation:l1-traza .7s var(--of-entra) .12s backwards}
#leccion-1.l1-vivo .l1-hoja-cuerpo .l1-ic .f{animation:l1-aparece .3s var(--of-entra) .5s backwards}
@keyframes l1-sube{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes l1-baja{from{opacity:1;transform:none}to{opacity:0;transform:translateY(24px)}}
@keyframes l1-vela{from{opacity:1}to{opacity:0}}
@keyframes l1-pasa{from{opacity:0;transform:translateX(calc(var(--dir,1) * 12px))}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
 #leccion-1 *,#leccion-1 *::before,#leccion-1 *::after{transition:none!important;animation:none!important}
}

/* ════════ Computadora ════════ */
@media (min-width:900px){
 #leccion-1 .lc-cab{padding-top:56px;gap:16px}
 #leccion-1 .lc-titulo{font-size:64px}
 #leccion-1 .lc-escena{padding-top:72px;padding-bottom:72px;gap:36px}
 #leccion-1 .l1-h{font-size:48px}

 #leccion-1 .l1-ap{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:48px;align-items:start;padding-top:48px}
 #leccion-1 .l1-ap-texto{grid-column:1;grid-row:1 / span 2;align-self:start}
 #leccion-1 .l1-exp{grid-column:2;grid-row:1;margin-top:6px}
 #leccion-1 .l1-ap-sigue{grid-column:2;grid-row:2}
 #leccion-1 .l1-pregunta{font-size:40px}

 #leccion-1 .l1-mesa{margin-inline:-10px;padding:12px}
 #leccion-1 .l1-piezas{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
 #leccion-1 .l1-piezas>li{--d:calc(var(--c5) * 70ms + var(--r5) * 140ms)}
 #leccion-1 .l1-pieza{min-height:178px;grid-template-columns:1fr auto;padding:16px 16px 18px}
 #leccion-1 .l1-ic{width:52px;height:52px}
 #leccion-1 .l1-pz-t{margin-top:20px;font-size:22px}

 #leccion-1 .l1-hoja{inset:0;margin:auto;width:min(640px,calc(100% - 48px));height:fit-content;max-height:min(86svh,860px)}
 #leccion-1 .l1-hoja-in{max-height:min(86svh,860px);border-radius:28px;padding:0 32px 32px;box-shadow:0 40px 120px rgb(0 0 0/.55),inset 0 1px 0 rgb(255 255 255/.22),inset 0 0 0 1px rgb(255 255 255/.1)}
 #leccion-1 .l1-hoja-barra{padding:18px 32px 10px;margin-inline:-32px}
 #leccion-1 .l1-hoja-barra::before{display:none}
 #leccion-1 .l1-hoja .l1-f-dl{grid-template-columns:1fr 1fr}
 #leccion-1 .l1-hoja .l1-f-ej,#leccion-1 .l1-hoja .l1-f-preg,#leccion-1 .l1-hoja .l1-f-prueba{grid-column:1/-1}

 #leccion-1 .l1-sf-cuerpo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
 #leccion-1 .l1-red{max-width:360px}
 #leccion-1 .l1-efecto{padding:30px 30px 28px;min-height:300px}

 #leccion-1 .l1-parada span{display:block}
 #leccion-1 .l1-parada b{width:44px;height:44px;margin:0;font-size:19px}
 #leccion-1 .l1-riel-base,#leccion-1 .l1-riel-lleno{top:22px}
 #leccion-1 .l1-mom{flex-basis:360px}
 #leccion-1 .l1-mom-c{padding:26px 24px 22px}

 #leccion-1 .l1-ci{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);column-gap:48px;align-items:start}
 #leccion-1 .l1-ci>.l1-cabeza{grid-column:1;grid-row:1}
 #leccion-1 .l1-lista{grid-column:2;grid-row:1 / span 2}
 #leccion-1 .l1-mira{grid-column:1;grid-row:2;align-self:start}
}
@media (max-width:359px){
 #leccion-1 .l1-pieza{padding:12px 12px 14px}
 #leccion-1 .l1-pz-t{font-size:19px}
 #leccion-1 .l1-nodo{width:96px;margin-left:-48px}
 #leccion-1 .l1-renglon{grid-template-columns:1fr;gap:4px}
}

/* Corte 4 (3 nov): la cabecera lleva el color de su portada en «El oficio, explicado» (un lomo y una luz). */
#leccion-1>.lc-cab{background:radial-gradient(110% 120% at 100% 0%,rgb(34 56 95/.62),rgb(34 56 95/.18) 46%,rgb(34 56 95/0) 78%);box-shadow:inset 0 3px 0 #f0b44c}