/* =========================================================
   Mi Piano — los primeros pasos
   ---------------------------------------------------------
   La sección de las ocho lecciones para quien empieza de cero.
   Ver docs/Los primeros pasos.md.

   REEMPLAZA a <main>, como el salón de juegos y el cancionero: una
   sección cada vez, nada se apila encima de nada.
   ========================================================= */

.pasos{display:none;background:var(--paper);padding:14px 18px 40px}
body.pasos-on .pasos{display:block}
body.pasos-on .layout main{display:none}

.pasoscuerpo{max-width:760px;margin:0 auto;text-align:center}
.pasoscuerpo h3{margin:14px 0 6px;font-size:1.45rem}
.pasoscuerpo p{font-size:1.05rem;line-height:1.7;margin:0 auto;max-width:56ch}
.pasoscuerpo .modalacts{justify-content:center;margin-top:22px}
.pasoscuerpo .modalacts .btn{flex:0 1 auto}

/* los puntitos de «dónde voy de ocho» */
.pp-barra{display:flex;gap:7px;justify-content:center;margin:4px 0 10px}
.pp-punto{width:9px;height:9px;border-radius:50%;background:#e0d9c9;
  transition:background .2s,transform .2s}
.pp-punto.hecho{background:var(--gold)}
.pp-punto.ahora{background:var(--ink);transform:scale(1.35)}
.pp-paso{display:block;font-size:.76rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--soft);margin-bottom:12px}

.pp-dibujo{background:#fff;border:1px solid #e3ded2;border-radius:16px;
  padding:26px 18px 16px;margin:0 auto;max-width:720px}

/* ---------- el teclado ilustrado ----------
   OJO: este NO es el teclado tocable del visor (js/teclado.js). Aquí
   hace falta poder resaltar grupos arbitrarios y colgar corchetes, y
   aquel tiene su digitación y su rango. Son dos dibujos distintos a
   propósito; no los unifiques. */
.pp-teclado{width:100%;height:auto;overflow:visible;margin-top:14px}
.pp-wk{fill:#fff;stroke:#c9c1af;stroke-width:1.5}
.pp-bk{fill:#2e2a22}
.pp-wk.marcada{fill:#fdf1cf;stroke:var(--gold);stroke-width:2.5}
.pp-wk.central{fill:var(--gold);stroke:#8a6516;stroke-width:3}
.pp-wk.grave{fill:#dfe7f3}
.pp-wk.agudo{fill:#fbe6ea}
.pp-bk.resalta{fill:#c8922a}
.pp-etq{font:600 15px system-ui,sans-serif;fill:#4a4336;text-anchor:middle}
.pp-corchete{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.pp-num{font:700 17px system-ui,sans-serif;fill:var(--ink);text-anchor:middle}

.pp-extremos{display:flex;justify-content:space-between;margin-top:10px;
  font-weight:700;color:var(--soft);font-size:.9rem}

/* ---------- las manos ---------- */
.pp-manos{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
.pp-mano{flex:0 1 240px}
.pp-mano svg{width:100%;height:auto}
.pp-mano b{display:block;margin-top:2px;font-size:.92rem;color:var(--soft)}
.pp-palma,.pp-dedo{fill:#f6e7d2;stroke:#d8bd96;stroke-width:2}
.pp-dnum{font:700 14px system-ui,sans-serif;fill:#6b5638;text-anchor:middle}

/* ---------- el pentagrama ---------- */
.pp-pentagrama{width:100%;height:auto}
.pp-linea{stroke:#2e2a22;stroke-width:1.6}
.pp-clave{font-size:46px;fill:#2e2a22;text-anchor:middle}
.pp-mano-et{font:600 13px system-ui,sans-serif;fill:var(--soft);text-anchor:end}
/* la línea adicional del Do central: la que lo pone JUSTO en medio */
.pp-suplem{stroke:#2e2a22;stroke-width:1.8}
.pp-nota{fill:var(--gold);stroke:#8a6516;stroke-width:2}
.pp-docentral{font:700 14px system-ui,sans-serif;fill:#8a6516;text-anchor:middle}

body.ppdlg-on .ppdlg{display:block}

/* ---------- móvil ---------- */
@media (max-width:640px){
  .pasos{padding:10px 12px 34px}
  .pp-dibujo{padding:20px 10px 10px;border-radius:14px}
  .pasoscuerpo h3{font-size:1.2rem}
  .pasoscuerpo p{font-size:.98rem}
  .pasoscuerpo .modalacts .btn{flex:1 1 auto}
  .pp-mano{flex:0 1 44%}
}