/* Kuerda — pages.css: tool pages, hero, jam machine, favorites */

/* ── SCALE CARDS ── */
.scales-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.scale-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  border-top: 3px solid var(--teal);
  padding: 1.5rem 1.4rem;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  position: relative; overflow: hidden;
}
.scale-card::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(255,107,53,.04), transparent 65%);
  opacity:0; transition:opacity .3s;
}
.scale-card:hover { border-color: rgba(0,212,180,.4); border-top-color: var(--teal); transform:translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(0,212,180,.08); }
.scale-card:hover::before { opacity:1; }
.scale-card.tier-1 { border-top-color:var(--accent); }
.scale-card.tier-2 { border-top-color:var(--teal); }
.scale-card.tier-3 { border-top-color:var(--purple); }
.scale-name { font-family:'Syne',sans-serif; font-size:1.25rem; color:var(--text); margin-bottom:.35rem; }
.scale-formula {
  font-family:DM Mono,monospace; font-size:.68rem; color:var(--gold);
  letter-spacing:.5px; margin-bottom:.8rem;
}
.scale-desc { font-size:.78rem; color:var(--muted); line-height:1.65; margin-bottom:.9rem; }
.scale-tags { display:flex; flex-wrap:wrap; gap:.35rem; }
.scale-tag {
  font-size:.56rem; letter-spacing:1px; text-transform:uppercase; font-weight:700;
  padding:.22rem .6rem; border-radius:20px;
  background:rgba(155,93,229,.1); border:1px solid rgba(155,93,229,.2); color:var(--purple);
  transition:all .2s;
}
.scale-card:hover .scale-tag { background:rgba(155,93,229,.18); }
.scale-rank {
  position:absolute; top:.9rem; right:1rem;
  font-family:'Syne',sans-serif; font-size:2.5rem;
  color:rgba(255,255,255,.04); line-height:1; pointer-events:none;
}

/* ── THEORY GRID + CARDS ── */
.theory-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:1.2rem; }
.theory-card {
  background: linear-gradient(160deg, var(--panel) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  overflow: hidden;
  transition: border-color .22s, transform .22s, box-shadow .22s;
  position: relative;
}
.theory-card:hover { border-color:rgba(0,212,180,.45); transform:translateY(-3px); box-shadow: 0 16px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(0,212,180,.07); }
.theory-badge {
  font-size:.52rem; letter-spacing:4px; text-transform:uppercase; color:rgba(255,255,255,.9);
  background: linear-gradient(90deg, rgba(0,212,180,.9) 0%, rgba(0,212,180,.6) 100%);
  display:inline-block; padding:.3rem .8rem;
  font-family:'Outfit',sans-serif; font-weight:800;
  border-radius:0;
}
.theory-icon { font-size:2.2rem; padding:1.4rem 1.5rem 0; }
.theory-name { font-family:'Syne',sans-serif; font-size:1.25rem; color:var(--text); padding:.5rem 1.5rem; }
.theory-body { padding:1rem 1.5rem 1.5rem; font-size:.82rem; color:var(--muted); line-height:1.85; }
.theory-body h5 {
  color:var(--gold); font-family:DM Mono,monospace; font-size:.75rem;
  letter-spacing:1.5px; text-transform:uppercase; margin:1rem 0 .5rem;
}
.theory-body ul { padding-left:1.3rem; }
.theory-body li { margin:.35rem 0; }
.highlight {
  background: rgba(0,212,180,.04);
  border-left: 2px solid rgba(0,212,180,.5);
  padding: .8rem 1.2rem; margin-top: 1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .8rem; color: var(--text2); line-height: 1.7;
  position: relative;
}

/* ── THEORY TABS ── */
.theory-tabs {
  display:flex !important;
  gap:.4rem;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:visible;
  margin-bottom:2rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--border);
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.15) transparent;
  -webkit-overflow-scrolling:touch;
  z-index: 10;
  /* NO mask-image — breaks overflow-x scroll in Chrome/Safari */
}
.theory-tabs::-webkit-scrollbar { height:3px; }
.theory-tabs::-webkit-scrollbar-track { background:transparent; }
.theory-tabs::-webkit-scrollbar-thumb { background:rgba(255,255,255,.18); border-radius:3px; }
.theory-tab {
  padding:.42rem .9rem;
  background:transparent;
  border:1px solid var(--border2); color:var(--muted);
  font-family:DM Mono,monospace; font-size:.65rem; cursor:pointer;
  border-radius:20px; letter-spacing:.7px; text-transform:uppercase;
  transition:all .2s; white-space:nowrap !important; flex-shrink:0 !important;
  min-width:max-content;
}
.theory-tab:hover { color:var(--text2); border-color:var(--border3); background:rgba(255,255,255,.03); }
.theory-tab.active {
  background:var(--teal); border-color:var(--teal);
  color:#000; font-weight:700; box-shadow:0 2px 16px rgba(0,229,204,.25);
}
.theory-panel { display:none; }
.theory-panel.visible { display:block; animation:fadeIn .25s ease; }

/* ── MODES TABLE ── */
.modes-table { width:100%; border-collapse:collapse; margin-top:1rem; font-size:.82rem; }
.modes-table th {
  background:var(--panel2); color:var(--accent); padding:.75rem 1rem;
  text-align:left; border:1px solid var(--border);
  font-size:.7rem; letter-spacing:1.5px; text-transform:uppercase;
}
.modes-table td { padding:.75rem 1rem; border:1px solid var(--border); color:var(--muted); vertical-align:top; }
.modes-table tr:hover td { background:var(--panel2); color:var(--text2); }
.modes-table td:first-child { color:var(--gold); font-weight:700; font-family:'Syne',sans-serif; font-size:1rem; }

/* ── MODOS TAB ESPECIAL ── */
.theory-tab-modos {
  background:linear-gradient(135deg,rgba(155,93,229,.18),rgba(245,197,24,.12)) !important;
  border-color:rgba(155,93,229,.5) !important;
  color:var(--gold) !important;
  font-weight:700 !important;
  position:relative;
}
.theory-tab-modos::before {
  content:'★';
  position:absolute;top:-.55rem;right:-.35rem;
  font-size:.55rem;color:var(--gold);
  background:var(--bg);border-radius:50%;
  width:1rem;height:1rem;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gold);line-height:1;text-align:center;padding-top:1px;
}
.theory-tab-modos:hover { 
  background:linear-gradient(135deg,rgba(155,93,229,.3),rgba(245,197,24,.2)) !important;
  border-color:var(--gold) !important;
  box-shadow:0 2px 16px rgba(245,197,24,.2) !important;
}
.theory-tab-modos.active {
  background:linear-gradient(135deg,var(--purple),rgba(245,197,24,.7)) !important;
  border-color:var(--purple) !important;
  color:#fff !important;
  box-shadow:0 2px 20px rgba(155,93,229,.35) !important;
}

/* ── MODE CARD PRO LOCK ── */
.mode-card-pro-overlay {
  position:absolute;inset:0;
  background:rgba(8,8,16,.82);
  backdrop-filter:blur(2px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:5;border-radius:3px;
  transition:opacity .2s;
}
.mode-card-pro-overlay:hover { background:rgba(8,8,16,.7); }
.mode-card-pro-badge {
  font-size:1.6rem;margin-bottom:.35rem;
}
.mode-card-pro-label {
  font-family:'DM Mono',monospace;font-size:.55rem;
  letter-spacing:2.5px;color:var(--gold);font-weight:700;margin-bottom:.5rem;
}
.mode-card-pro-btn {
  font-family:'Outfit',sans-serif;font-size:.65rem;font-weight:800;
  letter-spacing:1px;padding:.4rem 1.1rem;
  background:var(--gold);border:none;color:#000;
  cursor:pointer;border-radius:2px;text-transform:uppercase;
  transition:opacity .18s;
}
.mode-card-pro-btn:hover { opacity:.85; }
.mode-cards-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(285px,1fr));
  gap:1.1rem;
  margin:1.8rem 0;
}
.mode-card {
  background:var(--panel);
  border:1px solid var(--border);
  padding:0;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:transform .22s,box-shadow .22s,border-color .22s;
  border-radius:3px;
}
.mode-card:hover { transform:translateY(-3px); box-shadow:0 14px 44px rgba(0,0,0,.45); }
.mode-card-accent { position:absolute;top:0;left:0;right:0;height:3px; }
.mode-card-num {
  position:absolute;top:-.3rem;right:.7rem;
  font-family:'Bebas Neue',sans-serif;font-size:6.5rem;
  opacity:.05;line-height:1;pointer-events:none;color:#fff;
}
.mode-card-top { padding:1.4rem 1.4rem 1rem; }
.mode-card-tag {
  font-family:'DM Mono',monospace;font-size:.55rem;
  letter-spacing:2.5px;font-weight:700;
  text-transform:uppercase;margin-bottom:.45rem;
}
.mode-card-name {
  font-family:'Syne',sans-serif;font-size:1.55rem;font-weight:700;line-height:1;margin-bottom:.2rem;
}
.mode-card-phrase { font-size:.71rem;font-style:italic;opacity:.6;margin-bottom:.9rem; }
.mode-tone-row { display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem; }
.mode-tone-label { font-size:.58rem;color:var(--muted);flex-shrink:0;line-height:1; }
.mode-tone-track {
  flex:1;height:5px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;
}
.mode-tone-fill { height:100%;border-radius:3px;transition:width .6s cubic-bezier(.4,0,.2,1); }
.mode-formula-pill {
  font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.5px;
  background:rgba(0,0,0,.3);padding:.4rem .8rem;border-radius:2px;
  margin-bottom:.7rem;display:inline-block;
}
.mode-notes-row { font-size:.7rem;color:var(--muted);margin-bottom:.8rem; }
.mode-genre-row { display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.8rem; }
.mode-genre-chip {
  font-size:.58rem;padding:.18rem .55rem;border-radius:12px;font-weight:600;letter-spacing:.4px;
}
.mode-card-footer {
  border-top:1px solid rgba(255,255,255,.06);
  padding:.75rem 1.4rem;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(0,0,0,.15);
}
.mode-card-artist { font-size:.67rem;color:var(--muted);font-style:italic; }
.mode-card-btn {
  font-family:'Outfit',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:1.5px;
  background:transparent;border:1px solid;padding:.35rem .9rem;cursor:pointer;
  border-radius:2px;text-transform:uppercase;transition:all .18s;
}

/* ── TEORIA HERO ── */
.teoria-hero {
  background:var(--panel);border:1px solid var(--border);
  border-top:3px solid var(--teal);padding:2rem;
  margin-bottom:2rem;position:relative;overflow:hidden;border-radius:3px;
}
.teoria-hero::after {
  content:'𝄞';position:absolute;right:1.5rem;top:50%;
  transform:translateY(-50%);font-size:9rem;opacity:.035;pointer-events:none;color:#fff;
}
.teoria-hero-stats { display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.2rem; }
.teoria-hero-stat {
  background:rgba(0,0,0,.25);border:1px solid var(--border);
  padding:.6rem 1.1rem;text-align:center;min-width:90px;border-radius:2px;
}
.teoria-hero-stat-num {
  font-family:'Syne',sans-serif;font-size:1.5rem;font-weight:700;
  color:var(--teal);line-height:1;
}
.teoria-hero-stat-label {
  font-size:.58rem;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-top:.25rem;
}

/* ── MODE DETAIL PANEL ENHANCED ── */
.mode-detail-2col { display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.4rem; }
.mode-detail-box {
  background:var(--bg);border:1px solid rgba(255,255,255,.07);padding:1rem;border-radius:2px;
}
.mode-detail-box-label {
  font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:2px;
  font-weight:700;text-transform:uppercase;margin-bottom:.5rem;
}
.mode-detail-prog-row {
  display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem;
}
.mode-detail-chord {
  font-family:'DM Mono',monospace;font-size:.82rem;font-weight:700;
  padding:.35rem .7rem;border:1px solid;border-radius:2px;
}
@media(max-width:540px) {
  .mode-cards-grid { grid-template-columns:1fr; }
  .mode-detail-2col { grid-template-columns:1fr; }
}

/* ── IMPROV ── */
.improv-steps { counter-reset:step; display:grid; gap:.9rem; }
.improv-step {
  display:grid; grid-template-columns:56px 1fr; gap:1rem; align-items:start;
  background:var(--panel); border:1px solid var(--border);
  padding:1.2rem 1.4rem; transition:all .22s; border-radius:3px;
}
.improv-step:hover { border-color:var(--gold); transform:translateX(4px); }
.step-num { font-family:'Syne',sans-serif; font-size:2.8rem; color:rgba(255,107,53,.2); line-height:1; }
.step-title { font-family:'Syne',sans-serif; font-size:1.15rem; color:var(--gold); margin-bottom:.3rem; }
.step-body { font-size:.82rem; color:var(--muted); line-height:1.7; }

/* ── PENTATONIC BOXES ── */
.penta-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1rem; margin:1.5rem 0; }
.penta-box {
  background:var(--panel); border:1px solid var(--border); padding:1rem .6rem;
  text-align:center; cursor:pointer; transition:all .22s; border-radius:3px;
}
.penta-box:hover, .penta-box.active { border-color:var(--accent); background:rgba(255,107,53,.07); }
.penta-box-title { font-family:'Syne',sans-serif; font-size:1rem; color:var(--accent); }
.penta-mini { font-family:DM Mono,monospace; font-size:.6rem; color:var(--muted); margin-top:.5rem; white-space:pre; line-height:1.8; }

/* ── LEARN MORE BUTTON ── */
.learn-more-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1rem; padding: .45rem 1.1rem;
  background: transparent;
  border: 1px solid rgba(0,212,180,.3);
  color: var(--teal);
  font-family: 'Outfit', sans-serif; font-size: .72rem;
  font-weight: 700; letter-spacing: .8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .18s cubic-bezier(.16,1,.3,1);
}
.learn-more-btn:hover { background:rgba(0,229,204,.08); border-color:var(--teal); transform:translateX(3px); }

/* ── TIPS GRID ── */
.tips-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; }
.tip-card {
  background:var(--panel); border-left:3px solid var(--teal);
  padding:1.4rem 1.6rem; transition:all .22s; border-radius:0 6px 6px 0;
  position:relative; overflow:hidden;
}
.tip-card::after {
  content:''; position:absolute; right:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,transparent,rgba(0,229,204,.2),transparent);
}
.tip-card:hover { transform:translateY(-3px); box-shadow:0 8px 32px rgba(0,0,0,.35); }
.tip-card.pro  { border-left-color:var(--gold); }
.tip-card.pro::after  { background:linear-gradient(180deg,transparent,rgba(245,197,24,.2),transparent); }
.tip-card.warn { border-left-color:var(--accent); }
.tip-card.warn::after { background:linear-gradient(180deg,transparent,rgba(255,77,0,.2),transparent); }
.tip-num  { font-family:'Syne',sans-serif; font-size:2.2rem; color:rgba(255,255,255,.04); float:right; line-height:1; }
.tip-label { display:inline-block; font-family:'DM Mono',monospace; font-size:.44rem; letter-spacing:2px; font-weight:700; padding:.18rem .55rem; border-radius:20px; margin-bottom:.55rem; }
.tip-label.free  { background:rgba(0,212,170,.1); color:var(--teal); border:1px solid rgba(0,212,170,.25); }
.tip-label.pro   { background:rgba(245,197,24,.1); color:var(--gold); border:1px solid rgba(245,197,24,.25); }
.tip-label.warn  { background:rgba(255,77,0,.1);   color:var(--accent); border:1px solid rgba(255,77,0,.25); }
.tip-title { font-family:'Syne',sans-serif; font-size:1.1rem; color:var(--teal); margin-bottom:.5rem; line-height:1.3; }
.tip-card.pro  .tip-title { color:var(--gold); }
.tip-card.warn .tip-title { color:var(--accent); }
.tip-text  { font-size:.82rem; color:var(--muted); line-height:1.75; }
.tip-quote { margin:1rem 0 .5rem; padding:.7rem 1rem; border-left:2px solid var(--teal); background:rgba(0,212,170,.05); font-family:'Syne',sans-serif; font-size:.85rem; color:var(--text); font-style:italic; border-radius:0 4px 4px 0; }
.tip-card.pro  .tip-quote { border-left-color:var(--gold); background:rgba(245,197,24,.05); }
.tip-card.warn .tip-quote { border-left-color:var(--accent); background:rgba(255,77,0,.05); }
.tip-exercise { margin-top:.9rem; padding:.7rem 1rem; background:var(--bg); border:1px solid var(--border2); border-radius:4px; }
.tip-exercise-label { font-family:'DM Mono',monospace; font-size:.44rem; letter-spacing:2px; color:var(--purple); font-weight:700; margin-bottom:.4rem; }
.tip-exercise-text  { font-size:.76rem; color:var(--text); line-height:1.7; }
.tip-refs  { margin-top:.7rem; font-size:.7rem; color:var(--muted2); font-style:italic; }

/* ── FRETBOARD ── */
.fret-controls { display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem; align-items:flex-end; }
.fret-select {
  background:var(--panel2); border:1px solid var(--border2); color:var(--text);
  font-family:DM Mono,monospace; font-size:.78rem; padding:.55rem .9rem;
  border-radius:3px; outline:none; cursor:pointer; transition:border-color .2s;
}
.fret-select:focus { border-color:var(--teal); }
.btn-play {
  padding:.55rem 1.4rem; background:var(--teal); border:none; color:#000;
  font-family:'Outfit',sans-serif; font-weight:800;
  font-size:.7rem; letter-spacing:2px; cursor:pointer; border-radius:3px; transition:all .2s;
}
.btn-play:hover { background:var(--teal2); box-shadow:0 4px 20px rgba(0,229,204,.3); }
.btn-stop {
  padding:.55rem 1.2rem; background:transparent; border:1px solid rgba(255,107,53,.4);
  color:var(--accent); font-family:DM Mono,monospace; font-size:.7rem;
  letter-spacing:2px; cursor:pointer; border-radius:3px; transition:all .2s;
}
.btn-stop:hover { background:rgba(255,107,53,.1); }
.btn-lefty {
  padding:.55rem 1rem; background:transparent; border:1px solid var(--border3);
  color:var(--muted); font-family:DM Mono,monospace; font-size:.7rem;
  letter-spacing:2px; cursor:pointer; border-radius:3px; transition:all .2s;
}
.btn-lefty.active { background:var(--purple); border-color:var(--purple); color:#fff; }
.fretboard-wrap { overflow-x:auto; padding-bottom:2rem; }
.fretboard {
  position:relative; width:920px; height:180px;
  background:linear-gradient(180deg,#1f1000,#170e00); border-radius:4px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
}
.nut { background:linear-gradient(180deg,#c8a870,#8a6840); }
.fret-line { background:linear-gradient(180deg,rgba(200,168,112,.6),rgba(200,168,112,.3)); }
.fret-line.double { background:linear-gradient(180deg,rgba(245,197,24,.8),rgba(245,197,24,.4)); }
.fret-number { font-size:.55rem; color:rgba(255,255,255,.25); transform:translateX(-50%); font-family:DM Mono,monospace; }
.inlay { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.04); }
.scale-info-bar {
  margin-top:1.2rem; padding:.9rem 1.2rem;
  background:rgba(255,107,53,.05); border:1px solid rgba(255,107,53,.12);
  border-left:3px solid var(--accent); font-size:.78rem; color:var(--text2);
  line-height:1.7; min-height:2.5rem; border-radius:0 3px 3px 0;
}

/* ── AUDIO / SCALE BUTTONS ── */
.audio-section { background:var(--panel); border:1px solid var(--border); padding:2rem; border-radius:3px; }
.audio-title { font-family:'Syne',sans-serif; font-size:1.5rem; color:var(--text); margin-bottom:1rem; }
.audio-controls { display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }
.scale-btn {
  padding:.45rem 1rem; background:transparent; border:1px solid var(--border2);
  color:var(--text2); font-family:DM Mono,monospace; font-size:.72rem;
  cursor:pointer; border-radius:3px; transition:all .2s;
}
.scale-btn:hover, .scale-btn.playing { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 2px 12px rgba(255,107,53,.35); }
canvas#viz { width:100%; height:80px; background:var(--bg); border:1px solid var(--border); margin-top:1rem; display:block; border-radius:3px; }

/* ── CIRCLE OF FIFTHS ── */
.circle-wrap { display:flex; justify-content:center; margin:2rem 0; }
canvas#circle { cursor:pointer; max-width:100%; filter:drop-shadow(0 8px 32px rgba(0,0,0,.5)); }
#circleInfo {
  min-height:4rem; background:var(--panel); border:1px solid var(--border);
  border-left:3px solid var(--gold); padding:1rem 1.5rem;
  font-size:.85rem; color:var(--text2); line-height:1.7;
  border-radius:0 3px 3px 0; margin-top:1rem;
}

/* ══════════════════════════════════════════════════════
   KUERDA — HERO v2  Editorial · Premium · Branded
══════════════════════════════════════════════════════ */

/* ── HERO CONTAINER ── */
#heroSection {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(0,212,180,.10) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(255,107,53,.09) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(139,92,246,.06) 0%, transparent 60%),
    #07090c !important;
}

/* ── ANIMATED GRID OVERLAY ── */
#heroSection::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(0,212,180,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,180,.018) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: heroGridDrift 30s linear infinite;
  opacity: .8;
}
/* Forzamos animation:none para liberar la capa inmediatamente al desaparecer. */

