*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#0E0E10; --bg2:#18181C; --bg3:#222228;
  --border:rgba(255,255,255,0.08); --border2:rgba(255,255,255,0.14);
  --text:#E8E6E0; --text2:#9A9892; --text3:#5C5B58;
  --accent:#7C6AF7; --accent2:#A89DF9;
  --green:#2EBD8A; --red:#E2514A; --amber:#E6A817;
  --cyan:#00EEFF;
  --key-top:#34343C; --key-shadow:#111116;
  --font:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
  --r:10px;
}
html { scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--bg); color:var(--text); min-height:100vh; }

/* HEADER */
.site-header { position:sticky; top:0; z-index:100; background:rgba(14,14,16,0.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
.header-inner { max-width:1400px; margin:0 auto; padding:0.55rem 1.25rem; display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--text); font-weight:600; font-size:1.15rem; }
.header-nav { display:flex; align-items:center; gap:10px; }
.btn-lang { background:var(--bg3); border:1px solid var(--border2); color:var(--text); padding:5px 12px; border-radius:6px; font-size:0.8rem; cursor:pointer; font-family:var(--font); }
.btn-lang:hover { background:var(--border2); }
.btn-primary { background:var(--accent); color:#fff; border:none; padding:7px 18px; border-radius:7px; font-size:0.875rem; font-weight:500; cursor:pointer; font-family:var(--font); transition:opacity .15s; }
.btn-primary:hover { opacity:.85; }
.btn-primary.btn-sm { padding:5px 14px; font-size:0.8rem; }
.btn-ghost { background:transparent; border:1px solid var(--border2); color:var(--text2); padding:5px 12px; border-radius:7px; font-size:0.8rem; cursor:pointer; font-family:var(--font); }

/* PAGE GRID */
.page-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:200px 1fr; gap:1rem; padding:1rem 1rem 2rem; align-items:start; }

/* COLUMNA IZQUIERDA */
.left-col { display:flex; flex-direction:column; gap:0.85rem; position:sticky; top:58px; }
.left-stats { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:0.85rem 1rem; display:flex; flex-direction:column; gap:0.65rem; }
.stat-v { display:flex; flex-direction:column; }
.stat-v-value { font-size:1.85rem; font-weight:600; letter-spacing:-0.04em; line-height:1; }
.stat-v-label { font-size:0.66rem; color:var(--text3); text-transform:uppercase; letter-spacing:.07em; margin-top:2px; }
.motivacion { font-size:0.7rem; font-style:italic; line-height:1.4; margin-top:4px; min-height:2.2em; transition:color .4s; }
.motivacion.malo  { color:var(--amber); }
.motivacion.bueno { color:var(--green); }
.motivacion.epico { color:var(--accent2); }
.rank-panel { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:0.8rem 1rem; }
.rank-label { font-size:0.66rem; color:var(--text3); text-transform:uppercase; letter-spacing:.07em; margin-bottom:3px; }
.rank-name  { font-size:0.95rem; font-weight:600; color:var(--accent2); margin-bottom:7px; }
.rank-bar-outer { height:3px; background:var(--bg3); border-radius:3px; overflow:hidden; }
.rank-bar-inner  { height:100%; background:var(--accent); border-radius:3px; width:0%; transition:width .5s; }
.ranking-side { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:0.8rem 1rem; }
.ranking-side-title { font-size:0.75rem; font-weight:500; color:var(--text2); margin-bottom:0.65rem; }
.ranking-empty { font-size:0.72rem; color:var(--text3); line-height:1.6; }
.ranking-row { display:flex; align-items:center; gap:6px; padding:4px 0; border-bottom:1px solid var(--border); font-size:0.75rem; }
.ranking-row:last-child { border-bottom:none; }
.ranking-pos { color:var(--text3); width:14px; text-align:right; flex-shrink:0; }
.ranking-user { flex:1; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ranking-ppm  { color:var(--accent2); font-weight:500; flex-shrink:0; }

/* COLUMNA DERECHA */
.right-col { display:flex; flex-direction:column; gap:0.85rem; min-width:0; }

/* Nav lecciones */
.lesson-nav-wrap { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:8px 12px; display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.lesson-nav-label { font-size:0.7rem; color:var(--text3); margin-right:3px; flex-shrink:0; }
.lesson-btn { width:30px; height:30px; border-radius:6px; border:1px solid; font-size:0.78rem; font-weight:500; cursor:pointer; font-family:var(--font); transition:all .15s; flex-shrink:0; }
.lesson-btn.active    { background:var(--accent); border-color:var(--accent2); color:#fff; }
.lesson-btn.completed { background:rgba(46,189,138,.15); border-color:rgba(46,189,138,.4); color:var(--green); }
.lesson-btn.locked    { background:transparent; border-color:var(--border); color:var(--text3); }

/* Ejercicio */
.exercise-wrapper { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:1rem 1.2rem; cursor:text; outline:none; transition:border-color .2s; }
.exercise-wrapper:focus, .exercise-wrapper.active { border-color:var(--accent); }
.exercise-meta { display:flex; align-items:center; gap:7px; margin-bottom:5px; }
.ex-level { font-size:0.68rem; padding:2px 8px; border-radius:4px; text-transform:uppercase; letter-spacing:.05em; font-weight:500; background:rgba(124,106,247,.15); color:var(--accent2); }
.ex-lang  { font-size:0.68rem; padding:2px 8px; border-radius:4px; text-transform:uppercase; letter-spacing:.05em; font-weight:500; background:rgba(46,189,138,.12); color:var(--green); }
.ex-btns  { display:flex; gap:5px; margin-left:auto; }
.btn-next, .btn-new { background:transparent; border:1px solid var(--border); color:var(--text2); padding:3px 9px; border-radius:5px; font-size:0.72rem; cursor:pointer; font-family:var(--font); transition:all .15s; }
.btn-next:hover { border-color:var(--green); color:var(--green); }
.btn-new:hover  { border-color:var(--accent); color:var(--accent2); }
.lesson-desc { font-size:0.76rem; color:var(--text2); margin-bottom:0.5rem; }
.exercise-text { font-family:var(--mono); font-size:1.2rem; line-height:2.1; letter-spacing:.02em; word-break:break-all; min-height:3.2rem; }
.char          { color:var(--text3); }
.char.correct  { color:var(--green); }
.char.wrong    { color:var(--red); background:rgba(226,81,74,.15); border-radius:2px; }
.char.cursor   { border-left:2.5px solid var(--accent); animation:blink 1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.progress-wrap { margin-top:0.65rem; display:flex; flex-direction:column; gap:4px; }
.progress-track { height:3px; background:var(--bg3); border-radius:3px; overflow:hidden; }
.progress-fill  { height:100%; background:var(--accent); border-radius:3px; width:0%; transition:width .3s; }
.progress-rounds { display:flex; align-items:center; justify-content:space-between; font-size:0.68rem; color:var(--text3); }
.rounds-dots { display:flex; gap:4px; }
.round-dot { width:7px; height:7px; border-radius:50%; background:var(--bg3); border:1px solid var(--border2); transition:all .3s; }
.round-dot.done { background:var(--green); border-color:var(--green); }

/* ZONA MANOS + FLECHAS */
.hands-keyboard-wrap {
  display:flex; align-items:center; justify-content:center;
  gap:0.5rem; padding:0.25rem 0;
}
.hands-row { display:flex; gap:1.5rem; align-items:flex-end; }
.hand-svg { width:120px; height:auto; }

/* Colores claros de las manos (celeste) */
.palm { fill:#B8E8F0; stroke:#7EC8D8; stroke-width:1; }
.finger-body { fill:#A8DDE8; stroke:#5CB8CC; stroke-width:1; transition:fill .15s, stroke .15s; }
.finger-label { fill:#1A5A6A; font-family:var(--font); font-size:11px; font-weight:600; text-anchor:middle; dominant-baseline:middle; transition:fill .15s; }
.hand-tag { fill:var(--text3); font-family:var(--font); font-size:9px; text-anchor:middle; }

/* Dedo activo — rojo */
.finger.active .finger-body { fill:#FF3B3B; stroke:#CC0000; stroke-width:2; }
.finger.active .finger-label { fill:#fff; }

/* FLECHAS */
.arrow-zone { display:flex; flex-direction:column; align-items:center; gap:4px; opacity:0.25; transition:opacity .25s, transform .25s; }
.arrow-zone.active { opacity:1; animation:arrowPulse 0.7s ease infinite alternate; }
@keyframes arrowPulse { from{opacity:0.7} to{opacity:1} }
.arrow-svg { width:32px; height:64px; }
.arrow-label { font-size:0.62rem; color:var(--cyan); letter-spacing:.06em; text-transform:uppercase; }

/* TECLADO 3D */
.keyboard-scene { perspective:1000px; padding:0.25rem 0 0.5rem; overflow-x:auto; }
.keyboard-body { transform:rotateX(20deg); transform-style:preserve-3d; background:#1A1A20; border-radius:12px; padding:12px 12px 22px; box-shadow:0 28px 56px rgba(0,0,0,.7),0 6px 16px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.04); min-width:560px; }
.kb-row { display:flex; justify-content:center; gap:4px; margin-bottom:4px; }
.kb-row-bottom { margin-bottom:0; }
.key { min-width:36px; height:38px; display:flex; align-items:center; justify-content:center; font-family:var(--font); font-size:10px; font-weight:500; color:#C8C5BE; background:var(--key-top); border-radius:5px; border-top:1px solid #48484F; border-left:.5px solid #3A3A42; border-right:.5px solid #222226; border-bottom:4px solid var(--key-shadow); cursor:default; user-select:none; position:relative; white-space:nowrap; padding:0 3px; transition:background .07s,transform .07s,border-bottom .07s; }
.key-func { color:#7A7874; font-size:9px; }
.key-home { border-bottom:4px solid #1A1A3A; }
.home-dot { position:absolute; bottom:3px; left:50%; transform:translateX(-50%); width:4px; height:2px; border-radius:1px; background:var(--accent); }
.key-wide   { min-width:78px; }
.key-med    { min-width:58px; }
.key-caps   { min-width:66px; }
.key-enter  { min-width:78px; }
.key-shift  { min-width:90px; }
.key-shift-r{ min-width:90px; }
.key-space  { min-width:220px; }
.key-ctrl   { min-width:52px; }
.key-sm     { min-width:46px; }
.key.key-pressed { background:#222228; transform:translateY(3px); border-bottom:1px solid var(--key-shadow); }
.key.key-next    { background:rgba(124,106,247,.3); border-top-color:rgba(168,157,249,.5); color:var(--accent2); }
.key.key-correct { background:rgba(46,189,138,.22); border-top-color:rgba(46,189,138,.5); color:var(--green); transition:none; }
.key.key-wrong   { background:rgba(226,81,74,.24); border-top-color:rgba(226,81,74,.5); color:var(--red); transition:none; }
.key.key-lesson  { background:rgba(230,168,23,.12); border-top-color:rgba(230,168,23,.4); color:var(--amber); }
.key.key-lesson.key-next { background:rgba(124,106,247,.32); border-top-color:rgba(168,157,249,.6); color:var(--accent2); }

/* PANEL COMPLETADO */
.done-panel { background:var(--bg2); border:1px solid var(--border2); border-radius:var(--r); padding:1.5rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:0.55rem; }
.done-panel.hidden { display:none !important; }
.done-icon  { font-size:2rem; }
.done-title { font-size:1.1rem; font-weight:600; }
.done-stats { color:var(--text2); font-size:0.85rem; }
.done-msg   { font-size:0.8rem; font-style:italic; }

/* BANNER */
.register-banner { position:fixed; bottom:1.1rem; left:50%; transform:translateX(-50%); background:var(--bg2); border:1px solid var(--accent); border-radius:var(--r); padding:0.65rem 1.1rem; display:flex; align-items:center; gap:10px; box-shadow:0 8px 24px rgba(0,0,0,.5); font-size:0.85rem; z-index:200; animation:slideUp .4s ease; white-space:nowrap; }
.register-banner.hidden { display:none !important; }
@keyframes slideUp { from{transform:translateX(-50%) translateY(14px);opacity:0} to{transform:translateX(-50%) translateY(0);opacity:1} }

.site-footer { text-align:center; padding:1.1rem; color:var(--text3); font-size:0.75rem; border-top:1px solid var(--border); }

@media (max-width:800px) {
  .page-grid { grid-template-columns:1fr; }
  .left-col { position:static; flex-direction:row; flex-wrap:wrap; }
  .keyboard-body { min-width:500px; }
}