/* El oficio, explicado · fase 2 (sección #servicios, visor de lecciones y utilidades .lc-* para las lecciones)
   Cristal líquido sobre ónix: fondo blanco al 8 %, blur(18px) saturate(140%), borde de 1 px de blanco .35 a .05,
   arista especular a 120° (blanco .40 → transparente) y sombra 0 12px 40px rgb(0 0 0/.25).
   Movimiento: entrada cubic-bezier(.2,.7,.2,1), salida cubic-bezier(.4,0,1,1). Titular por sílabas (16 px, 30 ms, 600 ms);
   tarjetas de 24 px a 0 y escala .98 → 1 en 520 ms; mini diagramas que se dibujan una sola vez (≤ 900 ms);
   la hoja del visor sube 24 px → 0 en 420 ms y se va en 280 ms. Sólo se animan transform, opacity y stroke-dashoffset.
   Los estados iniciales sólo existen bajo .of-vivo (lo pone visor.js): sin JS o con movimiento reducido, todo quieto y completo. */

.of,.of-visor,.lc-pagina{
 --onix:#0b0a0c;--tinta:#1a1719;--rosa-hilo:#c45c7c;--rosa-suave:#e6b4c2;--rosa-tinta:#9e2f55;--rosa-perla:#f3dde4;
 --platino:#d9d7dc;--platino-claro:#f3f2f5;
 --didona:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;
 --sans:Archivo,"Helvetica Neue",Arial,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;
 --of-entra:cubic-bezier(.2,.7,.2,1);--of-sale:cubic-bezier(.4,0,1,1);
}
.of-sr,.lc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ════════════ La sección ════════════ */
.of{
 --of-px:max(24px,env(safe-area-inset-left,0px));
 position:relative;isolation:isolate;overflow:clip;
 padding:clamp(96px,14svh,150px) var(--of-px) clamp(88px,12svh,132px);
 background:var(--onix);color:var(--platino-claro);
}
.of-frente{position:relative;z-index:2;max-width:1180px;margin-inline:auto}

/* Lo que el cristal refracta: tres luces de la paleta, bajas, con paralaje suave */
.of-fondo{position:absolute;inset:0;z-index:0;pointer-events:none}
.of-orbe{position:absolute;display:block;border-radius:50%;transform:translate3d(0,var(--oy,0px),0)}
.of-orbe-a{width:min(96vw,680px);aspect-ratio:1;left:-34vw;top:18%;background:radial-gradient(closest-side,rgb(196 92 124/.36),rgb(158 47 85/.14) 58%,rgb(158 47 85/0))}
.of-orbe-b{width:min(80vw,560px);aspect-ratio:1;right:-30vw;top:46%;background:radial-gradient(closest-side,rgb(243 221 228/.14),rgb(217 215 220/.05) 60%,rgb(217 215 220/0))}
.of-orbe-c{width:min(74vw,460px);aspect-ratio:1;left:-10vw;top:74%;background:radial-gradient(closest-side,rgb(230 180 194/.20),rgb(230 180 194/0))}

/* ——— Cabeza ——— */
.of-cabeza{position:relative}
.of-cabeza>.nudo{left:-12px;top:6px}
.of-etq{color:var(--rosa-suave)}
.of-titular{margin-top:18px;max-width:none;color:var(--platino-claro)}
.of-cin{display:inline}
.of-pal{display:inline-block;white-space:nowrap}
.of-s{display:inline-block}
.of-em{position:relative;display:inline-block;color:var(--rosa-suave)}
.of-trazo{position:absolute;left:-.02em;right:-.04em;bottom:-.1em;width:calc(100% + .06em);height:.2em;overflow:visible;pointer-events:none}
.of-trazo path{fill:none;stroke:var(--rosa-hilo);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1 1;stroke-dashoffset:0}
.of-sub{margin:22px 0 0;max-width:30ch;font:400 clamp(17px,4.6vw,21px)/1.45 var(--sans);color:rgb(243 242 245/.74);text-wrap:pretty}

/* ——— Las cuatro puertas ——— */
.of-rejilla{list-style:none;margin:44px 0 0;padding:0;display:grid;gap:16px}
.of-li{display:flex;perspective:1100px}

