/* Lección 02 · Vocería · La pregunta difícil. Todo bajo #leccion-2.
   Movimiento (MOVIMIENTO_ESPECIFICACION): entrada cubic-bezier(.2,.7,.2,1), salida cubic-bezier(.4,0,1,1).
   Bloques 18 px → 0 y opacidad en 520 ms, escalón de 70 ms (máx. 6). Trazos con stroke-dashoffset en 700 ms, una sola vez.
   Técnicas: la tarjeta se voltea (rotateY) en 420 ms. Respuestas: al revisar, cada tarjeta se voltea (rotateX, 2 × 210 ms)
   y muestra su efecto; las que siguen se reacomodan con transform (360 ms). Sólo transform, opacity y stroke-dashoffset.
   Los estados iniciales sólo existen bajo .l2-anima (lo pone leccion-2.js si no hay movimiento reducido).
   Sin JS: las cinco preguntas se leen completas, con el efecto de cada respuesta y la mejor sustentada a la vista. */

@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-2{--lc-ancho:960px;--l2-linea:rgb(255 255 255/.1)}
#leccion-2 :where(button:not(.lc-boton)){margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
#leccion-2 :where(fieldset){margin:0;padding:0;border:0;min-width:0}
#leccion-2 :where(legend){padding:0}
#leccion-2 mark{background:none;color:inherit}
#leccion-2 .lc-boton svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#leccion-2 .l2-k,#leccion-2 .l2-tec-k,#leccion-2 .l2-ficha-k,#leccion-2 .l2-ops-l,#leccion-2 .l2-v-k,#leccion-2 .l2-col-k{
 font:500 10.5px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--rosa-suave)}

/* ——— Cabecera ——— */
#leccion-2 .l2-cab{display:grid;gap:12px;padding-top:40px;padding-bottom:4px}
#leccion-2 .l2-cab-x{font:400 17px/1.45 var(--sans);color:rgb(243 242 245/.66)}

/* ——— 1 · Apertura ——— */
#leccion-2 .l2-apertura{display:grid;gap:44px;padding-top:28px;padding-bottom:72px}
#leccion-2 .l2-frase{display:grid;gap:.16em;font:400 clamp(40px,10.6vw,78px)/1.02 var(--didona);letter-spacing:-.022em;color:var(--platino-claro);text-wrap:balance}
#leccion-2 .l2-f1,#leccion-2 .l2-f2{display:block}
#leccion-2 .l2-f2{font-style:italic;color:var(--rosa-suave)}
#leccion-2 .l2-subr{position:relative;display:inline-block;white-space:nowrap}
#leccion-2 .l2-subr svg{position:absolute;left:0;bottom:-.06em;width:96%;height:.18em;overflow:visible}
#leccion-2 .l2-subr path{fill:none;stroke:var(--rosa-hilo);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1 1;stroke-dashoffset:0}

#leccion-2 .l2-capas{display:grid;gap:18px;max-width:440px}
#leccion-2 .l2-capas-t{font:400 18px/1.45 var(--sans);color:var(--platino-claro)}
#leccion-2 .l2-capas-fig{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:start}
#leccion-2 .l2-capas-mic{display:block;width:96px;height:232px;overflow:visible}
#leccion-2 .l2-mic-cuerpo{transform-box:fill-box;transform-origin:50% 100%}
#leccion-2 .l2-mic-banda{fill:none;stroke:var(--onix);stroke-width:6;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0}
#leccion-2 .l2-mic-pie{fill:none;stroke:#c7c5ce;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0}
#leccion-2 .l2-mic-guia{fill:none;stroke:var(--rosa-hilo);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0}
#leccion-2 .l2-capas-l{list-style:none;margin:0;padding:12px 0 0;display:grid;grid-template-rows:repeat(3,52px)}
#leccion-2 .l2-capas-l li{display:flex;flex-direction:column;justify-content:center;gap:2px;padding-left:12px;min-width:0}
#leccion-2 .l2-capas-l b{font:400 22px/1.1 var(--didona);color:var(--platino-claro)}
#leccion-2 .l2-capas-l span{font:400 14.5px/1.35 var(--sans);color:rgb(243 242 245/.64)}

