/* ============================================================================
   SALAS FUJITA · estilos de todas las pantallas
   ----------------------------------------------------------------------------
   Mismo idioma visual que el resto de las salas (fondo #0D0B0A, oro #F5C518,
   fichas #141110 con borde #2a2521, Arial bien pesada): el alumno tiene que
   sentir que entró a la misma casa aunque el ejercicio sea otro.

   Lo único propio de acá es la BARRA DE CASILLEROS, que es la pantalla nueva
   del capítulo 3: un compás partido en 4, 8, 12 o 16 y cada casillero diciendo
   si va acentuado, flojo o fantasma.
   ============================================================================ */

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:#0D0B0A;color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  min-height:100vh;padding:26px 20px 60px;
}
.wrap{max-width:1080px;margin:0 auto}

/* ------------------------------- cabecera ------------------------------- */
header{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
h1{font-size:clamp(24px,4vw,42px);font-weight:900;letter-spacing:-1.2px;line-height:1}
.cap{color:#F5C518;font-weight:900;font-size:13px;letter-spacing:2px;text-transform:uppercase}
.sub{color:#F5C518;font-weight:bold;font-size:clamp(13px,1.7vw,19px);margin-top:7px}
.meta{color:#8A8580;font-size:13.5px;margin:12px 0 20px;line-height:1.65;max-width:78ch}
.volver{color:#8A8580;text-decoration:none;font-size:13px;border-bottom:1px solid #2a2521}
.volver:hover{color:#F5C518;border-color:#4a3f16}

/* --------------------------- la idea de la clase -------------------------
   Arriba de todo, como en blues-bend: si se entiende esto, el resto es
   repetir. Va en palabras de Fujita, no en las mías.                        */
.clave{background:#141110;border:1px solid #2a2521;border-left:5px solid #F5C518;border-radius:14px;
       padding:17px 21px;margin-bottom:22px}
.clave h2{font-size:12px;color:#8A8580;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px;font-weight:900}
.clave p{color:#cfcac4;font-size:14.5px;line-height:1.68}
.clave p+p{margin-top:9px}
.clave b{color:#F5C518}
.clave .verde{color:#9AD24A}

.aviso{background:#2a1a15;border:1px solid #6b3a26;border-left:5px solid #C0392B;border-radius:12px;
       padding:14px 18px;margin-bottom:18px;color:#e8ded8;font-size:14px;line-height:1.6;display:none;
       max-width:1080px;margin-left:auto;margin-right:auto}
.aviso code{background:#0D0B0A;color:#F5C518;padding:1px 6px;border-radius:4px;font-size:13px}

/* --------------------------------- fichas -------------------------------- */
.ficha{background:#141110;border:1px solid #2a2521;border-radius:16px;padding:18px 20px;margin-bottom:16px}
.ficha>h2{font-size:12px;color:#8A8580;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px;font-weight:900}

/* -------------------------------- controles ------------------------------ */
.fila{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fila+.fila{margin-top:12px}
.rot{color:#6E6963;font-size:11.5px;text-transform:uppercase;letter-spacing:1.2px;font-weight:bold;min-width:74px}

button{font-family:inherit;cursor:pointer;border:none}
.seg{display:inline-flex;background:#0D0B0A;border:1px solid #2a2521;border-radius:10px;overflow:hidden}
.seg button{background:transparent;color:#8A8580;font-size:13px;font-weight:bold;padding:8px 14px;
            border-right:1px solid #2a2521;transition:all .13s ease}
.seg button:last-child{border-right:none}
.seg button:hover{color:#fff;background:#1d1810}
.seg button.on{background:#F5C518;color:#0D0B0A}
.seg button:focus-visible{outline:2px solid #9AD24A;outline-offset:-2px}

.chico{background:#1d1a17;color:#cfcac4;font-size:12.5px;font-weight:bold;padding:7px 12px;border-radius:8px;
       border:1px solid #2a2521;transition:all .13s ease}
.chico:hover{background:#2a2521;color:#fff}
.chico:focus-visible{outline:2px solid #9AD24A;outline-offset:2px}

.play{background:#F5C518;color:#0D0B0A;font-size:16px;font-weight:900;padding:13px 26px;border-radius:11px;
      letter-spacing:-.3px;transition:all .13s ease}
.play:hover{background:#ffd633;transform:translateY(-1px)}
.play:focus-visible{outline:2px solid #9AD24A;outline-offset:3px}
.play.parar{background:#C0392B;color:#fff}

input[type=range]{accent-color:#F5C518;width:190px;vertical-align:middle}
select{background:#1d1a17;color:#cfcac4;border:1px solid #2a2521;border-radius:8px;padding:6px 9px;
       font-size:12.5px;font-family:inherit;max-width:230px}

/* ------------------------------- números --------------------------------- */
.stats{display:flex;gap:1px;background:#2a2521;border:1px solid #2a2521;border-radius:12px;overflow:hidden;flex-wrap:wrap}
.stat{background:#141110;padding:12px 17px;flex:1 1 108px;min-width:0}
.stat b{display:block;font-size:24px;font-weight:900;color:#F5C518;line-height:1.05;letter-spacing:-.5px}
.stat b.verde{color:#9AD24A} .stat b.roja{color:#C0392B} .stat b.gris{color:#6E6963}
.stat span{display:block;color:#6E6963;font-size:10.5px;text-transform:uppercase;letter-spacing:1.1px;margin-top:4px;font-weight:bold}

/* ------------------------- la barra de casilleros -------------------------
   El compás partido en casilleros. Es la pantalla del capítulo 3 y también
   la que muestra dónde está parado el ejercicio del capítulo 2.

   Cada casillero dice tres cosas de un vistazo:
     · el borde de arriba grueso = empieza un tiempo (1, 2, 3, 4)
     · relleno lleno   = acento     · relleno tenue = golpe flojo
     · punteado        = fantasma (el gesto va, el golpe no)
   Y el que está sonando se prende entero.                                   */
/* En un teléfono, 16 casilleros repartidos en 375 px dan 15 px cada uno: no se
   leen y no se pueden tocar con el dedo. Por eso la barra tiene ancho mínimo y
   se va de lado, en vez de achicarse hasta no servir. */
.compas-wrap{overflow-x:auto;padding-bottom:5px;margin-top:6px}
.compas{display:flex;gap:4px;min-width:520px;position:relative}

/* Las figuras rítmicas van pegadas arriba de los casilleros y alineadas al
   píxel con ellos: es la misma información dos veces —qué golpe es y dónde
   cae— y separarlas obligaría a leer dos cosas y unirlas con la cabeza.
   Las x salen medidas del DOM, así que .compas tiene que ser el offsetParent
   de los casilleros: de ahí el position:relative de arriba. */
.ritmo{min-width:520px}
svg.pentagrama{display:block;width:100%;height:auto;overflow:visible}
.fig-nota{transition:opacity .08s linear}
.fig-nota.ahora ellipse{filter:brightness(1.5)}
.fig-nota.ahora line,.fig-nota.ahora path{filter:brightness(1.5)}
.slot{
  flex:1 1 0;min-width:0;position:relative;height:92px;border-radius:8px;
  background:#171412;border:1px solid #2a2521;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding-bottom:7px;gap:3px;transition:background .08s linear,border-color .08s linear;
}
.slot:focus-visible{outline:2px solid #9AD24A;outline-offset:2px}
.slot.tiempo{border-top:3px solid #4a433c}
/* La mano golpeando la rodilla, en vez de la barrita de antes. La barrita
   decía "cuán fuerte" con una altura; la mano dice lo mismo y además dice QUÉ
   ESTÁ PASANDO — sobre todo en el fantasma, donde la mano queda en el aire y
   la rodilla no se hunde. La dibuja Fujita.manoGolpe(). */
.slot .dibujo{display:flex;align-items:flex-end;justify-content:center;height:58px;
              transition:transform .08s linear}
.slot .dibujo svg{display:block;width:100%;height:auto;max-width:59px}
.slot .cuenta{font-size:12px;font-weight:900;color:#6E6963;letter-spacing:-.2px}
.slot .mano{font-size:9px;font-weight:bold;color:#4a433c;letter-spacing:.6px}
.slot.acento .cuenta{color:#F5C518}
.slot.fantasma .cuenta{color:#4a433c}
.slot.tiempo  .cuenta{color:#cfcac4;font-size:15px}
.slot.tiempo.acento .cuenta{color:#F5C518}

.slot.ahora{background:#2a2208;border-color:#F5C518}
.slot.ahora .dibujo{transform:scale(1.1)}
/* el golpe que llegó: verde si dio, rojo si sobró donde no iba */
.slot.dio{box-shadow:inset 0 0 0 2px #9AD24A}
.slot.sobro{box-shadow:inset 0 0 0 2px #C0392B}

/* Varias figuras del libro son de DOS compases (el acento se desplaza del
   tiempo a su contratiempo en el compás siguiente). La barra vertical marca
   dónde empieza el segundo. */
.slot.corte{margin-left:11px}
.slot.corte::before{content:'';position:absolute;left:-8px;top:2px;bottom:2px;width:2px;background:#4a433c;border-radius:1px}

/* Los ejercicios van agrupados por figura del libro, con el nombre de la
   figura al lado: así se ve que no es un menú inventado sino el índice del
   capítulo. */
.ejgrupo{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.ejgrupo+.ejgrupo{margin-top:9px}
.ejgrupo .fig{color:#F5C518;font-size:11px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase;
              min-width:78px;flex:none}
.ejgrupo .desc{color:#6E6963;font-size:12px;line-height:1.45;max-width:40ch}

/* ---------------------------- los acordes --------------------------------
   Los dos acordes del ejercicio, uno por compás, arriba de la barra: el
   alumno tiene que ver la forma sin salir de la pantalla. Los dibuja
   Fujita.acorde() a partir de los trastes.                                 */
.acordes{display:flex;gap:26px;flex-wrap:wrap;margin:4px 0 2px}
.acorde{text-align:center}
.acorde .cual{display:block;color:#6E6963;font-size:10.5px;text-transform:uppercase;
              letter-spacing:1.1px;font-weight:bold;margin-bottom:2px}
svg.acorde-svg{display:block}
svg.plumada-svg{display:block;width:100%;height:auto;max-width:44px}

/* ------------------------- la progresión numerada -------------------------
   Diez ejercicios que crecen, no seis grupos con el nombre de la figura del
   libro al costado. Ocupa una fila en vez de media pantalla, y sobre todo
   contesta la pregunta que el alumno se hace de verdad —¿cuál va ahora?— en
   lugar de una que no se hace nunca: ¿cuál es la figura 3-3?               */
.pasos{display:flex;flex-wrap:wrap;gap:6px}
.pasos button{width:40px;height:40px;border-radius:11px;background:#0D0B0A;border:1px solid #2a2521;
              color:#8A8580;font-weight:900;font-size:14.5px;font-variant-numeric:tabular-nums;
              transition:all .13s ease}
.pasos button:hover{color:#fff;background:#1d1810;border-color:#4a433c}
.pasos button.on{background:#F5C518;color:#0D0B0A;border-color:#F5C518}
.pasos button:focus-visible{outline:2px solid #9AD24A;outline-offset:2px}
.ej-titulo{margin:13px 0 4px}
/* el > importa: adentro del texto del ejercicio y del aviso también hay <b>,
   y sin el > se le aplicaba el display:block y cada negrita cortaba el renglón */
.ej-titulo > b{display:block;color:#EDE7E0;font-size:16px;letter-spacing:-.2px}
.ej-titulo span b{color:#cfcac4}
.ej-titulo span{display:block;color:#8A8580;font-size:13px;line-height:1.6;max-width:78ch;margin-top:3px}
.ej-titulo .aviso-cuerda{color:#6E6963;font-size:12px;line-height:1.55;max-width:70ch;margin-top:5px}
.fila.accion{margin-top:15px;padding-top:15px;border-top:1px solid #2a2521}
.fila.ayudas{margin-top:9px;gap:8px}
.fila.ayudas i{font-style:normal;color:#5a544c;font-size:11px}

/* ------------------------------ la cronología -----------------------------
   El orden del capítulo. En el libro es prosa —"I will teach rhythm step by
   step, so don't skip these exercises"— y acá es una lista donde cada paso
   deja la sala lista para hacerlo. La numeración no es adorno: el orden es
   parte del método y el alumno solo no lo puede reconstruir de un menú.     */
.crono{list-style:none;margin:15px 0 0;padding:0;display:flex;flex-direction:column;gap:1px;
       background:#2a2521;border:1px solid #2a2521;border-radius:12px;overflow:hidden}
.crono li{background:#141110;padding:13px 16px;display:flex;gap:13px;align-items:flex-start}
.crono li.aqui{background:#1b1712}
.crono li.futuro{opacity:.5}
.crono .n{flex:0 0 25px;height:25px;border-radius:50%;background:#241f1a;color:#8A8580;font-weight:900;
          font-size:12.5px;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.crono li.aqui .n{background:#F5C518;color:#0D0B0A}
.crono .cuerpo{flex:1 1 auto;min-width:0}
.crono .tit{color:#EDE7E0;font-size:14.5px;font-weight:bold;line-height:1.35}
.crono .tit em{color:#F5C518;font-size:10.5px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase;
               font-style:normal;margin-left:8px;white-space:nowrap}
.crono .txt{color:#8A8580;font-size:12.5px;line-height:1.6;margin-top:4px;max-width:62ch}
.crono .txt b{color:#cfcac4}
.crono .ir{flex:none;align-self:center}

.leyenda{display:flex;gap:16px;flex-wrap:wrap;margin-top:11px;color:#6E6963;font-size:11.5px}
.leyenda i{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:5px;vertical-align:-1px}

/* -------------------------------- el mástil ------------------------------- */
.neck-caja{position:relative}
.neckbox{background:#141110;border:1px solid #2a2521;border-radius:14px;padding:10px 8px;overflow-x:auto}
svg.neck{display:block;margin:0 auto;min-width:900px;width:100%}
.neckbox.tapado svg.neck{filter:blur(7px);opacity:.35}
.tapa{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;
      color:#F5C518;font-weight:900;font-size:17px;letter-spacing:-.3px;text-align:center;padding:14px}
.tapa small{color:#8A8580;font-weight:normal;font-size:12.5px;letter-spacing:0;max-width:44ch;line-height:1.5}

/* ------------------------ la cuenta antes de arrancar ---------------------
   Cuatro clicks de entrada. Sin esto el play arranca de una y la primera nota
   siempre sale tarde, que no es un error del alumno sino de la sala: nadie
   entra a un ejercicio sin que le cuenten. Tapa lo que haya abajo mientras
   dura, porque durante la cuenta no hay nada que mirar todavía.             */
.compas-caja{position:relative}
.cuenta-atras{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
        flex-direction:column;gap:2px;background:rgba(13,11,10,.92);border-radius:13px}
.cuenta-atras b{font-size:76px;font-weight:900;color:#F5C518;line-height:1;letter-spacing:-4px;
          font-variant-numeric:tabular-nums}
.cuenta-atras span{color:#8A8580;font-size:11.5px;text-transform:uppercase;letter-spacing:1.6px;font-weight:900}
@media (prefers-reduced-motion:no-preference){
  .cuenta-atras b{animation:pulso .18s ease-out}
}
@keyframes pulso{from{transform:scale(1.22);opacity:.55} to{transform:scale(1);opacity:1}}

/* ------------------------------- la aguja --------------------------------- */
.medidor{position:relative;height:74px;background:#0D0B0A;border:1px solid #2a2521;border-radius:12px;overflow:hidden;margin-top:6px}
.medidor .centro{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#4a433c;transform:translateX(-1px)}
.medidor .zona{position:absolute;top:0;bottom:0;left:33.3%;width:33.4%;background:rgba(154,210,74,.07)}
.medidor .aguja{position:absolute;top:6px;bottom:6px;width:3px;border-radius:2px;background:#9AD24A;opacity:0;
                transform:translateX(-1.5px);transition:left .07s linear,opacity .3s ease}
.medidor .hist{position:absolute;inset:0}
.medidor .hist b{position:absolute;width:5px;height:5px;border-radius:50%;transform:translate(-2.5px,-2.5px)}
.medidor .rot{position:absolute;bottom:5px;font-size:10px;color:#4a433c;letter-spacing:1px;font-weight:bold}
.medidor .rot.izq{left:9px} .medidor .rot.der{right:9px}
.medidor .txt{position:absolute;top:7px;left:50%;transform:translateX(-50%);font-size:15px;font-weight:900;color:#6E6963}

/* ----------------------------- panel de placa ----------------------------- */
.pl-fila{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pl-fila+.pl-fila{margin-top:11px}
.pl-fila.off{opacity:.4;pointer-events:none}
.pl-fila b{font-size:13px;color:#cfcac4;font-weight:bold}
.dot{width:9px;height:9px;border-radius:50%;background:#4a433c;flex:none}
.dot.ok{background:#9AD24A;box-shadow:0 0 8px rgba(154,210,74,.55)}
.vu{height:7px;background:#0D0B0A;border:1px solid #2a2521;border-radius:5px;overflow:hidden;margin-top:12px}
.vu.off{opacity:.3}
.vu i{display:block;height:100%;width:0;background:#9AD24A;transition:width .05s linear}
.pl-ayuda{color:#6E6963;font-size:12px;line-height:1.55;margin-top:11px;max-width:70ch}

/* ------------------- lo secundario, plegado --------------------------------
   La medición de puntería contra el click sigue estando, pero cerrada: en el
   capítulo 2 lo que importa es el largo de la nota, y dejarla abierta arriba
   hacía parecer que el ejercicio era de puntería.                            */
details.extra{background:#141110;border:1px solid #2a2521;border-radius:16px;padding:14px 20px;margin-bottom:16px}
details.extra summary{color:#8A8580;font-size:12px;text-transform:uppercase;letter-spacing:1.5px;font-weight:900;
                      cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
details.extra summary::-webkit-details-marker{display:none}
details.extra summary::before{content:'▸';color:#F5C518;font-size:12px}
details.extra[open] summary::before{content:'▾'}
details.extra summary i{text-transform:none;letter-spacing:0;font-size:11.5px;color:#5a544c;font-style:normal}
details.extra summary:focus-visible{outline:2px solid #9AD24A;outline-offset:3px;border-radius:4px}
details.extra .medidor{margin-top:14px}
details.extra p{color:#cfcac4;font-size:14px;line-height:1.72;margin-top:12px;max-width:74ch}
details.extra p.pl-ayuda{color:#6E6963;font-size:12px;line-height:1.55}

/* La línea que reemplaza al bloque de texto arriba de todo: lo mínimo que hay
   que saber para empezar hoy. El resto está un clic más abajo. */
.entrada{color:#8A8580;font-size:14px;line-height:1.7;max-width:76ch;margin:0 0 16px}
.entrada b{color:#EDE7E0}

/* ------------------------------ conclusión -------------------------------- */
.conclusion{background:#141110;border:1px solid #2a2521;border-left:5px solid #9AD24A;border-radius:14px;
            padding:19px 22px;margin-top:16px;display:none}
.conclusion h2{font-size:12px;color:#8A8580;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:13px;font-weight:900}
.conclusion p{color:#cfcac4;font-size:14.5px;line-height:1.7}
.conclusion p+p{margin-top:10px}
.conclusion b{color:#fff}
.conclusion .hacer{background:#0D0B0A;border:1px solid #2a2521;border-radius:11px;padding:14px 17px;margin-top:14px}
.conclusion .hacer h3{font-size:11.5px;color:#F5C518;text-transform:uppercase;letter-spacing:1.4px;margin-bottom:9px;font-weight:900}
.conclusion .hacer ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.conclusion .hacer li{color:#cfcac4;font-size:14px;line-height:1.55}
.conclusion table{border-collapse:collapse;margin-top:13px;font-size:13.5px;width:100%;max-width:520px}
.conclusion th{text-align:left;color:#6E6963;font-size:10.5px;text-transform:uppercase;letter-spacing:1px;padding:6px 12px 6px 0;font-weight:bold}
.conclusion td{padding:6px 12px 6px 0;color:#cfcac4;border-top:1px solid #2a2521}
.conclusion td:first-child{color:#F5C518;font-weight:bold}


/* ---------------------------------------------------------------------------
   CAPÍTULO 4 · una cuerda, un dedo
   ---------------------------------------------------------------------------
   Acá el casillero no dibuja un golpe: dice UNA NOTA. Y como el ejercicio es
   ponerle el nombre a lo que suena, el nombre es lo más grande de la pantalla
   —arriba en el cartel y abajo en la fila— y el traste es lo más chico, que
   es el único orden que enseña algo: si el número de traste manda, el alumno
   vuelve a tocar de memoria y a mirar el mástil, que es lo que el capítulo
   está tratando de sacarle.                                                 */

/* el cartel de la nota que va ahora: es el centro de la sala */
.cartel{display:flex;align-items:center;gap:24px;flex-wrap:wrap;
        background:#0D0B0A;border:1px solid #2a2521;border-left:5px solid #2a2521;
        border-radius:14px;padding:15px 22px;margin:14px 0 4px;min-height:96px}
.cartel .izq{display:flex;align-items:baseline;gap:14px;min-width:210px}
.cartel .fase{color:#6E6963;font-size:11.5px;text-transform:uppercase;letter-spacing:1.6px;
              font-weight:900;min-width:62px}
.cartel .nom{font-size:clamp(34px,6vw,54px);font-weight:900;color:#EDE7E0;line-height:1;
             letter-spacing:-2px}
.cartel .det{display:flex;flex-direction:column;gap:5px;min-width:0}
.cartel .gr{color:#8A8580;font-size:13px;font-weight:bold;letter-spacing:.4px}
.cartel .dic{color:#8A8580;font-size:13.5px;line-height:1.5;max-width:52ch}
.cartel.cantar{border-left-color:#9AD24A}
.cartel.cantar .fase{color:#9AD24A}
.cartel.cantar .nom{color:#9AD24A}
.cartel.tocar{border-left-color:#F5C518}
.cartel.tocar .fase{color:#F5C518}
.cartel.tocar .nom{color:#F5C518}

/* la regla: una sola cuerda estirada, que es como dibuja el capítulo 4.
   Misma precaución que con el mástil — la caja scrollea de costado, así que
   el cartel de la cuenta va AFUERA, en .regla-caja. */
.regla-caja{position:relative;margin-top:8px}
.reglabox{background:#141110;border:1px solid #2a2521;border-radius:14px;padding:8px;overflow-x:auto}
svg.regla{display:block;margin:0 auto;min-width:720px;width:100%}

/* el casillero-nota: el nombre grande, el grado abajo, el traste chiquito */
.slot.nota-slot{flex:0 0 56px;height:78px;justify-content:center;gap:2px;padding-bottom:0}
.slot .iv{font-size:9.5px;font-weight:900;color:#F5C518;letter-spacing:1px;line-height:1}
.slot .nom{font-size:16px;font-weight:900;color:#cfcac4;letter-spacing:-.4px;line-height:1.1}
.slot .gr{font-size:9.5px;font-weight:bold;color:#6E6963;letter-spacing:.7px}
.slot .tr{font-size:10px;font-weight:bold;color:#3f3830}
.slot.ahora .nom{color:#F5C518}
.slot.tapada .nom,.slot.tapada .gr{color:transparent;text-shadow:0 0 9px rgba(207,202,196,.45)}
.slot.tapada .tr{color:transparent}
.slot.ahora.tapada .nom{color:#F5C518;text-shadow:none}

/* la tabla de la figura 4-8, armada con los mismos datos que los diagramas */
table.tabla-grados{border-collapse:collapse;font-size:14px;margin-top:12px}
table.tabla-grados th{text-align:left;color:#6E6963;font-size:10.5px;text-transform:uppercase;
                      letter-spacing:1.1px;font-weight:900;padding:8px 16px 8px 0;white-space:nowrap}
table.tabla-grados td{padding:8px 16px 8px 0;color:#cfcac4;border-top:1px solid #2a2521;
                      text-align:center;min-width:52px;font-variant-numeric:tabular-nums}
table.tabla-grados tr:first-child td{color:#F5C518;font-weight:900;border-top:none}
table.tabla-grados tr:nth-child(2) td{color:#EDE7E0;font-weight:bold}
table.tabla-grados tr:last-child td{color:#5a544c;font-size:11.5px}

/* ---------------------------------------------------------------------------
   CAPÍTULO 5 · tríadas
   ---------------------------------------------------------------------------
   Acá hay dos dibujos al mismo tiempo y no es redundancia: el DIAGRAMA dice
   cómo se agarra y el MÁSTIL dice dónde está eso en la guitarra y qué otras
   Rt, M3 y P5 hay alrededor. El capítulo entero es pasar de lo primero a lo
   segundo, así que tienen que verse juntos.                                 */
.diagramas{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-top:10px}
.caja-acorde{background:#141110;border:1px solid #2a2521;border-radius:14px;padding:10px 12px;
             flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-height:150px}
.caja-acorde svg.acorde-svg{width:100%;height:auto;max-width:230px;display:block}

/* las notas de la posición, que se van prendiendo a medida que las tocás */
.cartel .notas{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.cartel .chip{background:#1d1a17;border:1px solid #2a2521;border-radius:7px;padding:4px 9px;
              color:#8A8580;font-size:12px;font-weight:bold;letter-spacing:.3px}
.cartel .chip b{color:#cfcac4;font-weight:900}
.cartel .chip.dio{background:#16240c;border-color:#9AD24A;color:#9AD24A}
.cartel .chip.dio b{color:#9AD24A}
.cartel .chip.fuera{opacity:.45}
/* "Forma de C" y "2ª inversión" no entran en el cuerpo del cartel del
   capítulo 4, que está pensado para nombres de nota de dos letras */
.cartel.largo .nom{font-size:clamp(23px,3.6vw,34px);letter-spacing:-1px}
/* la nota de la melodía, que es la que va arriba de todo en el capítulo 5 */
.cartel .chip.melodia{border-color:#F5C518;color:#F5C518}
.cartel .chip.melodia b{color:#F5C518}
.cartel .chip.melodia.dio{border-color:#9AD24A;color:#9AD24A}

/* las tres cuerdas del tren (fig. 5-10), una debajo de la otra */
.tren-fila{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tren-fila+.tren-fila{margin-top:10px}
.tren-rot{flex:0 0 150px;color:#EDE7E0;font-size:13px;font-weight:bold;line-height:1.3}
.tren-rot small{display:block;color:#6E6963;font-size:11px;font-weight:normal;margin-top:2px}
.tren-fila .reglabox{flex:1 1 380px;min-width:0;background:#0D0B0A;border:1px solid #2a2521;
                     border-radius:12px;padding:6px;overflow-x:auto}

/* ---------------------------------------------------------------------------
   CAPÍTULO 6 · el blues
   ---------------------------------------------------------------------------
   Primera sala de fujita/ con GRILLA DE COMPASES, como las salas con backing.
   Y tiene que estar: no perderse en los doce compases es el capítulo entero,
   y para eso hay que ver la forma completa mientras suena.                  */
.compas.doce{gap:5px}
.slot.compas-slot{flex:1 1 62px;min-width:56px;height:66px;justify-content:center;gap:2px;padding-bottom:0}
.slot.compas-slot .iv{font-size:9.5px;font-weight:900;color:#5a544c;letter-spacing:1px;line-height:1}
.slot.compas-slot .nom{font-size:15px;font-weight:900;color:#cfcac4;letter-spacing:-.4px}
.slot.compas-slot .gr{font-size:9.5px;font-weight:bold;color:#6E6963;letter-spacing:1px}
.slot.compas-slot.ahora .nom{color:#F5C518}
/* el compás de callarse: el silencio también se toca, así que se ve */
.slot.compas-slot.callar{border-style:dashed;border-color:#6b3a26}
.slot.compas-slot.callar .nom{color:#8A5A4A}
.slot.compas-slot.callar.ahora{background:#2a1a15;border-color:#C0392B;border-style:solid}
.slot.compas-slot.callar.ahora .nom{color:#C0392B}

.cartel.callar{border-left-color:#C0392B}
.cartel.callar .fase,.cartel.callar .nom{color:#C0392B}
.cartel .chip.turno{border-color:#F5C518;color:#F5C518}
.cartel .chip.turno b{color:#F5C518}
.cartel .chip.meta{background:#0D0B0A;border-style:dashed}



.slot.pos-slot{flex:0 0 62px;height:70px;justify-content:center;gap:3px;padding-bottom:0}
.slot.pos-slot .iv{font-size:9.5px;font-weight:900;color:#5a544c;letter-spacing:1px;line-height:1}
.slot.pos-slot .nom{font-size:14px;font-weight:900;color:#cfcac4;letter-spacing:-.3px}
.slot.pos-slot .tr{font-size:10px;font-weight:bold;color:#3f3830}
.slot.pos-slot.ahora .nom{color:#F5C518}


/* --------------------------------- menú ----------------------------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:15px}
a.card{display:flex;flex-direction:column;gap:7px;text-decoration:none;background:#141110;border:2px solid #2a2521;
       border-radius:16px;padding:19px;transition:all .16s ease;color:#fff}
a.card:hover{border-color:#F5C518;background:#1d1810;transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.45)}
a.card:focus-visible{outline:2px solid #9AD24A;outline-offset:3px}
a.card h2{font-size:19px;font-weight:900;line-height:1.12;letter-spacing:-.5px}
a.card p{color:#8A8580;font-size:13px;line-height:1.55}
a.card .go{color:#F5C518;font-weight:bold;font-size:12.5px;margin-top:4px}
.num{align-self:flex-start;background:#F5C518;color:#0D0B0A;font-weight:900;font-size:12px;border-radius:6px;padding:3px 9px}
div.card{display:flex;flex-direction:column;gap:7px;background:#111}
.card.pronto{background:#0f0d0c;border:2px dashed #2a2521;border-radius:16px;padding:19px;color:#5a544c}
.card.pronto h2{font-size:19px;font-weight:900;line-height:1.12;color:#6E6963;letter-spacing:-.5px}
.card.pronto p{color:#4a443e;font-size:13px;line-height:1.55}
.card.pronto .num{background:#2a2521;color:#6E6963}

footer{margin-top:32px;color:#5a544c;font-size:12px;line-height:1.7;text-align:center;max-width:74ch;
       margin-left:auto;margin-right:auto}
footer a{color:#8A8580}

@media (max-width:640px){
  body{padding:20px 14px 48px}
  .slot{height:66px}
  .slot .mano{display:none}
  .rot{min-width:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}