/* ===== 7/10 v5b, DISEÑADOR 3.0: assets/css/leccion-anim.css, CSS COMÚN de la tarjeta de la lección (portada y catálogo).
   Son, sin cambiar un carácter, dos trozos de portada.css de hoy, que SE QUITAN de portada.css:
   1. desde el comentario «La lección por dentro, en la pestaña «Cursos»» hasta la regla «@media (max-width:640px){.lmv{...}}» (dos
      líneas), que hoy va justo antes del comentario «5/10, entrega v3 del DISEÑADOR 3.0»;
   2. desde el comentario «Pestaña 01: la lección por dentro, animada (v5)» hasta el final del fichero.
   En portada.css se quedan las reglas que dependen de la ventana de «Por dentro» (.shot, #dentro, el hover y la DV3-7).
   Comprobado (prueba-v5b/): con estos dos trozos al final, después del resto de portada.css, la tarjeta de la portada calcula los
   mismos estilos en todos sus elementos. ===== */
/* La lección por dentro, en la pestaña «Cursos»: reproductor a la izquierda y temario a la derecha, en HTML (no es una captura).
   Lo que se lee va sobre fondo casi opaco, no sobre el cristal, para pasar de 4,5 con cualquier foto detrás. */
.lmv{height:100%;box-sizing:border-box;padding:20px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;color:#EEF3F4}
.lmv-p{min-width:0;display:flex;flex-direction:column;gap:10px}
.lmv-v{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#0b1115;border:1px solid rgba(255,255,255,.14)}
.lmv-v picture{position:absolute;inset:0}
.lmv-v img{display:block;width:100%;height:100%;object-fit:cover}
.lmv-play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:#5FBBFF;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.lmv-play::after{content:"";position:absolute;left:27px;top:21px;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #101518}
.lmv-d{position:absolute;left:10px;bottom:10px;padding:4px 8px;border-radius:6px;background:rgba(8,12,15,.82);font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:#EEF3F4}
.lmv-t{display:grid;gap:3px;padding:10px 12px;border-radius:10px;background:rgba(10,15,18,.86)}
.lmv-k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:#9EACB2}
.lmv-t b{font-size:1rem;line-height:1.3;font-weight:600;color:#fff}
.lmv-s{min-width:0;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;background:rgba(10,15,18,.88);border:1px solid rgba(255,255,255,.12)}
.lmv-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.1)}
.lmv-h b{font-size:1rem;font-weight:600;color:#fff}
.lmv-h span{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:#9EACB2;white-space:nowrap}
.lmv-s ol{list-style:none;margin:0;padding:0;min-height:0;overflow:hidden}
.lmv-s li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.08);font-size:.8125rem;line-height:1.3;color:#DDE5E8}
.lmv-s li .n{font-family:var(--mono);font-size:.6875rem;color:#4FB5AC}
.lmv-s li .c{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lmv-s li .e{font-family:var(--mono);font-size:.6875rem;color:#9EACB2;white-space:nowrap}
.lmv-s li.aqui{background:rgba(79,181,172,.16)}
.lmv-s li.aqui .c{color:#fff;font-weight:600}
.lmv-s li.aqui .e{color:#7FD3CB}
.lmv-s li.prox .c{color:#C3CFD3}
@media (max-width:1100px){.lmv{padding:14px;gap:12px}.lmv-s li:nth-child(n+7){display:none}.lmv-t b{font-size:.9375rem}}
/* tableta y móvil: el reproductor y tres capítulos; sin la ficha del título (el 02 ya va resaltado en el temario) ni las duraciones */
@media (max-width:900px){.lmv{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.lmv-t{display:none}.lmv-s li:nth-child(n+4){display:none}
  .lmv-h span{display:none}.lmv-s li{grid-template-columns:22px minmax(0,1fr)}.lmv-s li .e{display:none}
  .lmv-play{width:56px;height:56px;margin:-28px 0 0 -28px}.lmv-play::after{left:22px;top:17px;border-width:11px 0 11px 18px}}
@media (max-width:640px){.lmv{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-content:start;padding:12px;gap:10px}
  .lmv-s{align-self:start}.lmv-h span{display:inline}.lmv-s li{grid-template-columns:22px minmax(0,1fr) auto;padding:10px 12px}.lmv-s li .e{display:inline}}

/* ===== Pestaña 01: la lección por dentro, animada (v5) ===== */
/* Dentro de las ventanas el fondo es siempre oscuro, en los dos temas (como --struct): los colores de estado van con sus valores del tema
   oscuro. Texto rojo #E68C80 y verde #63BE93 sobre su fondo: 6,4 y 7,3 o más, medidos. */
.shot .win{--ok:#63BE93;--okbg:rgba(99,190,147,.16);--crit:#E68C80;--critbg:rgba(230,140,128,.16)}
.lmv.lmv-anim{position:relative}
.lmv-s{position:relative}
.lmv-s li,.lmv-q{transition:background-color .25s ease,box-shadow .25s ease,transform .16s ease}
.lmv-s li.aqui{box-shadow:inset 3px 0 0 #4FB5AC}
.lmv-s li.destello{background:rgba(79,181,172,.34)}
.lmv .pulsado{transform:scale(.975)}
.lmv-q{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 14px;margin-top:auto;border-top:1px solid rgba(255,255,255,.12);
  background:rgba(95,187,255,.1);font-size:.8125rem;line-height:1.3;color:#fff;font-weight:600}
.lmv-q .n{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid #8FCBF5;color:#8FCBF5}
.lmv-q .n svg{display:block}
.lmv-q .e{font-family:var(--mono);font-size:.6875rem;font-weight:500;color:#B9DDF7;white-space:nowrap}
.lmv-z{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;gap:10px;padding:14px;background:#0E1417;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s}
.lmv.con-q .lmv-z{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .35s ease,visibility 0s}
.lmv-zh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1)}
.lmv-zh b{font-size:1rem;font-weight:600;color:#fff}
.lmv-zh span{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:#9EACB2;white-space:nowrap}
.lmv-zp{margin:0;font-size:.9375rem;line-height:1.35;font-weight:600;color:#fff}
.lmv-zr{display:grid;gap:8px}
.lmv-zr>div{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;min-height:40px;padding:6px 12px;box-sizing:border-box;
  border:1px solid rgba(255,255,255,.16);border-radius:8px;font-size:.8125rem;color:#DDE5E8;transition:background-color .25s,border-color .25s,color .25s,transform .16s}
.lmv-zr kbd{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;box-sizing:border-box;border-radius:6px;border:1px solid rgba(255,255,255,.3);
  border-bottom-width:2px;font:600 .75rem/1 var(--mono);color:#fff;background:rgba(255,255,255,.06)}
.lmv-zr .e{font-family:var(--mono);font-size:.6875rem;letter-spacing:.04em;white-space:nowrap}
.lmv-zr>div.mal{border-color:var(--crit);background:var(--critbg);color:var(--crit)}
.lmv-zr>div.mal kbd{border-color:var(--crit);color:var(--crit)}
.lmv-zr>div.bien{border-color:var(--ok);background:var(--okbg);color:var(--ok)}
.lmv-zr>div.bien kbd{border-color:var(--ok);color:var(--ok)}
.lmv-zf{margin:0;min-height:1.3em;font-size:.8125rem;line-height:1.3;font-weight:600}
.lmv-zf.mal{color:var(--crit)}
.lmv-zf.bien{color:var(--ok)}
.lmv-zv{display:none}
@keyframes lmv-no{0%,100%{translate:0}20%{translate:-5px}40%{translate:5px}60%{translate:-3px}80%{translate:3px}}
@keyframes lmv-si{0%{scale:1}35%{scale:1.035}100%{scale:1}}
.lmv-zr>div.mal.nuevo{animation:lmv-no .42s ease}
.lmv-zr>div.bien.nuevo{animation:lmv-si .5s ease}
/* El cursor dibujado y su onda al pulsar: decorativos, sin eventos */
.lmv-cur{position:absolute;left:0;top:0;z-index:5;width:22px;height:22px;pointer-events:none;opacity:0;
  transition-property:transform,opacity;transition-duration:.8s,.3s;transition-timing-function:cubic-bezier(.45,.05,.25,1),ease;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
.lmv-cur svg{display:block;width:22px;height:22px;transform-origin:4px 3px;transition:transform .12s ease}
.lmv-cur.ve{opacity:1}
.lmv-cur.clic svg{transform:scale(.84)}
.lmv-rp{position:absolute;left:0;top:0;z-index:4;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid rgba(143,203,245,.9);
  pointer-events:none;opacity:0;transform:scale(.3)}
.lmv-rp.va{animation:lmv-rp .5s ease-out}
@keyframes lmv-rp{0%{opacity:.95;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}
/* Botón de la demostración: solo con «Reducir movimiento» (el guion le quita hidden). 44 px de alto. */
.lmv-b{position:absolute;right:10px;top:10px;z-index:3;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.6);background:rgba(8,12,15,.78);color:#fff;font:500 .8125rem/1 var(--body);cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.lmv-b[hidden]{display:none}
.lmv-b svg{display:block;flex:none}
.lmv-b .lmv-b-pausa,.lmv-b.en-marcha .lmv-b-play{display:none}
.lmv-b.en-marcha .lmv-b-pausa{display:block}
.lmv-b:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (hover:hover){.lmv-b:hover{background:rgba(8,12,15,.92)}}
/* Variante B (la aprobada): la tarjeta se puede tocar; el guion pone .lmv-tocable */
.lmv-tocable .lmv-s ol li:not(.prox),.lmv-tocable .lmv-q,.lmv-tocable .lmv-zr>div{cursor:pointer}
@media (hover:hover){.lmv-tocable .lmv-s ol li:not(.prox):not(.aqui):hover,.lmv-tocable .lmv-q:hover{background:rgba(79,181,172,.12)}
  .lmv-tocable .lmv-zr>div:not(.mal):not(.bien):hover{border-color:rgba(255,255,255,.4)}}
.lmv-tocable [tabindex="0"]:focus-visible{outline:2px solid #8FCBF5;outline-offset:-2px}
.lmv-tocable .lmv-zv{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:-12px -4px -12px auto;padding:0 6px;border:0;background:none;color:#B9DDF7;
  font:500 .75rem/1 var(--mono);letter-spacing:.04em;cursor:pointer}
.lmv-tocable .lmv-zh span{display:none}
@media (max-width:1100px){.lmv-z{padding:12px;gap:8px}.lmv-zp{font-size:.875rem}}
@media (max-width:900px){.lmv-q{grid-template-columns:22px minmax(0,1fr);padding:9px 12px}.lmv-q .e{display:none}.lmv-zr>div{min-height:36px}}
@media (max-width:640px){
  .lmv.lmv-anim{grid-template-rows:auto minmax(0,1fr)}
  .lmv.lmv-anim .lmv-s{align-self:stretch}
  .lmv-q{grid-template-columns:22px minmax(0,1fr) auto;padding:9px 12px}.lmv-q .e{display:inline}
  .lmv.lmv-anim .lmv-s li{padding:7px 12px}
  .lmv.lmv-anim .lmv-s li .c{display:block;-webkit-line-clamp:unset;overflow:visible}
  .lmv.lmv-anim .lmv-h{padding:9px 12px}
  .lmv-q{padding:8px 12px}
  .lmv-z{padding:9px 12px;gap:7px}
  .lmv-zh{padding-bottom:6px}.lmv-zh b{font:500 .6875rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#C3CFD3}
  .lmv-zp{font-size:.8125rem}
  .lmv-zr{gap:5px}.lmv-zr>div{min-height:32px;padding:3px 10px}
}
@media (max-width:480px){.lmv.lmv-anim .lmv-v{aspect-ratio:2 / 1}.lmv-b{width:44px;padding:0;justify-content:center}.lmv-b .lmv-b-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
/* 641 a 900: con la ventana en 16:9 sobra alto; vuelven el título del capítulo (se ve cambiar al pulsar) y dos capítulos más del temario */
@media (min-width:641px) and (max-width:900px){.lmv.lmv-anim .lmv-t{display:grid}.lmv.lmv-anim .lmv-t b{font-size:.875rem}
  .lmv.lmv-anim .lmv-s li:nth-child(4),.lmv.lmv-anim .lmv-s li:nth-child(5){display:grid}
  .lmv.lmv-anim .lmv-s li{grid-template-columns:22px minmax(0,1fr) auto}.lmv.lmv-anim .lmv-s li .e{display:inline}}
@media (max-width:400px){.lmv-q .e{display:none}.lmv-q{grid-template-columns:22px minmax(0,1fr)}
  .lmv.lmv-anim .lmv-s li{grid-template-columns:22px minmax(0,1fr)}.lmv.lmv-anim .lmv-s li .e{display:none}}   /* a 375 el título del 02 no cabía en dos líneas con los minutos al lado */
@media (prefers-reduced-motion:reduce){.lmv-z,.lmv.con-q .lmv-z,.lmv-s li,.lmv-q,.lmv-zr>div{transition:none}.lmv-cur{transition-duration:.6s,.2s}}