#leccion-2 .l2-practica{display:grid;gap:14px}
#leccion-2 .l2-practica ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--l2-linea)}
#leccion-2 .l2-practica li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--l2-linea);font:400 16.5px/1.45 var(--sans);color:rgb(243 242 245/.84)}
#leccion-2 .l2-practica li b{font:italic 400 21px/1 var(--didona);color:var(--rosa-suave)}
#leccion-2 .l2-practica em{color:var(--rosa-suave)}

/* ——— Títulos de escena ——— */
#leccion-2 .l2-h{font:400 clamp(30px,8vw,48px)/1.06 var(--didona);letter-spacing:-.014em;color:var(--platino-claro);text-wrap:balance}
#leccion-2 .l2-h em{display:block;font-style:italic;color:var(--rosa-suave)}

/* ——— 2 · Técnicas: dos tarjetas que se voltean ——— */
#leccion-2 .l2-tecnicas{display:grid;gap:18px;padding-block:64px;background:linear-gradient(180deg,rgb(255 255 255/0),rgb(255 255 255/.018) 30%,rgb(255 255 255/0))}
#leccion-2 .l2-tecs{display:grid;gap:16px;margin-top:10px}
#leccion-2 .l2-tec{display:grid;perspective:1400px;min-width:0}
#leccion-2 .l2-tec-in{position:relative;display:grid;gap:12px}
#leccion-2 .l2-cara{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:12px;min-width:0;padding:18px 20px 20px;border-radius:22px;
 background:linear-gradient(160deg,rgb(255 255 255/.09),rgb(255 255 255/.035) 48%,rgb(230 180 194/.06)),#121014;
 box-shadow:0 12px 40px rgb(0 0 0/.25),inset 0 1px 0 rgb(255 255 255/.14)}
#leccion-2 .l2-cara::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
 background:linear-gradient(170deg,rgb(255 255 255/.35),rgb(255 255 255/.05) 42%,rgb(255 255 255/.05) 78%,rgb(230 180 194/.22));
 -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-2 .l2-cara::after{content:"";position:absolute;inset:0 0 auto;height:36%;border-radius:inherit;pointer-events:none;z-index:-1;
 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)}
#leccion-2 .l2-reverso{background:linear-gradient(160deg,rgb(196 92 124/.24),rgb(158 47 85/.10) 55%,rgb(255 255 255/.03)),#151015}

#leccion-2 .l2-tec-fig{display:grid;place-items:center;min-height:150px;margin:0 -6px 6px;padding:14px 10px;border-radius:16px;
 background:linear-gradient(180deg,rgb(11 10 12/.62),rgb(11 10 12/.38));box-shadow:inset 0 0 0 1px rgb(255 255 255/.07)}
#leccion-2 .l2-puente-fig svg{display:block;width:100%;max-width:360px;height:auto;overflow:visible}
#leccion-2 .l2-tr{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0}
#leccion-2 .l2-orilla{stroke:rgb(243 242 245/.55);stroke-width:1.3}
#leccion-2 .l2-pilon{stroke:rgb(243 242 245/.72);stroke-width:1.6}
#leccion-2 .l2-tirante{stroke:rgb(243 242 245/.34);stroke-width:1}
#leccion-2 .l2-tablero{stroke:var(--rosa-hilo);stroke-width:2.6}
#leccion-2 .l2-viajero{fill:var(--rosa-perla);transform:translateX(176px)}
#leccion-2 .l2-et text{font:500 12px var(--mono);letter-spacing:.02em;fill:rgb(243 242 245/.62)}
#leccion-2 .l2-et .l2-et-r{font-size:11px;fill:var(--rosa-suave)}

#leccion-2 .l2-bandera-fig{place-items:center start;padding:16px}
#leccion-2 .l2-band-frase{font:400 20px/1.5 var(--didona);color:var(--platino-claro)}
#leccion-2 .l2-band-gris{color:rgb(243 242 245/.48)}
#leccion-2 .l2-mark{position:relative;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
#leccion-2 .l2-mark>span{position:relative;z-index:1;padding:0 4px;color:#fff}
#leccion-2 .l2-mark::before{content:"";position:absolute;left:18px;right:-2px;top:8%;bottom:4%;border-radius:5px;transform-origin:0 50%;
 background:linear-gradient(90deg,rgb(196 92 124/.92),rgb(158 47 85/.78))}