@keyframes heroGridDrift {
  from { background-position: 0 0; }
  to   { background-position: 60px 60px; }
}

/* ── HERO ABOVE-FOLD ── */
.hero-above-fold {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 7rem 5vw 3rem;
  position: relative; z-index: 2;
  max-width: 1000px;
}

/* ── BRAND MARK ── */
.hero-brand-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 2.5rem;
  animation: heroFadeUp .7s cubic-bezier(.16,1,.3,1) both;
  animation-delay: .1s;
}
.hero-brand-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 16px rgba(0,212,180,.7), 0 0 32px rgba(0,212,180,.3);
  animation: heroPulse 3s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes heroPulse {
  0%,100% { box-shadow: 0 0 12px rgba(0,212,180,.5); transform: scale(1); }
  50%     { box-shadow: 0 0 28px rgba(0,212,180,.9); transform: scale(1.2); }
}
.hero-brand-label {
  font-family: 'DM Mono', monospace;
  font-size: .6rem; letter-spacing: 4px;
  color: var(--muted); text-transform: uppercase;
}

/* ── MAIN TITLE — KUERDA ── */
.hero-kuerda {
  font-family: 'Bebas Neue', serif;
  font-size: clamp(6rem, 18vw, 16rem);
  line-height: .85;
  letter-spacing: -2px;
  color: var(--text);
  position: relative;
  animation: heroFadeUp .8s cubic-bezier(.16,1,.3,1) both;
  animation-delay: .2s;
  user-select: none;
}
/* Accent on the K */
.hero-kuerda-k {
  background: linear-gradient(160deg, #FFD166 0%, #FF8C42 40%, #FF5A1F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 40px rgba(255,107,53,.55)) drop-shadow(0 0 100px rgba(255,90,31,.25));
  display: inline-block;
  animation: heroKFlicker 6s ease-in-out infinite;
  animation-delay: 2s;
}
@keyframes heroKFlicker {
  0%,90%,100% { filter: drop-shadow(0 0 32px rgba(255,107,53,.5)) drop-shadow(0 0 80px rgba(255,90,31,.2)); }
  92%         { filter: drop-shadow(0 0 60px rgba(255,107,53,.9)) drop-shadow(0 0 120px rgba(255,90,31,.4)); }
  94%         { filter: drop-shadow(0 0 32px rgba(255,107,53,.5)) drop-shadow(0 0 80px rgba(255,90,31,.2)); }
  96%         { filter: drop-shadow(0 0 48px rgba(255,107,53,.7)) drop-shadow(0 0 100px rgba(255,90,31,.3)); }
}

/* ── TAGLINE ── */
.hero-tagline {
  font-family: 'Syne', sans-serif;
  font-style: italic;
  font-size: clamp(1.1rem, 2.8vw, 1.8rem);
  color: var(--gold);
  letter-spacing: 1px;
  margin-top: .8rem;
  opacity: .9;
  animation: heroFadeUp .8s cubic-bezier(.16,1,.3,1) both;
  animation-delay: .35s;
}

/* ── STATS ROW ── */
.hero-stats {
  display: flex;
  gap: 2rem;
  margin-top: 2.5rem;
  animation: heroFadeUp .8s cubic-bezier(.16,1,.3,1) both;
  animation-delay: .48s;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.hero-stat-num {
  font-family: 'Bebas Neue', serif;
  font-size: 2.2rem;
  color: var(--text);
  line-height: 1;
  letter-spacing: 1px;
}
.hero-stat-label {
  font-family: 'DM Mono', monospace;
  font-size: .52rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-stat-divider {
  width: 1px;
  background: var(--border2);
  align-self: stretch;
}

/* ── CTA BUTTONS ── */
.hero-ctas {
  display: flex;
  gap: 1rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
  align-items: center;
  animation: heroFadeUp .8s cubic-bezier(.16,1,.3,1) both;
  animation-delay: .6s;
}
.hero-cta-primary {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: 1rem 2.6rem;
  background: var(--teal);
  border: none;
  color: #000;
  font-family: 'Outfit', sans-serif;
  font-weight: 800; font-size: .82rem;
  letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer; border-radius: 6px;
  box-shadow: 0 4px 24px rgba(0,212,180,.4), 0 0 0 0 rgba(0,212,180,.2);
  transition: all .22s cubic-bezier(.16,1,.3,1);
  position: relative; overflow: hidden;
}
.hero-cta-primary::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.12), transparent);
  opacity: 0; transition: opacity .2s;
}
.hero-cta-primary:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 12px 48px rgba(0,212,180,.5);
}
.hero-cta-primary:hover::before { opacity: 1; }
.hero-cta-secondary {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1rem 2.6rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-weight: 700; font-size: .82rem;
  letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer; border-radius: 6px;
  transition: all .22s cubic-bezier(.16,1,.3,1);
}
.hero-cta-secondary:hover {
  border-color: rgba(255,255,255,.35);
  color: #fff;
  background: rgba(255,255,255,.08);
  transform: translateY(-2px);
}

/* ── SOCIAL PROOF BAR ── */
.hero-social-proof {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.8rem;
  padding: .45rem 1rem .45rem .7rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 99px;
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: .3px;
  color: var(--muted);
  animation: heroFadeUp .6s ease both;
  animation-delay: .9s;
}
.hsp-avatars { display: flex; align-items: center; margin-right: .1rem; }
.hsp-text strong { color: var(--teal); font-weight: 700; }
.hsp-sep { opacity: .25; margin: 0 .1rem; }
.hsp-flags { font-size: .82rem; letter-spacing: -1px; line-height: 1; }

/* ── TRANSPOSITOR CHORD PICKER ── */
.tp-picker-group {
  display: flex; align-items: flex-start; gap: .5rem;
  margin-bottom: .4rem;
}
.tp-pg-label {
  font-family: 'DM Mono', monospace;
  font-size: .48rem; letter-spacing: 1.5px;
  color: var(--muted2); padding-top: .45rem;
  white-space: nowrap; width: 56px; flex-shrink: 0;
}
.tp-chord-btns {
  display: flex; flex-wrap: wrap; gap: .28rem;
}
.tp-chord-pill {
  font-family: 'DM Mono', monospace;
  font-size: .68rem; padding: .28rem .6rem;
  background: var(--panel); border: 1px solid var(--border2);
  color: var(--muted); cursor: pointer;
  border-radius: 3px; transition: all .15s;
  user-select: none;
}
.tp-chord-pill:hover {
  border-color: var(--teal); color: var(--teal);
}
.tp-chord-pill.tp-selected {
  background: rgba(0,229,204,.12);
  border-color: var(--teal); color: var(--teal);
  font-weight: 700;
}
.tp-clear-btn {
  font-family: 'DM Mono', monospace; font-size: .6rem;
  background: transparent; border: 1px solid var(--border2);
  color: var(--muted2); padding: .28rem .7rem;
  cursor: pointer; border-radius: 3px;
  transition: all .15s;
}
.tp-clear-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── LP CONTINUE CTA ── */

.lp-continue-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.4rem;
  background: rgba(0,229,204,.04);
  border: 1px solid rgba(0,229,204,.18);
  border-left: 3px solid var(--teal);
  cursor: pointer;
  transition: background .18s, border-color .18s;
  border-radius: 0 4px 4px 0;
}
.lp-continue-card:hover {
  background: rgba(0,229,204,.09);
  border-color: rgba(0,229,204,.4);
}
.lp-continue-label {
  font-family: 'DM Mono', monospace;
  font-size: .52rem;
  letter-spacing: 2px;
  color: var(--teal);
  margin-bottom: .3rem;
  text-transform: uppercase;
}
.lp-continue-name {
  font-family: 'Outfit', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
}
.lp-continue-arrow {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  color: var(--teal);
  white-space: nowrap;
  flex-shrink: 0;
  opacity: .85;
}

/* ── LICK GENERATOR v2 CARD ─────────────────────────────────── */
.lk-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--teal);
  border-radius: 4px;
  overflow: hidden;
}
.lk-card-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: .85rem 1.4rem;
  background: rgba(0,229,204,.04);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap; gap: .5rem;
}
.lk-card-meta {
  font-family: 'DM Mono', monospace;
  font-size: .6rem; letter-spacing: 1.5px; color: var(--teal);
  font-weight: 700;
}
.lk-diff { font-weight: 700; }
/* ── SCALE FRETBOARD BUTTON ── */

.scale-fret-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: 'DM Mono', monospace; font-size: .58rem;
  letter-spacing: .8px; padding: .3rem .65rem;
  background: rgba(0,229,204,.07);
  border: 1px solid rgba(0,229,204,.22);
  color: var(--teal); cursor: pointer;
  border-radius: 3px; transition: all .18s;
  white-space: nowrap;
}
.scale-fret-btn:hover {
  background: rgba(0,229,204,.16);
  border-color: rgba(0,229,204,.5);
}
.scale-fret-btn svg { flex-shrink: 0; }

/* ── PRO BENEFIT CHIPS ── */

.pro-benefit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .5rem;
}
.pro-benefit-chips span {
  font-family: 'DM Mono', monospace;
  font-size: .52rem;
  letter-spacing: .8px;
  padding: .18rem .55rem;
  background: rgba(0,229,204,.07);
  border: 1px solid rgba(0,229,204,.2);
  border-radius: 2px;
  color: var(--teal);
}

/* ── TK-CARD PRO TEASER (gold tint) ── */
.tk-card-pro-teaser {
  border-color: rgba(245,197,24,.25) !important;
}
.tk-card-pro-teaser:hover {
  border-color: rgba(245,197,24,.5) !important;
  background: rgba(245,197,24,.05) !important;
}

/* ── LIGHT MODE OVERRIDES ── */
body.light-mode .hero-social-proof {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.08);
}
body.light-mode .lp-continue-card {
  background: rgba(0,180,160,.05);
}

/* ── SCROLL INDICATOR ── */

.hero-scroll-hint {
  position: absolute;
  bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  animation: heroFadeUp .6s ease both, heroScrollBounce 2.5s ease-in-out infinite;
  animation-delay: 1.2s, 2s;
  opacity: 0;
  cursor: pointer;
}
@keyframes heroScrollBounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%     { transform: translateX(-50%) translateY(6px); }
}
.hero-scroll-hint span {
  font-family: 'DM Mono', monospace; font-size: .5rem;
  letter-spacing: 3px; color: var(--muted2); text-transform: uppercase;
}
.hero-scroll-arrow {
  width: 20px; height: 20px;
  border-right: 1.5px solid var(--muted2);
  border-bottom: 1.5px solid var(--muted2);
  transform: rotate(45deg) translateX(-50%);
}

/* ── SCROLL DOWN ANIMATION (botón CTA) ── */
.hero-cta-primary:active {
  transform: scale(0.93) translateY(3px) !important;
  box-shadow: 0 2px 10px rgba(0,212,180,.25) !important;
  transition: transform .08s ease, box-shadow .08s ease !important;
}
@keyframes ctaShockwave {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.06); opacity: .8; }
  100% { transform: scale(1);   opacity: 1; }
}
.cta-fired {
  animation: ctaShockwave .35s cubic-bezier(.36,.07,.19,.97) !important;
}

/* ── HERO TOOLS SECTION ── */
.hero-tools-section {
  position: relative; z-index: 2;
  padding: 4rem 5vw 5rem;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}
.hero-tools-header {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}
.hero-tools-title {
  font-family: 'Bebas Neue', 'Syne', sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  color: var(--text);
  letter-spacing: 2px;
  line-height: 1;
  text-transform: uppercase;
}
.hero-tools-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(0,212,180,.3), var(--border2) 30%, transparent);
}

/* ── FEATURED TOOL CARD ── */
.tk-featured {
  grid-column: span 2;
  background: var(--panel);
  border: 1px solid rgba(0,212,180,.18);
  border-left: 3px solid var(--teal);
  border-radius: 16px;
  padding: 2rem 2.2rem;
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tk-featured:hover {
  border-color: rgba(0,212,180,.4);
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0,0,0,.4), 0 0 0 1px rgba(0,212,180,.1);
}
.tk-featured::after {
  content: '';
  position: absolute;
  right: -60px; top: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,180,.07), transparent 70%);
  pointer-events: none;
}
.tk-featured .tk-card-name {
  font-size: 1.1rem !important;
  color: var(--text) !important;
}
.tk-featured .tk-card-desc {
  font-size: .8rem !important;
  max-width: 320px;
}
.tk-featured-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'DM Mono', monospace; font-size: .52rem;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--teal); margin-bottom: 1rem;
}
/* ── Category badges on tk-cards ── */
.tk-cat-badge {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: .48rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: .1rem .35rem;
  border-radius: 4px;
  font-weight: 600;
}
.tk-cat-exp { background: rgba(0,212,180,.12); color: var(--teal); }
.tk-cat-pra { background: rgba(108,99,255,.12); color: var(--purple); }
.tk-cat-cre { background: rgba(245,197,24,.12); color: var(--gold); }
.tk-cat-ana { background: rgba(255,107,53,.12); color: var(--accent); }

/* ── tk-featured with accent color (ANALIZAR cards) ── */
.tk-featured[style*="--tk-color:var(--accent)"] {
  border-color: rgba(255,107,53,.2);
  border-left-color: var(--accent);
}
.tk-featured[style*="--tk-color:var(--accent)"]::after {
  background: radial-gradient(circle, rgba(255,107,53,.06), transparent 70%);
}
.tk-featured[style*="--tk-color:var(--accent)"] .tk-featured-tag {
  color: var(--accent);
}
.tk-featured[style*="--tk-color:var(--accent)"] .tk-featured-tag::before {
  background: var(--accent);
}
.tk-featured[style*="--tk-color:var(--accent)"]:hover {
  border-color: rgba(255,107,53,.4);
  box-shadow: 0 16px 48px rgba(0,0,0,.4), 0 0 0 1px rgba(255,107,53,.1);
}



.tk-featured-tag::before {
  content: '';
  width: 18px; height: 1px;
  background: var(--teal);
}

/* ── TOOLKIT GRID REDESIGNED ── */
.toolkit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin: 0 0 1.5rem 0;
}

/* ── SECTION SEPARATOR ── */
.hero-section-sep {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border2), transparent);
  margin: 4rem 0 0;
}

/* ── ANIMATIONS ── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── LIGHT MODE HERO ── */
body.light-mode #heroSection {
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(0,180,160,.06) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(255,107,53,.06) 0%, transparent 50%),
    #eef5f4 !important;
}
body.light-mode #heroSection::before {
  background:
    linear-gradient(rgba(0,150,130,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,150,130,.014) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .5;
}
/* ── Light mode hero — cobertura completa ── */
body.light-mode .hero-kuerda         { color: #111; }
body.light-mode .hero-kuerda-k       { color: var(--accent); }
body.light-mode .hero-brand-label    { color: #666; }
body.light-mode .hero-brand-dot      { box-shadow: 0 0 16px rgba(212,58,14,.5); }
body.light-mode .hero-stat-num       { color: #111; }
body.light-mode .hero-stat-label     { color: #777; }
body.light-mode .hero-stat-divider   { background: rgba(0,0,0,.15); }
body.light-mode .hero-tagline        { color: #8a6a10; }
body.light-mode .hero-cta-secondary  {
  border-color: rgba(0,0,0,.18);
  color: #333;
  background: rgba(0,0,0,.04);
}
body.light-mode .hero-cta-secondary:hover {
  border-color: rgba(0,0,0,.35);
  color: #111;
  background: rgba(0,0,0,.08);
}
body.light-mode .hero-scroll-hint span { color: #999; }
body.light-mode .hero-scroll-arrow  { border-color: #aaa; }
body.light-mode .hero-tools-title   { color: #111; }
body.light-mode .hero-tools-line    { background: linear-gradient(90deg, rgba(0,0,0,.15), transparent); }
body.light-mode .hero-section-sep   { background: linear-gradient(90deg, transparent, rgba(0,0,0,.12), transparent); }
body.light-mode .tk-featured {
  background: rgba(255,255,255,0.95) !important;
  border-color: rgba(212,58,14,.3) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.08) !important;
}
body.light-mode .tk-featured-tag  { color: var(--accent); }
body.light-mode .tk-featured .tk-card-name { color: #111; }
body.light-mode .tk-featured .tk-card-desc { color: #444; }
body.light-mode .tk-featured svg  { stroke: var(--accent) !important; }
body.light-mode .hero-tools-section { color: #111; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .hero-kuerda { font-size: clamp(5rem, 22vw, 8rem); letter-spacing: -1px; }
  .hero-stats { gap: 1.2rem; }
  .hero-stat-num { font-size: 1.6rem; }
  .tk-featured { grid-column: span 1; }
  .hero-ctas { flex-direction: column; }
  .hero-cta-primary, .hero-cta-secondary { justify-content: center; }
  .hero-above-fold { padding: 0 1.5rem; }
  .hero-tools-section { padding: 4rem 1.5rem; }
}


/* ── Hero show/hide via class (no !important fight) ── */
#heroSection.hero-hidden {
  display: none !important;
}

/* Theme toggle flotante — oculto cuando la sidebar está activa (tiene el suyo propio) */
/* 
.transpose-keys {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .5rem;
}
.transpose-key-btn {
  padding: .35rem .6rem;
  font-size: .72rem;
  font-family: 'DM Mono', monospace;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text2);
  cursor: pointer;
  border-radius: 3px;
  transition: all .15s;
  min-width: 36px;
  text-align: center;
}
.transpose-key-btn.active {
  background: var(--teal);
  color: #000;
  border-color: var(--teal);
  font-weight: 700;
}
.transpose-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'DM Mono', monospace;
  font-size: .82rem;
  padding: .8rem;
  resize: vertical;
  border-radius: 2px;
  margin-bottom: .6rem;
  box-sizing: border-box;
}
.transpose-btn-row {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.transpositor-wrap { padding: 1.5rem; }

@media (max-width: 700px) {
  .transpose-grid {
    grid-template-columns: 1fr !important;
    gap: 1.2rem;
  }
  .transpositor-wrap {
    padding: 1rem;
  }
  .transpose-input {
    font-size: .8rem;
  }
  .transpose-btn-row button {
    width: 100%;
    padding: .7rem;
    font-size: .85rem;
  }
}

/* ── Detector de Tonalidad ── */
.kd-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 2rem;
  align-items: start;
  max-width: 1100px;
}

@media (max-width: 768px) {
  .kd-layout {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  /* On mobile: suggestions panel goes BELOW the detector */
  .kd-layout > div:last-child {
    order: 2;
  }
  .kd-layout > div:first-child {
    order: 1;
  }
  /* Chord suggestion buttons — bigger tap targets */
  #kdSugMaj button, #kdSugMin button,
  #kdSugDom button, #kdSugExt button {
    padding: .5rem .7rem !important;
    font-size: .78rem !important;
    min-height: 36px;
  }
  /* Detect button full width on mobile */
  #page-keydetector .tool-input-group > div:first-of-type {
    flex-direction: column;
  }
  #page-keydetector .tool-input-group > div:first-of-type button {
    width: 100%;
    padding: .75rem;
  }
  #kdInput {
    font-size: .9rem !important;
  }
  /* Chord pills wrap better */
  #kdChordPills {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .kd-layout {
    gap: .8rem;
  }
  /* KD result cards stack cleanly */
  #kdResult > div {
    font-size: .8rem !important;
  }
}

/* ── Freemium gate overlay ── */
.pro-gate { position: relative; overflow: hidden; }
.pro-gate-blur { filter: blur(4px); pointer-events: none; user-select: none; }
.pro-gate-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  cursor: pointer;
  z-index: 10;
  padding: 1rem;
  text-align: center;
}
.pro-gate-overlay-icon { font-size: 1.4rem; }
.pro-gate-overlay-label {
  font-family: 'DM Mono', monospace;
  font-size: .55rem;
  letter-spacing: 3px;
  color: var(--gold);
  background: rgba(245,197,24,.1);
  border: 1px solid rgba(245,197,24,.25);
  padding: .2rem .7rem;
  border-radius: 20px;
}
.pro-gate-overlay-msg {
  font-size: .72rem;
  color: var(--text2);
  line-height: 1.5;
  max-width: 180px;
}

/* ── Progresiones locked buttons ── */
.pg-locked {
  opacity: .4 !important;
  cursor: pointer !important;
}

@media (max-width: 600px) {
  /* Progresiones controls stack */
  #page-progresiones .tool-panel > div[style*="grid"] {
    grid-template-columns: 1fr 1fr !important;
  }
  #pgStyleBtns button {
    font-size: .7rem !important;
    padding: .4rem .7rem !important;
  }
}


