/* Estilos comunes de la sala de Veneno.
   Mismos colores que Thrill Is Gone, All of Me, Isn't She Lovely y la Semana
   del Blues: si se cambia la marca, se cambia acá y en las otras. */

*{box-sizing:border-box;margin:0;padding:0}
body{background:#0D0B0A;color:#fff;font-family:Arial,Helvetica,sans-serif;min-height:100vh;padding:22px}
.wrap{width:100%;max-width:1080px;margin:0 auto}

a.volver{display:inline-block;margin:0 0 14px;color:#8A8580;font-size:13px;text-decoration:none;
         border:1px solid #2a2521;border-radius:9px;padding:8px 14px;background:#141110;
         font-weight:bold;transition:all .15s}
a.volver:hover{color:#F5C518;border-color:#F5C518;background:#1d1810}

header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:16px}
.brand img{height:56px;width:auto;display:block}
h1{font-size:clamp(22px,3.2vw,40px);font-weight:900;letter-spacing:-1px;line-height:1}
.sub{color:#F5C518;font-weight:bold;font-size:clamp(13px,1.6vw,20px);margin-top:6px}
.hintTop{color:#8A8580;font-size:13px;text-align:right;line-height:1.5;max-width:360px}
.hintTop b{color:#cfcac4}

h2{font-size:15px;color:#6E6963;text-transform:uppercase;letter-spacing:2px;margin:26px 0 12px}
p.texto{color:#cfcac4;font-size:15px;line-height:1.65;max-width:760px}
p.texto b{color:#fff}
p.texto + p.texto{margin-top:12px}
.chico{font-size:13px;color:#8A8580;line-height:1.55}

/* ---------------- el menú ---------------- */
.menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:6px}
a.card{display:block;background:#141110;border:1px solid #2a2521;border-radius:14px;padding:20px;
       text-decoration:none;color:#fff;transition:all .15s}
a.card:hover{border-color:#F5C518;background:#1a1512;transform:translateY(-2px)}
a.card .paso{font-size:11px;color:#6E6963;text-transform:uppercase;letter-spacing:2px;font-weight:bold}
a.card h3{font-size:22px;font-weight:900;margin:6px 0 8px;color:#F5C518}
a.card p{font-size:13px;color:#8A8580;line-height:1.55}

/* ---------------- diagramas de acorde ---------------- */
.diagramas{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.dcaja{background:#141110;border:1px solid #2a2521;border-radius:14px;padding:8px 4px 2px;width:180px}
svg.dia{display:block;width:100%;height:auto}
.dcaja.grande{width:230px}

/* fila de "antes y después" para los cambios */
.paso2{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#141110;
       border:1px solid #2a2521;border-radius:14px;padding:14px 18px;margin-top:12px}
.paso2 .flecha{font-size:30px;color:#9AD24A;font-weight:900}
.paso2 .expl{flex:1;min-width:220px;font-size:14px;color:#cfcac4;line-height:1.6}
.paso2 .expl b{color:#9AD24A}

/* ---------------- barra "qué estoy tocando ahora" ---------------- */
.ahora{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:10px 0 4px;min-height:96px}
.ahora .grande{font-size:clamp(54px,9vw,104px);font-weight:900;color:#F5C518;line-height:.9;min-width:2.4em}
.ahora .grande.cambio{color:#9AD24A}
.ahora .lado{display:flex;flex-direction:column;gap:4px}
.ahora .lado span{font-size:11px;color:#6E6963;text-transform:uppercase;letter-spacing:1.5px}
.ahora .lado b{font-size:26px;color:#8A8580;font-weight:900}
.ahora .cuenta{margin-left:auto;font-size:clamp(30px,5vw,58px);font-weight:900;color:#cfcac4;letter-spacing:2px}
.ahora .cuenta.aviso{color:#9AD24A}

/* los cuatro tiempos */
.beats{display:flex;gap:9px}
.beats i{width:16px;height:16px;border-radius:50%;background:#2f2a25;display:block;transition:background .05s}
.beats i.on{background:#F5C518}
.beats i.key{box-shadow:0 0 0 2px #6E6963}

/* ---------------- la grilla de compases ---------------- */
.prog{display:grid;gap:6px;margin-top:14px}
.prog.c4{grid-template-columns:repeat(4,1fr)}
.prog.c8{grid-template-columns:repeat(8,1fr)}
.pb{position:relative;border-radius:8px;padding:13px 4px;text-align:center;font-size:17px;font-weight:900;
    color:#0D0B0A;cursor:pointer;filter:brightness(.32) saturate(.7);transition:filter .1s,transform .1s}
.pb .n{position:absolute;top:2px;left:4px;font-size:9px;opacity:.5}
.pb.on{filter:none;transform:scale(1.06);box-shadow:0 0 0 3px #fff,0 0 18px rgba(245,197,24,.45);z-index:2}
.pb.fam-tonica{background:#F5C518}
.pb.fam-menor{background:#9AD24A}
.pb.fam-dominante{background:#FFFFFF}

/* ---- el pedazo que se repite ----
   Lo importante es al revés de lo que parece: no se trata de apagar lo de
   afuera, sino de PRENDER lo de adentro. Los compases que se repiten quedan
   casi a pleno color y el resto se hunde en el fondo, así el pedazo salta a la
   vista sin tener que leer nada. El primero y el último llevan el corchete
   verde, como la barra de repetición de la hoja. */
.pb.dentro{filter:brightness(.72) saturate(1)}
.pb.dentro.on{filter:none}
.pb.fuera{filter:brightness(.12) saturate(.35)}
.pb.fuera.on{filter:brightness(.5)}
.pb.loopIni{box-shadow:inset 5px 0 0 #9AD24A}
.pb.loopFin{box-shadow:inset -5px 0 0 #9AD24A}
.pb.loopIni.loopFin{box-shadow:inset 5px 0 0 #9AD24A,inset -5px 0 0 #9AD24A}
.pb.on.loopIni{box-shadow:inset 5px 0 0 #9AD24A,0 0 0 3px #fff,0 0 18px rgba(245,197,24,.45)}
.pb.on.loopFin{box-shadow:inset -5px 0 0 #9AD24A,0 0 0 3px #fff,0 0 18px rgba(245,197,24,.45)}
.looprow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 0;
         font-size:12px;color:#6E6963;min-height:26px;touch-action:none}
.looprow .llbl{font-size:11px;color:#6E6963;text-transform:uppercase;letter-spacing:1.5px;font-weight:bold}
.looprow button{background:#241f1b;color:#cfcac4;border:1px solid #332c26;border-radius:8px;
                font-size:12px;font-weight:bold;padding:5px 10px;cursor:pointer}
.looprow button:hover{border-color:#F5C518;color:#F5C518}
.prog{touch-action:none}

/* la tabla del campo armónico no lleva versalita: "ii" y "II" no quieren decir
   lo mismo, mayúscula es acorde mayor y minúscula es menor */
table.campo th{text-transform:none;font-size:13px;letter-spacing:0}

/* ---------------- el panel de abajo ---------------- */
.panel{margin-top:16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
       background:#171412;border:1px solid #2a2521;border-radius:14px;padding:14px 18px}
button.play{background:#F5C518;color:#0D0B0A;border:0;border-radius:10px;
     font-size:18px;font-weight:900;padding:12px 26px;cursor:pointer;min-width:150px}
button.play:hover{background:#ffd52e}
.stat{display:flex;flex-direction:column;gap:3px}
.stat b{font-size:22px;font-weight:900;color:#F5C518;line-height:1}
.stat span{font-size:11px;color:#8A8580;text-transform:uppercase;letter-spacing:1px}

/* perillas: velocidad, cuántos compases, click, acordes */
.mandos{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.mando{display:flex;align-items:center;gap:8px;background:#141110;border:1px solid #2a2521;
       border-radius:12px;padding:8px 12px}
.mando > span{font-size:11px;color:#6E6963;text-transform:uppercase;letter-spacing:1.5px;font-weight:bold}
.mando button{background:#241f1b;color:#cfcac4;border:1px solid #332c26;border-radius:8px;
              font-size:13px;font-weight:bold;padding:7px 12px;cursor:pointer;transition:all .12s}
.mando button:hover{border-color:#F5C518;color:#F5C518}
.mando button.on{background:#F5C518;color:#0D0B0A;border-color:#F5C518}
.mando input[type=range]{width:170px;accent-color:#F5C518}
.mando .val{font-size:20px;font-weight:900;color:#F5C518;min-width:3.4em;text-align:right}

/* elegir ejercicio */
.lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px;margin-top:6px}
.lista button{text-align:left;background:#141110;border:1px solid #2a2521;border-radius:12px;
              padding:12px 14px;color:#cfcac4;cursor:pointer;transition:all .13s}
.lista button:hover{border-color:#F5C518}
.lista button.on{border-color:#F5C518;background:#1d1810}
.lista button b{display:block;font-size:16px;color:#fff;font-weight:900;margin-bottom:3px}
.lista button.on b{color:#F5C518}
.lista button span{font-size:12px;color:#6E6963;line-height:1.45}

/* ---------------- el rasgueo ---------------- */
.rasgueo{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:10px}
.rz{background:#141110;border:1px solid #2a2521;border-radius:10px;padding:12px 4px 8px;text-align:center;
    transition:all .08s}
.rz .fl{font-size:32px;font-weight:900;line-height:1;color:#3a332c}
.rz.suena .fl{color:#F5C518}
.rz.arriba.suena .fl{color:#9AD24A}
.rz .lbl{font-size:11px;color:#6E6963;margin-top:6px;font-weight:bold}
.rz.on{border-color:#fff;background:#241f13;transform:scale(1.05)}
.rz.vacio{opacity:.45}

/* ---------------- estructura de la canción ---------------- */
.partes{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.partes button{background:#141110;border:1px solid #2a2521;border-radius:10px;padding:9px 13px;
               color:#8A8580;font-size:12px;font-weight:bold;cursor:pointer;transition:all .12s}
.partes button:hover{border-color:#F5C518;color:#F5C518}
.partes button.on{background:#F5C518;border-color:#F5C518;color:#0D0B0A}

.barra{height:10px;background:#241f1b;border-radius:6px;overflow:hidden;margin-top:12px}
.barra i{display:block;height:100%;background:#F5C518;width:0;transition:width .12s linear}

/* ---------------- tabla del campo armónico ---------------- */
table.campo{border-collapse:collapse;margin-top:8px;font-size:14px}
table.campo th,table.campo td{border:1px solid #2a2521;padding:9px 14px;text-align:center}
table.campo th{color:#6E6963;font-size:11px;text-transform:uppercase;letter-spacing:1.5px}
table.campo td{color:#cfcac4;font-weight:bold}
table.campo td.usa{background:#241f13;color:#F5C518}
table.campo td.presta{background:#1b2413;color:#9AD24A}

/* ---------------- tapa "tocá para empezar" ---------------- */
.tapa{position:fixed;inset:0;background:rgba(13,11,10,.92);display:flex;align-items:center;
      justify-content:center;cursor:pointer;z-index:100}
.tapa div{text-align:center}
.tapa b{display:block;font-size:64px;color:#F5C518;line-height:1}
.tapa span{display:block;margin-top:14px;font-size:16px;color:#cfcac4;font-weight:bold;letter-spacing:1px}

.aviso{background:#1d1810;border:1px solid #4a3f16;border-radius:12px;padding:12px 16px;
       color:#cfcac4;font-size:13px;line-height:1.6;margin-top:14px}
.aviso b{color:#F5C518}

/* la tabla del campo armónico no se achica: en el teléfono se corre sola */
.tablaScroll{overflow-x:auto;max-width:100%}

@media (max-width:720px){
  body{padding:14px}
  .prog.c8{grid-template-columns:repeat(4,1fr)}
  .rasgueo{grid-template-columns:repeat(4,1fr)}
  .ahora .cuenta{margin-left:0;width:100%}
  /* las perillas se acomodan en varias filas en vez de irse de la pantalla */
  .mando{flex-wrap:wrap;max-width:100%}
  .mando input[type=range]{width:100%;min-width:120px;flex:1}
  .mando .val{min-width:0}
  .mandos{width:100%}
}