#leccion-2 .l2-banderin{position:relative;z-index:1;width:12px;height:20px;flex:none;overflow:visible}
#leccion-2 .l2-banderin path{fill:none;stroke:var(--platino-claro);stroke-width:1.4;stroke-linecap:round}
#leccion-2 .l2-banderin .l2-banderin-r{fill:var(--rosa-suave);stroke:none}
@media (max-width:370px){#leccion-2 .l2-band-frase{font-size:18px}#leccion-2 .l2-mark{white-space:normal}}

#leccion-2 .l2-tec-t{font:italic 400 36px/1 var(--didona);letter-spacing:-.01em;color:var(--platino-claro)}
#leccion-2 .l2-tec-para{font:400 17px/1.5 var(--sans);color:rgb(243 242 245/.8);text-wrap:pretty}
#leccion-2 .l2-gira{margin-top:auto;align-self:flex-start}
#leccion-2 .l2-tec-como{font:400 17px/1.5 var(--sans);color:var(--platino-claro);text-wrap:pretty}
#leccion-2 .l2-tec-no{padding-left:12px;border-left:2px solid var(--rosa-hilo);font:400 15.5px/1.5 var(--sans);color:rgb(243 242 245/.76)}
#leccion-2 .l2-tec-no b,#leccion-2 .l2-tec-ej span{display:block;margin-bottom:3px;font:500 10px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--rosa-suave)}
#leccion-2 .l2-tec-ej{font:italic 400 18px/1.4 var(--didona);color:rgb(243 242 245/.88)}
#leccion-2 .l2-tec-ej i{font-style:normal;color:var(--rosa-suave)}
#leccion-2 .l2-tec-ej mark{color:var(--rosa-perla);box-shadow:inset 0 -.4em 0 rgb(196 92 124/.42)}

/* Con JS: las dos caras ocupan el mismo sitio y la tarjeta gira 180° (420 ms). La cara oculta queda inerte. */
#leccion-2.l2-vivo .l2-tec-in{gap:0;transform-style:preserve-3d;transition:transform .42s var(--of-entra)}
#leccion-2.l2-vivo .l2-cara{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden}
#leccion-2.l2-vivo .l2-reverso{transform:rotateY(180deg)}
#leccion-2.l2-vivo .l2-tec.vuelta .l2-tec-in{transform:rotateY(180deg)}
#leccion-2:not(.l2-vivo) .l2-gira{display:none}
@media (prefers-reduced-motion:reduce){
 #leccion-2.l2-vivo .l2-tec-in,#leccion-2.l2-vivo .l2-tec.vuelta .l2-tec-in{transition:none;transform:none}
 #leccion-2.l2-vivo .l2-reverso{transform:none;opacity:0;visibility:hidden}
 #leccion-2.l2-vivo .l2-tec.vuelta .l2-frente{opacity:0;visibility:hidden}
 #leccion-2.l2-vivo .l2-tec.vuelta .l2-reverso{opacity:1;visibility:visible}
}

/* ——— 3 · El simulador ——— */
#leccion-2 .l2-sim{display:grid;gap:16px;padding-block:64px 56px}
#leccion-2 .l2-escenario{display:grid;margin-top:14px;scroll-margin-top:12px}
.lc-pagina #leccion-2 .l2-escenario{scroll-margin-top:68px}

#leccion-2 .l2-ruta{display:flex;align-items:center;gap:16px;padding:0 0 4px;border-bottom:1px solid var(--l2-linea)}
#leccion-2 .l2-ruta[hidden]{display:none}
#leccion-2 .l2-ruta-c{flex:none;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgb(243 242 245/.5)}
#leccion-2 .l2-ruta-c b{font-weight:500;color:var(--platino-claro)}
#leccion-2 .l2-ruta ol{flex:1;display:flex;gap:6px;list-style:none;margin:0;padding:0;min-width:0}
#leccion-2 .l2-ruta li{flex:1 1 0;min-width:0}
#leccion-2 .l2-seg{display:flex;align-items:center;width:100%;height:44px;border-radius:8px}
#leccion-2 .l2-seg i{display:block;width:100%;height:2px;border-radius:2px;background:rgb(243 242 245/.2);transition:background-color .18s var(--of-entra),transform .18s var(--of-entra)}
#leccion-2 .l2-seg.hecha i{background:var(--rosa-hilo)}
#leccion-2 .l2-seg[aria-current] i{background:var(--rosa-perla);transform:scaleY(2)}
#leccion-2 .l2-seg:focus-visible{outline:2px solid var(--rosa-hilo);outline-offset:-2px}
@media (hover:hover){#leccion-2 .l2-seg:hover i{background:rgb(230 180 194/.7)}}

#leccion-2 .l2-q{display:grid;gap:22px;padding-top:22px}
#leccion-2 .l2-q[hidden]{display:none}
#leccion-2:not(.l2-vivo) .l2-q+.l2-q{margin-top:44px;padding-top:44px;border-top:1px solid var(--l2-linea)}
#leccion-2 .l2-q-izq{display:grid;gap:18px;align-content:start;min-width:0}
#leccion-2 .l2-q-der{min-width:0}
#leccion-2 .l2-q-etq{display:flex;align-items:center;gap:10px;font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--rosa-suave)}
#leccion-2 .l2-mic{width:22px;height:22px;flex:none;fill:none;stroke:var(--platino-claro);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#leccion-2 .l2-mic rect{fill:rgb(243 242 245/.12)}
#leccion-2 .l2-q-ondas{display:grid;gap:3px;width:16px;margin-left:-4px}
#leccion-2 .l2-q-ondas i{display:block;height:1.5px;border-radius:2px;background:var(--rosa-hilo);transform-origin:0 50%}
#leccion-2 .l2-q-ondas i:nth-child(2){width:70%}
#leccion-2 .l2-q-ondas i:nth-child(3){width:40%}
#leccion-2 .l2-q-n{margin-left:auto;color:rgb(243 242 245/.38)}
#leccion-2.l2-vivo .l2-q-n{display:none}
#leccion-2 .l2-q-t{font:italic 400 clamp(31px,8.6vw,50px)/1.08 var(--didona);letter-spacing:-.016em;color:var(--platino-claro);text-wrap:balance;outline:none}
#leccion-2 .l2-w{display:inline-block}

#leccion-2 .l2-ficha{padding:16px 18px 18px;border-radius:18px}
#leccion-2 .l2-ficha-k{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;color:rgb(243 242 245/.5)}
#leccion-2 .l2-ficha-k span{color:var(--rosa-suave)}
#leccion-2 .l2-ficha ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
#leccion-2 .l2-ficha li{position:relative;padding-left:20px;font:400 16px/1.5 var(--sans);color:rgb(243 242 245/.9);text-wrap:pretty}
#leccion-2 .l2-ficha li::before{content:"";position:absolute;left:1px;top:.6em;width:7px;height:7px;border-radius:2px;box-shadow:inset 0 0 0 1.2px var(--rosa-suave)}

#leccion-2 .l2-ops{display:grid;gap:10px}
#leccion-2 .l2-ops-l{margin-bottom:4px;color:rgb(243 242 245/.5)}
#leccion-2 .l2-op{position:relative;display:block}
#leccion-2 .l2-op input{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
#leccion-2:not(.l2-vivo) .l2-op input{display:none}
#leccion-2 .l2-op-carta{position:relative;display:grid;gap:10px;min-height:44px;padding:14px 16px 16px;border-radius:18px;
 background:linear-gradient(160deg,rgb(255 255 255/.07),rgb(255 255 255/.025) 60%),#121014;
 box-shadow:inset 0 0 0 1px rgb(255 255 255/.12),inset 0 1px 0 rgb(255 255 255/.10);
 transition:box-shadow .18s var(--of-entra),background-color .18s var(--of-entra);transform-origin:50% 50%}
#leccion-2 .l2-op-cab{display:flex;align-items:center;gap:10px;min-height:30px}
#leccion-2 .l2-op-marcas{display:flex;flex-wrap:wrap;gap:6px}
#leccion-2 .l2-op-marcas:empty{display:none}
#leccion-2 .l2-op-letra{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;font:italic 400 18px/1 var(--didona);color:var(--rosa-suave);
 box-shadow:inset 0 0 0 1px rgb(230 180 194/.5);transition:background-color .18s var(--of-entra),color .18s var(--of-entra)}