/* El cristal */
.of-carta{
 --bx:0px;--by:0px;
 position:relative;isolation:isolate;flex:1;display:flex;flex-direction:column;min-width:0;
 padding:20px 18px 6px;border-radius:24px;overflow:hidden;
 background:linear-gradient(160deg,rgb(255 255 255/.10),rgb(255 255 255/.05) 46%,rgb(230 180 194/.07)),rgb(255 255 255/.02);
 -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),inset 0 -24px 36px -30px rgb(230 180 194/.22);
 transform-style:preserve-3d;
}
/* Borde de 1 px: blanco al 35 % que se apaga al 5 % */
.of-carta::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1px;pointer-events:none;
 background:linear-gradient(165deg,rgb(255 255 255/.35),rgb(255 255 255/.05) 40%,rgb(255 255 255/.05) 72%,rgb(230 180 194/.20));
 -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);transition:opacity .2s var(--of-entra)}
/* Arista especular superior (120°, blanco .40 → transparente): sigue al puntero o al scroll, máximo 8 px */
.of-carta::after{content:"";position:absolute;inset:-8px -8px auto;height:34%;z-index:0;border-radius:inherit;pointer-events:none;
 background:linear-gradient(120deg,rgb(255 255 255/.40),rgb(255 255 255/.06) 24%,rgb(255 255 255/0) 42%);
 -webkit-mask:linear-gradient(#000,transparent 72%);mask:linear-gradient(#000,transparent 72%);
 opacity:.55;transform:translate(var(--bx),var(--by));transition:transform .12s var(--of-entra)}
.of-brillo{position:absolute;inset:-14px;z-index:-1;pointer-events:none;border-radius:inherit;
 background:radial-gradient(60% 40% at 86% 100%,rgb(196 92 124/.24),rgb(196 92 124/0) 70%),radial-gradient(50% 36% at 12% 0%,rgb(217 215 220/.10),rgb(217 215 220/0) 70%);
 transform:translate3d(calc(var(--bx) * -1),calc(var(--by) * -1),0);transition:transform .12s var(--of-entra)}
.of-li:nth-child(2) .of-brillo{background:radial-gradient(56% 40% at 14% 100%,rgb(196 92 124/.22),rgb(196 92 124/0) 70%),radial-gradient(46% 34% at 88% 0%,rgb(243 221 228/.10),rgb(243 221 228/0) 70%)}
.of-li:nth-child(3) .of-brillo{background:radial-gradient(60% 44% at 80% 96%,rgb(158 47 85/.30),rgb(158 47 85/0) 70%),radial-gradient(46% 34% at 16% 0%,rgb(217 215 220/.10),rgb(217 215 220/0) 70%)}
.of-li:nth-child(4) .of-brillo{background:radial-gradient(56% 40% at 20% 100%,rgb(230 180 194/.18),rgb(230 180 194/0) 70%),radial-gradient(46% 34% at 84% 0%,rgb(217 215 220/.11),rgb(217 215 220/0) 70%)}
.of-carta>*:not(.of-brillo){position:relative;z-index:1}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .of-carta{background:linear-gradient(160deg,rgb(40 36 42/.96),rgb(24 21 26/.96) 55%,rgb(44 30 38/.96))}
}

/* Número, servicio y la línea del servicio */
.of-num{margin:0;display:flex;align-items:center;gap:12px;min-width:0}
.of-num b{font:italic 400 36px/.9 var(--didona);letter-spacing:-.02em;color:var(--rosa-suave)}
.of-num-l{flex:0 0 28px;height:1px;background:linear-gradient(90deg,rgb(243 242 245/.4),rgb(243 242 245/.1));transform-origin:0 50%}
.of-servicio{font:500 11px/1.25 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--rosa-suave)}
.of-linea{margin:16px 0 0;font:400 clamp(25px,6.7vw,30px)/1.1 var(--didona);letter-spacing:-.01em;color:var(--platino-claro);text-wrap:balance}
.of-linea em{display:block;color:var(--rosa-suave)}

/* La placa de la lección: un hueco en el cristal con su diagrama */
.of-placa{margin:18px -4px 0;padding:12px 14px 16px;border-radius:18px;
 background:linear-gradient(180deg,rgb(11 10 12/.46),rgb(11 10 12/.30));
 box-shadow:inset 0 0 0 1px rgb(255 255 255/.07),inset 0 1px 0 rgb(0 0 0/.25)}