@media (max-width: 600px) {
  .kd-detect-btn { width: 100%; margin-top: .5rem; }
  #page-keydetector .tool-input-group > div { flex-direction: column !important; }
  .kd-layout > div:nth-child(2) { font-size: .8rem; }
  #kdSugMaj button, #kdSugMin button, #kdSugDom button, #kdSugExt button {
    padding: .45rem .65rem !important;
    min-height: 34px !important;
  }
}


/* ══ ACORDES: Panel Favoritos ════════════════════════════════ */
#chordFavsPanel {
  margin-bottom: 1.4rem;
  border: 1px solid rgba(245,197,24,.22);
  border-left: 3px solid var(--gold);
  border-radius: 4px; overflow: hidden;
}
.cfp-hdr {
  display:flex; align-items:center; gap:.55rem;
  padding:.65rem .95rem; cursor:pointer; user-select:none;
  background:rgba(245,197,24,.04);
}
.cfp-hdr:hover { background:rgba(245,197,24,.08); }
.cfp-hdr-title {
  font-family:'DM Mono',monospace; font-size:.58rem;
  letter-spacing:2px; font-weight:700; color:var(--gold);
}
.cfp-hdr-count {
  font-family:'DM Mono',monospace; font-size:.52rem;
  background:rgba(245,197,24,.15); border-radius:10px;
  padding:.1rem .45rem; color:var(--gold);
}
.cfp-chevron { margin-left:auto; color:var(--muted); font-size:.75rem; transition:transform .2s; }
#chordFavsPanel.cfp-open .cfp-chevron { transform:rotate(180deg); }
.cfp-body {
  display:none; padding:.75rem .9rem .95rem;
  border-top:1px solid rgba(245,197,24,.12);
}
#chordFavsPanel.cfp-open .cfp-body { display:block; }
#chordFavsGrid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:.55rem;
}
.cfp-card {
  position:relative; background:var(--bg);
  border:1px solid rgba(245,197,24,.25);
  border-top:2px solid var(--gold);
  padding:.5rem .35rem .4rem;
  text-align:center; border-radius:3px;
  cursor:pointer; transition:transform .15s,box-shadow .15s;
}
.cfp-card:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.3); }
.cfp-card-name {
  font-family:'DM Mono',monospace; font-size:.6rem;
  color:var(--text2); margin-top:.2rem;
}
.cfp-rm {
  position:absolute; top:.2rem; right:.25rem;
  background:none; border:none; cursor:pointer;
  font-size:.72rem; color:var(--muted); line-height:1;
  padding:.1rem; opacity:.55; transition:opacity .15s,color .15s;
}
.cfp-rm:hover { opacity:1; color:var(--accent); }
.cfp-empty {
  font-size:.75rem; color:var(--muted);
  font-style:italic; padding:.25rem 0;
}
.fav-chord-btn {
  position:absolute; top:.22rem; right:.22rem;
  background:none; border:none; cursor:pointer;
  font-size:.82rem; line-height:1; padding:.1rem;
  transition:transform .15s;
}
.fav-chord-btn:hover { transform:scale(1.25); }

/* ══ PROGRESIONES: Panel Favoritos ══════════════════════════ */
#pgFavsPanel {
  margin-top:1.4rem;
  border:1px solid rgba(245,197,24,.22);
  border-left:3px solid var(--gold);
  border-radius:4px; overflow:hidden;
}
.pgfp-hdr {
  display:flex; align-items:center; gap:.55rem;
  padding:.6rem .9rem; cursor:pointer; user-select:none;
  background:rgba(245,197,24,.04);
}
.pgfp-hdr:hover { background:rgba(245,197,24,.08); }
.pgfp-hdr-title {
  font-family:'DM Mono',monospace; font-size:.57rem;
  letter-spacing:2px; font-weight:700; color:var(--gold);
}
.pgfp-count {
  font-family:'DM Mono',monospace; font-size:.52rem;
  background:rgba(245,197,24,.15); border-radius:10px;
  padding:.1rem .4rem; color:var(--gold);
}
.pgfp-chevron { margin-left:auto; color:var(--muted); font-size:.75rem; transition:transform .2s; }
#pgFavsPanel.pgfp-open .pgfp-chevron { transform:rotate(180deg); }
.pgfp-body {
  display:none; border-top:1px solid rgba(245,197,24,.12);
}
#pgFavsPanel.pgfp-open .pgfp-body { display:block; }
.pgfp-row {
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .9rem; border-bottom:1px solid var(--border);
  transition:background .12s;
}
.pgfp-row:last-child { border-bottom:none; }
.pgfp-row:hover { background:rgba(245,197,24,.04); }
.pgfp-lbl {
  flex:1; color:var(--text2);
  font-family:'DM Mono',monospace; font-size:.64rem;
}
.pgfp-del {
  background:none; border:none; color:var(--muted);
  cursor:pointer; font-size:.78rem; opacity:.55;
  transition:opacity .15s,color .15s;
}
.pgfp-del:hover { opacity:1; color:var(--accent); }

/* ══ BACKING TRACKS: Strip Favoritos ════════════════════════ */
#btFavsStrip {
  grid-column:1/-1; margin-bottom:.6rem;
  border:1px solid rgba(245,197,24,.22);
  border-left:3px solid var(--gold);
  border-radius:4px; overflow:hidden;
}
.btfs-hdr {
  display:flex; align-items:center; gap:.5rem;
  padding:.52rem .8rem; cursor:pointer; user-select:none;
  background:rgba(245,197,24,.04);
}
.btfs-hdr:hover { background:rgba(245,197,24,.08); }
.btfs-title {
  font-family:'DM Mono',monospace; font-size:.57rem;
  letter-spacing:2px; font-weight:700; color:var(--gold);
}
.btfs-count {
  font-family:'DM Mono',monospace; font-size:.52rem;
  background:rgba(245,197,24,.15); border-radius:10px;
  padding:.1rem .4rem; color:var(--gold);
}
.btfs-chevron { margin-left:auto; color:var(--muted); font-size:.72rem; transition:transform .2s; }
#btFavsStrip.btfs-open .btfs-chevron { transform:rotate(180deg); }
.btfs-body {
  display:none; padding:.4rem .7rem .6rem;
  border-top:1px solid rgba(245,197,24,.1);
  display:none; flex-wrap:wrap; gap:.38rem;
}
#btFavsStrip.btfs-open .btfs-body { display:flex; }
.btfs-chip {
  display:inline-flex; align-items:center; gap:.38rem;
  padding:.28rem .6rem;
  background:var(--panel); border:1px solid rgba(245,197,24,.28);
  border-radius:20px; font-family:'DM Mono',monospace;
  font-size:.59rem; color:var(--text2);
  cursor:pointer; transition:all .15s;
}
.btfs-chip:hover { border-color:var(--teal); color:var(--teal); }
.btfc-del { color:var(--muted); font-size:.62rem; }
.btfc-del:hover { color:var(--accent); }
.bt-fav-btn {
  background:none; border:none; cursor:pointer;
  font-size:.88rem; line-height:1; padding:.1rem;
  transition:transform .15s;
}
.bt-fav-btn:hover { transform:scale(1.2); }

/* ══ TRANSPOSITOR: Historial ═════════════════════════════════ */
#transpoHistory {
  margin-top:1.1rem;
  border:1px solid rgba(0,229,204,.18);
  border-left:3px solid var(--teal);
  border-radius:4px; overflow:hidden;
}
.th-hdr {
  display:flex; align-items:center; gap:.5rem;
  padding:.58rem .85rem; cursor:pointer; user-select:none;
  background:rgba(0,229,204,.04);
}
.th-hdr:hover { background:rgba(0,229,204,.08); }
.th-title {
  font-family:'DM Mono',monospace; font-size:.57rem;
  letter-spacing:2px; font-weight:700; color:var(--teal);
}
.th-chevron { margin-left:auto; color:var(--muted); font-size:.72rem; transition:transform .2s; }
#transpoHistory.th-open .th-chevron { transform:rotate(180deg); }
.th-body { display:none; border-top:1px solid rgba(0,229,204,.1); }
#transpoHistory.th-open .th-body { display:block; }
.th-row {
  display:flex; align-items:flex-start; gap:.65rem;
  padding:.55rem .85rem; border-bottom:1px solid var(--border);
  cursor:pointer; transition:background .12s;
}
.th-row:last-child { border-bottom:none; }
.th-row:hover { background:rgba(0,229,204,.04); }
.th-keys {
  font-family:'DM Mono',monospace; font-size:.68rem;
  color:var(--teal); white-space:nowrap; min-width:70px; padding-top:.1rem;
}
.th-preview { flex:1; font-size:.69rem; color:var(--text2); line-height:1.55; }
.th-chords {
  font-family:'DM Mono',monospace; font-size:.65rem; color:var(--text);
}
.th-ts {
  font-family:'DM Mono',monospace; font-size:.5rem;
  color:var(--muted); white-space:nowrap; padding-top:.15rem;
}
.th-restore {
  display:inline-block; margin-top:.28rem;
  background:none; border:1px solid var(--border2);
  color:var(--muted); font-family:'DM Mono',monospace;
  font-size:.5rem; letter-spacing:1px; padding:.18rem .45rem;
  border-radius:3px; cursor:pointer; transition:all .15s;
}
.th-restore:hover { border-color:var(--teal); color:var(--teal); }

/* ═══ JAM MACHINE — Premium dark UI ═══ */
#jamRoot { --jam-teal: var(--teal); --jam-gold: var(--gold); --jam-bg: var(--panel); --jam-bg2: var(--panel2); --jam-muted: var(--muted); --jam-border: var(--border2); --jam-text: var(--text); --jam-subdominant: #c45c5c; }
.jam-loading { text-align:center; padding:2.5rem 1.5rem; color:var(--muted); font-family:'DM Mono',monospace; }
.jam-loading-bar { height:4px; background:var(--border2); border-radius:2px; overflow:hidden; margin-top:.75rem; max-width:200px; margin-left:auto; margin-right:auto; }
.jam-loading-fill { height:100%; background:linear-gradient(90deg,var(--teal),var(--gold)); width:0%; transition:width .3s ease; }
.jam-header { display:flex; align-items:center; gap:.5rem; margin-bottom:1.25rem; }
.jam-live-dot { width:8px; height:8px; border-radius:50%; background:var(--muted); transition:background .2s; }
.jam-live-dot.active { background:var(--teal); box-shadow:0 0 12px var(--teal); animation:jam-pulse 1s ease-in-out infinite; }
@keyframes jam-pulse { 50% { opacity:.7; transform:scale(1.1); } }
.jam-bar-indicator { font-family:'Syne',sans-serif; font-size:1.5rem; font-weight:700; color:var(--teal); margin-left:auto; letter-spacing:2px; }
.jam-style-card { display:flex; flex-direction:column; align-items:flex-start; padding:.9rem 1rem; background:var(--jam-bg2); border:1px solid var(--jam-border); border-radius:var(--radius-md); cursor:pointer; transition:var(--transition-fast); min-width:0; }
.jam-style-card:hover { border-color:var(--jam-teal); }
.jam-style-card.active { border-color:var(--jam-teal); box-shadow:0 0 0 1px var(--jam-teal), 0 0 20px rgba(0,212,180,.15); }
.jam-style-card .jam-style-name { font-family:'Syne',sans-serif; font-weight:600; color:var(--jam-text); font-size:.85rem; }
.jam-style-card .jam-style-meta { font-family:'DM Mono',monospace; font-size:.55rem; color:var(--jam-muted); letter-spacing:1px; margin-top:.25rem; }
.jam-controls { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-bottom:1.25rem; }
.jam-ctrl-block label { display:block; font-family:'DM Mono',monospace; font-size:.5rem; color:var(--jam-muted); letter-spacing:2px; margin-bottom:.35rem; }
.jam-ctrl-block select { width:100%; padding:.5rem; background:var(--jam-bg2); border:1px solid var(--jam-border); color:var(--jam-text); border-radius:var(--radius-sm); font-family:'DM Mono',monospace; }
.jam-slider { width:100%; height:6px; accent-color:var(--teal); cursor:pointer; }
.jam-bpm-display { font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:700; color:var(--teal); margin-top:.25rem; }
.jam-chord-pill { display:inline-flex; align-items:center; justify-content:center; padding:.5rem .75rem; margin:.2rem; background:var(--jam-bg2); border:1px solid var(--jam-border); border-radius:var(--radius-sm); font-family:'DM Mono',monospace; font-size:.75rem; color:var(--jam-text); transition:var(--transition-fast); cursor:pointer; }
.jam-chord-pill:hover { border-color:var(--gold); background:rgba(245,197,24,.08); }
.jam-chord-pill.current { border-color:var(--jam-teal); background:rgba(0,212,180,.08); color:var(--jam-teal); }
.jam-chord-pill.tonic { border-color:var(--jam-teal); }
.jam-chord-pill.dominant { border-color:var(--jam-gold); }
.jam-chord-pill.subdominant { border-color:var(--jam-subdominant); }

/* Chord Tooltip System */
.chord-tooltip { position:fixed; z-index:9999; background:var(--panel); border:2px solid var(--gold); border-radius:8px; padding:1rem; box-shadow:0 8px 24px rgba(0,0,0,0.5); opacity:0; pointer-events:none; transition:opacity 0.2s ease; max-width:280px; left:var(--tooltip-x, 0); top:var(--tooltip-y, 0); }
.chord-tooltip.visible { opacity:1; pointer-events:auto; }
.chord-tooltip-header { margin-bottom:.75rem; }
.chord-tooltip-name { display:block; font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:700; color:var(--gold); margin-bottom:.25rem; }
.chord-tooltip-desc { display:block; font-family:'DM Mono',monospace; font-size:.65rem; color:var(--muted); letter-spacing:.5px; }
.chord-tooltip-diagram { display:flex; justify-content:center; align-items:center; }
.chord-tooltip-diagram svg { max-width:100%; height:auto; }
.jam-beat-dot { width:12px; height:12px; border-radius:50%; background:var(--jam-border); transition:var(--transition-fast); }
.jam-beat-dot.beat-on { background:var(--jam-teal); opacity:.8; }
.jam-beat-dot.beat-1 { background:var(--jam-teal); box-shadow:0 0 10px var(--jam-teal); }
.jam-beat-circles { display:flex; gap:.75rem; justify-content:center; margin:1rem 0; }
.jam-beat-circles .jam-beat-dot { width:28px; height:28px; }
.jam-mix { display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-start; }
.jam-vol-row { display:flex; align-items:center; gap:.5rem; flex:1; min-width:120px; }
.jam-vol-label { font-family:'DM Mono',monospace; font-size:.55rem; color:var(--jam-muted); width:3rem; }
.jam-vol-val { font-family:'DM Mono',monospace; font-size:.6rem; color:var(--jam-text); min-width:2.5rem; }
/* Mejora 4 PASO B: Estilos para control de volumen maestro */
.jam-vol-slider { accent-color:var(--gold); }
.jam-vol-display { color:var(--gold)!important; }
.jam-transport { display:flex; gap:.75rem; align-items:center; margin:1rem 0; flex-wrap:wrap; }
.jam-play-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.4rem; background:var(--teal); color:#000; border:none; border-radius:var(--radius-md); font-family:'Syne',sans-serif; font-weight:700; font-size:.8rem; cursor:pointer; transition:var(--transition-fast); }
.jam-play-btn:hover { filter:brightness(1.1); }
.jam-play-btn.playing { background:var(--gold); color:#000; }
.jam-tap-btn { padding:.5rem 1rem; background:transparent; border:1px solid var(--jam-border); color:var(--jam-muted); font-family:'DM Mono',monospace; font-size:.65rem; letter-spacing:1px; border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition-fast); }
.jam-tap-btn:hover { border-color:var(--jam-teal); color:var(--jam-teal); }
.jam-tap-btn.active { border-color:var(--gold); color:var(--gold); background:rgba(245,197,24,.12); box-shadow:0 0 12px rgba(245,197,24,.2); }
.jam-scale-hint { font-size:.7rem; color:var(--jam-muted); line-height:1.5; margin-top:1rem; padding:.75rem; background:var(--jam-bg2); border-radius:var(--radius-sm); border:1px solid var(--jam-border); }
.jam-chord-bar { display:flex; flex-wrap:wrap; gap:.2rem; margin-bottom:.5rem; }
.jam-styles { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:.5rem; }
.jam-fallback-notice { font-size:.7rem; color:var(--muted); margin-bottom:.8rem; padding:.5rem; background:var(--bg2); border-radius:4px; border:1px solid var(--border2); }


/* === Additional styles (block 2) === */


.toast.show { transform:translateY(0)!important; opacity:1!important; }
#searchOverlay { display:none; }
#searchOverlay.open { display:flex!important; }
.search-result-item { padding:.75rem 1rem; cursor:pointer; border-bottom:1px solid var(--border); transition:background .15s; }
.search-result-item:hover { background:rgba(255,255,255,.04); }
.sr-type { font-family:DM Mono,monospace; font-size:.52rem; letter-spacing:2px; color:var(--accent); font-weight:700; }
.sr-title { font-size:.88rem; color:var(--text); font-weight:600; margin:.15rem 0 0; }

/* ════════════════════════════════════════════════════════════════
   KUERDA — MOBILE CSS v8  (single canonical block)
   Target: iOS Safari 15+, Android Chrome, 320px–768px
   ─────────────────────────────────────────────────────────────
   Bug fixes vs v7:
   ✅  Eliminado bloque duplicado (2890 líneas × 2 → 1)
   ✅  #mobileBottomNav definido UNA sola vez (era 4×)
   ✅  touch-action: manipulation en todos los botones nav
   ✅  .mob-chevron: posicionamiento corregido para iOS Safari
   ✅  backdrop-filter desactivado en mobile (GPU drain)
   ✅  input font-size: 16px definido UNA sola vez (era 4×)
   ✅  @media (max-width:768px) consolidado — 56 bloques → 1
   ✅  will-change: auto en elementos animados (fuga de memoria)
   ✅  100svh para hero (fix address-bar bug iOS)
   ✅  overscroll-behavior para prevenir scroll-chain
════════════════════════════════════════════════════════════════ */

/* ── GLOBAL TOUCH POLISH (aplica a todo, no sólo ≤768px) ──────── */
* { -webkit-tap-highlight-color: transparent; }
html { overflow-x: hidden; }

/* iOS zoom prevention: font-size ≥ 16px en todos los inputs       */
/* Definido aquí UNA sola vez — no repetir en @media               */
input, select, textarea { font-size: 16px !important; }

