/* ============================================================
   PELÍCULA PASO A PASO · estilos comunes (ver taller-pelicula.js)
   Lo nuevo de cada paso brilla; lo de los pasos anteriores queda tenue.
   ============================================================ */
.pv{ margin:1.3rem 0; border-radius:14px; background:linear-gradient(180deg,rgba(253,230,138,.06),rgba(255,255,255,.02));
  border:1px solid rgba(253,230,138,.38); padding:.8rem .85rem .9rem; position:relative }
.pv-cab{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .6rem; margin-bottom:.55rem }
.pv-cab > b{ font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:#fde68a }
.pv-tit{ font-weight:800; font-size:.98rem; color:#fff; flex:1 1 12rem; min-width:0 }
.pv-cont{ font-family:ui-monospace,Menlo,monospace; font-size:.75rem; color:#fde68a; white-space:nowrap }
.pv-ayuda{ margin:-.2rem 0 .55rem; font-size:.8rem; color:var(--ti-tenue,#8ba0b6) }
.pv-ayuda b{ color:#fde68a }
.pv-escena{ border-radius:10px; background:#060c18; border:1px solid rgba(255,255,255,.08); overflow:hidden; touch-action:pan-y }
.pv-escena svg{ display:block; width:100%; height:auto; max-height:62vh }
.pv-escena.pv-ancho{ overflow-x:auto }
.pv-escena.pv-ancho svg{ min-width:520px }
.pv-g{ transition:opacity .45s ease }
.pv-viejo{ opacity:.42 }
.pv-fin .pv-viejo{ opacity:1 }
.pv-nuevo{ opacity:1; animation:pv-brillo 1.6s ease-out 1 }
@keyframes pv-brillo{ 0%{ opacity:0; filter:drop-shadow(0 0 0 rgba(253,230,138,0)) }
  25%{ opacity:1; filter:drop-shadow(0 0 7px rgba(253,230,138,.95)) }
  100%{ opacity:1; filter:drop-shadow(0 0 0 rgba(253,230,138,0)) } }
.pv-aparece{ opacity:1; animation:pv-entra .45s ease-out 1 }
@keyframes pv-entra{ from{ opacity:.25 } to{ opacity:1 } }
.pv-marca{ animation:pv-latido 1.8s ease-in-out 3; filter:drop-shadow(0 0 5px rgba(253,230,138,.9)) }
@keyframes pv-latido{ 0%,100%{ filter:drop-shadow(0 0 2px rgba(253,230,138,.5)) } 50%{ filter:drop-shadow(0 0 9px rgba(253,230,138,1)) } }
@media (prefers-reduced-motion:reduce){ .pv-nuevo,.pv-aparece,.pv-marca{ animation:none } .pv-g{ transition:none } }
.pv-paso{ display:flex; align-items:center; gap:.55rem; margin:.75rem 0 .35rem; font-weight:800; font-size:1rem; color:#fff; line-height:1.35 }
.pv-t{ flex:1 1 auto; min-width:0 }
.pv-num{ flex:none; width:1.9rem; height:1.9rem; border-radius:50%; background:#fde68a; color:#1a1405; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:.92rem }
.pv-ec{ border-radius:10px; background:rgba(124,108,240,.08); border:1px solid rgba(124,108,240,.28); padding:.35rem .7rem; overflow-x:auto; overflow-y:hidden; position:relative }
.pv-ec .katex-display{ margin:.35rem 0 }
.pv-antes{ opacity:.45; position:relative }
.pv-antes .katex{ font-size:.95em }
.pv-ahora{ position:relative }
.pv-ahora .katex{ font-size:1.12em }
.pv-et{ display:block; margin-top:.25rem; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ti-tenue,#8ba0b6); font-weight:800 }
.pv-antes + .pv-ahora{ border-top:1px dashed rgba(255,255,255,.12) }
.pv-txt{ margin:.55rem 0 .2rem; font-size:.94rem; line-height:1.5 }
.pv-txt p{ margin:.3rem 0 }
.pv-que b{ color:#fde68a } .pv-porque b{ color:#7dd3fc }
.pv-ctl{ display:grid; grid-template-columns:44px 1fr 1.4fr 44px; gap:.4rem; margin-top:.65rem }
.pv-b{ min-height:44px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05); color:var(--ti-texto,#e5edf5);
  font:inherit; font-weight:800; font-size:.92rem; cursor:pointer; padding:0 .5rem }
.pv-b:disabled{ opacity:.35; cursor:default }
.pv-sig{ background:#fde68a; color:#1a1405; border-color:#fde68a }
.pv-sig:disabled{ background:rgba(253,230,138,.25); color:#fde68a }
.pv-corriendo .pv-auto{ background:rgba(253,230,138,.2) }
.pv-puntos{ display:flex; flex-wrap:wrap; justify-content:center; gap:.15rem; margin-top:.5rem }
.pv-punto{ width:28px; height:28px; border:0; background:transparent; cursor:pointer; position:relative; padding:0 }
.pv-punto::after{ content:""; position:absolute; left:50%; top:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; background:rgba(255,255,255,.18) }
.pv-punto.visto::after{ background:rgba(253,230,138,.5) }
.pv-punto.on::after{ background:#fde68a; width:13px; height:13px; margin:-6.5px 0 0 -6.5px }
.pv-pred{ border-radius:10px; padding:.6rem .7rem; background:rgba(56,189,248,.07); border:1px solid rgba(56,189,248,.35) }
.pv-pred > p:first-child{ margin:0 0 .45rem; font-weight:700 }
.pv-ops{ display:grid; gap:.35rem }
.pv-op{ text-align:left; min-height:44px; border-radius:9px; border:1px solid rgba(255,255,255,.16); background:rgba(2,8,20,.6); color:var(--ti-texto,#e5edf5); font:inherit; padding:.4rem .6rem; cursor:pointer }
.pv-op.pv-bien{ border-color:#34d399; background:rgba(52,211,153,.12) } .pv-op.pv-mal{ border-color:#f87171; background:rgba(248,113,113,.1) }
.pv-saltar{ margin-top:.45rem; min-height:44px; background:none; border:0; color:#7dd3fc; font:inherit; font-weight:700; cursor:pointer; padding:0 }
.pv-fb{ margin:.5rem 0 .3rem } .pv-fb-bien b{ color:#34d399 } .pv-fb-mal b{ color:#f87171 }
.pv-ver{ width:100%; background:#fde68a; color:#1a1405; border-color:#fde68a; margin-top:.2rem }
.pv .katex{ position:relative }

.pv-ley{ display:flex; flex-wrap:wrap; gap:.25rem .8rem; margin:.5rem .1rem 0; font-size:.8rem; color:var(--ti-suave,#c3d0dd) }
.pv-ley > b{ flex-basis:100%; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ti-tenue,#8ba0b6) }
.pv-ley span{ display:inline-block }
.pv-ley i{ display:inline-block; width:18px; height:4px; border-radius:2px; vertical-align:middle; margin-right:.4rem }