.of-mini{margin:0 -2px 8px;padding:0}
.of-mini svg{display:block;width:100%;height:auto;max-height:150px;overflow:visible}
.of-tr{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.of-red{stroke:rgb(243 242 245/.2);stroke-width:1}
.of-gris{stroke:rgb(243 242 245/.5);stroke-width:1.3}
.of-rosa,.of-hilo-r{stroke:var(--rosa-hilo);stroke-width:1.8}
.of-x{stroke:rgb(243 242 245/.6)}
.of-punteo{opacity:.55}
.of-caja{stroke:rgb(243 242 245/.6);stroke-width:1.2}
.of-roca{stroke:rgb(243 242 245/.72);stroke-width:1.2}
.of-grieta{stroke:rgb(243 242 245/.28);stroke-width:1}
.of-nodos circle,.of-marcas circle{fill:#141216;stroke:rgb(243 242 245/.55);stroke-width:1.2;transform-box:fill-box;transform-origin:center}
.of-nodos .of-n-rosa,.of-marcas .of-n-rosa{fill:#3a1a28;stroke:var(--rosa-suave)}
.of-pausas circle{stroke:var(--rosa-suave);fill:#141216}
.of-pausas .of-n-rosa{fill:var(--rosa-hilo);stroke:var(--rosa-perla)}
.of-et text{font:500 11px var(--mono);letter-spacing:.04em;fill:rgb(243 242 245/.62);paint-order:stroke;stroke:#151317;stroke-width:5px;stroke-linejoin:round}
.of-et .of-et-rosa{fill:var(--rosa-suave)}
.of-et .of-dato{font:500 12.5px var(--sans);letter-spacing:0;fill:var(--platino-claro)}
.of-q{font:italic 400 22px var(--didona);fill:var(--rosa-suave)}

.of-l-etq{margin:0;display:flex;align-items:center;gap:10px;font:500 10.5px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--rosa-suave)}
.of-l-dur{display:inline-flex;align-items:center;gap:10px;color:rgb(243 242 245/.55)}
.of-l-dur::before{content:"";width:3px;height:3px;border-radius:50%;background:rgb(243 242 245/.4)}
.of-l-t{margin:8px 0 0;font:400 22px/1.15 var(--didona);letter-spacing:-.005em;color:var(--platino-claro);text-wrap:balance}
.of-l-t em{color:var(--rosa-suave)}
.of-gancho{margin:8px 0 0;font:400 16px/1.55 var(--sans);color:rgb(243 242 245/.78);text-wrap:pretty}

/* Acciones: «Abrir la lección» es el enlace; toda la tarjeta es su área táctil. «Qué incluye» queda por encima. */
.of-acciones{margin-top:auto;padding-top:16px}
.of-abre{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:0 16px 0 20px;border-radius:14px;
 font:600 12px/1 var(--sans);font-stretch:112%;letter-spacing:.16em;text-transform:uppercase;color:var(--platino-claro);text-decoration:none;
 background:linear-gradient(120deg,rgb(196 92 124/.22),rgb(158 47 85/.12));box-shadow:inset 0 0 0 1px rgb(196 92 124/.9),inset 0 1px 0 rgb(255 255 255/.14);
 -webkit-tap-highlight-color:transparent;transition:background-color .18s var(--of-entra)}
.of-abre::after{content:"";position:absolute;inset:0;z-index:2;border-radius:24px}
.of-flecha{width:20px;height:20px;flex:none;fill:none;stroke:var(--rosa-suave);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--of-entra)}
.of-abre:focus-visible{outline:2px solid var(--rosa-hilo);outline-offset:3px}
.of-abre:focus-visible .of-flecha{transform:translateX(4px)}
@media (hover:hover){
 .of-carta:hover .of-abre{background:linear-gradient(120deg,rgb(196 92 124/.42),rgb(158 47 85/.26))}
 .of-carta:hover .of-flecha{transform:translateX(4px)}
}
.of-carta:active .of-flecha{transform:translateX(4px)}

.of-incluye{position:relative;z-index:4;margin-top:14px;border-top:1px solid rgb(255 255 255/.08)}
.of-incluye summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;list-style:none;cursor:pointer;
 font:600 11px/1 var(--sans);font-stretch:112%;letter-spacing:.18em;text-transform:uppercase;color:rgb(243 242 245/.62);-webkit-tap-highlight-color:transparent}
.of-incluye summary::-webkit-details-marker{display:none}
.of-incluye summary::after{content:"";width:8px;height:8px;margin-right:6px;border-right:1.5px solid var(--rosa-suave);border-bottom:1.5px solid var(--rosa-suave);transform:translateY(-3px) rotate(45deg);transition:transform .2s var(--of-entra)}
.of-incluye[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.of-incluye summary:focus-visible{outline:2px solid var(--rosa-hilo);outline-offset:2px;border-radius:6px}
@media (hover:hover){.of-incluye summary:hover{color:var(--platino-claro)}}
.of-incluye ul{list-style:none;margin:0;padding:2px 0 8px;display:grid;gap:10px}
.of-incluye li{position:relative;padding-left:20px;font:400 15px/1.5 var(--sans);color:rgb(243 242 245/.74)}
.of-incluye li::before{content:"";position:absolute;left:0;top:.74em;width:9px;height:1px;background:var(--rosa-hilo)}
.of-incluye b{font-weight:600;color:var(--platino-claro)}
.of-mira{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:2px 0 6px;font:600 11px/1 var(--sans);font-stretch:112%;letter-spacing:.16em;text-transform:uppercase;color:var(--rosa-suave);text-decoration:none}
.of-mira:focus-visible{outline:2px solid var(--rosa-hilo);outline-offset:2px}

/* Hablemos */
.of-pie{margin:40px 0 0}
.of-hablemos{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:space-between;gap:22px;
 min-height:56px;padding:0 22px 0 24px;border-radius:16px;text-decoration:none;
 font:600 13px/1 var(--sans);font-stretch:112%;letter-spacing:.16em;text-transform:uppercase;color:#fff;
 background:linear-gradient(120deg,rgb(196 92 124/.92),rgb(158 47 85/.92));box-shadow:0 12px 40px rgb(0 0 0/.25),inset 0 0 0 1px rgb(255 255 255/.16)}
.of-hablemos .of-brillo{z-index:-1;background:radial-gradient(60% 90% at 30% 0%,rgb(255 255 255/.22),rgb(255 255 255/0) 70%)}
.of-hablemos .of-flecha{stroke:#fff}
.of-hablemos:focus-visible{outline:2px solid var(--rosa-perla);outline-offset:3px}
@media (hover:hover){.of-hablemos:hover .of-flecha{transform:translateX(4px)}}

/* ——— Con movimiento (.of-vivo) ——— */
/* Cabeza: la etiqueta, el titular por sílabas (8 × 30 ms + 420 ms), el trazo (600 ms) y la subfrase */
.of-vivo .of-etq{opacity:0;transform:translateY(12px)}
.of-vivo .of-s{opacity:0;transform:translateY(16px)}
.of-vivo .of-trazo path{stroke-dashoffset:1}
.of-vivo .of-sub{opacity:0;transform:translateY(16px)}
.of-vivo .of-cabeza.en .of-etq{opacity:1;transform:none;transition:opacity .42s var(--of-entra),transform .42s var(--of-entra)}
.of-vivo .of-cabeza.en .of-s{opacity:1;transform:none;transition:opacity .42s var(--of-entra) calc(90ms + var(--k) * 30ms),transform .42s var(--of-entra) calc(90ms + var(--k) * 30ms)}
.of-vivo .of-cabeza.en .of-trazo path{stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--of-entra) .62s}
.of-vivo .of-cabeza.en .of-sub{opacity:1;transform:none;transition:opacity .52s var(--of-entra) .5s,transform .52s var(--of-entra) .5s}

/* Tarjetas: el li sube 24 px y crece de .98 a 1; el cristal (que lleva el backdrop-filter) sólo cambia su opacidad */
.of-vivo .of-li{transform:translateY(24px) scale(.98)}
.of-vivo .of-carta{opacity:0}
.of-vivo .of-li.en{transform:none;transition:transform .52s var(--of-entra) var(--of-d,0ms)}
.of-vivo .of-li.en .of-carta{opacity:1;transition:opacity .52s var(--of-entra) var(--of-d,0ms)}
.of-vivo .of-li .of-num-l{transform:scaleX(0)}
.of-vivo .of-li.en .of-num-l{transform:none;transition:transform .6s var(--of-entra) calc(var(--of-d,0ms) + 120ms)}

/* Mini diagramas: se dibujan una sola vez al quedar a la vista (≤ 900 ms en total) */
.of-vivo .of-mini .of-tr{stroke-dashoffset:1}
.of-vivo .of-mini.on .of-tr{stroke-dashoffset:0;transition:stroke-dashoffset var(--dur,.5s) var(--of-entra) var(--t,0ms)}
.of-vivo .of-mini .of-nodos circle,.of-vivo .of-mini .of-marcas circle{opacity:0;transform:scale(.98)}
.of-vivo .of-mini.on .of-nodos circle,.of-vivo .of-mini.on .of-marcas circle{opacity:1;transform:none;transition:opacity .2s var(--of-entra) calc(140ms + var(--n) * 70ms),transform .2s var(--of-entra) calc(140ms + var(--n) * 70ms)}
.of-vivo .of-mini-4.on .of-marcas circle{transition-delay:calc(160ms + var(--n) * 80ms)}
.of-vivo .of-mini .of-et,.of-vivo .of-mini .of-q{opacity:0}
.of-vivo .of-mini.on .of-et,.of-vivo .of-mini.on .of-q{opacity:1;transition:opacity .36s var(--of-entra) .44s}
.of-vivo .of-mini-2.on .of-q{transition-delay:.12s}

/* Qué incluye: la lista llega 12 px (200 ms) */
@media (prefers-reduced-motion:no-preference){
 .of-incluye[open]>ul,.of-incluye[open]>.of-mira{animation:of-llega .2s var(--of-entra) both}
}
@keyframes of-llega{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

/* ——— Computadora: rejilla 2 × 2 ——— */
@media (min-width:900px){
 .of{padding-inline:max(48px,env(safe-area-inset-left,0px))}
 .of-cabeza{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:48px;align-items:end}
 .of-etq{grid-column:1/-1}
 .of-titular{font-size:clamp(60px,6.4vw,96px)}
 .of-sub{margin:0 0 .5em;max-width:28ch;font-size:19px}
 .of-rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:64px}
 .of-li:nth-child(2){--of-d:80ms}.of-li:nth-child(3){--of-d:160ms}.of-li:nth-child(4){--of-d:240ms}
 .of-carta{padding:26px 28px 8px}
 .of-linea{font-size:clamp(28px,2.4vw,34px);min-height:2.2em}
 .of-placa{margin-inline:-8px;padding:16px 20px 20px}
 .of-mini svg{max-height:148px}
 .of-l-t{font-size:24px}
 .of-gancho{font-size:16.5px;max-width:36em}
 .of-carta.of-sale{transition:transform .42s var(--of-entra)}
 .of-carta:hover::before{background:linear-gradient(165deg,rgb(255 255 255/.5),rgb(255 255 255/.08) 40%,rgb(255 255 255/.06) 72%,rgb(230 180 194/.32))}
 .of-pie{margin-top:56px}
 .of-orbe-a{left:-10vw;top:14%}
 .of-orbe-b{right:-8vw;top:30%}
 .of-orbe-c{left:36%;top:62%}
}

@media (prefers-reduced-motion:reduce){
 .of-brillo,.of-orbe,.of-carta::after{transform:none!important;transition:none!important}
 .of-flecha,.of-incluye summary::after{transition:none}
 .of-carta{transform:none!important}
}

/* ════════════ El visor ════════════ */
html.of-bloqueo{overflow:hidden;scrollbar-gutter:stable}
.of-visor{
 position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
 background:transparent;color:var(--platino-claro);overflow:hidden;overscroll-behavior:contain;
 font:400 16px/1.55 var(--sans);
}
.of-visor:not([open]){display:none}
.of-visor[open]{display:flex;align-items:stretch;justify-content:center}
.of-visor::backdrop{background:rgb(11 10 12/.6);-webkit-backdrop-filter:blur(12px) saturate(120%);backdrop-filter:blur(12px) saturate(120%)}

.of-marco{position:relative;flex:1;display:flex;min-width:0;overflow:hidden;
 background:radial-gradient(70% 34% at 92% 0%,rgb(196 92 124/.20),rgb(196 92 124/0) 70%),radial-gradient(60% 30% at 0% 100%,rgb(158 47 85/.16),rgb(158 47 85/0) 70%),rgb(11 10 12/.94);
 -webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%)}
.of-marco::after{content:"";position:absolute;inset:0;z-index:20;pointer-events:none;border-radius:inherit;padding:1px;
 background:linear-gradient(170deg,rgb(255 255 255/.30),rgb(255 255 255/.05) 30%,rgb(255 255 255/.04) 80%,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);opacity:0}
.of-hoja{--of-barra-h:96px;position:relative;flex:1;min-width:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
 scroll-snap-type:y proximity;scroll-padding-top:var(--of-barra-h);-webkit-overflow-scrolling:touch;outline:none}

/* La llegada: la hoja sube 24 px → 0 con su opacidad (420 ms); la salida, 280 ms */
@media (prefers-reduced-motion:no-preference){
 .of-visor[open] .of-marco{animation:of-sube .42s var(--of-entra) both}
 .of-visor[open]::backdrop{animation:of-vela .32s var(--of-entra) both}
 .of-visor.of-sale .of-marco{animation:of-baja .28s var(--of-sale) both}
 .of-visor.of-sale::backdrop{animation:of-vela-sale .28s var(--of-sale) both}
}
@keyframes of-sube{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes of-baja{from{opacity:1;transform:none}to{opacity:0;transform:translateY(24px)}}
@keyframes of-vela{from{opacity:0}to{opacity:1}}
@keyframes of-vela-sale{from{opacity:1}to{opacity:0}}

/* La barra: cerrar, título corto, la cuenta y el hilo de escenas */
.of-barra{position:sticky;top:0;z-index:10;padding:env(safe-area-inset-top,0px) max(8px,env(safe-area-inset-right,0px)) 0 max(8px,env(safe-area-inset-left,0px));
 background:linear-gradient(180deg,rgb(11 10 12/.82),rgb(11 10 12/.66));
 -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
 box-shadow:0 1px 0 rgb(255 255 255/.07),0 10px 30px -18px rgb(0 0 0/.6)}
.of-barra-fila{display:flex;align-items:center;gap:8px;min-height:56px}
.of-cierra{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/.18);transition:background-color .18s var(--of-entra)}
.of-cierra svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.of-cierra:focus-visible{outline:2px solid var(--rosa-hilo);outline-offset:2px}
@media (hover:hover){.of-cierra:hover{background:rgb(196 92 124/.24)}}
.of-barra-t{flex:1;min-width:0;margin:0;display:flex;flex-direction:column;gap:3px;padding-left:4px}
.of-barra-k{font:500 10px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--rosa-suave)}
.of-barra-n{font:500 15px/1.25 var(--sans);color:var(--platino-claro);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.of-barra-c{flex:none;margin:0;padding:0 8px 0 4px;font:500 11px/1 var(--mono);letter-spacing:.08em;color:rgb(243 242 245/.5)}
.of-barra-c b{font-weight:500;color:var(--platino-claro)}
.of-barra-c:empty{display:none}

.of-hilo{position:relative;height:40px;margin:0 2px}
.of-hilo[hidden]{display:none}
.of-hilo-base,.of-hilo-lleno{position:absolute;top:50%;left:calc(100% / var(--n,1) / 2);right:calc(100% / var(--n,1) / 2);height:1px;margin-top:-.5px}
.of-hilo-base{background:rgb(243 242 245/.18)}
.of-hilo-lleno{background:var(--rosa-hilo);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.of-cuentas{position:relative;list-style:none;margin:0;padding:0;display:flex;height:100%}
.of-cuentas li{flex:1 1 0;min-width:0;display:flex;justify-content:center}
.of-cuenta{position:relative;display:grid;place-items:center;width:100%;max-width:56px;height:44px;margin-top:-2px;border-radius:12px;-webkit-tap-highlight-color:transparent}
.of-cuenta::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--onix);box-shadow:inset 0 0 0 1px rgb(243 242 245/.5);transition:transform .18s var(--of-entra),background-color .18s var(--of-entra)}
.of-cuenta.hecha::before{background:var(--rosa-hilo);box-shadow:inset 0 0 0 1px var(--rosa-hilo)}
.of-cuenta[aria-current]::before{background:var(--rosa-perla);box-shadow:inset 0 0 0 1px var(--rosa-perla),0 0 0 4px rgb(196 92 124/.22);transform:scale(1.3)}
.of-cuenta:focus-visible{outline:2px solid var(--rosa-hilo);outline-offset:-4px}

.of-cuerpo{position:relative;min-height:calc(100% - var(--of-barra-h))}
.of-cuerpo:focus{outline:none}

/* Mientras llega la lección, y si no llega */
.of-carga{display:grid;place-content:center;justify-items:start;gap:14px;min-height:62svh;padding:40px max(24px,env(safe-area-inset-left,0px))}
.of-carga b{font:italic 400 64px/.9 var(--didona);color:var(--rosa-suave)}
.of-carga p{margin:0;font:400 17px/1.5 var(--sans);color:rgb(243 242 245/.7);max-width:28ch}
.of-carga a{color:var(--rosa-suave)}
@media (prefers-reduced-motion:no-preference){.of-carga{animation:of-llega-carga .42s var(--of-entra) .12s both}}
@keyframes of-llega-carga{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Después de la lección: la siguiente */
.of-sigue{padding:8px max(20px,env(safe-area-inset-left,0px)) calc(40px + env(safe-area-inset-bottom,0px));max-width:880px;margin-inline:auto;box-sizing:content-box}
.of-sigue a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 18px;min-height:44px;padding:18px 20px;border-radius:20px;text-decoration:none;color:var(--platino-claro);
 background:rgb(255 255 255/.06);box-shadow:inset 0 0 0 1px rgb(255 255 255/.12),inset 0 1px 0 rgb(255 255 255/.16)}
.of-sigue span{font:500 10.5px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--rosa-suave)}
.of-sigue b{grid-column:1;font:400 22px/1.15 var(--didona);color:var(--platino-claro)}
.of-sigue svg{grid-column:2;grid-row:1/span 2;width:22px;height:22px;fill:none;stroke:var(--rosa-suave);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--of-entra)}
@media (hover:hover){.of-sigue a:hover svg{transform:translateX(4px)}}
.of-sigue a:focus-visible{outline:2px solid var(--rosa-hilo);outline-offset:3px}