/* ────────────────────────────────────────────────────────────────
   MOBILE BOTTOM NAV — definición única y canónica
   (todas las overrides de color/borde dentro de este bloque)
──────────────────────────────────────────────────────────────── */
#mobileBottomNav {
  display: none;                           /* visible sólo en ≤768px */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(10,10,10,.98);
  border-top: 1px solid rgba(255,255,255,.07);
  /* height: 64px base + safe area para notch iOS */
  min-height: 64px;
  grid-template-columns: repeat(5, 1fr);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* Glassmorphism muy suave (solo high-end) */
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

body.light-mode #mobileBottomNav {
  background: rgba(248,246,242,1);
  border-top: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 -4px 16px rgba(0,0,0,.07);
}

/* ── Nav buttons ──────────────────────────────────────────────── */
.mob-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  padding: .6rem .1rem;
  background: none;
  border: none;
  color: rgba(255,255,255,.5);
  font-family: 'Outfit', sans-serif;
  font-size: .52rem;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease, transform .1s ease;
  min-height: 60px;
  position: relative;
  will-change: auto;
}

.mob-nav-btn svg {
  width: 24px; height: 24px;
  margin-bottom: .05rem;
  flex-shrink: 0;
  pointer-events: none;
}

/* Estado activo */
.mob-nav-btn.mob-active { color: var(--teal); }

/* Línea indicadora en la parte superior del botón activo          */
.mob-nav-btn.mob-active::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 25%; right: 25%;
  height: 2px;
  background: var(--teal);
  border-radius: 0 0 2px 2px;
}

/* Punto indicador en la parte inferior                            */
.mob-nav-btn.mob-active::after {
  content: '';
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 3px);
  left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--teal);
}

/* Botón de categoría abierto */
.mob-nav-btn.mob-cat-open { color: var(--teal); }
.mob-nav-btn.mob-cat-open .mob-chevron { transform: rotate(180deg); opacity: 1; }

/* Feedback táctil: scale sólo en :active — no hover en touch      */
.mob-nav-btn:active { transform: scale(.92); }

/* Light mode */
body.light-mode .mob-nav-btn { color: rgba(0,0,0,.45); }
body.light-mode .mob-nav-btn.mob-active,
body.light-mode .mob-nav-btn.mob-cat-open { color: var(--teal); }

/* ── Chevron (indicador de categoría) ────────────────────────────
   FIX iOS Safari: usar left:50%+translateX en lugar de right:50%
   El combo right:50%+translateX(50%) produce desplazamiento
   incorrecto en Safari cuando el padre es flex.
──────────────────────────────────────────────────────────────── */
.mob-chevron {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);           /* FIX: era right:50%+translateX(50%) */
  width: 0; height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 3px solid currentColor;
  opacity: 0;
  transition: opacity .15s ease, transform .22s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
/* cuando mob-cat-open: se maneja en .mob-nav-btn.mob-cat-open arriba */

/* ────────────────────────────────────────────────────────────────
   CATEGORY PANEL — slide-up popup
──────────────────────────────────────────────────────────────── */
#mobCatPanel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,.55);
  align-items: flex-end;
  padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  /* FIX: backdrop-filter sólo cuando el panel está abierto         */
  /* evitar cost permanente de compositing cuando está oculto       */
}
#mobCatPanel.open {
  display: flex;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: mobPanelFadeIn .18s ease;
}

@keyframes mobPanelFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#mobCatContent {
  width: 100%;
  background: #0f1419;
  border-top: 2px solid var(--teal);
  border-radius: 18px 18px 0 0;
  padding: 1rem 1rem .8rem;
  box-shadow: 0 -20px 60px rgba(0,0,0,.65);
  animation: mobSlideUp .26s cubic-bezier(.16,1,.3,1);
  max-height: 72vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;      /* FIX: evitar scroll-chain con fondo */
}

body.light-mode #mobCatContent {
  background: #f5f4f0;
  border-top-color: var(--accent);
}

@keyframes mobSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

#mobCatHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .9rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

#mobCatTitle {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--teal);
}

#mobCatCloseBtn {
  background: rgba(255,255,255,.07);
  border: none;
  color: var(--text2);
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#mobCatGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
}

/* ── Category grid items ──────────────────────────────────────── */
.mob-cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: .75rem .4rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  cursor: pointer;
  /* FIX: touch-action en cada item del grid                        */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease, border-color .12s ease, transform .1s ease;
  text-align: center;
}
.mob-cat-item:active {
  transform: scale(.94);
  background: rgba(255,255,255,.08);
}
.mob-cat-item.mob-item-active {
  background: rgba(0,212,180,.08);
  border-color: rgba(0,212,180,.25);
}
.mob-cat-item-icon {
  font-size: 1.35rem;
  line-height: 1;
  /* FIX: evitar que el emoji genere capas GPU innecesarias         */
  will-change: auto;
}
.mob-cat-item-label {
  font-family: 'DM Mono', monospace;
  font-size: .48rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text2);
  line-height: 1.3;
}
.mob-cat-item.mob-item-active .mob-cat-item-label { color: var(--teal); }
.mob-cat-item-badge {
  font-size: .38rem;
  background: var(--purple);
  color: #fff;
  padding: .1rem .3rem;
  border-radius: 4px;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-family: 'DM Mono', monospace;
}

body.light-mode .mob-cat-item {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.1);
}
body.light-mode .mob-cat-item-label { color: var(--text2); }

/* ════════════════════════════════════════════════════════════════
   @media (max-width: 768px) — BLOQUE ÚNICO CONSOLIDADO
   FIX: era 56 bloques separados. Ahora uno solo organizado
   por sección. Las reglas ya no se contradicen entre sí.
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Layout base ──────────────────────────────────────────────── */
  #mobileBottomNav  { display: grid; }
  #sideNav          { display: none !important; }
  
  

  /* ── Page inner: espacio para bottom nav ──────────────────────── */
  .page-inner {
    padding: 5rem 1.1rem calc(5.8rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── Hero ─────────────────────────────────────────────────────── */
  /* FIX: 100svh evita el bug de address-bar en iOS/Android         */
  #heroSection     { min-height: 100svh !important; }
  .hero-above-fold {
    min-height: 100svh !important;
    padding: 0 1.1rem 1rem !important;
    justify-content: center !important;
  }
  .hero-kuerda     { font-size: clamp(4.5rem, 20vw, 8rem) !important; }
  .hero-tagline    { font-size: clamp(1rem, 4vw, 1.4rem) !important; margin-top: .5rem !important; }
  .hero-subtagline { font-size: .82rem !important; }
  .hero-brand-row  { margin-bottom: 1.5rem !important; }
  .hero-stats      { gap: .8rem !important; flex-wrap: wrap !important; margin-top: 1.5rem !important; }
  .hero-stat-divider { display: none !important; }
  .hero-stat-benefit { font-size: .75rem !important; }
  .hero-ctas {
    gap: .7rem !important;
    margin-top: 1.8rem !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  .hero-cta-primary,
  .hero-cta-secondary {
    width: 100% !important;
    justify-content: center !important;
    padding: 1rem !important;
    font-size: .82rem !important;
  }
  .hero-social-proof { font-size: .58rem !important; margin-top: 1.2rem !important; }
  .hero-scroll-hint  { display: none !important; }
  .hero-tools-section {
    padding: 3rem 1.1rem calc(5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── Page nav top bar ─────────────────────────────────────────── */
  .page-nav {
    padding: .45rem .8rem !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: .3rem !important;
  }
  .page-nav::-webkit-scrollbar { display: none; }
  .page-btn { white-space: nowrap; flex-shrink: 0; }

  /* ── Headings ─────────────────────────────────────────────────── */
  .page-bg-num  { display: none !important; }
  .page-heading {
    font-size: 2.2rem !important;
    line-height: 1.05 !important;
    margin-bottom: .6rem !important;
  }
  .sec-title  { font-size: 2.2rem !important; line-height: 1.05 !important; }
  .page-lead  { font-size: .82rem !important; margin-bottom: 1.5rem !important; line-height: 1.7 !important; }
  .level-bar  { margin-bottom: .5rem !important; font-size: .65rem !important; }
  .divider    { margin: 1rem 0 !important; }
  .stat-row   { flex-wrap: wrap !important; gap: .4rem !important; }
  .sec-label  { font-size: .52rem !important; letter-spacing: 3px !important; }
  .highlight  { font-size: .8rem !important; padding: .9rem !important; }

  /* ── Toolkit grid ─────────────────────────────────────────────── */
  .toolkit-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .75rem !important;
    margin: 1.2rem 0 !important;
  }
  .tk-featured  { grid-column: span 2 !important; }
  .tk-card {
    padding: 1rem .9rem !important;
    min-height: 90px;
    /* FIX: transiciones sólo propiedades compositor-safe           */
    transition: opacity .15s ease, transform .15s ease !important;
    will-change: auto !important;
  }
  .tk-card:hover { transform: none !important; box-shadow: none !important; }
  .tk-card:active { opacity: .82; transform: scale(.98) !important; }
  .hero-tools-title { font-size: .95rem !important; }

  /* ── Escalas y modos ──────────────────────────────────────────── */
  .scales-grid     { grid-template-columns: repeat(2, 1fr) !important; gap: .7rem !important; }
  .scale-card      { padding: 1rem .9rem !important; }
  .mode-cards-grid { grid-template-columns: 1fr !important; gap: .8rem !important; }
  .mode-card-name  { font-size: 1.3rem !important; }
  .mode-card-top   { padding: 1.1rem 1.1rem .8rem !important; }
  .scale-card:active, .mode-card:active { opacity: .82; }
  .scale-card:hover, .mode-card:hover, .theory-card:hover,
  .tip-card:hover, .backing-card:hover, .improv-step:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* ── Theory tabs ──────────────────────────────────────────────── */
  .theory-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .6rem !important;
    margin-bottom: 1.2rem !important;
    gap: .3rem !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  .theory-tabs::-webkit-scrollbar { display: none; }
  .theory-tab {
    min-height: 40px !important;
    padding: .5rem .85rem !important;
    font-size: .62rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-width: max-content !important;
  }

  /* ── Metro, tuner, backing ────────────────────────────────────── */
  .metro-section  { padding: 1.4rem 1rem !important; margin-top: 1rem !important; }
  .metro-display  { font-size: 4.5rem !important; }
  .backing-section { padding: 1.2rem 1rem !important; margin-top: 1rem !important; }
  .backing-card   { padding: 1rem !important; }

  /* ── Chord diagrams ───────────────────────────────────────────── */
  [id^="grid-"] {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: .7rem !important;
  }

  /* ── Modals → bottom sheet ────────────────────────────────────── */
  .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  .modal {
    max-width: 100% !important;
    width: 100% !important;
    padding: 1.4rem 1rem 2rem !important;
    max-height: 88vh !important;
    border-radius: 18px 18px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top: 3px solid var(--accent) !important;
    background: var(--panel) !important;
  }
  /* Swipe handle visual */
  .modal::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: rgba(255,255,255,.18);
    border-radius: 2px;
    margin: 0 auto 1.2rem;
  }
  .modal-title { font-size: 1.5rem !important; }
  .modal-body  { font-size: .82rem !important; }
  .modal-close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }

  /* Nav dropdown → bottom sheet on mobile */
  .nav-dropdown { position: static; }
  .nav-dropdown-menu {
    position: fixed !important;
    top: auto !important; left: 0 !important; right: 0 !important;
    bottom: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 12px 12px 0 0 !important;
    max-height: 65vh !important;
    overflow-y: auto !important;
    min-width: 100% !important;
    border-top: 2px solid var(--accent) !important;
  }

  /* ── Tables → horizontal scroll ──────────────────────────────── */
  .modes-table, .interval-table, table { min-width: 500px !important; }

  /* ── Circle of fifths ─────────────────────────────────────────── */
  .circle-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
  }
  canvas#circle { width: 320px !important; height: 320px !important; max-width: none !important; }

  /* ── Fretboard ────────────────────────────────────────────────── */
  .fretboard-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: .8rem !important;
  }
  .fret-controls { gap: .6rem !important; flex-wrap: wrap !important; }
  .fret-select   { font-size: .72rem !important; padding: .5rem .7rem !important; width: 100% !important; }
  .btn-play, .btn-stop, .btn-lefty {
    padding: .6rem 1rem !important;
    font-size: .65rem !important;
    min-height: 40px !important;
  }

  /* ── Teoría hero ──────────────────────────────────────────────── */
  .teoria-hero        { padding: 1.2rem 1rem !important; }
  .teoria-hero::after { display: none !important; }
  .teoria-hero-stats  { gap: .5rem !important; }
  .teoria-hero-stat   { padding: .5rem .8rem !important; min-width: 70px !important; }
  .teoria-hero-stat-num { font-size: 1.2rem !important; }

  /* ── Lick generator ───────────────────────────────────────────── */
  .lk-card-header { padding: .9rem 1rem !important; flex-wrap: wrap !important; gap: .5rem !important; }
  .lk-card-body   { padding: 1rem !important; }

  /* ── Performance: matar animaciones/transiciones costosas ─────── */
  /* FIX: infinite animations = battery drain y jank en mid-range   */
  #heroSection::before { animation: none !important; display: none !important; }
  .hero-brand-dot      { animation: none !important; }
  .hero-kuerda-k       { animation: none !important; }
  .hero-streak-badge   { animation: none !important; }

  /* FIX: disable backdrop-filter en mobile (GPU drain severo)       */
  #sideNav,
  #mobileBottomNav,
  .modal-overlay,
  .hero-cta-secondary,
  .nav-dropdown-menu,
  #searchOverlay,
  .tool-panel,
  .metro-section,
  .backing-section,
  .tk-featured,
  .page-inner::before {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* FIX: eliminar el pseudo-elemento decorativo del page-inner en mobile
     Ahorra 1 capa de compositing por cada página de herramienta visible */
  .page-inner::before { display: none !important; }

  /* FIX: transition:all → propiedades específicas en touch          */
  .tk-card, .scale-card, .mode-card, .theory-card, .tip-card,
  .backing-card, .mob-cat-item, .theory-tab, .page-btn,
  .hero-cta-primary, .hero-cta-secondary, .btn-play, .btn-stop {
    transition: opacity .15s ease, transform .15s ease !important;
    will-change: auto !important;
  }

  /* FIX: scroll behavior instantáneo en mobile (más responsivo)     */
  html { scroll-behavior: auto !important; }

  /* FIX: overscroll containment — previene scroll-chain con body    */
  body { overscroll-behavior-x: contain; }
  .modal, #mobCatContent { overscroll-behavior-y: contain; }

  /* ── Touch target floors ──────────────────────────────────────── */
  .page-btn, .theory-tab { min-height: 36px; }
  button, a, [onclick]   { min-height: 44px; }
  /* Exception: inline links and small UI elements               */
  .mob-nav-btn, .auth-modal-close,
  #mobCatCloseBtn, .faq-q { min-height: unset; }

  /* ── FIX: footer — espacio para bottom nav en hero page ─────────
  footer {
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)) !important;
    margin-bottom: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── FIX: page visible — no forzar 100vh (espacio en blanco) ──── */
  .page.visible {
    min-height: auto !important;
    animation: none !important;
  }

  /* ── Auth bar responsive ──────────────────────────────────────── */
  #authBar { top: .5rem; right: .7rem; }
  #navAuthBtns .btn-login:not([onclick*="logout"]) { display: none; }

} /* END @media (max-width: 768px) */

/* ════════════════════════
   PHONE — max 480px
════════════════════════ */
@media (max-width: 480px) {

  /* Grids → 1 col */
  .scales-grid    { grid-template-columns: 1fr !important; }
  .toolkit-grid   { grid-template-columns: 1fr !important; }
  .tk-featured    { grid-column: span 1 !important; }

  /* Hero sizes */
  .hero-kuerda    { font-size: clamp(3.5rem, 17vw, 6rem) !important; }
  .hero-tagline   { font-size: clamp(.85rem, 3.5vw, 1.1rem) !important; }
  .hero-stat-num  { font-size: 1.3rem; }
  .hero-stat-label { font-size: .5rem; }
  .hero-stats     { gap: .7rem; }

  /* Page inner tighter */
  .page-inner {
    padding: 4rem .9rem calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Chord diagrams smaller */
  [id^="grid-"] { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important; }

  /* Page heading sizes */
  .page-heading { font-size: 2.4rem !important; }
  .sec-title    { font-size: 2.4rem !important; }

  /* Theory panel text */
  .theory-panel .highlight { font-size: .78rem; }

  /* Full width tk cards */
  .tk-card { padding: 1.1rem 1rem !important; }
  .tk-card-name { font-size: .8rem !important; }

} /* END @media (max-width: 480px) */

/* ════════════════════════
   NARROW — max 400px
════════════════════════ */
@media (max-width: 400px) {
  .toolkit-grid { grid-template-columns: 1fr !important; }
  .tk-featured  { grid-column: span 1 !important; }
  .scales-grid  { grid-template-columns: 1fr !important; }
  [id^="grid-"] { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ════════════════════════
   TIPS & IMPROV — max 600px
════════════════════════ */
@media (max-width: 600px) {
  .tips-list   { grid-template-columns: 1fr !important; gap: .7rem !important; }
  .tip-card    { padding: 1rem 1.1rem !important; }
  .improv-step { grid-template-columns: 44px 1fr !important; padding: 1rem !important; }
  .step-num    { font-size: 2.2rem !important; }
}

/* END KUERDA MOBILE v8 */


/* ── Auth bar — responsive ── */
@media (max-width: 768px) {
  #authBar { top: .5rem; right: .7rem; }
  #navAuthBtns .btn-login:not([onclick*="logout"]) { display: none; }
}



/* ── Auth buttons ── */
.btn-login {
  font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: .68rem;
  padding: .38rem .85rem;
  border-radius: 7px;
  cursor: pointer;
  transition: all .15s ease;
  background: transparent;
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.75);
  white-space: nowrap;
}
.btn-login:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
  border-color: rgba(255,255,255,.25);
}
.btn-register {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: .68rem;
  padding: .38rem .9rem;
  border-radius: 7px;
  cursor: pointer;
  transition: all .15s ease;
  background: var(--teal);
  border: none;
  color: #000;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0,212,180,.3);
}
.btn-register:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(0,212,180,.45);
  background: #00c8aa;
}

/* ── Theme toggle: hidden in sidebar mode ── */


/* ═══════════════════════════════════════════════
   AUTH MODAL — Full CSS (was missing)
═══════════════════════════════════════════════ */
#authModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
#authModal.open { display: flex; }

.auth-modal-box {
  background: linear-gradient(160deg, var(--panel) 0%, var(--surface) 100%);
  border: 1px solid var(--border2);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 2.5rem 2rem;
  max-width: 400px; width: 100%;
  box-shadow: var(--shadow-lift);
}
.auth-modal-logo {
  font-family: 'Bebas Neue', serif;
  font-size: 1.8rem;
  letter-spacing: 4px;
  color: var(--text);
  text-align: center;
  margin-bottom: 1.2rem;
}
.auth-tab-row {
  display: flex;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 1.4rem;
}
.auth-tab {
  flex: 1;
  padding: .55rem;
  text-align: center;
  cursor: pointer;
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: 1.5px;
  color: var(--muted);
  background: transparent;
  border: none;
  transition: all .15s;
}
.auth-tab.active {
  background: rgba(0,229,204,.1);
  color: var(--teal);
}
.auth-tab:hover:not(.active) { color: var(--text); }
.auth-modal-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .3rem;
}
.auth-modal-sub {
  font-size: .72rem;
  color: var(--muted);
  margin-bottom: 1.2rem;
  line-height: 1.5;
}
.auth-btn-google {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255,255,255,.15);
  color: var(--text);
  padding: .7rem 1rem;
  border-radius: 5px;
  font-family: 'Syne', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  transition: all .2s;
  margin-bottom: .8rem;
}
.auth-btn-google:hover {
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.04);
}
.auth-divider {
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: 1px;
  color: var(--muted);
  margin: .7rem 0;
  position: relative;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 35%;
  height: 1px;
  background: rgba(255,255,255,.07);
}
.auth-divider::before { left: 0; }
.auth-divider::after  { right: 0; }
.auth-field { margin-bottom: .8rem; }
.auth-field label {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: .52rem;
  letter-spacing: 1.5px;
  color: var(--muted);
  margin-bottom: .4rem;
}
.auth-field input {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text);
  font-family: 'Syne', sans-serif;
  font-size: .88rem;
  padding: .75rem 1rem;
  border-radius: 5px;
  transition: border-color .2s;
}
.auth-field input:focus { outline: none; border-color: var(--teal); }
.auth-error {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  color: var(--accent);
  min-height: 1.1rem;
  margin-bottom: .4rem;
}
.auth-btn-primary {
  width: 100%;
  background: var(--teal);
  color: #000;
  border: none;
  padding: .8rem;
  border-radius: 5px;
  font-family: 'Bebas Neue', serif;
  font-size: 1.1rem;
  letter-spacing: 2px;
  cursor: pointer;
  transition: opacity .2s, transform .1s;
}
.auth-btn-primary:hover { opacity: .88; transform: translateY(-1px); }
.auth-btn-primary:disabled { opacity: .5; pointer-events: none; }
.auth-modal-close {
  position: absolute;
  top: .8rem;
  right: .8rem;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
}
.auth-modal-close:hover { color: var(--text); }
/* .auth-modal-box position: merged into primary */
.auth-msg-sent {
  text-align: center;
  padding: 1.5rem 0;
}
.auth-sent-icon { font-size: 2.5rem; margin-bottom: .8rem; }
.auth-msg-sent p {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.6;
}
.auth-msg-sent strong { color: var(--teal); }


