/* Karma Tune — escritorio y iPad horizontal.
   Sistema: cada sección = una pieza principal grande (hero) + un panel lateral de controles, como el afinador.
   desk.js mueve los elementos a .dk-hero / .dk-side solo en pantallas grandes; en celular no cambia nada. */
@media (min-width:1000px){
  .view.scroll .inner{max-width:1240px}
  .ttl{font-size:40px;letter-spacing:-.02em;margin-bottom:6px}
  #learnSeg,#toolSeg{max-width:620px;margin-bottom:8px}
  #learnSeg button,#toolSeg button{font-size:15px;padding:9px 12px}

  .dk{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:28px;align-items:start;margin-top:4px}
  .dk-hero{position:sticky;top:12px;min-height:calc(100vh - 250px);border-radius:28px;background:var(--card);padding:32px;display:flex;flex-direction:column;justify-content:center;gap:18px;
    box-shadow:inset 0 0 0 1px var(--line),0 24px 60px rgba(0,0,0,.35)}
  html[data-theme="light"] .dk-hero{box-shadow:0 1px 2px rgba(0,0,0,.04),0 20px 50px rgba(0,0,0,.08)}
  .dk-hero.bare{background:none;padding:0;box-shadow:none;justify-content:flex-start}
  .dk-side{border-radius:24px;background:var(--card);padding:22px;display:flex;flex-direction:column;gap:14px;
    box-shadow:inset 0 0 0 1px var(--line)}
  html[data-theme="light"] .dk-side{box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 30px rgba(0,0,0,.06)}
  .dk-side .grp{margin:6px 0 -4px}
  /* dentro del panel, las tarjetas no llevan otra tarjeta encima */
  .dk-side :is(.k-howto,.k-circ,.k-keys2 button,.rhythms button,.roots button,.k-chips button,.k-mix button,.hud div,.k-ex,.k-help):not([aria-pressed="true"]):not([aria-checked="true"]){background:color-mix(in srgb,var(--ink) 5%,transparent)}
  html[data-theme="light"] .dk-side :is(.k-howto,.k-circ,.k-keys2 button,.rhythms button,.roots button,.k-chips button,.k-mix button,.hud div,.k-ex,.k-help):not([aria-pressed="true"]):not([aria-checked="true"]){background:#f5f5f7}

  /* ---------- Lecciones: carretera grande + panel de la lección ---------- */
  .dk-les>.dk-hero .stagebox{width:100%}
  .dk-les #hw{height:calc(100vh - 250px);min-height:520px}
  .dk-les .lesson h1{font-size:30px}
  .dk-les .dk-side .row{flex-wrap:wrap;gap:12px}
  .dk-les .transport{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
  .k-routes{grid-template-columns:repeat(2,minmax(0,340px))}
  .k-path{margin:0;padding:4px 0 10px}
  .k-node{width:160px;padding:14px}
  .k-node b{font-size:15px}
  .k-arex{grid-template-columns:repeat(4,minmax(0,170px))}

  /* ---------- Acordes: diagrama protagonista ---------- */
  .dk-ch .dk-hero{align-items:center}
  .dk-ch .chordbox,html[data-theme] .dk-ch .chordbox{background:transparent!important;box-shadow:none!important;padding:0;width:100%;display:flex;justify-content:center}
  .dk-ch .chordbox svg{max-width:520px;width:100%}
  .dk-ch .chordbox .cname{font-size:40px}
  .dk-ch .k-how{width:100%;max-width:520px}
  .dk-ch .k-hand{width:100%;max-width:520px}
  .dk-ch #chordNote{text-align:center}
  .dk-ch .roots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;overflow:visible;margin:0;padding:0}
  .dk-ch .roots button{width:auto;min-width:0;height:54px}
  .dk-ch #quals{display:grid!important;grid-template-columns:repeat(4,1fr);gap:6px;overflow:visible!important}
  .dk-ch #quals button{min-width:0}

  /* ---------- Círculos: práctica protagonista ---------- */
  .dk-circ .k-title h2{font-size:38px}
  .dk-circ .k-prog{gap:12px}
  .dk-circ .k-pc{padding:16px 6px 18px}
  .dk-circ .k-pc b{font-size:26px}
  .dk-circ .k-play{background:none;padding:0}
  .dk-circ .k-now{grid-template-columns:1fr 140px}
  .dk-circ .k-cur svg{max-width:420px}
  .dk-circ .k-next b{font-size:30px}
  .dk-circ .k-keys2{grid-template-columns:repeat(5,1fr)}
  .dk-circ .k-circs{grid-template-columns:1fr 1fr}

  /* ---------- Metrónomo: el tempo protagonista ---------- */
  .dk-metro .dk-hero{align-items:center;text-align:center;gap:26px}
  .dk-metro .bpm output{font-size:170px;line-height:.95}
  .dk-metro .bpmwrap{gap:44px}
  .dk-metro .rnd{width:64px;height:64px;font-size:28px}
  .dk-metro input{width:100%;max-width:560px}
  .dk-metro .pulses i{width:30px;height:30px}
  .dk-metro .metrobtns{width:100%;max-width:560px;display:grid;grid-template-columns:1fr 2fr;gap:12px}
  .dk-metro .rhythms{grid-template-columns:1fr 1fr}

  /* ---------- Pistas: el escenario protagonista ---------- */
  .dk-pistas .k-pstage{min-height:calc(100vh - 250px);padding:34px;justify-content:center;gap:22px}
  .dk-pistas .k-pstage-now b#pNow{font-size:140px}
  .dk-pistas .k-pstage-next b{font-size:36px}
  .dk-pistas .k-pstage-next{padding:16px 22px}
  .dk-pistas .k-prog2 i{font-size:18px;padding:14px 4px}
  .dk-pistas .k-psteps i{width:20px;height:20px}
  .dk-pistas .k-styles{grid-template-columns:1fr 1fr!important}
  .dk-pistas .k-keys2{grid-template-columns:repeat(5,1fr)}

  /* ---------- ¿Qué acorde es?: el anillo protagonista ---------- */
  .dk-det .k-det{min-height:calc(100vh - 250px);justify-content:center;padding:34px;gap:26px}
  .dk-det .k-det-ring{width:340px}
  .dk-det .k-det-ring b{font-size:100px}
  .dk-det .k-chroma{max-width:560px;height:90px}
  .dk-det .k-det .btn{max-width:420px}
  .dk-det .k-det-dia{background:none;padding:0}

  /* ---------- Canciones: tarjeta grande + cancionero y setlists en el panel ---------- */
  .dk-songs .k-week{min-height:calc(100vh - 250px);justify-content:flex-end;padding:40px}
  .dk-songs .k-week b{font-size:40px;max-width:560px;line-height:1.1}
  .dk-songs .k-week small{font-size:17px;max-width:520px}
  .dk-songs .k-week::after{width:64px;height:64px;right:32px;bottom:32px}
  .dk-songs .k-week::before{right:54px;bottom:51px;border-left-width:22px;border-top-width:12px;border-bottom-width:12px}
  .dk-songs .dk-side .k-rowh{margin-top:4px}

  /* ---------- Aprender › Escalas: diapasón a todo lo ancho ---------- */
  .esc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:36px;row-gap:12px}
  .esc>*{grid-column:1/-1;min-width:0}
  .k-board{margin:0;padding:4px 0}
  .k-board svg{width:100%;height:auto}
  .esc .k-how{grid-template-columns:minmax(0,320px) minmax(0,200px)}
  .esc .grp:has(+.k-circs){grid-column:1;grid-row:6}
  .esc .k-circs{grid-column:1;grid-row:7;grid-template-columns:repeat(3,1fr)}
  .esc .grp:has(+.roots){grid-column:2;grid-row:6}
  .esc .roots{grid-column:2;grid-row:7;flex-wrap:wrap;overflow:visible;margin:0;padding:0;align-content:flex-start}
  .esc>p.note2:last-child{grid-row:8}

  /* ---------- Perfil: progreso a la izquierda, logros y ajustes a la derecha ---------- */
  #view-me .k-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:36px;row-gap:12px;align-items:start;grid-auto-flow:row dense}
  #view-me .k-col>*{grid-column:1;min-width:0}
  #view-me .k-col>.ttl{grid-column:1/-1}
  #view-me .k-rowh:has(#meAch){grid-column:2;grid-row:2}
  #view-me .k-badges{grid-column:2;grid-row:3/span 8;grid-template-columns:repeat(4,1fr)}
  #view-me .k-col>.list{grid-column:1}
}