/* Computadora: panel centrado (máx. 1100 px) */
@media (min-width:900px){
 .of-visor[open]{align-items:center;padding:28px}
 .of-marco{flex:0 1 1100px;max-width:1100px;height:min(100%,940px);border-radius:28px;
  box-shadow:0 40px 120px rgb(0 0 0/.55),0 12px 40px rgb(0 0 0/.25)}
 .of-marco::after{opacity:1}
 .of-barra{padding-inline:14px}
 .of-barra-fila{min-height:64px}
 .of-barra-n{font-size:16px}
 .of-hoja{--of-barra-h:104px}
 .of-hilo{max-width:620px;margin-inline:auto}
}

/* ════════════ Utilidades para las lecciones (.lc-*) ════════════
   Las reglas de cada lección van bajo #leccion-N y mandan sobre éstas. */
.lc{--lc-g:max(20px,env(safe-area-inset-left,0px));--lc-ancho:880px;--lc-px:max(var(--lc-g),calc((100% - var(--lc-ancho)) / 2));
 position:relative;color:var(--platino-claro);font:400 17px/1.55 var(--sans)}
.lc :where(section){padding:0}
.lc *,.lc *::before,.lc *::after{box-sizing:border-box}
.lc :is(h2,h3,h4,p,ul,ol,figure,blockquote){margin:0}
.lc-cab{padding:36px var(--lc-px) 28px;scroll-snap-align:start;scroll-margin-top:var(--of-barra-h,0px)}
.lc-escena{position:relative;padding:48px var(--lc-px);scroll-snap-align:start;scroll-margin-top:var(--of-barra-h,0px)}
/* Dentro del visor la barra ya se descuenta con scroll-padding-top de .of-hoja: sumar también scroll-margin
   dejaba cada escena ~100 px por debajo de la barra al tocar su cuenta. En la página sola sí hace falta. */