/* ═══════════════════════════════════════════════
   CLASES CSS FALTANTES — FIX v18
═══════════════════════════════════════════════ */

/* ── Nav user avatar (initial circle) ── */
.nav-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--purple));
  color: #000;
  font-family: 'DM Mono', monospace;
  font-size: .7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: default;
  user-select: none;
}

/* ── Registration nudge close button ── */
.reg-nudge-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 0 .3rem;
  line-height: 1;
  flex-shrink: 0;
}
.reg-nudge-close:hover { color: var(--text); }

/* ── Mobile category button (variant of mob-nav-btn) ── */
.mob-cat-btn {
  font-weight: 700;
  font-size: .6rem;
  letter-spacing: 1px;
}
.mob-cat-btn.active {
  color: var(--teal);
  border-color: var(--teal);
}

/* ── Capo table ── */
.capo-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'DM Mono', monospace;
  font-size: .72rem;
}
.capo-table th {
  padding: .45rem .7rem;
  text-align: left;
  font-size: .55rem;
  letter-spacing: 2px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.capo-table td {
  padding: .45rem .7rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  color: var(--text2);
}
.capo-table tr:hover td { background: rgba(255,255,255,.02); }

/* ── Fretboard section wrapper ── */
.fretboard-section {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Floating help button ── */
.help-float {
  position: fixed;
  bottom: calc(5rem + env(safe-area-inset-bottom));
  right: 1rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--border2);
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  transition: all .2s;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.help-float:hover {
  border-color: var(--teal);
  color: var(--teal);
  transform: translateY(-2px);
}
@media (min-width: 1024px) { .help-float { display: none; } }


/* ══ AUTH MODAL v19 — email+pass ══════════════════════════════ */
.auth-modal-tagline {
  font-family: 'DM Mono', monospace;
  font-size: .5rem;
  letter-spacing: 3px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}
.auth-screen { display: none; }
.auth-screen.active { display: block; }
.auth-field { margin-bottom: .75rem; }
.auth-field label {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: .52rem;
  letter-spacing: 2px;
  color: var(--muted);
  margin-bottom: .3rem;
}
.auth-field input {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: 'Syne', sans-serif;
  font-size: .9rem;
  padding: .7rem .9rem;
  border-radius: 6px;
  transition: border-color .2s;
  box-sizing: border-box;
}
.auth-field input:focus { outline: none; border-color: var(--teal); }
.auth-field input.error { border-color: var(--accent); }
.auth-forgot-link {
  position: absolute;
  right: 0;
  top: 0;
  font-family: 'DM Mono', monospace;
  font-size: .55rem;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
}
.auth-forgot-link:hover { color: var(--teal); }
.auth-ok {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  color: #00c896;
  min-height: 1rem;
  margin-bottom: .4rem;
  text-align: center;
}
.auth-modal-foot {
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  color: var(--muted);
  margin-top: 1rem;
}
.auth-modal-foot span {
  color: var(--teal);
  cursor: pointer;
  text-decoration: underline;
}
.auth-terms-foot {
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: .55rem;
  color: var(--muted2);
  margin-top: 1.2rem;
}
.auth-terms-foot a { color: var(--muted); }
.auth-sent-icon {
  font-size: 2.5rem;
  text-align: center;
  display: block;
  margin-bottom: .5rem;
}

/* ══ BANNER DE REGISTRO ═══════════════════════════════════════ */
#regBanner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1500;
  background: linear-gradient(90deg, rgba(0,229,204,.13), rgba(138,43,226,.09));
  border-bottom: 1px solid rgba(0,229,204,.25);
  animation: bannerIn .4s cubic-bezier(.16,1,.3,1);
}
@keyframes bannerIn { from { transform: translateY(-100%); } to { transform: none; } }
.reg-banner-inner {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1.2rem;
  max-width: 900px;
  margin: 0 auto;
}
.reg-banner-icon { font-size: 1.1rem; flex-shrink: 0; }
.reg-banner-text {
  flex: 1;
  font-family: 'Outfit', sans-serif;
  font-size: .78rem;
  color: var(--text2);
  line-height: 1.4;
}
.reg-banner-text strong { color: var(--teal); }
/* Short version hidden on desktop, shown on mobile */
.reg-banner-msg-short { display: none; }
.reg-banner-msg-full  { display: inline; }
.reg-banner-cta {
  padding: .45rem 1.1rem;
  background: var(--teal);
  border: none;
  color: #000;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .5px;
  border-radius: 5px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s;
  min-height: 36px;
}
.reg-banner-cta:hover { opacity: .85; }
.reg-banner-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  padding: .3rem .5rem;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  min-height: 36px; min-width: 36px;
  display: flex; align-items: center; justify-content: center;
}
.reg-banner-close:hover { color: var(--text); }
/* ── Mobile: compact layout ── */
@media (max-width: 768px) {
  #regBanner { backdrop-filter: none; }
  .reg-banner-inner { padding: .5rem .9rem; gap: .55rem; }
  .reg-banner-msg-full  { display: none; }
  .reg-banner-msg-short { display: inline; }
  .reg-banner-text { font-size: .72rem; }
  .reg-banner-cta  { font-size: .65rem; padding: .4rem .8rem; letter-spacing: 0; }
  .reg-banner-icon { display: none; }
}
@media (max-width: 380px) {
  .reg-banner-cta { padding: .35rem .6rem; font-size: .6rem; }
}


/* ── AUTH MODAL — Light mode overrides ────────────────────────── */
body.light-mode #authModal {
  background: rgba(0,0,0,.55);
}
body.light-mode .auth-modal-box {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.12);
  border-top: 3px solid var(--teal);
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
}
body.light-mode .auth-modal-logo {
  color: #06060e;
}
body.light-mode .auth-modal-tagline {
  color: #666;
}
body.light-mode .auth-tab-row {
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
}
body.light-mode .auth-tab {
  color: #555;
  background: transparent;
}
body.light-mode .auth-tab.active {
  background: rgba(0,229,204,.15);
  color: var(--teal);
}
body.light-mode .auth-tab:hover:not(.active) {
  color: #111;
  background: rgba(0,0,0,.04);
}
body.light-mode .auth-modal-title {
  color: #06060e;
}
body.light-mode .auth-modal-sub {
  color: #555;
}
body.light-mode .auth-btn-google {
  border: 1px solid rgba(0,0,0,.18);
  color: #222;
  background: #fff;
}
body.light-mode .auth-btn-google:hover {
  border-color: rgba(0,0,0,.35);
  background: rgba(0,0,0,.03);
}
body.light-mode .auth-divider {
  color: #999;
}
body.light-mode .auth-divider::before,
body.light-mode .auth-divider::after {
  background: rgba(0,0,0,.12);
}
body.light-mode .auth-field label {
  color: #444;
}
body.light-mode .auth-field input {
  background: #f7f7f9;
  border: 1px solid rgba(0,0,0,.15);
  color: #06060e;
}
body.light-mode .auth-field input::placeholder {
  color: #aaa;
}
body.light-mode .auth-field input:focus {
  border-color: var(--teal);
  background: #fff;
}
body.light-mode .auth-modal-close {
  color: #888;
}
body.light-mode .auth-modal-close:hover {
  color: #111;
}
body.light-mode .auth-modal-foot {
  color: #666;
}
body.light-mode .auth-modal-foot span {
  color: var(--teal);
}
body.light-mode .auth-terms-foot {
  color: #999;
}
body.light-mode .auth-terms-foot a {
  color: #666;
}
body.light-mode .auth-forgot-link {
  color: #888;
}
body.light-mode .auth-screen .auth-modal-sub {
  color: #555;
}
body.light-mode #authModal .auth-ok {
  color: var(--teal);
}

/* ── REG NUDGE — Light mode ── */
body.light-mode .reg-nudge {
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  color: #222;
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
}
body.light-mode .reg-nudge strong {
  color: #06060e;
}
body.light-mode .reg-nudge-close {
  color: #888;
}
/* ── REG BANNER — Light mode ── */
body.light-mode #regBanner {
  background: rgba(0,0,0,.04);
  border-bottom: 1px solid rgba(0,0,0,.1);
}
body.light-mode #regBanner span {
  color: #333;
}

/* ── Profile Modal ── */
#profileModalBox { scrollbar-width: thin; scrollbar-color: var(--border2,#333) transparent; }
#profileModalBox::-webkit-scrollbar { width: 4px; }
#profileModalBox::-webkit-scrollbar-thumb { background: var(--border2,#333); border-radius: 2px; }
#profileAvatarDisplay { transition: opacity .2s; }
#profileAvatarDisplay:hover { opacity: .8; }
.instr-btn:hover { border-color: var(--accent,#ff4d00) !important; color: var(--accent,#ff4d00) !important; }

/* ── Streak & Resume ── */
@keyframes slideUp {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}
#resumeToast { animation: slideUp .3s ease; }

/* ── Metro PRO sig buttons ── */
.metro-sig-btn[title="PRO"] { opacity: .55; position: relative; }
.metro-sig-btn[title="PRO"]:hover { opacity: .8; border-color: var(--gold) !important; }
body.kuerda-pro .metro-sig-btn[title="PRO"] { opacity: 1; }
body.kuerda-pro .metro-sig-btn[title="PRO"]:hover { border-color: inherit !important; }

/* ─────────────────────────────────────────────────────────
   CSS PRO UNLOCKS — se activan instantáneamente vía
   body.kuerda-pro (antes de que el JS pueda correr)
───────────────────────────────────────────────────────── */
/* Modos Griegos: ocultar overlays y desblur las cards */
body.kuerda-pro .mode-card-pro-overlay { display:none !important; }
body.kuerda-pro .mode-card .mode-card-top {
  filter:none !important; opacity:1 !important;
  pointer-events:auto !important; user-select:auto !important;
}
body.kuerda-pro .mode-card .mode-card-footer {
  filter:none !important; opacity:1 !important;
  pointer-events:auto !important;
}
body.kuerda-pro .mode-card { cursor:pointer !important; }
/* Theory panels: quitar gate blur */
body.kuerda-pro .theory-pro-gate { display:none !important; }
body.kuerda-pro .theory-panel > div[style*="blur"] {
  filter:none !important; pointer-events:auto !important;
  user-select:auto !important; opacity:1 !important;
  max-height:none !important; overflow:visible !important;
}

/* ── Backing track genre header ── */
.bt-genre-header { user-select: none; }

/* ══════════════════════════════════════════════════════
   FASE 1 — HERO REDESIGN
══════════════════════════════════════════════════════ */

/* Hero subtagline */
.hero-subtagline {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(.8rem, 1.8vw, 1rem);
  color: var(--muted);
  letter-spacing: .3px;
  margin-top: .5rem;
  opacity: .85;
  animation: heroFadeUp .8s cubic-bezier(.16,1,.3,1) both;
  animation-delay: .42s;
}
body.light-mode .hero-subtagline { color: #888; }

/* New stats — benefit-based */
.hero-stat-icon {
  font-size: 1.1rem;
  margin-bottom: .25rem;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.hero-stat-benefit {
  font-family: 'Outfit', sans-serif;
  font-size: .72rem;
  font-weight: 500;
  color: var(--text2);
  line-height: 1.4;
  letter-spacing: .2px;
}
.hero-stat-benefit strong {
  color: var(--text);
  font-weight: 700;
  display: block;
}
body.light-mode .hero-stat-benefit { color: #666; }
body.light-mode .hero-stat-benefit strong { color: #111; }

/* .hero-cta-secondary: merged into primary */

/* Streak badge in hero */
.hero-streak-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,107,53,.08);
  border: 1px solid rgba(255,107,53,.25);
  border-radius: 40px;
  padding: .4rem 1rem .4rem .7rem;
  font-family: 'DM Mono', monospace;
  font-size: .62rem; letter-spacing: 1px;
  color: var(--accent);
  animation: heroFadeUp .6s cubic-bezier(.16,1,.3,1) both;
  cursor: default;
}
.hero-streak-badge .streak-fire { font-size: 1rem; }
.hero-streak-badge-new {
  border-color: rgba(0,229,204,.25);
  background: rgba(0,229,204,.06);
  color: var(--teal);
  cursor: pointer;
}

/* Progresiones featured extra styles */
.tk-prog-genres {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin-top: 1rem;
}
.tk-prog-genres span {
  font-family: 'DM Mono', monospace;
  font-size: .5rem; letter-spacing: 1.5px;
  background: rgba(255,107,53,.09);
  border: 1px solid rgba(255,107,53,.2);
  color: var(--accent);
  padding: .2rem .55rem; border-radius: 2px;
  text-transform: uppercase;
}
.tk-prog-genres span:last-child {
  background: transparent;
  border-color: var(--border2);
  color: var(--muted);
}
body.light-mode .tk-prog-genres span {
  background: rgba(212,58,14,.06);
  border-color: rgba(212,58,14,.2);
}

/* PRO Modal — benefit cards */
.pro-modal-benefits {
  display: flex; flex-direction: column; gap: .7rem;
  margin-bottom: 1.4rem;
}
.pro-benefit-card {
  display: flex; align-items: flex-start; gap: .9rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .9rem 1rem;
  transition: border-color .2s;
}
.pro-benefit-card:hover {
  border-color: rgba(255,255,255,.15);
}
.pro-benefit-icon {
  font-size: 1.4rem; flex-shrink: 0; margin-top: .1rem;
}
.pro-benefit-title {
  font-family: 'Outfit', sans-serif;
  font-size: .82rem; font-weight: 700;
  color: var(--text); margin-bottom: .25rem;
}
.pro-benefit-desc {
  font-size: .72rem; color: var(--muted); line-height: 1.55;
}

/* Hero tools section line decorations */
/* .hero-tools-title: merged into primary */

/* END FASE 1 — .hero-tagline merged into primary */

/* ══════════════════════════════════════════════════════
   FASE 2 — LEARNING PATH + SESSION PANEL
══════════════════════════════════════════════════════ */

/* ── Learning Path Progress Bar ── */
.learning-path-progress-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  padding: 1rem 1.4rem;
  margin-bottom: 1.8rem;
  border-radius: 2px;
}
.lp-progress-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .6rem;
}
.lp-progress-label {
  font-family: 'DM Mono', monospace;
  font-size: .55rem; letter-spacing: 2.5px;
  color: var(--muted); text-transform: uppercase;
}
.lp-progress-pct {
  font-family: 'DM Mono', monospace;
  font-size: .65rem; color: var(--gold); font-weight: 700;
}
.lp-bar-outer {
  height: 4px; background: rgba(255,255,255,.07); border-radius: 2px; overflow: hidden;
}
.lp-bar-inner {
  height: 100%; background: linear-gradient(90deg, var(--gold), var(--accent));
  border-radius: 2px;
  transition: width 1s cubic-bezier(.16,1,.3,1);
}

/* ── Learning Path Steps Grid ── */
.learning-path-grid {
  display: flex; flex-direction: column;
  gap: 1px; background: var(--border);
  border: 1px solid var(--border);
  border-radius: 4px; overflow: hidden;
  margin-bottom: 1rem;
}
.lp-step {
  background: var(--surface);
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 0;
  cursor: pointer;
  transition: background .18s;
  align-items: stretch;
}
.lp-step:hover { background: rgba(255,255,255,.04); }
.lp-step-num {
  font-family: 'DM Mono', monospace;
  font-size: .55rem; letter-spacing: 2px;
  color: var(--muted); text-transform: uppercase;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem .5rem;
  border-right: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  flex-direction: column; gap: .2rem;
  transition: color .18s;
}
.lp-step:hover .lp-step-num { color: var(--gold); }
.lp-step-body {
  padding: .85rem 1.2rem;
  display: flex; flex-direction: column; gap: .2rem;
}
.lp-step-title {
  font-family: 'Outfit', sans-serif;
  font-size: .9rem; font-weight: 700; color: var(--text);
}
.lp-step-desc { font-size: .78rem; color: var(--muted); line-height: 1.45; }
.lp-step-time {
  font-family: 'DM Mono', monospace;
  font-size: .5rem; letter-spacing: 1.5px;
  color: var(--border2); margin-top: .2rem; text-transform: uppercase;
}
.lp-step-status {
  display: flex; align-items: center; justify-content: center;
  padding: 1rem 1rem;
  border-left: 1px solid var(--border);
  min-width: 48px;
}
.lp-status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--border2);
  transition: all .25s;
}
.lp-step-status.lp-visited .lp-status-dot {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(245,197,24,.4);
}

/* Final step — special treatment */
.lp-step-final { border-top: 1px solid rgba(155,93,229,.25) !important; }
.lp-num-final { color: var(--purple) !important; }
.lp-step-final:hover .lp-num-final { color: var(--purple) !important; }
.lp-step-final .lp-step-title { color: var(--purple); }

/* Tracker CTA below path */
.lp-tracker-cta { text-align: right; margin-bottom: 1rem; }
.lp-tracker-btn {
  background: none; border: 1px solid var(--border2);
  color: var(--muted); cursor: pointer;
  font-family: 'DM Mono', monospace;
  font-size: .6rem; letter-spacing: 1.5px;
  padding: .5rem 1rem; border-radius: 2px;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: all .18s;
}
.lp-tracker-btn:hover { color: var(--text); border-color: rgba(255,255,255,.25); }

/* ── Session Panel ── */
#sessionPanel {
  padding: 0 5vw;
  max-width: 1400px; margin: 0 auto;
  width: 100%;
}
.session-panel {
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  background: var(--surface);
  padding: 1.4rem 1.8rem;
  margin-bottom: 1.2rem;
}
.session-panel-header { margin-bottom: 1.2rem; }
.sp-label {
  font-family: 'DM Mono', monospace;
  font-size: .52rem; letter-spacing: 3px;
  color: var(--accent); text-transform: uppercase; margin-bottom: .3rem;
}
.sp-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem; font-weight: 700; color: var(--text);
}

/* Onboarding grid — new user */
.sp-onboarding-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .7rem;
}
.sp-onboard-btn {
  background: var(--surface2); border: 1px solid var(--border);
  padding: 1.1rem 1rem; cursor: pointer; border-radius: 3px;
  display: flex; flex-direction: column; gap: .35rem;
  text-align: left; transition: all .2s;
}
.sp-onboard-btn:hover {
  border-color: rgba(255,107,53,.35);
  background: rgba(255,107,53,.05);
}
.sp-onboard-icon { font-size: 1.4rem; }
.sp-onboard-title {
  font-family: 'Outfit', sans-serif;
  font-size: .85rem; font-weight: 700; color: var(--text);
}
.sp-onboard-sub { font-size: .75rem; color: var(--muted); line-height: 1.4; }

