/* Teclea · animación de postura. Todas las reglas van bajo .pa / .pa-frame para no afectar al resto de la página. */
.pa-frame{display:block;width:100%;height:640px;margin:32px 0 40px;border:0;overflow:hidden}
.pa-frame-page{margin:0;background:#fff}
.pa-frame-page .pa{margin:0}
.pa{margin:32px 0 40px;display:flex;flex-direction:column;gap:14px;font-family:var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif)}
.pa *{box-sizing:border-box}
.pa .pa-stage{position:relative;width:100%;max-width:100%;aspect-ratio:16/9;border:1px solid var(--line, #DDE1DC);border-radius:12px;overflow:hidden;background:#F2F4F1;container-type:inline-size}
.pa .pa-svg{position:absolute;inset:0;width:100%;height:100%;display:block}

.pa .pa-typer{position:absolute;left:50%;top:2.5%;width:min(76%,640px);transform:translate(-50%,-8px);background:#fff;color:#1D1D1F;
  border:1px solid #DDE1DC;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.22);opacity:0;transition:opacity .35s,transform .35s;pointer-events:none;overflow:hidden}
.pa .pa-typer.pa-on{opacity:1;transform:translate(-50%,0)}
.pa .pa-bar{display:flex;align-items:center;gap:6px;padding:6px 10px;background:#F2F4F1;border-bottom:1px solid #DDE1DC;font-size:clamp(8px,1.5cqw,12px);color:#5B5F5A}
.pa .pa-dot{width:8px;height:8px;border-radius:50%;background:#CDD2CC}
.pa .pa-acc{margin-left:auto;font-variant-numeric:tabular-nums}
.pa .pa-txt{font-family:var(--mono, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace);font-size:clamp(9px,2.05cqw,18px);line-height:1.35;padding:1.4cqw 2cqw 1.6cqw;white-space:pre-wrap}
.pa .pa-done{color:#1D1D1F}
.pa .pa-todo{color:#9a9d97}
.pa .pa-caret{display:inline-block;width:2px;height:1.1em;margin:0 -1px;vertical-align:-.18em;background:#1F5D50;animation:pa-blink 1s steps(1) infinite}
@keyframes pa-blink{50%{opacity:0}}

.pa .pa-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.pa .pa-btn{font:inherit;font-size:14px;font-weight:600;padding:7px 16px;border:1px solid var(--line, #DDE1DC);border-radius:8px;background:#fff;color:var(--ink, #1D1D1F);cursor:pointer}
.pa .pa-primary{background:var(--accent, #1F5D50);border-color:var(--accent, #1F5D50);color:#fff}
.pa .pa-btn:focus-visible,.pa input:focus-visible,.pa .pa-steps li:focus-visible{outline:3px solid var(--accent-2, #E6A14A);outline-offset:2px}
.pa .pa-seek{flex:1;min-width:120px;accent-color:var(--accent, #1F5D50)}
.pa .pa-time{min-width:56px;text-align:right;font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink-soft, #5B5F5A)}
.pa .pa-toggle{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-soft, #5B5F5A);cursor:pointer}
.pa .pa-toggle input{width:16px;height:16px;margin:0;accent-color:var(--accent, #1F5D50)}

.static-page .pa .pa-steps,.pa .pa-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.static-page .pa .pa-steps li,.pa .pa-steps li{display:flex;align-items:flex-start;gap:10px;min-width:0;margin:0;padding:10px 12px;border-radius:10px;
  background:var(--bg-soft, #F2F4F1);color:var(--ink, #1D1D1F);font-size:14px;line-height:1.35;cursor:pointer;transition:background .25s,color .25s}
.pa .pa-steps li b{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--ink, #1D1D1F);font-size:12px;font-variant-numeric:tabular-nums}
.static-page .pa .pa-steps li.pa-on,.pa .pa-steps li.pa-on{background:var(--accent, #1F5D50);color:#fff}
.pa .pa-steps li.pa-on b{background:var(--accent-2, #E6A14A);color:#1D1D1F}
.pa .pa-foot{font-size:13px;line-height:1.5;color:var(--ink-soft, #5B5F5A)}

@media (max-width:760px){
  .pa{margin:24px 0 32px}
  .pa-frame{height:460px;margin:24px 0 32px}
  .pa .pa-time{display:none}
  .pa .pa-typer{width:92%}
  .pa .pa-bar{padding:3px 8px}
  .pa .pa-dot{width:6px;height:6px}
  .static-page .pa .pa-steps li:not(.pa-on),.pa .pa-steps li:not(.pa-on){display:none}
}