/* /backing-tracks/ — el armador. Base: /jazz-harmony-analyzer/analyzer.css (variables, nav, footer, .sec).
   Todo lleva el prefijo bt- para no chocar con las clases del analizador (.panel, .grid2, .btn…). */

.tool h1 em{font-style:normal;color:var(--f-dom)}
:root{--bt-acc:var(--f-dom)}

.bt-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start;margin-top:30px}
.bt-panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.bt-hoja-panel{margin-top:18px}
.bt-fila{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.bt-crece{flex:1;min-width:190px}
.bt-campo{margin-top:14px}
.bt-guardadas{margin-top:14px}
.bt-label{display:block;font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--muted2);margin-bottom:6px}
.bt-in{display:block;width:100%;background:var(--bg);color:var(--cream);border:1px solid var(--line-strong);
  border-radius:9px;padding:10px 12px;font:inherit;font-size:15px}
textarea.bt-in{font-family:ui-monospace,Consolas,monospace;font-size:14px;line-height:1.7;min-height:122px;resize:vertical}
.bt-in:focus{outline:2px solid var(--bt-acc);outline-offset:0;border-color:transparent}
.bt-btn{font-family:'Oswald',sans-serif;letter-spacing:.8px;text-transform:uppercase;font-size:13px;
  background:var(--panel2);color:var(--cream);border:1px solid var(--line-strong);border-radius:9px;
  padding:10px 14px;cursor:pointer;white-space:nowrap}