/* Returning user panel */
.sp-cols {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 1.2rem; align-items: start;
}
.sp-col-label {
  font-family: 'DM Mono', monospace;
  font-size: .5rem; letter-spacing: 2.5px;
  color: var(--muted); text-transform: uppercase; margin-bottom: .6rem;
}
.sp-next-card {
  background: rgba(255,107,53,.07); border: 1px solid rgba(255,107,53,.2);
  border-radius: 3px; padding: .9rem 1.1rem;
  cursor: pointer; transition: all .18s;
  display: flex; justify-content: space-between; align-items: center;
}
.sp-next-card:hover { background: rgba(255,107,53,.12); }
.sp-next-name {
  font-family: 'Outfit', sans-serif;
  font-size: .9rem; font-weight: 700; color: var(--text);
}
.sp-next-cta {
  font-family: 'DM Mono', monospace;
  font-size: .6rem; color: var(--accent); letter-spacing: 1px;
}
.sp-recent-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.sp-recent-btn {
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text2); padding: .4rem .85rem;
  font-family: 'DM Mono', monospace; font-size: .6rem; letter-spacing: .5px;
  cursor: pointer; border-radius: 2px; transition: all .15s;
}
.sp-recent-btn:hover { color: var(--text); border-color: var(--border2); background: rgba(255,255,255,.06); }