#leccion-2 .l2-op-marca{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--platino-claro);box-shadow:inset 0 0 0 1px rgb(243 242 245/.4)}
#leccion-2 .l2-op-marca-r{color:#fff;background:rgb(196 92 124/.5);box-shadow:inset 0 0 0 1px var(--rosa-hilo)}
#leccion-2 .l2-op-txt{display:block;font:400 16.5px/1.5 var(--sans);color:var(--platino-claro);text-wrap:pretty}
#leccion-2 .l2-op-ef{display:grid;gap:4px;padding-top:12px;border-top:1px solid var(--l2-linea)}
#leccion-2 .l2-op-lect{font:italic 400 21px/1.2 var(--didona);color:var(--platino-claro)}
#leccion-2 .l2-op-efx{font:400 15px/1.5 var(--sans);color:rgb(243 242 245/.74);text-wrap:pretty}

#leccion-2.l2-vivo .l2-op{cursor:pointer;-webkit-tap-highlight-color:transparent}
#leccion-2.l2-vivo .l2-op:not(.volteada) .l2-op-ef{display:none}
@media (hover:hover){#leccion-2.l2-vivo .l2-op:not(.volteada):hover .l2-op-carta{box-shadow:inset 0 0 0 1px rgb(196 92 124/.75),inset 0 1px 0 rgb(255 255 255/.10)}}
#leccion-2 .l2-op:not(.volteada) input:checked+.l2-op-carta{background:linear-gradient(160deg,rgb(196 92 124/.18),rgb(255 255 255/.03) 60%),#141014;
 box-shadow:inset 0 0 0 1.5px var(--rosa-hilo),0 12px 34px -16px rgb(196 92 124/.5)}