.of-hoja .lc-cab,.of-hoja .lc-escena{scroll-margin-top:0}
.lc-escena:focus{outline:none}
.lc-escena:focus-visible{outline:2px solid var(--rosa-hilo);outline-offset:-6px}
.lc-pie{padding:40px var(--lc-px) calc(48px + env(safe-area-inset-bottom,0px));border-top:1px solid rgb(255 255 255/.08)}

.lc-num{font:italic 400 48px/.9 var(--didona);letter-spacing:-.02em;color:var(--rosa-suave)}
.lc-etq{font:500 11px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--rosa-suave)}
.lc-titulo{font:400 clamp(32px,8.6vw,56px)/1.05 var(--didona);letter-spacing:-.012em;color:var(--platino-claro);text-wrap:balance}
.lc-titulo em{color:var(--rosa-suave)}
.lc-texto{max-width:34em;font:400 17px/1.55 var(--sans);color:rgb(243 242 245/.82);text-wrap:pretty}
.lc-texto b,.lc-texto strong{color:var(--platino-claro);font-weight:600}
@media (max-width:359px){.lc-texto{font-size:16px}}
@media (min-width:900px){.lc-texto{font-size:18px}}

.lc-cristal{position:relative;isolation:isolate;border-radius:22px;padding:20px;
 background:rgb(255 255 255/.08);-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/.14)}