/* Light mode */
body.light-mode .session-panel { background: #fff; border-color: rgba(0,0,0,.1); border-top-color: var(--accent); }
body.light-mode .lp-step { background: #fff; }
body.light-mode .lp-step:hover { background: rgba(0,0,0,.02); }
body.light-mode .learning-path-grid { background: rgba(0,0,0,.08); border-color: rgba(0,0,0,.1); }
body.light-mode .lp-step-num { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.08); }
body.light-mode .lp-step-status { border-color: rgba(0,0,0,.08); }
body.light-mode .sp-onboard-btn { background: #f8f8f8; border-color: rgba(0,0,0,.1); }
body.light-mode .sp-onboard-btn:hover { background: rgba(212,58,14,.04); border-color: rgba(212,58,14,.2); }
body.light-mode .sp-recent-btn { background: #f4f4f4; border-color: rgba(0,0,0,.1); color: #555; }
body.light-mode .lp-step-title { color: #111; }
body.light-mode .sp-title { color: #111; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .sp-onboarding-grid { grid-template-columns: 1fr; }
  .sp-cols { grid-template-columns: 1fr; }
  .lp-step { grid-template-columns: 44px 1fr auto; }
  .lp-step-num { font-size: .45rem; }
  .lp-step-title { font-size: .82rem; }
  .lp-step-desc { display: none; }
  .lp-tracker-cta { text-align: center; }
}

/* ══ DEEP LINK BANNER (Fase 4.1) ══ */
@keyframes krdBannerIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══ MOBILE RESPONSIVE (Fase 4.2) ══ */
@media (max-width: 640px) {
  .krd-related-tools { gap: .35rem; padding: .6rem .8rem; }
  .krt-btn { font-size: .5rem; padding: .3rem .6rem; }
  .krt-label { display: none; }

  .flujo-card { padding: .9rem 1rem; }
  .flujo-steps { flex-wrap: wrap; gap: .3rem; }
  .flujo-step { font-size: .55rem; }

  .krd-acceso-rapido { padding: .9rem 1rem; }
  .ar-continue { padding: .7rem .9rem; gap: .7rem; }
  .ar-continue-icon { font-size: 1.3rem; }
  .ar-continue-name { font-size: .88rem; }
  .ar-continue-cta { display: none; }
  .ar-recent-item { padding: .5rem .75rem; gap: .4rem; }
}

/* ══ HERRAMIENTAS RELACIONADAS (Fase 3.6) ══ */
.krd-related-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 2rem;
  padding: .75rem 1rem;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
}
.krt-label {
  font-family: 'DM Mono', monospace;
  font-size: .48rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
  padding-right: .25rem;
}
.krt-btn {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text2);
  font-family: 'DM Mono', monospace;
  font-size: .55rem;
  letter-spacing: .5px;
  padding: .35rem .75rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.krt-btn:hover {
  background: rgba(0,212,180,.08);
  border-color: rgba(0,212,180,.25);
  color: var(--teal);
}

/* ══ QUICK NAV (Fase 5.1) ══ */
#krdQnList button.krd-qn-item,
.krd-qn-item {
  display: flex !important;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .65rem .85rem;
  margin: 0;
  background: transparent;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  line-height: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: background .12s, border-color .12s;
}
#krdQnList button.krd-qn-item:hover,
#krdQnList button.krd-qn-active,
.krd-qn-item:hover, .krd-qn-active {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
}
.krd-qn-icon { font-size: 1.25rem; flex-shrink: 0; width: 2rem; text-align: center; }
.krd-qn-body { flex: 1; min-width: 0; }
.krd-qn-name {
  font-family: 'Outfit', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text, #ede9e0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.krd-qn-desc {
  font-size: .65rem;
  color: var(--muted, #7a7a8c);
  margin-top: .1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.krd-qn-group {
  font-family: 'DM Mono', monospace;
  font-size: .42rem;
  letter-spacing: 1.5px;
  color: var(--muted2, #555);
  flex-shrink: 0;
  text-transform: uppercase;
}

/* ══ ACCESO RÁPIDO ══ */
.krd-acceso-rapido {
  background: linear-gradient(135deg, rgba(0,212,180,.04), rgba(108,99,255,.04));
  border: 1px solid rgba(0,212,180,.14);
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.4rem;
}
.ar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .8rem;
}
.ar-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: .5rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--teal);
}
.ar-clear {
  font-family: 'DM Mono', monospace;
  font-size: .48rem;
  color: var(--muted);
  cursor: pointer;
  transition: color .12s;
}
.ar-clear:hover { color: var(--accent); }
.ar-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}
.ar-continue {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--panel);
  border: 1px solid rgba(0,212,180,.2);
  border-radius: 10px;
  padding: .65rem .9rem;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
  flex: 1;
  min-width: 180px;
  max-width: 320px;
}
.ar-continue:hover { border-color: rgba(0,212,180,.5); transform: translateY(-1px); }
.ar-continue:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.ar-continue-icon { font-size: 1.3rem; flex-shrink: 0; }
.ar-continue-body { flex: 1; }
.ar-continue-label {
  font-family: 'DM Mono', monospace;
  font-size: .46rem;
  letter-spacing: 1.5px;
  color: var(--teal);
  text-transform: uppercase;
}
.ar-continue-name { font-size: .8rem; font-weight: 600; color: var(--text); }
.ar-continue-cta {
  font-family: 'DM Mono', monospace;
  font-size: .5rem;
  color: var(--teal);
  white-space: nowrap;
  flex-shrink: 0;
}
.ar-recent-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: .5rem .7rem;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.ar-recent-item:hover { border-color: rgba(0,212,180,.25); background: rgba(0,212,180,.05); }
.ar-recent-item:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.ar-recent-icon { font-size: .9rem; }
.ar-recent-label { font-size: .68rem; color: var(--text2); }

@media (max-width: 600px) {
  .ar-continue { max-width: 100%; }
  .ar-recent-item { flex: 1; min-width: 100px; }
}

/* ══ FLUJOS RÁPIDOS ══ */
.flujos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
  width: 100%;
  box-sizing: border-box;
}
.flujo-card {
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 1.4rem 1.2rem 1rem;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-height: 140px;
  box-sizing: border-box;
}
.flujo-card:hover {
  border-color: rgba(0,212,180,.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.flujo-icon {
  font-size: 1.6rem;
  line-height: 1;
}
.flujo-title {
  font-family: 'Syne', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
}
.flujo-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  margin-top: .2rem;
}
.flujo-step {
  font-family: 'DM Mono', monospace;
  font-size: .55rem;
  letter-spacing: .5px;
  color: var(--teal);
  background: rgba(0,212,180,.07);
  border: 1px solid rgba(0,212,180,.15);
  border-radius: 4px;
  padding: .15rem .4rem;
  cursor: pointer;
  transition: background .12s;
  white-space: nowrap;
}
.flujo-step:hover { background: rgba(0,212,180,.14); }
.flujo-arrow {
  font-size: .65rem;
  color: var(--muted);
  flex-shrink: 0;
}
.flujo-cta {
  font-family: 'DM Mono', monospace;
  font-size: .55rem;
  letter-spacing: 1px;
  color: var(--muted);
  margin-top: auto;
  padding-top: .5rem;
  border-top: 1px solid var(--border2);
  text-align: right;
  transition: color .15s;
}
.flujo-card:hover .flujo-cta { color: var(--teal); }

body.light-mode .flujo-card { background: #fff; border-color: #E0DDD8; }
body.light-mode .flujo-step { color: var(--accent); background: rgba(212,58,14,.07); border-color: rgba(212,58,14,.15); }

/* ── LP Compact wrap ── */
.lp-compact-wrap {
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 16px;
  padding: 1.6rem 1.8rem;
  margin-bottom: 2rem;
  width: 100%;
  box-sizing: border-box;
}
.lp-compact-progress { margin-bottom: 1rem; }
.lp-compact-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .5rem;
}
.lp-compact-label {
  font-family: 'DM Mono', monospace;
  font-size: .55rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── LP Steps preview dots ── */
.lp-steps-preview {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}
.lp-sdot {
  font-family: 'DM Mono', monospace;
  font-size: .52rem;
  letter-spacing: 1px;
  padding: .3rem .5rem;
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border2);
  color: var(--muted);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.lp-sdot:hover { background: rgba(0,212,180,.1); border-color: rgba(0,212,180,.3); color: var(--teal); }
.lp-sdot.lp-done { background: rgba(0,212,180,.12); border-color: rgba(0,212,180,.3); color: var(--teal); }
.lp-sdot-final { border-color: rgba(108,99,255,.25); color: var(--purple); }
.lp-sdot-final:hover { background: rgba(108,99,255,.1); border-color: rgba(108,99,255,.4); }
.lp-scon { font-size: .5rem; color: var(--border2); }

body.light-mode .lp-compact-wrap { background: #fff; border-color: #E0DDD8; }
body.light-mode .lp-sdot { background: rgba(0,0,0,.04); border-color: #D0CCC8; }

@media (max-width: 600px) {
  .flujos-grid { grid-template-columns: 1fr; }
  .lp-compact-wrap { padding: 1.2rem; }
}

/* END FASE 2 */

/* ══════════════════════════════════════════════════════
   TRUCO ESENCIAL — CSS Completo
══════════════════════════════════════════════════════ */

/* ── Controls ── */
.tr-controls {
  display: flex; flex-wrap: wrap; gap: 1.2rem;
  align-items: flex-end; margin-bottom: 1.4rem;
}
.tr-ctrl-group { display: flex; flex-direction: column; gap: .35rem; }
.tr-ctrl-label {
  font-family: 'DM Mono', monospace; font-size: .52rem;
  letter-spacing: 2.5px; color: var(--muted2); text-transform: uppercase;
}
.tr-select {
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: 'DM Mono', monospace;
  font-size: .75rem;
  padding: .5rem 1rem;
  border-radius: var(--radius-sm);
  cursor: pointer; outline: none;
  transition: border-color .16s;
  min-width: 180px;
}
.tr-select:hover { border-color: var(--gold); }

/* Root buttons */
.tr-root-btns { display: flex; flex-wrap: wrap; gap: .28rem; }
.tr-root-btn {
  font-family: 'DM Mono', monospace; font-size: .65rem; font-weight: 700;
  padding: .3rem .58rem; min-width: 38px;
  background: var(--surface); border: 1px solid var(--border2);
  color: var(--muted); cursor: pointer; border-radius: 3px;
  transition: all .15s;
}
.tr-root-btn:hover { color: var(--text); border-color: rgba(255,255,255,.3); }
.tr-root-btn.active {
  background: rgba(245,197,24,.18); color: var(--gold);
  border-color: var(--gold); box-shadow: 0 0 6px rgba(245,197,24,.25);
}

/* ── Main card ── */
.tr-main-card {
  background: linear-gradient(160deg, var(--panel) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius-md) var(--radius-md) var(--radius-sm) var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* Headline bar */
.tr-headline-bar {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: .5rem;
  padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}
.tr-headline-text {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem; font-weight: 800; line-height: 1.2;
}
.tr-genre-tag {
  display: block; font-family: 'DM Mono', monospace;
  font-size: .52rem; color: var(--muted); margin-top: .3rem;
  letter-spacing: .5px;
}
.tr-fret-tag {
  font-family: 'DM Mono', monospace; font-size: .65rem;
  color: var(--muted); padding: .35rem .75rem;
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  border-radius: 3px; white-space: nowrap; align-self: center;
}
.tr-fret-tag strong { color: var(--gold); }

/* ── Sections ── */
.tr-section { padding: 1.4rem; }
.tr-section-sep { border-top: 1px solid var(--border); }
.tr-section-label {
  display: flex; align-items: center; gap: .7rem;
  font-family: 'DM Mono', monospace; font-size: .55rem;
  letter-spacing: 2.5px; color: var(--muted); margin-bottom: .7rem;
  text-transform: uppercase;
}
.tr-step-num {
  background: var(--gold); color: #000;
  font-size: .48rem; font-weight: 900; letter-spacing: 1px;
  padding: .15rem .4rem; border-radius: 2px; font-family: 'DM Mono', monospace;
}
.tr-section-hint {
  font-size: .78rem; color: var(--muted); line-height: 1.65;
  margin: 0 0 1.1rem; max-width: 620px;
}
.tr-section-hint strong { color: var(--text); }

/* ── Fretboard wrapper ── */
.tr-fretboard-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .2rem; }

/* ── Fretboard core ── */
.tr-fb { display: table; border-collapse: collapse; min-width: 100%; }
.tr-fb-row { display: table-row; }

/* String label column */
.tr-fb-strlabel {
  display: table-cell; width: 48px; min-width: 48px;
  font-family: 'DM Mono', monospace; font-size: .48rem; font-weight: 700;
  color: var(--muted2); text-align: right; padding-right: .5rem;
  vertical-align: middle; white-space: nowrap;
  border-right: 2px solid var(--border2); /* nut-like separator */
}
.tr-fb-header .tr-fb-strlabel { font-size: .42rem; border-right: none; }

/* Fret number header cells */
.tr-fb-fretnum {
  display: table-cell; width: 52px; min-width: 52px;
  text-align: center; padding: .35rem .1rem;
  font-family: 'DM Mono', monospace; font-size: .5rem; color: var(--muted2);
  border-right: 1px solid var(--border);
}
.tr-fb-fretnum.tr-fb-dotfret { color: var(--gold); font-weight: 700; }
.tr-fb-fretnum.tr-fb-openfret {
  color: var(--muted2); font-size: .6rem;
  border-right: 2px solid rgba(255,255,255,.18);
}
.tr-fb-cell-open {
  border-right: 2px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.02);
}

/* Nut header (before fret 0 in locator) */


/* Dot markers row */
.tr-fb-dotcell {
  display: table-cell; text-align: center; padding: .2rem 0;
  border-right: 1px solid var(--border);
}

.tr-fb-dot {
  display: flex; justify-content: center; align-items: center; gap: 4px;
}
.tr-fb-dot-double { gap: 5px; }
.tr-fb-dot-inner {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.15);
}

/* String row cells */
.tr-fb-nut {
  display: table-cell; width: 8px; min-width: 8px;
  background: rgba(255,255,255,.08); border-right: 3px solid rgba(255,255,255,.3);
  vertical-align: middle; text-align: center; position: relative;
}
.tr-fb-cell {
  display: table-cell; width: 52px; min-width: 52px;
  height: 44px; text-align: center; vertical-align: middle;
  border-right: 1px solid var(--border); position: relative;
}

/* String line inside cell */
.tr-fb-string-line {
  position: absolute; top: 50%; left: 0; right: 0;
  height: 1px; background: rgba(255,255,255,.18);
  transform: translateY(-50%);
  pointer-events: none;
}

/* Note circles */
.tr-fb-note {
  position: relative; z-index: 2;
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid transparent;
  transition: transform .12s, box-shadow .12s;
}
.tr-fb-note:hover { transform: scale(1.1); }
.tr-fb-root {
  width: 38px; height: 38px;
  box-shadow: 0 0 14px currentColor;
}
.tr-fb-note-name {
  font-family: 'DM Mono', monospace; font-size: .62rem; font-weight: 900;
  line-height: 1;
}
.tr-fb-note-deg {
  font-family: 'DM Mono', monospace; font-size: .38rem; opacity: .85; line-height: 1;
}

/* ── Legend ── */
.tr-legend {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: .8rem 1.4rem; background: rgba(255,255,255,.02);
  border-top: 1px solid var(--border);
}
.tr-legend-item { display: flex; align-items: center; gap: .4rem; }
.tr-legend-dot {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Mono', monospace; font-size: .48rem; font-weight: 900;
}
.tr-legend-root { width: 30px; height: 30px; }
.tr-legend-label {
  font-family: 'DM Mono', monospace; font-size: .55rem; color: var(--muted);
}

/* ── Quick ref chips ── */
.tr-quick-ref { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .9rem; }
.tr-qr-label { font-family: 'DM Mono', monospace; font-size: .52rem; color: var(--muted2); margin-right: .2rem; }
.tr-qr-chip {
  display: flex; flex-direction: column; align-items: center;
  padding: .35rem .6rem; border: 1px solid var(--border);
  border-radius: 3px; background: var(--surface2); min-width: 40px;
  cursor: default; transition: all .15s;
}
.tr-qr-chip.active {
  border-color: var(--gold); background: rgba(245,197,24,.12);
  box-shadow: 0 0 8px rgba(245,197,24,.2);
}
.tr-qr-note {
  font-family: 'DM Mono', monospace; font-size: .72rem; font-weight: 900;
  color: var(--muted);
}
.tr-qr-chip.active .tr-qr-note { color: var(--gold); }
.tr-qr-fret {
  font-family: 'DM Mono', monospace; font-size: .45rem; color: var(--muted2); margin-top: .1rem;
}

/* ── Note chips row ── */
.tr-notes-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.tr-note-chip {
  display: flex; flex-direction: column; align-items: center;
  padding: .5rem .95rem; border-radius: 4px; border: 2px solid transparent;
  min-width: 52px; text-align: center; transition: transform .1s;
}
.tr-note-chip:hover { transform: translateY(-2px); }
.tr-note-root { transform: scale(1.1); }
.tr-note-root:hover { transform: scale(1.15) translateY(-2px); }
.tr-note-chip-name {
  font-family: 'Outfit', sans-serif;
  font-size: .95rem; font-weight: 900; line-height: 1;
}
.tr-note-chip-deg {
  font-family: 'DM Mono', monospace; font-size: .46rem; opacity: .8; margin-top: .18rem;
}

/* ── Tip block ── */
.tr-tip-block {
  margin: 0 1.4rem 1.4rem;
  padding: .95rem 1.15rem;
  background: rgba(245,197,24,.04); border: 1px solid rgba(245,197,24,.15);
  border-left: 3px solid var(--gold); border-radius: 3px;
}
.tr-tip-label {
  font-family: 'DM Mono', monospace; font-size: .52rem;
  color: var(--gold); letter-spacing: 2px; margin-bottom: .4rem; font-weight: 700;
}
.tr-tip-text {
  font-size: .8rem; color: var(--muted); line-height: 1.7; margin: 0;
}

/* ── Light mode ── */
body.light-mode .tr-select { background: #f4f4f4; color: #111; border-color: rgba(0,0,0,.2); }
body.light-mode .tr-main-card { background: #fff; border-color: rgba(0,0,0,.1); }
body.light-mode .tr-headline-bar { background: rgba(0,0,0,.02); }
body.light-mode .tr-fb-strlabel { color: #888; border-color: rgba(0,0,0,.25); }
body.light-mode .tr-fb-fretnum { color: #aaa; border-color: rgba(0,0,0,.1); }
body.light-mode .tr-fb-cell { border-color: rgba(0,0,0,.1); }
body.light-mode .tr-fb-string-line { background: rgba(0,0,0,.15); }
body.light-mode .tr-fb-dot-inner { background: rgba(0,0,0,.15); }
body.light-mode .tr-legend { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.08); }
body.light-mode .tr-qr-chip { background: #f4f4f4; border-color: rgba(0,0,0,.12); }
body.light-mode .tr-tip-block { background: rgba(200,160,0,.05); }

/* ── Responsive ── */
@media (max-width: 600px) {
  .tr-controls { flex-direction: column; }
  .tr-fb-cell { min-width: 42px; width: 42px; }
  .tr-fb-fretnum { min-width: 42px; width: 42px; }
  .tr-fb-note { width: 28px; height: 28px; }
  .tr-fb-root { width: 32px; height: 32px; }
  .tr-fb-note-name { font-size: .55rem; }
  .tr-fb-note-deg { display: none; }
  .tr-fb-strlabel { font-size: .42rem; width: 38px; min-width: 38px; }
  .tr-section { padding: 1rem; }
  .tr-legend { padding: .7rem 1rem; }
}

/* END TRUCO ESENCIAL */


/* ── Truco Esencial PRO Gate ── */
.tr-pro-gate {
  border: 1px solid rgba(245,197,24,.25);
  border-top: 3px solid var(--gold);
  background: var(--surface);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 0;
}
.tr-pro-gate-inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 3rem 2rem; gap: 1rem;
}
.tr-pro-gate-lock {
  font-size: 2.5rem; line-height: 1;
  filter: drop-shadow(0 0 12px rgba(245,197,24,.4));
}
.tr-pro-gate-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.3rem; font-weight: 800; color: var(--gold);
  letter-spacing: -.5px;
}
.tr-pro-gate-desc {
  font-size: .82rem; color: var(--muted);
  line-height: 1.65; max-width: 360px;
}
.tr-pro-gate-desc strong { color: var(--text); }
.tr-pro-gate-btn {
  background: var(--gold); color: #000;
  border: none; cursor: pointer;
  font-family: 'DM Mono', monospace;
  font-size: .65rem; font-weight: 900;
  letter-spacing: 2px; padding: .65rem 1.6rem;
  border-radius: 3px; margin-top: .5rem;
  transition: opacity .15s;
}
.tr-pro-gate-btn:hover { opacity: .88; }
body.light-mode .tr-pro-gate { background: #fff; border-color: rgba(200,160,0,.25); }
/* END PRO Gate */

/* ╔═══════════════════════════════════════════════════════════════
   ║  
/* ╔══════════════════════════════════════════════════════════════
   ║  KUERDA — Visual Polish v4.0 — UNIQUE RULES ONLY
   ║  (duplicados eliminados; supersedidos por Visual Remaster FINAL)
   ╚══════════════════════════════════════════════════════════════ */

/* ── Hero tagline em — acento cálido ── */
.hero-tagline em {
  font-style: normal;
  color: var(--accent);
}

/* ── Scale card tier-1 hover — gold shadow ── */
.scale-card.tier-1:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(240,174,26,.12);
}

/* ── Progress bar ── */
#heroProgressFill, .learning-path-progress-bar {
  background: linear-gradient(90deg, var(--accent) 0%, var(--gold) 100%);
  box-shadow: 0 0 12px rgba(0,212,180,.3);
}

/* ── Section separator line — hero-tools ── */
.hero-tools-section::before {
  content: '';
  position: absolute; top: 0; left: 5vw; right: 5vw; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
}

/* ── Footer real ── */
.footer-inner, .site-footer, footer.site-footer {
  border-top: 1px solid rgba(255,255,255,.05);
}

/* ── Light mode — nav-logo gradient text ── */
body.light-mode .nav-logo {
  background: linear-gradient(135deg, var(--gold) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* END Visual Polish v4.0 */
/* ╔══════════════════════════════════════════════════════════
   ║  KUERDA · Visual Remaster FINAL
   ║  Audit-driven. Verified selectors only. 0 dead rules.
   ╚══════════════════════════════════════════════════════════ */

/* ───────── GRAIN TEXTURE OVERLAY ───────── */
.k-grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  /* FIX: contain-paint evita que el filter SVG invalide capas externas */
  contain: strict;
  will-change: auto;
}
body.light-mode .k-grain { opacity: .012; }

/* FIX: ocultar en mobile siempre — SVG feTurbulence es inaceptablemente caro en GPU móvil */
@media (max-width: 768px) { .k-grain { display: none; } }

/* ───────── VIGNETTE ───────── */
.k-vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, transparent 48%, rgba(5,5,16,.48) 100%);
  /* FIX: contiene repintado para no invalidar el stacking context completo */
  contain: strict;
}
body.light-mode .k-vignette { display: none; }
/* FIX: sin sentido visual cuando la hero está oculta + ahorra GPU */


/* ───────── HERO SUBTAGLINE (new class) ───────── */
.hero-subtagline {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(.82rem, 1.6vw, .98rem);
  font-weight: 400;
  color: var(--muted);
  letter-spacing: .2px;
  line-height: 1.65;
  margin-top: .45rem;
  max-width: 480px;
}

/* ───────── HERO STAT BENEFIT STRONG ───────── */
.hero-stat-benefit strong {
  color: var(--text);
  font-family: 'Syne', sans-serif;
  font-weight: 700;
}

/* .hero-cta-secondary:hover: merged into primary */

/* ───────── NAV UPGRADES ───────── */
nav {
  background: linear-gradient(180deg, rgba(5,5,16,.98) 0%, rgba(5,5,16,.94) 100%);
  border-bottom: 1px solid rgba(255,255,255,.05);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
.nav-drop-item:hover {
  background: rgba(0,212,180,.06);
  padding-left: 1.2rem;
}
body.light-mode nav {
  background: rgba(245,243,239,.97);
  border-bottom: 1px solid rgba(0,0,0,.07);
}


/* ───────── LEARNING PATH PROGRESS ───────── */
.learning-path-progress-bar {
  background: linear-gradient(90deg, var(--accent) 0%, var(--gold) 100%);
  box-shadow: 0 0 8px rgba(0,212,180,.3);
}

/* ───────── HERO SOCIAL PROOF ───────── */
.hero-social-proof {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(12px);
}

/* ───────── PRO GATE STYLING ───────── */
.tr-pro-gate {
  border: 1px solid rgba(240,174,26,.15);
  border-top: 2px solid rgba(240,174,26,.4);
  background: linear-gradient(160deg, var(--panel) 0%, var(--surface) 100%);
  border-radius: var(--radius-md);
}
.pro-gate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(240,174,26,.4);
}

/* ───────── TR-FB GLOW ───────── */
.tr-fb-root {
  box-shadow: 0 0 14px currentColor, 0 0 28px rgba(240,174,26,.25);
}
.tr-select:focus {
  border-color: rgba(0,212,180,.5);
  box-shadow: 0 0 0 3px rgba(0,212,180,.08);
  outline: none;
}

/* ───────── METRO / TUNER ───────── */
.metro-display {
  background: linear-gradient(160deg, #080820 0%, #05051a 100%);
  border: 1px solid var(--border3);
}
.tuner-display {
  background: linear-gradient(160deg, #080820 0%, #05051a 100%);
  border: 1px solid var(--border3);
}

/* [merged into mobile v8 block] */

/* ───────── SCROLLBAR ───────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent) 0%, var(--purple) 100%);
  border-radius: 3px;
  opacity: .6;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ───────── TEXT SELECTION ───────── */
::selection { background: rgba(0,212,180,.22); color: #fff; }

/* ───────── FOCUS RING ───────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ───────── LIGHT MODE CARDS ───────── */
body.light-mode .tk-card {
  background: #fff;
  border-color: #E0DDD8;
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
}
body.light-mode .scale-card {
  background: #fff;
  border-color: #D8D5CF;
}
body.light-mode .theory-card {
  background: #fff;
  border-color: #D8D5CF;
}
body.light-mode .modal {
  background: #fff;
}
body.light-mode .pro-modal-box {
  background: #fff;
  border-top: 2px solid var(--gold);
}
body.light-mode .hero-social-proof {
  background: rgba(0,0,0,.025);
  border-color: rgba(0,0,0,.07);
}
/* [merged into mobile v8 block] */

/* END Visual Remaster FINAL */




/* ══════════════════════════════════════════════════════
   ONBOARDING MODAL v1.0
   Full-screen level selector — first visit only
══════════════════════════════════════════════════════ */
#onboardingOverlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
#onboardingOverlay.ob-visible {
  opacity: 1;
  pointer-events: all;
}
.ob-card {
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 24px;
  padding: clamp(2rem, 5vw, 3.5rem);
  max-width: 600px;
  width: 100%;
  box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(0,212,180,.08);
  position: relative;
  animation: obCardIn .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes obCardIn {
  from { transform: translateY(32px) scale(.96); opacity: 0; }
  to   { transform: translateY(0) scale(1);      opacity: 1; }
}
.ob-logo {
  font-family: 'Bebas Neue', cursive;
  font-size: 1.4rem;
  letter-spacing: 4px;
  margin-bottom: 1.8rem;
  background: linear-gradient(135deg, var(--teal) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}
.ob-logo span { color: inherit; -webkit-text-fill-color: inherit; }
.ob-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: .6rem;
}
.ob-sub {
  font-family: 'Outfit', sans-serif;
  font-size: .88rem;
  color: var(--muted);
  margin-bottom: 2.2rem;
  line-height: 1.6;
}
.ob-levels {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
}
.ob-level-btn {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 1.4rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all .18s;
  text-align: left;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.ob-level-btn::after {
  content: '→';
  position: absolute;
  right: 1.4rem;
  color: var(--muted);
  font-size: 1.1rem;
  transition: right .18s, color .18s;
}
.ob-level-btn:hover {
  border-color: var(--teal);
  background: rgba(0,212,180,.06);
  transform: translateX(3px);
}
.ob-level-btn:hover::after { right: 1rem; color: var(--teal); }
.ob-level-btn.ob-lvl-mid:hover { border-color: var(--teal); background: rgba(0,229,204,.07); }
.ob-level-btn.ob-lvl-mid:hover::after { color: var(--teal); }
.ob-level-btn.ob-lvl-adv:hover { border-color: var(--gold); background: rgba(245,197,24,.07); }
.ob-level-btn.ob-lvl-adv:hover::after { color: var(--gold); }
.ob-lvl-icon {
  font-size: 2rem;
  width: 44px;
  text-align: center;
  flex-shrink: 0;
}
.ob-lvl-body { flex: 1; }
.ob-lvl-title {
  font-family: 'Syne', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .2rem;
}
.ob-lvl-sub {
  font-family: 'Outfit', sans-serif;
  font-size: .76rem;
  color: var(--muted);
  line-height: 1.5;
}
.ob-lvl-tags {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-top: .45rem;
}
.ob-tag {
  font-family: 'DM Mono', monospace;
  font-size: .52rem;
  letter-spacing: 1px;
  padding: .2rem .6rem;
  border-radius: 20px;
  border: 1px solid;
}
.ob-tag-red   { color: var(--teal);   border-color: rgba(0,212,180,.3); }
.ob-tag-teal  { color: var(--teal);   border-color: rgba(0,229,204,.35); }
.ob-tag-gold  { color: var(--gold);   border-color: rgba(245,197,24,.35); }
.ob-skip {
  margin-top: 1.4rem;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: .72rem;
  color: var(--muted);
}
.ob-skip button {
  background: none; border: none; color: var(--muted);
  font-family: inherit; font-size: inherit;
  cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s;
}
.ob-skip button:hover { color: var(--text2); }
/* Light mode */
body.light-mode #onboardingOverlay { background: rgba(240,238,234,.88); }
body.light-mode .ob-card {
  background: #fff;
  border-color: rgba(0,0,0,.1);
  box-shadow: 0 40px 80px rgba(0,0,0,.15);
}
body.light-mode .ob-title { color: #111; }
body.light-mode .ob-sub { color: #666; }
body.light-mode .ob-level-btn { background: #f9f8f5; border-color: rgba(0,0,0,.12); }
body.light-mode .ob-lvl-title { color: #111; }
body.light-mode .ob-lvl-sub { color: #666; }
/* Mobile — bottom sheet pattern */
@media (max-width: 480px) {
  #onboardingOverlay {
    align-items: flex-end;
    padding: 0;
  }
  .ob-card {
    padding: 1.8rem 1.2rem calc(1.8rem + env(safe-area-inset-bottom, 0px)) 1.2rem;
    border-radius: 24px 24px 0 0;
    border-bottom: none;
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: obSlideUp .4s cubic-bezier(.16,1,.3,1) both;
  }
  /* swipe-handle hint */
  .ob-card::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: rgba(255,255,255,.15);
    border-radius: 2px;
    margin: 0 auto 1.5rem;
  }
  @keyframes obSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  .ob-level-btn { padding: 1rem 1.1rem; }
  .ob-lvl-icon { font-size: 1.6rem; width: 36px; }
  .ob-title { font-size: 1.5rem; }
}


/* ══════════════════════════════════════════════════════
   PWA INSTALL PROMPT v1.0
══════════════════════════════════════════════════════ */
#pwaPrompt {
  position: fixed;
  bottom: calc(4.8rem + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 1800;
  background: var(--panel);
  border: 1px solid rgba(0,229,204,.35);
  border-radius: 14px;
  padding: 1rem 1.2rem 1rem 1rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  box-shadow: 0 8px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(0,229,204,.1);
  min-width: 300px;
  max-width: calc(100vw - 2rem);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
  opacity: 0;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s;
}
#pwaPrompt.pwa-visible {
  transform: translateX(-50%) translateY(0);
  pointer-events: all;
  opacity: 1;
}
.pwa-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.pwa-body { flex: 1; }
.pwa-title {
  font-family: 'Syne', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .1rem;
}
.pwa-sub {
  font-family: 'Outfit', sans-serif;
  font-size: .68rem;
  color: var(--muted);
}
.pwa-actions { display: flex; flex-direction: column; gap: .4rem; }
.pwa-btn-install {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: 1px;
  font-weight: 700;
  padding: .4rem .9rem;
  background: var(--teal);
  color: #000;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}
.pwa-btn-install:hover { opacity: .85; }
.pwa-btn-close {
  background: none; border: none;
  color: var(--muted); font-size: .75rem;
  cursor: pointer; text-align: center;
  transition: color .15s;
}
.pwa-btn-close:hover { color: var(--text2); }
body.light-mode #pwaPrompt {
  background: #fff;
  border-color: rgba(0,229,204,.4);
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
}

/* ══════════════════════════════════════════════════════
   PRÁCTICA DE HOY — session panel enhancement
══════════════════════════════════════════════════════ */
.sp-practice-today {
  background: linear-gradient(135deg, rgba(0,229,204,.06) 0%, rgba(155,93,229,.06) 100%);
  border: 1px solid rgba(0,229,204,.2);
  border-radius: 12px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.4rem;
}
.sp-pt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: .5rem;
}
.sp-pt-label {
  font-family: 'DM Mono', monospace;
  font-size: .55rem;
  letter-spacing: 3px;
  color: var(--teal);
  text-transform: uppercase;
}
.sp-pt-date {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  color: var(--muted);
}
.sp-pt-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .3rem;
}
.sp-pt-goal {
  font-family: 'Outfit', sans-serif;
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 1rem;
}
.sp-pt-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .7rem;
}
.sp-pt-step {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  padding: .85rem 1rem;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  border-left: 3px solid transparent;
}
.sp-pt-step:hover {
  background: rgba(255,255,255,.08);
  border-left-color: var(--teal);
  transform: translateX(2px);
}
.sp-pt-step-icon { font-size: 1.1rem; margin-top: .05rem; }
.sp-pt-step-body { flex: 1; }
.sp-pt-step-name {
  font-family: 'Outfit', sans-serif;
  font-size: .76rem;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: .15rem;
}
.sp-pt-step-dur {
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  color: var(--teal);
  letter-spacing: .5px;
}
.sp-pt-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px solid rgba(255,255,255,.06);
  flex-wrap: wrap;
}
.sp-pt-total {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  color: var(--muted);
}
.sp-pt-total strong { color: var(--text2); }
.sp-pt-start-btn {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: 1.5px;
  font-weight: 700;
  padding: .5rem 1.2rem;
  background: var(--teal);
  color: #000;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin-left: auto;
  transition: opacity .15s;
}
.sp-pt-start-btn:hover { opacity: .85; }
/* Light mode */
body.light-mode .sp-practice-today {
  background: linear-gradient(135deg, rgba(0,180,160,.06), rgba(120,60,200,.06));
  border-color: rgba(0,180,160,.25);
}
body.light-mode .sp-pt-step {
  background: #fff;
  border-color: rgba(0,0,0,.08);
}
body.light-mode .sp-pt-step:hover { background: #f5fffe; }
body.light-mode .sp-pt-step-name { color: #333; }

/* ══════════════════════════════════════════════════════
   SHARE BUTTON (Web Share API)
══════════════════════════════════════════════════════ */
.krd-share-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: 1px;
  font-weight: 700;
  padding: .5rem 1rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,.15);
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
}
.krd-share-btn:hover {
  border-color: var(--teal);
  color: var(--teal);
}
.krd-share-btn svg { flex-shrink: 0; }
.krd-share-toast {
  position: fixed;
  bottom: calc(5.5rem + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0,229,204,.95);
  color: #000;
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: 1px;
  font-weight: 700;
  padding: .6rem 1.2rem;
  border-radius: 20px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.krd-share-toast.toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
body.light-mode .krd-share-btn { border-color: rgba(0,0,0,.15); color: #666; }
body.light-mode .krd-share-btn:hover { border-color: var(--teal); color: var(--teal); }


/* ══════════════════════════════════════════════════════════════════
   KUERDA — HERO v3.0  |  Nueva arquitectura de información
   Orden: Wordmark → QUÉ ES → Tagline → Pills → CTAs → Trust row
══════════════════════════════════════════════════════════════════ */

/* ② Propuesta de valor — qué es Kuerda */
.hero-value-prop {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(.9rem, 1.6vw, 1.18rem);
  color: var(--text2);
  line-height: 1.7;
  margin-top: 1.4rem;
  max-width: 580px;
  animation: heroFadeUp .8s cubic-bezier(.16,1,.3,1) both;
  animation-delay: .28s;
}
.hero-value-prop strong { color: var(--teal); font-weight: 700; }
.hero-value-prop em { color: var(--text); font-style: normal; font-weight: 600; }
body.light-mode .hero-value-prop { color: #555; }
body.light-mode .hero-value-prop strong { color: #009980; }
body.light-mode .hero-value-prop em { color: #222; }

/* ③ Tagline emocional */
.hero-tagline {
  font-family: 'Syne', sans-serif;
  font-style: italic;
  font-size: clamp(2rem, 5vw, 4.2rem);
  color: var(--text);
  letter-spacing: -.5px;
  margin-top: .6rem;
  line-height: 1.05;
  animation: heroFadeUp .8s cubic-bezier(.16,1,.3,1) both;
  animation-delay: .35s;
}
.hero-tagline em {
  font-style: normal;
  color: var(--teal);
  -webkit-text-fill-color: var(--teal);
}
body.light-mode .hero-tagline { color: #111; }
body.light-mode .hero-tagline em { color: var(--teal); -webkit-text-fill-color: var(--teal); }

/* ④ Tool pills */
.hero-tool-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 2rem;
  animation: heroFadeUp .8s cubic-bezier(.16,1,.3,1) both;
  animation-delay: .44s;
}
.htp-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .95rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 99px;
  font-family: 'Outfit', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
}
.htp-pill:hover {
  background: rgba(0,212,180,.07);
  border-color: rgba(0,212,180,.25);
  color: var(--teal);
  transform: translateY(-1px);
}
.htp-icon { font-size: .85rem; line-height: 1; }
.htp-pill-more {
  border-color: rgba(0,229,204,.25);
  color: var(--teal);
  background: rgba(0,229,204,.05);
}
.htp-pill-more:hover {
  background: rgba(0,229,204,.1);
  border-color: var(--teal);
  color: var(--teal);
}
body.light-mode .htp-pill {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.12);
  color: #444;
}
body.light-mode .htp-pill:hover { background: rgba(0,0,0,.08); color: #111; border-color: rgba(0,0,0,.25); }
body.light-mode .htp-pill-more { background: rgba(0,150,130,.06); border-color: rgba(0,150,130,.3); color: #007a6e; }

/* ⑥ Trust row — social proof + mini quotes */
.hero-trust-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.6rem;
  animation: heroFadeUp .6s ease both;
  animation-delay: .72s;
}
.hero-mini-quotes {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.hmq-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}
.hmq-stars {
  color: var(--gold);
  font-size: .58rem;
  letter-spacing: 1px;
  flex-shrink: 0;
}
.hmq-text {
  font-family: 'Outfit', sans-serif;
  font-size: .7rem;
  font-style: italic;
  color: var(--text2);
}
.hmq-author {
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  color: var(--muted);
  white-space: nowrap;
}
.hmq-divider {
  width: 1px;
  height: 24px;
  background: var(--border2);
  flex-shrink: 0;
}
body.light-mode .hmq-text { color: #444; }
body.light-mode .hmq-author { color: #888; }
body.light-mode .hmq-divider { background: rgba(0,0,0,.12); }

/* Mobile overrides */
@media (max-width: 768px) {
  .hero-value-prop {
    font-size: .82rem !important;
    margin-top: .9rem !important;
  }
  .hero-tagline {
    font-size: clamp(1.6rem, 8vw, 2.4rem) !important;
    margin-top: .6rem !important;
  }
  .hero-tool-pills {
    margin-top: 1.2rem !important;
    gap: .4rem !important;
  }
  .htp-pill { font-size: .65rem !important; padding: .3rem .7rem !important; }
  .hero-trust-row { gap: .7rem !important; margin-top: 1.2rem !important; }
  .hero-mini-quotes { gap: .5rem !important; }
  .hmq-divider { display: none; }
  .hmq-item:last-child { display: none; } /* show only 1 quote on mobile */
  .hmq-text { font-size: .68rem !important; }
}
@media (max-width: 480px) {
  .hero-value-prop { display: none; } /* wordmark+tagline is enough on tiny screens */
  .hero-tagline { font-size: clamp(1.4rem, 7vw, 1.9rem) !important; }
}


/* ══ Tools section — upgraded headers ══ */
.hero-tools-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: 4px;
  color: var(--teal);
  text-transform: uppercase;
  padding: .2rem .7rem;
  background: rgba(0,212,180,.08);
  border: 1px solid rgba(0,212,180,.2);
  border-radius: var(--radius-pill);
  display: inline-block;
  margin-bottom: .8rem;
}
.hero-tools-sub {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(.78rem, 1.8vw, .92rem);
  color: var(--muted);
  margin-top: .5rem;
  line-height: 1.6;
  max-width: 600px;
}
body.light-mode .hero-tools-sub { color: #666; }
body.light-mode .hero-tools-eyebrow { color: #008b7c; }


body.light-mode #proValueStrip {
  background: linear-gradient(135deg,rgba(212,40,8,.05) 0%,rgba(120,60,200,.05) 100%);
  border-color: rgba(212,40,8,.12);
}
body.light-mode #proValueStrip div { color: #111 !important; }


/* Tagline override — ensure new color wins over old gold color */
.hero-above-fold .hero-tagline {
  color: var(--text) !important;
}
.hero-above-fold .hero-tagline em {
  font-style: normal !important;
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
}
body.light-mode .hero-above-fold .hero-tagline { color: #111 !important; }


/* ── Hero credibility bar (replaces fake mini-quotes) ── */
.hero-cred-bar {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.hcb-item {
  display: flex;
  align-items: baseline;
  gap: .35rem;
}
.hcb-num {
  font-family: 'Bebas Neue', cursive;
  font-size: 1.3rem;
  color: var(--text);
  line-height: 1;
  letter-spacing: 1px;
}
.hcb-label {
  font-family: 'Outfit', sans-serif;
  font-size: .68rem;
  color: var(--muted);
  font-weight: 500;
}
.hcb-sep {
  width: 1px;
  height: 22px;
  background: var(--border2);
  flex-shrink: 0;
}
body.light-mode .hcb-num { color: #111; }
body.light-mode .hcb-label { color: #666; }
body.light-mode .hcb-sep { background: rgba(0,0,0,.15); }
@media (max-width: 480px) {
  .hcb-sep { display: none; }
  .hero-cred-bar { gap: .8rem; }
  .hcb-num { font-size: 1.1rem; }
  .hcb-label { font-size: .62rem; }
}




/* ════════════════════════════════════════════════════════════════
   UX POLISH — visual comfort improvements
════════════════════════════════════════════════════════════════ */

/* ── Smoother page transition ────────────────────────────────────────── */
/* The current pageIn is translateY(12px) — subtle upward entrance.
   We make it slightly faster (0.22s) and use a tighter easing for
   a crisper "snapping into place" feel vs the current ease curve.  */

/* ── Tool panel: consistent card style ──────────────────────────────── */
.tool-panel {
  background: var(--panel);
  border: 1px solid var(--border2);
  border-top: 3px solid var(--teal);
  border-radius: 2px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* ── Section label in compact header: tighter ────────────────────────── */
.tool-header-compact .sec-label {
  font-size: .5rem;
  letter-spacing: 3px;
  white-space: nowrap;
  padding: .2rem .5rem;
  background: rgba(0,212,180,.08);
  border: 1px solid rgba(0,212,180,.18);
  border-radius: 2px;
}

/* ── Metro: bigger BPM slider thumb on mobile ───────────────────────── */
@media (max-width: 768px) {
  #bpmSlider {
    height: 6px;
    accent-color: var(--accent);
  }
  #bpmSlider::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
  }
  .metro-display {
    /* Slightly smaller on small screens so controls fit above fold */
    font-size: clamp(3.5rem, 18vw, 5.5rem) !important;
  }
}

/* ── Tuner: strings reference grid on mobile ─────────────────────────── */
@media (max-width: 480px) {
  .tuner-strings-ref {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ── Chord finder: fix two-column layout gap on mobile ──────────────── */
@media (max-width: 768px) {
  .chord-finder-wrap {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
  }
  #chordFinderGrid {
    /* Slightly smaller buttons on phone */
    grid-template-columns: repeat(6, 1fr) !important;
  }
}

/* ── Backing tracks: player bar sticky on mobile ─────────────────────── */
@media (max-width: 768px) {
  .backing-player-bar {
    position: sticky;
    bottom: calc(52px + env(safe-area-inset-bottom, 0px));
    z-index: 10;
    margin: 0 -1.1rem; /* bleed to edges */
  }
}

/* ── Speed panel tooltip on inactive state ───────────────────────────── */
@media (max-width: 768px) {
  /* Simpler speed controls on mobile — hide slider, keep presets only */
  #btSpeedSlider { display: none; }
  #btSpeedBpm    { display: none; }
}

/* ── Transpositor: result area visual improvement ────────────────────── */
#transposeResult {
  font-family: 'DM Mono', monospace;
  font-size: .9rem;
  line-height: 2;
  color: var(--teal);
  background: rgba(0,212,180,.04);
  border: 1px solid rgba(0,212,180,.15);
  border-radius: 3px;
  padding: 1rem 1.2rem;
  min-height: 3rem;
  white-space: pre-wrap;
  word-break: break-word;
}
#transpoHistory {
  margin-top: 1.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

/* ── Key detector: chord pills visual clarity ────────────────────────── */
.kd-chord-pill {
  font-family: 'DM Mono', monospace;
  font-size: .7rem;
  padding: .3rem .7rem;
  border-radius: 20px;
  border: 1px solid var(--border2);
  background: var(--panel);
  color: var(--text2);
  cursor: pointer;
  touch-action: manipulation;
  transition: all .12s ease;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.kd-chord-pill:hover { border-color: var(--purple); color: var(--text); }
.kd-chord-pill.active {
  background: rgba(139,92,246,.15);
  border-color: rgba(139,92,246,.5);
  color: var(--purple);
}
.kd-chord-pill:active { transform: scale(.94); }

/* ── Config page: consistent card style ──────────────────────────────── */
.cfg-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 1.5rem;
}
.cfg-card-title {
  font-family: 'DM Mono', monospace;
  font-size: .55rem;
  letter-spacing: 3px;
  font-weight: 700;
  margin-bottom: 1.2rem;
}

/* ── Page transition: slightly snappier ──────────────────────────────── */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page.visible { animation: pageIn .2s cubic-bezier(.16,1,.3,1); }

/* ── Backing grid responsive ─────────────────────────────────────────── */
.backing-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 600px) {
  .backing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .backing-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── General: focus ring matches accent ──────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
button:focus-visible { outline-offset: 3px; }


/* ════════════════════════════════════════════════════════════════
   FASE 4 — MICRO-INTERACCIONES & UX POLISH
   Skeleton loaders · Loading states · Empty states · Error states
   Swipe gestures · Bottom sheets · Haptic feedback helpers
   Page transitions · Smooth tab switching
════════════════════════════════════════════════════════════════ */

/* ── 1. Focus ring: uses teal (overwrites accent above) ──────── */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── 2. SKELETON LOADER ───────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    var(--panel) 0%,
    var(--panel2) 40%,
    var(--panel) 80%
  );
  background-size: 1200px 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius-md);
}
.skeleton-text  { height: 14px; margin-bottom: 8px; }
.skeleton-title { height: 22px; width: 60%; margin-bottom: 12px; }
.skeleton-card  { height: 100px; margin-bottom: 12px; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }

/* skeleton card wrapper (preserves card layout while loading) */
.sk-card-wrap {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.2rem;
  display: flex; gap: 1rem; align-items: flex-start;
}

/* ── 3. LOADING SPINNER ───────────────────────────────────────── */
@keyframes kSpinCCW {
  to { transform: rotate(360deg); }
}
.k-spinner {
  width: 24px; height: 24px;
  border: 2px solid var(--border2);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: kSpinCCW .7s linear infinite;
  display: inline-block; flex-shrink: 0;
}
.k-spinner-sm { width: 16px; height: 16px; border-width: 1.5px; }
.k-spinner-lg { width: 40px; height: 40px; border-width: 3px; }

/* loading overlay (full page) */
.k-loading-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem;
  background: rgba(10,10,10,.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 50;
  border-radius: inherit;
  animation: fadeIn .2s ease;
}
.k-loading-label {
  font-family: 'DM Mono', monospace;
  font-size: .6rem; letter-spacing: 2px;
  color: var(--muted); text-transform: uppercase;
}

/* ── 4. EMPTY STATE ───────────────────────────────────────────── */
.k-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .8rem; padding: 3rem 1.5rem;
  text-align: center;
  min-height: 200px;
}
.k-empty-icon {
  font-size: 2.8rem; line-height: 1;
  opacity: .4; margin-bottom: .4rem;
}
.k-empty-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.1rem; font-weight: 700;
  color: var(--text2);
}
.k-empty-sub {
  font-family: 'Outfit', sans-serif;
  font-size: .82rem; color: var(--muted);
  max-width: 280px; line-height: 1.6;
}
.k-empty-cta {
  margin-top: .4rem;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.4rem;
  background: rgba(0,212,180,.1);
  border: 1px solid rgba(0,212,180,.3);
  color: var(--teal);
  font-family: 'Outfit', sans-serif;
  font-size: .75rem; font-weight: 700;
  border-radius: var(--radius-pill); cursor: pointer;
  transition: all .18s; letter-spacing: .5px;
}
.k-empty-cta:hover {
  background: rgba(0,212,180,.18);
  transform: translateY(-1px);
}

/* ── 5. ERROR STATE ───────────────────────────────────────────── */
.k-error {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .7rem; padding: 2.5rem 1.5rem; text-align: center;
}
.k-error-icon { font-size: 2rem; opacity: .6; }
.k-error-title {
  font-family: 'Syne', sans-serif;
  font-size: 1rem; font-weight: 700;
  color: var(--error, #EF4444);
}
.k-error-sub {
  font-size: .8rem; color: var(--muted); max-width: 260px; line-height: 1.6;
}
.k-error-retry {
  padding: .55rem 1.4rem;
  background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3);
  color: var(--error, #EF4444); border-radius: var(--radius-pill);
  font-family: 'Outfit', sans-serif; font-size: .75rem; font-weight: 700;
  cursor: pointer; transition: all .18s;
}
.k-error-retry:hover { background: rgba(239,68,68,.18); transform: translateY(-1px); }

/* ── 6. SUCCESS TOAST ─────────────────────────────────────────── */
#krdToast {
  position: fixed; bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--panel2); border: 1px solid rgba(0,212,180,.3);
  color: var(--teal); border-radius: var(--radius-pill);
  padding: .6rem 1.4rem; font-family: 'DM Mono', monospace;
  font-size: .65rem; letter-spacing: 1px; text-transform: uppercase;
  z-index: 9000; pointer-events: none; opacity: 0;
  transition: opacity .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
  white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
#krdToast.toast-show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
@media (min-width: 769px) {
  #krdToast { bottom: 1.5rem; }
}

/* ── 7. BUTTON ACTIVE STATE (all primary action buttons) ─────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .75rem 1.8rem;
  background: var(--teal); color: #000;
  font-family: 'Outfit', sans-serif; font-weight: 800;
  font-size: .75rem; letter-spacing: 1.5px; text-transform: uppercase;
  border: none; border-radius: var(--radius-sm);
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 4px 16px rgba(0,212,180,.3);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,212,180,.45);
}
.btn-primary:active {
  transform: scale(.96) translateY(1px);
  box-shadow: 0 2px 8px rgba(0,212,180,.2);
}
.btn-secondary {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .75rem 1.8rem;
  background: transparent; color: var(--text2);
  border: 1px solid var(--border2); border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: .75rem; letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; transition: all .18s;
}
.btn-secondary:hover {
  border-color: var(--teal); color: var(--teal);
  background: rgba(0,212,180,.05);
}
.btn-secondary:active { transform: scale(.97); }

/* ── 8. CARD INTERACTIVE HOVER (global) ──────────────────────── */
.k-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.4rem;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  cursor: pointer; position: relative; overflow: hidden;
}
.k-card:hover {
  border-color: rgba(0,212,180,.25);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(0,0,0,.35);
}
.k-card:active { transform: scale(.98); }

/* ── 9. PAGE TRANSITION — smoother ───────────────────────────── */
@keyframes pageSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page.visible {
  animation: pageSlideIn .22s cubic-bezier(.16,1,.3,1) both;
}

/* ── 10. MODAL BOTTOM-SHEET (mobile) ─────────────────────────── */
/* Existing .modal already has bottom-sheet rules in @media.
   Adding swipe-handle visual and smoother entrance */
.modal-handle {
  width: 36px; height: 4px;
  background: rgba(255,255,255,.15);
  border-radius: 2px;
  margin: 0 auto .8rem;
}
@media (max-width: 768px) {
  .modal-handle { display: block; }
  .modal {
    animation: obSlideUp .35s cubic-bezier(.16,1,.3,1) both !important;
  }
}
@media (min-width: 769px) {
  .modal-handle { display: none; }
  .modal { animation: obCardIn .3s ease both; }
}

/* ── 11. SWIPE FEEDBACK (horizontal tabs) ─────────────────────── */
.swipe-container {
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; scroll-snap-type: x mandatory;
  display: flex; gap: 0;
}
.swipe-container::-webkit-scrollbar { display: none; }
.swipe-panel {
  flex-shrink: 0; width: 100%;
  scroll-snap-align: start;
}

/* ── 12. TAP RIPPLE (buttons with class .ripple) ─────────────── */
.ripple { position: relative; overflow: hidden; }
.ripple::after {
  content: '';
  position: absolute;
  inset: 0; border-radius: inherit;
  background: rgba(255,255,255,.1);
  opacity: 0;
  transition: opacity .3s ease;
}
.ripple:active::after { opacity: 1; transition: none; }

/* ── 13. PROGRESS BAR (learning route) ───────────────────────── */
.k-progress-bar {
  height: 4px; background: var(--border);
  border-radius: 2px; overflow: hidden; width: 100%;
}
.k-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--accent));
  border-radius: 2px;
  transition: width .6s cubic-bezier(.16,1,.3,1);
}

/* ── 14. BADGE SYSTEM ────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  font-family: 'DM Mono', monospace; font-size: .5rem;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: .18rem .55rem; border-radius: var(--radius-pill);
  font-weight: 700; border: 1px solid; flex-shrink: 0;
}
.badge-nuevo    { color: var(--purple);  border-color: rgba(139,92,246,.35); background: rgba(139,92,246,.08); }
.badge-free     { color: var(--teal);    border-color: rgba(0,212,180,.3);   background: rgba(0,212,180,.07); }
.badge-pro      { color: var(--gold);    border-color: rgba(240,174,26,.35); background: rgba(240,174,26,.08); }
.badge-hot      { color: var(--accent);  border-color: rgba(255,107,53,.35); background: rgba(255,107,53,.08); }
.badge-beginner { color: var(--success); border-color: rgba(16,185,129,.3);  background: rgba(16,185,129,.07); }
.badge-adv      { color: var(--warning); border-color: rgba(245,158,11,.3);  background: rgba(245,158,11,.07); }

/* ── 15. SMOOTH SCROLL SNAP (chord/scale grids) ─────────────── */
.k-scroll-x {
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  display: flex; gap: .75rem;
  padding-bottom: .25rem;
}
.k-scroll-x::-webkit-scrollbar { display: none; }

/* ── 16. MOBILE-ONLY HAPTIC HELPER ───────────────────────────── */
/* JS calls: navigator.vibrate(15) on key button taps
   These rules set visual state BEFORE the vibration fires */
.k-haptic:active { transform: scale(.95); }

/* ── 17. NOTIFICATION DOT ────────────────────────────────────── */
.k-notif-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); position: absolute;
  top: 6px; right: 6px;
  box-shadow: 0 0 0 2px var(--bg);
}

/* ── 18. REDUCED MOTION (single canonical block) ─────────────── */
/* Note: base.css already has one. This is the comprehensive override */
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--panel2); }
  .k-spinner { animation: none; }
  .page.visible { animation: none !important; }
  .ob-card { animation: none !important; }
  .k-card { transition: none; }
}