#leccion-2 .l2-op:not(.volteada) input:checked+.l2-op-carta .l2-op-letra{background:var(--rosa-hilo);color:#fff;box-shadow:none}
#leccion-2 .l2-op input:focus-visible+.l2-op-carta{outline:2px solid var(--rosa-perla);outline-offset:3px}

/* Revelada: cada respuesta muestra lo que hace; la mejor sustentada se ilumina, la elegida se marca */
#leccion-2 .l2-op.volteada{cursor:default}
#leccion-2 .l2-op.volteada .l2-op-carta{background:linear-gradient(160deg,rgb(255 255 255/.045),rgb(255 255 255/.015)),#0f0d11;box-shadow:inset 0 0 0 1px rgb(255 255 255/.10)}
#leccion-2 .l2-op.volteada .l2-op-txt{font-size:15.5px;color:rgb(243 242 245/.7)}
#leccion-2 .l2-op.volteada .l2-op-letra{color:rgb(243 242 245/.6);box-shadow:inset 0 0 0 1px rgb(243 242 245/.3);background:none}
#leccion-2 .l2-op.elegida.volteada .l2-op-carta{box-shadow:inset 0 0 0 1px rgb(243 242 245/.55)}
#leccion-2 .l2-op.elegida.volteada .l2-op-letra{background:var(--platino);color:var(--onix);box-shadow:none}
#leccion-2 .l2-op.mejor.volteada .l2-op-carta{background:linear-gradient(160deg,rgb(196 92 124/.28),rgb(158 47 85/.12) 60%,rgb(255 255 255/.03)),#151015;
 box-shadow:inset 0 0 0 1.5px var(--rosa-hilo),0 16px 44px -18px rgb(196 92 124/.55)}
#leccion-2 .l2-op.mejor.volteada .l2-op-letra{background:var(--rosa-hilo);color:#fff;box-shadow:none}
#leccion-2 .l2-op.mejor.volteada .l2-op-txt{color:var(--platino-claro)}
#leccion-2 .l2-op.mejor.volteada .l2-op-lect{color:var(--rosa-perla)}

#leccion-2 .l2-acc{padding-top:16px}
#leccion-2 .l2-revisa{width:100%}
#leccion-2 .l2-sigue{gap:12px}
#leccion-2:not(.l2-vivo) .l2-acc{display:none}
#leccion-2.l2-vivo .l2-q:not(.revelada) :is(.l2-veredicto,.l2-acc-sigue){display:none}
#leccion-2.l2-vivo .l2-q.revelada .l2-acc:not(.l2-acc-sigue){display:none}

#leccion-2 .l2-veredicto{position:relative;display:grid;gap:10px;margin-top:16px;padding:18px 20px 20px 22px;border-radius:20px;outline:none;
 background:linear-gradient(160deg,rgb(255 255 255/.06),rgb(255 255 255/.02)),#100e12;box-shadow:inset 0 0 0 1px rgb(255 255 255/.10)}