.lc-cristal::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
 background:linear-gradient(180deg,rgb(255 255 255/.35),rgb(255 255 255/.05));
 -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)}
.lc-cristal::after{content:"";position:absolute;inset:0 0 auto;height:40%;border-radius:inherit;pointer-events:none;z-index:-1;
 background:linear-gradient(120deg,rgb(255 255 255/.40),rgb(255 255 255/0) 40%);opacity:.35;
 -webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.lc-cristal{background:rgb(28 26 31/.94)}}

.lc-boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;min-width:44px;padding:0 18px;border-radius:14px;
 border:0;background:rgb(196 92 124/.08);box-shadow:inset 0 0 0 1px var(--rosa-hilo);color:var(--platino-claro);
 font:600 12px/1.2 var(--sans);font-stretch:112%;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;
 -webkit-tap-highlight-color:transparent;transition:background-color .18s var(--of-entra),color .18s var(--of-entra)}
@media (hover:hover){.lc-boton:hover{background:rgb(196 92 124/.22)}}
.lc-boton:focus-visible{outline:2px solid var(--rosa-perla);outline-offset:3px}
.lc-boton[aria-pressed="true"],.lc-boton[aria-checked="true"],.lc-boton.on{background:var(--rosa-hilo);color:#fff}
.lc-boton:disabled,.lc-boton[aria-disabled="true"]{opacity:.45;cursor:default}

.lc-ejercicio{justify-self:start;align-self:start;width:max-content;max-width:100%;display:inline-flex;align-items:center;gap:10px;min-height:28px;padding:0 12px;border-radius:999px;
 font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rosa-suave);
 background:rgb(196 92 124/.08);box-shadow:inset 0 0 0 1px rgb(230 180 194/.35)}