/* ── Toast element alias (existing #toast element uses new styles) ── */
#toast {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: 50%; transform: translateX(-50%) translateY(16px);
  background: var(--panel2); border: 1px solid rgba(0,212,180,.3);
  color: var(--teal); border-radius: var(--radius-pill);
  padding: .6rem 1.4rem; font-family: 'DM Mono', monospace;
  font-size: .65rem; letter-spacing: 1px; text-transform: uppercase;
  z-index: 9000; pointer-events: none; opacity: 0;
  transition: opacity .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
  white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
#toast.toast-show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
@media (min-width: 769px) {
  #toast { bottom: 1.5rem; left: auto; right: 2rem; transform: translateY(16px); }
  #toast.toast-show { transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────
   HERO STATS MINI ROW
────────────────────────────────────────────────────────────── */
.hero-stats-mini {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: .8rem;
  animation: heroFadeUp .6s ease both;
  animation-delay: .82s;
}
.hsm-item {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.hsm-num {
  font-family: 'Bebas Neue', 'Syne', sans-serif;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--text);
  letter-spacing: 1px;
}
.hsm-label {
  font-family: 'DM Mono', monospace;
  font-size: .48rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}
.hsm-div {
  width: 1px;
  height: 28px;
  background: var(--border2);
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .hero-stats-mini { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   NAV: extra desktop polish
────────────────────────────────────────────────────────────── */
/* Pro badge in nav */
.nav-pro-badge {
  display: inline-flex; align-items: center;
  padding: .22rem .65rem;
  background: rgba(240,174,26,.12);
  border: 1px solid rgba(240,174,26,.3);
  border-radius: var(--radius-pill);
  font-family: 'DM Mono', monospace;
  font-size: .48rem; letter-spacing: 2px;
  color: var(--gold); font-weight: 700;
  text-transform: uppercase; flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   SCALE & CHORD CARDS: consistent modern look
────────────────────────────────────────────────────────────── */
.scale-card {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
.scale-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.45) !important;
}

/* ─────────────────────────────────────────────────────────────
   TOOL PAGE: consistent header treatment
────────────────────────────────────────────────────────────── */
.tool-header {
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.5rem;
}
.tool-header .sec-label {
  margin-bottom: .6rem;
}

/* ─────────────────────────────────────────────────────────────
   FOOTER: modernize
────────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border) !important;
  background: var(--bg) !important;
}