#leccion-2 .l2-veredicto::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:2px;border-radius:2px;background:var(--rosa-hilo)}
#leccion-2 .l2-veredicto:focus-visible{outline:2px solid var(--rosa-hilo);outline-offset:3px}
#leccion-2 .l2-v-t{display:flex;align-items:baseline;gap:12px;font:400 26px/1.15 var(--didona);color:var(--platino-claro);text-wrap:balance}
#leccion-2 .l2-v-t b{flex:none;font-style:italic;font-weight:400;color:var(--rosa-suave)}
#leccion-2 .l2-v-tec{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:0 12px 0 9px;border-radius:999px;
 background:rgb(196 92 124/.12);box-shadow:inset 0 0 0 1px rgb(230 180 194/.35);font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rosa-perla)}
#leccion-2 .l2-glifo{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#leccion-2 .l2-glifo .l2-glifo-r{fill:var(--rosa-hilo);stroke:none}
#leccion-2 .l2-v-x{max-width:34em;font:400 16px/1.55 var(--sans);color:rgb(243 242 245/.84);text-wrap:pretty}

/* ——— 4 · Cierre ——— */
#leccion-2 .l2-cierre{display:grid;gap:22px;padding-block:72px 64px;background:radial-gradient(80% 50% at 100% 100%,rgb(196 92 124/.10),rgb(196 92 124/0) 70%)}
#leccion-2 .l2-cierre-t{max-width:20em;font:400 clamp(30px,8vw,52px)/1.1 var(--didona);letter-spacing:-.014em;color:var(--platino-claro);text-wrap:balance}
#leccion-2 .l2-cierre-t em{font-style:italic;color:var(--rosa-suave)}
#leccion-2 .l2-mapa{display:grid;gap:14px;margin-top:6px}
#leccion-2 .l2-col{padding:18px;border-radius:20px}
#leccion-2 .l2-col-si{background:linear-gradient(160deg,rgb(196 92 124/.18),rgb(158 47 85/.06) 60%),#121014;box-shadow:inset 0 0 0 1px rgb(196 92 124/.5)}
#leccion-2 .l2-col-no{background:rgb(255 255 255/.03);box-shadow:inset 0 0 0 1px rgb(255 255 255/.1)}
#leccion-2 .l2-col-no .l2-col-k{color:rgb(243 242 245/.55)}
#leccion-2 .l2-fichas{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
#leccion-2:not(.l2-vivo) .l2-fichas li,#leccion-2 .l2-chip{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border-radius:999px;
 font:400 15px/1.2 var(--sans);text-align:left;color:rgb(243 242 245/.78);box-shadow:inset 0 0 0 1px rgb(255 255 255/.16)}