.lc-ejercicio::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rosa-hilo)}

/* Fuentes: discretas y plegables, al pie de cada lección */
.lc-fuentes{max-width:var(--lc-ancho)}
.lc-fuentes>summary{display:flex;align-items:center;gap:12px;min-height:44px;list-style:none;cursor:pointer;
 font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgb(243 242 245/.6)}
.lc-fuentes>summary::-webkit-details-marker{display:none}
.lc-fuentes>summary::after{content:"";width:7px;height:7px;border-right:1.5px solid var(--rosa-suave);border-bottom:1.5px solid var(--rosa-suave);transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--of-entra)}
.lc-fuentes[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.lc-fuentes>summary:focus-visible{outline:2px solid var(--rosa-hilo);outline-offset:2px;border-radius:6px}
.lc-fuentes ol,.lc-fuentes ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:14px}
.lc-fuentes li{font:400 14px/1.5 var(--sans);color:rgb(243 242 245/.62)}
.lc-fuentes a{color:var(--platino-claro);text-decoration:underline;text-decoration-color:rgb(196 92 124/.7);text-underline-offset:3px}
.lc-fuentes a:focus-visible{outline:2px solid var(--rosa-hilo);outline-offset:2px}
.lc-fuentes small{display:block;margin-top:2px;font:400 11.5px/1.45 var(--mono);color:rgb(243 242 245/.45)}
.lc-volver{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:22px;font:600 11px/1 var(--sans);font-stretch:112%;letter-spacing:.18em;text-transform:uppercase;color:var(--rosa-suave);text-decoration:none}
.lc-volver:focus-visible{outline:2px solid var(--rosa-hilo);outline-offset:3px}

/* La lección abierta sola (sin visor): leccion-N.html como página propia */
.lc-pagina{margin:0;min-height:100svh;background:radial-gradient(70% 30% at 100% 0%,rgb(196 92 124/.18),rgb(196 92 124/0) 70%),var(--onix);color:var(--platino-claro);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
.lc-pagina :focus-visible{outline-color:var(--rosa-hilo)}
.lc-pagina-barra{position:sticky;top:0;z-index:10;display:flex;align-items:center;min-height:56px;padding:env(safe-area-inset-top,0px) max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px));
 background:rgb(11 10 12/.8);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:0 1px 0 rgb(255 255 255/.07)}
.lc-pagina-barra a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;font:600 11px/1 var(--sans);font-stretch:112%;letter-spacing:.18em;text-transform:uppercase;color:var(--platino-claro);text-decoration:none}
.lc-pagina-barra a:focus-visible{outline:2px solid var(--rosa-hilo);outline-offset:2px}
.lc-pagina .lc{--of-barra-h:56px}