.bt-btn:hover{border-color:var(--pewter)}
.bt-play{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1.4px;font-size:17px;font-weight:600;
  background:var(--bt-acc);color:#12100e;border:0;border-radius:10px;padding:13px 30px;min-width:160px;cursor:pointer}
.bt-play:disabled{opacity:.5;cursor:wait}
.bt-ayuda{color:var(--muted2);font-size:12.5px;margin-top:7px;line-height:1.6}
.bt-ayuda code{color:var(--muted);background:var(--bg);padding:1px 5px;border-radius:4px}
.bt-error{color:#e05a4f;font-size:13px;margin-top:6px;min-height:1.2em}

/* el cifrado: 4 compases por fila, como en una hoja */
.bt-hoja{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-left:2px solid var(--line-strong)}
.bt-compas{position:relative;border-right:2px solid var(--line-strong);border-bottom:1px solid var(--line);
  padding:17px 10px 12px;min-height:62px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;
  font-family:'Oswald',sans-serif;font-size:19px;cursor:pointer;transition:background .12s}
.bt-compas:hover{background:var(--panel2)}
.bt-compas .n{position:absolute;top:3px;left:6px;font-family:'Inter',sans-serif;font-size:10px;color:var(--muted2)}
.bt-compas.fuera{opacity:.3}
.bt-compas.ahora{background:var(--bt-acc);color:#12100e}
.bt-compas.ahora .n{color:#12100e}
.bt-compas .mal{color:#e05a4f;text-decoration:underline wavy}
.bt-compas sup{font-size:.62em;margin-left:1px}

.bt-ctl{display:grid;gap:14px}
.bt-par{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.bt-tempo{display:flex;gap:10px;align-items:center}
.bt-tempo input[type=range]{flex:1;accent-color:var(--bt-acc)}
.bt-tempo .bt-in{width:78px}
.bt-mezcla{display:grid;gap:8px}
.bt-inst{display:grid;grid-template-columns:22px 92px 1fr;gap:8px;align-items:center;font-size:14px;color:var(--cream)}
.bt-inst input[type=checkbox],.bt-chk input{accent-color:var(--bt-acc);width:17px;height:17px}
.bt-inst input[type=range]{accent-color:var(--bt-acc);width:100%}
.bt-chk{display:flex;gap:8px;align-items:center;font-size:14px;cursor:pointer;color:var(--cream);padding-bottom:10px}
.bt-aviso{color:var(--bt-acc);font-size:13px;margin:0}
.bt-aviso:empty{display:none}

/* la barra de reproducción queda pegada abajo mientras se baja por la hoja */
.bt-barra{position:sticky;bottom:0;z-index:30;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin:18px -16px 0;padding:12px 16px;background:rgba(11,11,12,.94);backdrop-filter:blur(8px);
  border-top:1px solid var(--line-strong)}
.bt-estado{margin-left:auto;font-family:'Oswald',sans-serif;letter-spacing:1px;text-transform:uppercase;
  color:var(--bt-acc);font-size:14px}
.bt-estado:empty{display:none}

@media (max-width:860px){ .bt-grid{grid-template-columns:1fr} }
@media (max-width:560px){
  .bt-hoja{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bt-compas{font-size:17px}
  .bt-barra{gap:8px}
  .bt-barra .bt-btn{padding:8px 10px;font-size:12px}
  .bt-play{flex:1 1 100%}
  .bt-estado{order:-1;flex:1 1 100%;margin:0;text-align:center}
}

/* Practice Pass (05/10/2026): Save and Download MIDI carry a small gold mark, the colour of the pass. */
.bt-pass-m{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;border:1px solid #c9942f;
  color:#e7b04a;font-size:9.5px;letter-spacing:1.4px;vertical-align:1px}

/* Práctica (05/10/2026): las herramientas del Practice Pass, en dorado. */
.bt-practica{margin-top:18px;border-color:rgba(201,148,47,.35);
  background:linear-gradient(180deg,rgba(201,148,47,.06),transparent 70%),var(--panel)}
.bt-practica-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.bt-practica-cab .bt-label{color:#e7b04a;margin:0}
.bt-practica-pass{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:#c9942f}
.bt-practica-pass:hover{color:#f0c46a}
.bt-practica-fila{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}
.bt-practica .bt-chk{padding-bottom:6px}
.bt-pr-sub{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--muted)}
.bt-mini{width:64px;display:inline-block;padding:6px 8px;font-size:14px}
.bt-mini:disabled{opacity:.45}
.bt-practica .bt-ayuda{margin-top:4px}
@media (max-width:960px){ .bt-practica-fila{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .bt-practica-fila{grid-template-columns:1fr} }

/* el análisis sobre el cifrado: grado bajo cada acorde (colores de función del analizador) y el patrón arriba */
.bt-ac{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.bt-sim{white-space:nowrap}
.bt-pass-m[hidden]{display:none}
.bt-rn{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.3px;margin-top:3px}
.bt-pat{position:absolute;top:2px;right:6px;font-family:'Inter',sans-serif;font-size:9.5px;letter-spacing:.4px;
  color:var(--muted);background:var(--bg);border:1px solid var(--line-strong);border-radius:999px;padding:0 6px}
.bt-compas.con-an{min-height:76px;padding-top:20px}
.bt-compas.ahora .bt-rn,.bt-compas.ahora .bt-pat{color:#12100e;border-color:rgba(18,16,14,.4);background:transparent}
.bt-an-key{font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:#e7b04a;margin:0 0 10px}

/* la app */
.bt-app{display:grid;grid-template-columns:1.2fr 1fr;gap:34px;align-items:center;border:1px solid var(--line-strong);
  border-radius:18px;padding:34px;background:radial-gradient(600px 260px at 0% 0%,rgba(230,131,31,.10),transparent 65%),var(--panel)}
.bt-app h2{margin-top:6px}
.bt-app-cta{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:16px}
.bt-app-ya{color:var(--f-tonic);font-family:'Oswald',sans-serif;letter-spacing:1px;text-transform:uppercase;font-size:14px}
.bt-app-lista{border-left:2px solid rgba(201,148,47,.5);padding-left:24px}
.bt-app-lista h3{color:#e7b04a;margin:0 0 10px}
.bt-app-lista ul{margin:0 0 14px;padding-left:18px;color:var(--muted);font-size:14.5px;line-height:1.6}
.bt-app-lista li{margin-bottom:6px}
.bt-app-lista b{color:var(--cream)}
.bt-app-pass{font-family:'Oswald',sans-serif;letter-spacing:1.2px;text-transform:uppercase;font-size:13px;color:#e7b04a}
@media (max-width:860px){ .bt-app{grid-template-columns:1fr;padding:24px} .bt-app-lista{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:18px} }

/* El teléfono (05/10/2026), como los Shorts: el acorde que suena en grande, el que sigue, los pulsos y ocho compases.
   El cifrado completo queda detrás de «Cifrado completo». En la computadora, la hoja de siempre. */
.bt-vivo{display:none}
@media (max-width:700px){
  .bt-vivo{display:grid;gap:12px}
  .bt-hoja-panel:not(.todo) .bt-hoja,.bt-hoja-panel:not(.todo) .bt-hoja + .bt-ayuda{display:none}
  .bt-hoja-panel.todo .bt-ventana{display:none}
  .bt-hoja-panel .bt-an-key{margin-top:4px}
  .bt-vahora{position:relative;background:#c9942f;color:#14100a;border-radius:18px;padding:14px 18px 16px;min-height:150px;
    display:flex;flex-direction:column;justify-content:center;align-items:center}
  .bt-vlab{position:absolute;top:10px;left:16px;font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:2.4px;text-transform:uppercase;opacity:.75}
  .bt-vac{font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(56px,19vw,92px);line-height:1;white-space:nowrap}
  .bt-vac sup{font-size:.45em;margin-left:2px}
  .bt-vcuenta{opacity:.55}
  .bt-vrn{font-family:'Inter',sans-serif;font-weight:700;font-size:16px;margin-top:4px;min-height:1.2em}
  .bt-vrn span{color:#14100a !important;background:rgba(20,16,10,.12);border-radius:999px;padding:1px 10px}
  .bt-vsigue{position:relative;background:var(--panel2);border:1px solid var(--line-strong);border-radius:14px;
    padding:10px 16px;min-height:70px;display:flex;align-items:center;justify-content:center}
  .bt-vsigue .bt-vlab{color:var(--muted2);opacity:1;top:8px}
  .bt-vsig{font-family:'Oswald',sans-serif;font-weight:500;font-size:clamp(30px,9vw,42px);line-height:1;white-space:nowrap}
  .bt-vsig sup{font-size:.5em}
  .bt-pulsos{display:flex;gap:10px;padding-left:4px}
  .bt-pulsos i{width:18px;height:18px;border-radius:50%;background:var(--panel2);border:1px solid var(--line-strong)}
  .bt-pulsos i.on{background:#c9942f;border-color:#c9942f}
  .bt-ventana{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .bt-vc{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:10px;min-height:56px;
    padding:15px 4px 6px;display:flex;flex-wrap:wrap;gap:0 6px;align-items:center;justify-content:center;
    font-family:'Oswald',sans-serif;font-size:17px;cursor:pointer}
  .bt-vc .n{position:absolute;top:2px;left:5px;font-family:'Inter',sans-serif;font-size:9px;color:var(--muted2)}
  .bt-vc sup{font-size:.6em}
  .bt-vc.ahora{border:2px solid #c9942f;color:#e7b04a;background:var(--panel2)}
  .bt-vc .mal{color:#e05a4f}
  .bt-ver{justify-self:start}
}

/* Exportar (05/10/2026): MIDI, MP3 o WAV, en el cartel dorado del pass */
.bt-fmts{display:grid;gap:10px;margin:6px 0 4px}
.bt-fmt{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid rgba(201,148,47,.4);border-radius:12px;padding:12px 14px;color:var(--cream);font:inherit}
.bt-fmt:hover,.bt-fmt:focus{border-color:#e7b04a;background:rgba(201,148,47,.1);outline:none}
.bt-fmt b{font-family:'Oswald',sans-serif;font-weight:700;font-size:22px;letter-spacing:1px;color:#f0c46a}
.bt-fmt span{color:var(--muted);font-size:13px;line-height:1.45}

/* Instalar la app (05/10/2026): arriba, a la vista, siempre (menos dentro de la app) */
.bt-instalar-top{display:inline-flex;align-items:center;gap:14px;margin-top:18px;cursor:pointer;text-align:left;
  background:linear-gradient(180deg,rgba(230,131,31,.16),rgba(230,131,31,.06));border:1px solid rgba(230,131,31,.6);
  color:var(--cream);border-radius:14px;padding:12px 20px 12px 14px;font:inherit;transition:.18s}
.bt-instalar-top:hover{border-color:var(--f-dom);transform:translateY(-1px)}
.bt-instalar-top[hidden]{display:none}
.bt-instalar-top .ico{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--f-dom);
  color:#12100e;font-size:22px;font-weight:700}
.bt-instalar-top b{display:block;font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;font-size:16px}
.bt-instalar-top b + span{display:block;color:var(--muted);font-size:12.5px;margin-top:1px}
.nav-app{color:var(--f-dom) !important}
@media (max-width:560px){ .bt-instalar-top{width:100%} }

/* Barra de progreso de la exportación (05/10/2026), en la barra fija de abajo */
.bt-progreso{flex:1 1 260px;min-width:220px;max-width:420px;margin-left:auto}
.bt-progreso[hidden]{display:none}
.bt-prog-txt{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;
  font-family:'Oswald',sans-serif;letter-spacing:1px;text-transform:uppercase;font-size:12.5px;color:#e7b04a}
.bt-prog-txt b{font-weight:600;color:var(--cream)}
.bt-prog-bar{height:8px;border-radius:999px;background:var(--panel2);border:1px solid var(--line-strong);overflow:hidden}
.bt-prog-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#c9942f,#f0c46a);
  transition:width .25s ease}
@media (max-width:560px){ .bt-progreso{order:-1;flex:1 1 100%;max-width:none;margin:0} }

/* ------------------------------------------------------------------ JamShed (06/10/2026)
   The app has a name and a brand: the logo (img/jamshed/, vectorised from Libros/JamShed_logo.jpeg) and its
   gradient, orange to magenta, instead of the site's plain orange. */
:root{--js-1:#f48a1e;--js-2:#f43d5c;--js-3:#b2168e;--js-g:linear-gradient(90deg,#f48a1e,#f43d5c 55%,#c81a8a);--bt-acc:#f4513f}
.js-brand{display:flex;align-items:center}
.js-brand img{height:30px;width:auto;display:block}
.js-h1{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:6px 0 4px}
.js-logo{width:clamp(210px,28vw,300px);height:auto;display:block}
.js-h1-sub{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:1px;
  font-size:clamp(20px,2.6vw,28px);line-height:1.15;color:var(--cream)}
.js-lema{font-family:'Inter',sans-serif;font-weight:600;font-size:clamp(17px,2vw,21px);margin:2px 0 14px;
  background:var(--js-g);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.bt-play{background:var(--js-g);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.15)}
.bt-compas.ahora{background:var(--js-g);color:#fff}
.bt-compas.ahora .n{color:rgba(255,255,255,.85)}
.bt-instalar-top{background:linear-gradient(180deg,rgba(244,61,92,.16),rgba(244,61,92,.05));border-color:rgba(244,61,92,.6)}
.bt-instalar-top:hover{border-color:var(--js-2)}
.bt-instalar-top .ico{background:var(--js-g);color:#fff}
.nav-app{color:var(--js-2) !important}
.bt-app{background:radial-gradient(600px 260px at 0% 0%,rgba(244,61,92,.12),transparent 65%),var(--panel)}
@media (max-width:700px){
  .bt-vahora{background:var(--js-g);color:#fff}
  .bt-vrn span{color:#fff !important;background:rgba(0,0,0,.18)}
  .bt-pulsos i.on{background:var(--js-2);border-color:var(--js-2)}
  .bt-vc.ahora{border-color:var(--js-2);color:#ff8fa6}
}
/* el encabezado de JamShed (08/10/2026): a la izquierda el logo con el lema debajo, al lado el título (h1);
   en el teléfono, apilado. «JamShed: » va en el h1 solo para lectores y buscadores (el logo es decorativo). */
.js-cab{display:flex;align-items:center;gap:34px;margin:6px 0 22px}
.js-marca{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none}
.js-logo{width:clamp(150px,16vw,190px)}
.js-marca .js-lema{margin:0;font-size:clamp(15px,1.5vw,17px);text-align:center;white-space:nowrap}
.js-h1{margin:0}
.js-h1-sub{display:block;font-size:clamp(24px,3.2vw,38px);max-width:13em}
.js-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:620px){
  .js-cab{flex-direction:column;align-items:flex-start;gap:16px}
  .js-marca{align-items:flex-start}
  .js-logo{width:170px}
  .js-marca .js-lema{text-align:left}
}

/* Cifrado en PDF (06/10/2026): el botón arriba del cifrado, y la hoja impresa (con print.css, como los PDF del sitio) */
.bt-hoja-cab{display:flex;justify-content:flex-end;margin:-4px 0 10px}
.bt-pdf{display:inline-flex;align-items:center;gap:6px}
.bt-free-m{display:inline-block;padding:1px 7px;border-radius:999px;background:var(--pewter);color:#14130f;
  font-size:9.5px;letter-spacing:1.4px}
@media print{
  .ndp-jamshed .ndp-query{color:#a12a3f}
  .ndp-an{font-family:'Oswald',sans-serif;font-size:10pt;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:-8px 0 12px}
  .ndp-chart{display:grid;grid-template-columns:repeat(4,1fr);border-left:1.5pt solid #14130f}
  .ndp-bar{position:relative;border-right:1.5pt solid #14130f;border-bottom:.5pt solid rgba(0,0,0,.25);min-height:58px;
    padding:16px 8px 8px;display:flex;flex-wrap:wrap;gap:2px 12px;align-items:center;break-inside:avoid;page-break-inside:avoid}
  .ndp-bn{position:absolute;top:2px;left:5px;font-size:7pt;color:#6b675f}
  .ndp-pat{position:absolute;top:2px;right:5px;font-size:6.8pt;color:#494640;border:.5pt solid rgba(0,0,0,.3);border-radius:8px;padding:0 5px}
  .ndp-ch{display:inline-flex;flex-direction:column;font-family:'Oswald',sans-serif;font-size:16pt;font-weight:500;line-height:1.05;color:#14130f}
  .ndp-ch sup{font-size:.58em}
  .ndp-rn{font-family:'Inter',sans-serif;font-size:8pt;font-weight:600;margin-top:2px}
  .ndp-js-foot{display:flex;align-items:center;gap:14px;margin-top:22px;padding-top:10px;border-top:1px solid rgba(0,0,0,.2);
    font-size:8.5pt;color:#494640}
  .ndp-js-foot img{height:44px;width:auto}
}
@media print{ .ndp-sim{white-space:nowrap} }
/* La hoja impresa, segunda versión (06/10/2026): un lead sheet liviano. Sin cajas ni líneas negras: líneas de compás
   finas y grises, el número solo al principio de cada línea, los acordes grandes, doble barra al final. */
@media print{
  @page{margin:16mm 15mm}
  .ndp-jamshed{-webkit-print-color-adjust:exact;print-color-adjust:exact;color:#14130f}
  .jp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
  .jp-title{font-family:'Oswald',sans-serif;font-weight:600;font-size:28pt;line-height:1.05;letter-spacing:.3px;margin:0}
  .jp-datos{font-family:'Inter',sans-serif;font-size:10.5pt;color:#494640;margin-top:6px}
  .jp-datos b{font-weight:600;color:#14130f}
  .jp-datos i{font-style:normal;color:#b5b1a9;margin:0 8px}
  .jp-logo{height:30px;width:auto;flex:none;margin-bottom:4px}
  .jp-raya{height:2.5px;border-radius:2px;margin:12px 0 6px;background:linear-gradient(90deg,#f48a1e,#f43d5c 55%,#c81a8a)}
  .jp-meta{font-family:'Inter',sans-serif;font-size:8pt;color:#8a867e;margin-bottom:26px}
  .jp-chart{display:grid;gap:10px}
  .jp-row{display:grid;grid-template-columns:22px repeat(4,minmax(0,1fr));break-inside:avoid;page-break-inside:avoid}
  .jp-n{font-family:'Inter',sans-serif;font-size:7.5pt;color:#a29e96;text-align:right;padding:24px 8px 0 0}
  .jp-bar{position:relative;min-height:58px;padding:20px 12px 6px 14px;border-left:.75pt solid #cfccc5;
    display:flex;flex-wrap:wrap;gap:0 16px;align-items:flex-start}
  .jp-bar:last-child{border-right:.75pt solid #cfccc5}
  .jp-row:last-child .jp-bar:last-child{border-right:3px double #8a867e}
  .jp-pat{position:absolute;top:3px;left:14px;font-family:'Inter',sans-serif;font-size:7pt;letter-spacing:.3px;color:#8a867e}
  .jp-ch{display:inline-flex;flex-direction:column}
  .jp-sim{font-family:'Oswald',sans-serif;font-weight:500;font-size:20pt;line-height:1.1;white-space:nowrap}
  .jp-sim sup{font-size:.52em;font-weight:400;margin-left:1px}
  .jp-rn{font-family:'Inter',sans-serif;font-size:8pt;font-weight:600;margin-top:1px}
  .jp-foot{margin-top:26px;text-align:center;font-family:'Inter',sans-serif;font-size:8pt;color:#a29e96}
}
@media print{ svg.jp-raya{display:block;width:100%;height:2.5px;background:none} }
/* El pie de la hoja (06/10/2026): el QR que abre JamShed (con este tema) y nielsdalgaard.com */
@media print{
  .jp-pie{display:flex;align-items:center;gap:18px;margin-top:28px;padding-top:16px;border-top:.75pt solid #dedbd4;break-inside:avoid}
  .jp-qr{flex:none;width:26mm;height:26mm}
  .jp-qr svg{width:100%;height:100%;display:block}
  .jp-pie-txt{flex:1;display:flex;flex-direction:column;gap:3px;font-family:'Inter',sans-serif;font-size:8.5pt;color:#494640;line-height:1.4}
  .jp-pie-txt b{font-family:'Oswald',sans-serif;font-weight:600;font-size:12.5pt;letter-spacing:.3px;color:#14130f}
  .jp-web{margin-top:4px;color:#6b675f}
  .jp-web strong{color:#c8264f;font-weight:700;font-size:10pt}
  .jp-pie-logo{flex:none;width:15mm;height:auto;opacity:.95}
}

/* Escucha (beta, 06/10/2026): the switch is the 5th practice tool; the pill in the bar says what the trio is doing */
.bt-practica-fila{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){ .bt-practica-fila{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:960px){ .bt-practica-fila{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .bt-practica-fila{grid-template-columns:1fr} }
.bt-escucha-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  border:1px solid rgba(244,61,92,.55);font-family:'Oswald',sans-serif;letter-spacing:1px;text-transform:uppercase;font-size:12.5px;color:var(--cream)}
.bt-escucha-pill[hidden]{display:none}
.bt-escucha-pill i{width:10px;height:10px;border-radius:50%;background:var(--js-2,#f43d5c);opacity:.3;transition:opacity .1s}

/* El cartel de calibración de la escucha (06/10/2026): toda la pantalla, nada más que hacer que esperar */
.bt-calib{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:rgba(8,6,10,.92);backdrop-filter:blur(6px)}
.bt-calib[hidden]{display:none}
.bt-calib-box{text-align:center;padding:30px 24px;max-width:560px}
.bt-calib-box img{width:64px;height:64px;margin-bottom:14px}
.bt-calib-t{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:1px;
  font-size:clamp(26px,5vw,42px);line-height:1.1;color:#fff}
.bt-calib-n{font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(90px,20vw,160px);line-height:1;margin:14px 0;
  background:linear-gradient(90deg,#f48a1e,#f43d5c 55%,#c81a8a);-webkit-background-clip:text;background-clip:text;color:transparent;min-height:1em}
.bt-calib-s{color:var(--muted);font-size:17px;margin-bottom:22px}
body.bt-calibrando{overflow:hidden}

/* Lo que oye JamShed (06/10/2026) */
.bt-diag{margin-top:18px;border-color:rgba(244,61,92,.4)}
.bt-diag[hidden]{display:none}
.bt-diag-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.bt-diag-t{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
.bt-diag-t th,.bt-diag-t td{text-align:left;padding:5px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.bt-diag-t th{font-family:'Oswald',sans-serif;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--muted2);font-size:10.5px}
.bt-diag-t td:last-child{white-space:normal;color:var(--cream)}
.bt-diag-btn{margin-top:6px;font-size:11.5px;padding:7px 10px}
.bt-diag-btn[hidden]{display:none}

/* 07/10/2026: one "Pass" tag in the corner of the Practice box instead of one per tool;
   React Trio leaves the row of tools for a strip of its own, with its logo */
.bt-practica{position:relative}
.bt-practica-cab{padding-right:70px}
.bt-practica-pass.bt-pass-m{position:absolute;top:-1px;right:-1px;margin:0;padding:6px 14px 6px 16px;
  border:0;border-radius:0 14px 0 12px;background:#c9942f;color:#14100a;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:12px;letter-spacing:2px;text-transform:uppercase}
.bt-practica-pass.bt-pass-m:hover{background:#f0c46a;color:#14100a}
.bt-practica-fila{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){ .bt-practica-fila{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .bt-practica-fila{grid-template-columns:1fr} }

.bt-rt{display:grid;grid-template-columns:64px 1fr auto;gap:18px;align-items:center;margin-top:18px;padding:16px 18px;
  border-radius:12px;border:1px solid rgba(244,61,92,.45);
  background:radial-gradient(420px 140px at 0% 50%,rgba(244,61,92,.14),transparent 70%),rgba(35,5,70,.35)}
.bt-rt-mark{width:64px;height:64px;display:block}
.bt-rt-nom{font-family:'Oswald',sans-serif;font-weight:600;font-size:22px;letter-spacing:1.5px;text-transform:uppercase;
  color:#fff;margin:0 0 4px;line-height:1.1}
.bt-rt-beta{display:inline-block;vertical-align:4px;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:10px;
  letter-spacing:1.4px;font-weight:500;border:1px solid rgba(244,61,92,.7);color:#ff8fa3}
.bt-rt-dice{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.bt-rt-acc{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.bt-rt-on{display:inline-flex;align-items:center;gap:9px;cursor:pointer;white-space:nowrap;padding:10px 16px;border-radius:999px;
  font-family:'Oswald',sans-serif;letter-spacing:1.2px;text-transform:uppercase;font-size:13.5px;color:#fff;
  background:linear-gradient(90deg,#f48a1e,#f43d5c 55%,#c81a8a)}
.bt-rt-on input{width:17px;height:17px;accent-color:#230546}
.bt-rt-mas{font-family:'Oswald',sans-serif;letter-spacing:1.2px;text-transform:uppercase;font-size:12px;color:#ff8fa3}
.bt-rt-mas:hover{color:#fff}
.bt-rt .bt-diag-btn{margin-top:0}
@media (max-width:760px){
  .bt-rt{grid-template-columns:52px 1fr}
  .bt-rt-mark{width:52px;height:52px}
  .bt-rt-acc{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
}

/* La sección React Trio (07/10/2026) */
.rt-sec{background:radial-gradient(900px 420px at 10% 0%,rgba(244,61,92,.12),transparent 65%),
  radial-gradient(700px 380px at 100% 100%,rgba(35,5,70,.55),transparent 70%)}
.rt-cab{display:flex;gap:24px;align-items:center;margin-bottom:22px}
.rt-logo{width:96px;height:96px;flex:none;filter:drop-shadow(0 10px 30px rgba(244,61,92,.25))}
.rt-cab .eyebrow{margin:0 0 4px}
.rt-nombre{margin:0;font-size:clamp(40px,7vw,64px);line-height:1;letter-spacing:2px;text-transform:uppercase}
.rt-nombre span{background:linear-gradient(90deg,#f48a1e,#f43d5c 55%,#c81a8a);-webkit-background-clip:text;background-clip:text;color:transparent}
.rt-lema{margin:8px 0 0;font-size:19px;color:var(--cream)}
.rt-lead{font-size:17px;line-height:1.7;max-width:760px}
.rt-sec h3{margin-top:34px}
.rt-pasos{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:none}
.rt-pasos li{position:relative;background:var(--panel);border:1px solid var(--line-strong);border-radius:14px;padding:20px 20px 18px}
.rt-pasos li:not(:last-child)::after{content:'\2192';position:absolute;right:-14px;top:24px;z-index:1;color:#f43d5c;font-size:18px}
.rt-n{display:inline-flex;width:30px;height:30px;border-radius:50%;align-items:center;justify-content:center;margin-bottom:10px;
  font-family:'Oswald',sans-serif;font-weight:600;color:#fff;background:linear-gradient(135deg,#f48a1e,#f43d5c 55%,#c81a8a)}
.rt-pasos b,.rt-r b{display:block;font-family:'Oswald',sans-serif;font-weight:500;letter-spacing:1px;text-transform:uppercase;font-size:15px;color:var(--cream)}
.rt-pasos p,.rt-r p{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.rt-reacciones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:14px}
.rt-r{border-left:3px solid #f43d5c;padding:4px 0 4px 14px}
.rt-ico{display:block;font-size:22px;line-height:1;color:#f48a1e;margin-bottom:8px}
.rt-datos{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;font-size:14.5px;color:var(--muted);line-height:1.6}
.rt-datos b{color:var(--cream)}
.rt-cta{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:28px}
.rt-ir{display:inline-block;text-decoration:none;text-align:center;background:linear-gradient(90deg,#f48a1e,#f43d5c 55%,#c81a8a);color:#fff}
@media (max-width:960px){
  .rt-pasos{grid-template-columns:1fr} .rt-pasos li:not(:last-child)::after{content:'\2193';right:auto;left:30px;top:auto;bottom:-20px}
  .rt-reacciones{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .rt-cab{gap:16px} .rt-logo{width:64px;height:64px}
  .rt-reacciones,.rt-datos{grid-template-columns:1fr}
}
/* the site's .sec rules cap lists and paragraphs at reading width and set h2 size: the React Trio section opts out */
#react-trio .rt-pasos,#react-trio .rt-datos,#react-trio .rt-reacciones{max-width:none;margin-left:0;margin-right:0}
#react-trio .rt-nombre{font-size:clamp(40px,7vw,64px);margin:0}
#react-trio .rt-lead{max-width:780px}
#react-trio .rt-lema{font-size:20px;color:var(--cream);margin-top:8px}
#react-trio .rt-lead{font-size:17px;line-height:1.7}
#react-trio .rt-datos{margin-top:34px}

/* Cuánto reacciona (07/10/2026): the strength of React Trio */
.bt-rt-cuanto{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.bt-rt-cuanto label{font-family:'Oswald',sans-serif;font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:#ff8fa3}
.bt-rt-cuanto input{flex:1 1 160px;max-width:260px;accent-color:#f43d5c}
.bt-rt-cuanto b{font-family:'Oswald',sans-serif;font-weight:500;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:#fff;min-width:70px}