#leccion-2 .l2-chip{min-height:44px;transition:background-color .18s var(--of-entra),box-shadow .18s var(--of-entra)}
#leccion-2 .l2-col-si .l2-fichas li,#leccion-2 .l2-col-si .l2-chip{color:var(--rosa-perla);background:rgb(196 92 124/.14);box-shadow:inset 0 0 0 1px rgb(230 180 194/.42)}
#leccion-2.l2-vivo .l2-col-si .l2-fichas li{background:none;box-shadow:none}
#leccion-2 .l2-chip:focus-visible{outline:2px solid var(--rosa-perla);outline-offset:2px}
@media (hover:hover){#leccion-2 .l2-chip:hover{background:rgb(196 92 124/.22)}}
#leccion-2 .l2-chip.elegida::after,#leccion-2 .l2-mapa-nota i{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--rosa-perla);box-shadow:0 0 0 3px rgb(196 92 124/.25)}
#leccion-2 .l2-col-no .l2-chip.elegida::after{background:var(--platino)}
#leccion-2 .l2-mapa-nota{display:flex;align-items:center;gap:10px;font:400 14px/1.45 var(--sans);color:rgb(243 242 245/.6)}
#leccion-2 .l2-mapa-nota[hidden]{display:none}
#leccion-2 .l2-honesto{color:rgb(243 242 245/.7)}

/* ——— Computadora ——— */
@media (min-width:900px){
 #leccion-2 .l2-cab{padding-top:56px}
 #leccion-2 .l2-apertura{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;row-gap:64px;align-items:start;padding-bottom:96px}
 #leccion-2 .l2-frase{grid-column:1 / -1;font-size:clamp(56px,5.4vw,72px)}
 #leccion-2 .l2-capas{max-width:none;padding:24px 28px 20px;border-radius:24px;background:rgb(255 255 255/.03);box-shadow:inset 0 0 0 1px var(--l2-linea)}
 #leccion-2 .l2-capas-l span{font-size:15px}
 #leccion-2 .l2-practica{padding-top:6px}
 #leccion-2 .l2-tecnicas{padding-block:88px}
 #leccion-2 .l2-tecs{grid-template-columns:1fr 1fr;gap:20px}
 #leccion-2 .l2-cara{padding:22px 24px 24px}
 #leccion-2 .l2-tec-fig{min-height:176px}
 #leccion-2 .l2-band-frase{font-size:23px}
 #leccion-2 .l2-sim{padding-block:88px 72px}
 #leccion-2 .l2-q{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:48px;align-items:start;padding-top:32px}
 #leccion-2 .l2-q-izq{position:sticky;top:calc(var(--of-barra-h,0px) + 24px)}
 #leccion-2 .l2-revisa{width:auto}
 #leccion-2 .l2-op-carta{padding:16px 20px 18px}
 #leccion-2 .l2-cierre{padding-block:96px 80px}
 #leccion-2 .l2-mapa{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:18px}
 #leccion-2 .l2-col{padding:22px 24px}
}

/* ——— Entradas (sólo con movimiento) ——— */
@media (prefers-reduced-motion:no-preference){
 #leccion-2.l2-anima .l2-in{transition:opacity .52s var(--of-entra) var(--d,0ms),transform .52s var(--of-entra) var(--d,0ms)}
 #leccion-2.l2-anima .l2-in:not(.en){opacity:0;transform:translateY(18px)}
 #leccion-2.l2-anima :is(.l2-tr,.l2-mic-banda,.l2-mic-pie,.l2-mic-guia,.l2-subr path){transition:stroke-dashoffset .7s var(--of-entra) calc(var(--d,0ms) + var(--t,0ms))}
 #leccion-2.l2-anima .l2-in:not(.en) :is(.l2-tr,.l2-mic-banda,.l2-mic-pie,.l2-mic-guia){stroke-dashoffset:1}
 #leccion-2.l2-anima .l2-in:not(.en) .l2-subr path{stroke-dashoffset:1}
 #leccion-2.l2-anima .l2-f2 .l2-subr path{--t:560ms}
 #leccion-2.l2-anima .l2-mic-cuerpo{transition:opacity .52s var(--of-entra) var(--d,0ms),transform .52s var(--of-entra) var(--d,0ms)}
 #leccion-2.l2-anima .l2-in:not(.en) .l2-mic-cuerpo{opacity:0;transform:scale(.98) translateY(12px)}
 #leccion-2.l2-anima .l2-capas-l li{transition:opacity .48s var(--of-entra) var(--d,0ms),transform .48s var(--of-entra) var(--d,0ms)}
 #leccion-2.l2-anima .l2-in:not(.en) .l2-capas-l li{opacity:0;transform:translateX(-12px)}
 #leccion-2.l2-anima .l2-in:not(.en) .l2-viajero{opacity:0;transform:translateX(0)}
 #leccion-2.l2-anima .l2-in.en .l2-viajero{animation:l2-cruza .9s var(--of-entra) calc(var(--d,0ms) + 1000ms) both}
 #leccion-2.l2-anima .l2-mark::before{transition:transform .6s var(--of-entra) calc(var(--d,0ms) + 420ms)}
 #leccion-2.l2-anima .l2-in:not(.en) .l2-mark::before{transform:scaleX(0)}
 #leccion-2.l2-anima .l2-banderin{transition:opacity .42s var(--of-entra) calc(var(--d,0ms) + 300ms),transform .42s var(--of-entra) calc(var(--d,0ms) + 300ms)}
 #leccion-2.l2-anima .l2-in:not(.en) .l2-banderin{opacity:0;transform:translateY(8px)}
}
@keyframes l2-cruza{from{opacity:0;transform:translateX(0)}20%{opacity:1}to{opacity:1;transform:translateX(176px)}}

/* Corte 4 (3 nov): la cabecera lleva el color de su portada en «El oficio, explicado» (un lomo y una luz). */
#leccion-2>.lc-cab{background:radial-gradient(110% 120% at 100% 0%,rgb(31 86 92/.62),rgb(31 86 92/.18) 46%,rgb(31 86 92/0) 78%);box-shadow:inset 0 3px 0 #e0483a}
#leccion-2 .l2-practica>summary{min-height:48px}