/* ============ SCOREHELP ============
   Misma lógica visual que AsianSecret (fondo oscuro fijo + velo, cabecera
   con halo, nav sticky con filete dorado, chips, tarjetas con barrido,
   bloques y "pasos" numerados) pero con paleta propia: en vez de
   dorado/rojo de comida, acá el acento es un cian eléctrico — el color de
   una nota tocada — y el resto de la paleta la ponen los propios mapas
   armónicos (cada uno trae sus colores, así que la interfaz se queda
   neutra para no pelear con ellos). */

:root {
  --negro: #07070a; --negro-rgb: 7, 7, 10;
  --negro-2: #0c0c11;
  --carta: #101018;
  --carta-alta: #151521;
  --borde: #23232f;

  --acento: #5be8d8;
  --acento-claro: #9ff3e8;
  --acento-oscuro: #2e9c90;
  --acento-rgb: 91, 232, 216;

  --rosa: #ff6fae;
  --rosa-rgb: 255, 111, 174;

  --violeta: #b98bff;
  --violeta-rgb: 185, 139, 255;

  --blanco: #f4f2fb; --blanco-rgb: 244, 242, 251;
  --tenue: #9591a8;
  --tenue-2: #6c688090;

  --font-titulo: "Michroma", "Space Grotesk", "Segoe UI", sans-serif;

  --radio: 16px;
  --sombra: 0 18px 50px rgba(0, 0, 0, 0.65);
  --transicion: 320ms cubic-bezier(0.16, 1, 0.3, 1);

  font-size: 16px;
}

/* ============ temas ============
   El de arriba ("Oscuro") es el default y no tiene selector propio.
   Los otros cinco pisan las mismas variables — todo lo que ya está
   armado con var(--acento)/var(--carta)/etc se re-pinta solo, sin
   tocar una sola regla más. Lo que NO pasa por estas variables (algún
   color suelto de un componente puntual) se queda como está: no es un
   re-theme del sitio entero pixel por pixel, es la paleta y la
   tipografía centrales. */

/* ---- oscuro: táctico — verde oliva y ámbar, estilo militar ---- */
[data-tema="tactico"] {
  --negro: #12140d; --negro-rgb: 18, 20, 13; --negro-2: #181b10; --carta: #1d2115; --carta-alta: #262b1b; --borde: #3a4128;
  --acento: #e8a23d; --acento-claro: #ffc670; --acento-oscuro: #b8792a; --acento-rgb: 232, 162, 61;
  --rosa: #d1553a; --rosa-rgb: 209, 85, 58;
  --violeta: #8fae5a; --violeta-rgb: 143, 174, 90;
  --blanco: #ece7d6; --blanco-rgb: 236, 231, 214; --tenue: #9a9c86; --tenue-2: #9a9c8690;
  --font-titulo: "Black Ops One", "Space Grotesk", sans-serif;
}

/* ---- oscuro: vino — bordó y dorado, clásico ---- */
[data-tema="vino"] {
  --negro: #140a0d; --negro-rgb: 20, 10, 13; --negro-2: #1a0e12; --carta: #201217; --carta-alta: #2a1720; --borde: #3d2530;
  --acento: #d9b45c; --acento-claro: #eecf8c; --acento-oscuro: #a8853a; --acento-rgb: 217, 180, 92;
  --rosa: #b23a52; --rosa-rgb: 178, 58, 82;
  --violeta: #8a5a7a; --violeta-rgb: 138, 90, 122;
  --blanco: #f2e6d8; --blanco-rgb: 242, 230, 216; --tenue: #b7a394; --tenue-2: #b7a39490;
  --font-titulo: "Cinzel", "Space Grotesk", serif;
}

/* ---- claro: dorado — blanco, dorado y azul ---- */
[data-tema="claro-dorado"] {
  --negro: #faf7f0; --negro-rgb: 250, 247, 240; --negro-2: #f3ede0; --carta: #ffffff; --carta-alta: #f7f1e3; --borde: #e3d7bd;
  --acento: #b8860b; --acento-claro: #d4a72c; --acento-oscuro: #8a6508; --acento-rgb: 184, 134, 11;
  --rosa: #2f6fb0; --rosa-rgb: 47, 111, 176;
  --violeta: #3b4d7a; --violeta-rgb: 59, 77, 122;
  --blanco: #1c1a13; --blanco-rgb: 28, 26, 19; --tenue: #6b6250; --tenue-2: #6b625090;
  --font-titulo: "Playfair Display", "Space Grotesk", serif;
}

/* ---- claro: papel — crema y sepia, tinta sobre papel viejo ---- */
[data-tema="claro-papel"] {
  --negro: #f4efe4; --negro-rgb: 244, 239, 228; --negro-2: #ece4d2; --carta: #fffdf8; --carta-alta: #f7f0e0; --borde: #ded0b0;
  --acento: #7a5a33; --acento-claro: #9c7a4f; --acento-oscuro: #5a4022; --acento-rgb: 122, 90, 51;
  --rosa: #3f7d78; --rosa-rgb: 63, 125, 120;
  --violeta: #8a4a4a; --violeta-rgb: 138, 74, 74;
  --blanco: #2c2417; --blanco-rgb: 44, 36, 23; --tenue: #7d7259; --tenue-2: #7d725990;
  --font-titulo: "Libre Baskerville", "Space Grotesk", serif;
}

/* ---- claro: esmeralda — blanco frío, verde esmeralda e índigo ---- */
[data-tema="claro-esmeralda"] {
  --negro: #f1f7f5; --negro-rgb: 241, 247, 245; --negro-2: #e6f0eb; --carta: #ffffff; --carta-alta: #f0f6f3; --borde: #cfe3da;
  --acento: #1f8a6f; --acento-claro: #3dab8c; --acento-oscuro: #166654; --acento-rgb: 31, 138, 111;
  --rosa: #d1637a; --rosa-rgb: 209, 99, 122;
  --violeta: #4a5fb0; --violeta-rgb: 74, 95, 176;
  --blanco: #16231f; --blanco-rgb: 22, 35, 31; --tenue: #5c6d67; --tenue-2: #5c6d6790;
  --font-titulo: "Poppins", "Space Grotesk", sans-serif;
}

[data-tema^="claro"] #fondo-3d { opacity: 0.22; }

/* ---- fuente elegida a mano — independiente del tema, pisa el
   --font-titulo que haya traído el tema activo. Van en un selector con
   :root (mayor especificidad que [data-tema=…] solo) para no depender
   del orden en la hoja de estilos. ---- */
:root[data-fuente="michroma"] { --font-titulo: "Michroma", "Space Grotesk", "Segoe UI", sans-serif; }
:root[data-fuente="black-ops-one"] { --font-titulo: "Black Ops One", "Space Grotesk", sans-serif; }
:root[data-fuente="cinzel"] { --font-titulo: "Cinzel", "Space Grotesk", serif; }
:root[data-fuente="playfair-display"] { --font-titulo: "Playfair Display", "Space Grotesk", serif; }
:root[data-fuente="libre-baskerville"] { --font-titulo: "Libre Baskerville", "Space Grotesk", serif; }
:root[data-fuente="poppins"] { --font-titulo: "Poppins", "Space Grotesk", sans-serif; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: clip; }

body {
  min-height: 100vh;
  color: var(--blanco);
  background: var(--negro);
  font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .serif {
  font-family: var(--font-titulo);
  font-weight: 700;
  letter-spacing: 0.2px;
}
.carta-nombre { font-family: var(--font-titulo); }

.oculto { display: none !important; }
[hidden] { display: none !important; }

/* 1560px alcanza en cualquier notebook o monitor estándar — pero en un
   monitor ancho/curvo (2200px, 3440px...) eso deja franjas enormes vacías
   a los costados. clamp() lo deja IGUAL hasta ~1860px de viewport (el
   mínimo de 1560px gana ahí) y recién después empieza a crecer con el
   ancho de pantalla, con un techo en 2200px para que el texto no
   termine estirado de punta a punta en un ultrawide. */
.envoltorio { max-width: clamp(1560px, 84vw, 2200px); margin: 0 auto; padding: 0 22px 70px; position: relative; z-index: 1; }

/* ---------------- fondo ---------------- */
#fondo-3d {
  position: fixed;
  inset: 0;
  z-index: -2;
}
#fondo-3d canvas { display: block; width: 100%; height: 100%; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(ellipse 70% 50% at 18% 0%, rgba(var(--acento-rgb), 0.14), transparent 60%),
    radial-gradient(ellipse 60% 45% at 100% 20%, rgba(var(--rosa-rgb), 0.1), transparent 60%),
    var(--negro);
}

.velo-global {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 4, 8, 0.15) 0%, rgba(4, 4, 8, 0.55) 100%);
}

/* ---------------- encabezado ---------------- */
.cabecera {
  padding: 46px 0 26px;
  text-align: center;
  position: relative;
  isolation: isolate;
  z-index: 65;
  transition: padding var(--transicion);
}
.lema {
  font-size: 0.72rem;
  letter-spacing: 6px;
  color: var(--acento);
  text-transform: uppercase;
  text-shadow: 0 0 22px rgba(var(--acento-rgb), 0.55);
}
.logo-texto {
  margin-top: 8px;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.05;
}
.logo-texto .punto { color: var(--acento); }
.intro {
  margin: 14px auto 0;
  max-width: 560px;
  color: var(--tenue);
  font-size: 0.96rem;
}
.cabecera.compacta { padding: 14px 0 10px; }
.cabecera.compacta .intro { display: none; }
.cabecera.compacta .logo-texto { font-size: 1.5rem; }

/* ---------------- navegación ---------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  margin-inline: calc(50% - 50vw);
  padding: 8px calc(50vw - 50%);
  background: linear-gradient(180deg, rgba(var(--negro-rgb), 0.96), rgba(var(--negro-rgb), 0.78));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
.nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--acento-rgb), 0.5) 50%, transparent);
  pointer-events: none;
}
.nav-btn {
  position: relative;
  background: none;
  border: none;
  color: var(--tenue);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 8px 18px;
  cursor: pointer;
  transition: color var(--transicion);
  font-family: inherit;
}
.nav-btn:hover { color: var(--blanco); }
.nav-btn.activo { color: var(--acento); }
.nav-btn.activo::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: 4px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--acento), transparent);
}

/* ---------------- filtros ---------------- */
.vista { padding-top: 16px; }
.barra-filtros { margin: 2px 0 6px; }

.buscador {
  width: 100%;
  background: var(--carta);
  border: 1px solid var(--borde);
  border-radius: 40px;
  color: var(--blanco);
  font-size: 0.95rem;
  padding: 10px 20px;
  outline: none;
  font-family: inherit;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.buscador::placeholder { color: #6b6880; }
.buscador:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(var(--acento-rgb), 0.14);
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.chip {
  background: var(--carta);
  border: 1px solid var(--borde);
  border-radius: 40px;
  color: var(--tenue);
  font-size: 0.86rem;
  font-weight: 600;
  padding: 9px 16px;
  cursor: pointer;
  transition: all var(--transicion);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
}
.chip:hover { border-color: var(--acento-oscuro); color: var(--blanco); transform: translateY(-1px); }
.chip.activo {
  background: linear-gradient(135deg, var(--acento-claro), var(--acento) 60%, var(--acento-oscuro));
  border-color: var(--acento-claro);
  color: #05201c;
  box-shadow: 0 6px 18px rgba(var(--acento-rgb), 0.25);
}
.chip-n {
  font-size: 0.72rem;
  opacity: 0.75;
  font-weight: 700;
}

/* ---------------- grilla de mapas ---------------- */
.grilla-mapas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.mapa-carta {
  text-align: left;
  background: linear-gradient(165deg, var(--carta-alta), var(--carta));
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px 18px 20px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  position: relative;
  overflow: hidden;
  transition: transform var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}
.mapa-carta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(var(--acento-rgb), 0.14) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.mapa-carta:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--acento-rgb), 0.55);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--acento-rgb), 0.18);
}
.mapa-carta:hover::after { transform: translateX(120%); }
.mapa-carta:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.mapa-carta-cima {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.mapa-carta-coleccion {
  font-size: 0.68rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--tenue);
  font-weight: 700;
}
.mapa-carta-puntos { display: flex; gap: 4px; }
.tarjeta-punto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c, var(--acento));
  box-shadow: 0 0 8px var(--c, var(--acento));
}
.mapa-carta-nombre {
  font-size: 1.04rem;
  line-height: 1.3;
  margin-bottom: 6px;
}
.mapa-carta-geometria {
  font-size: 0.78rem;
  color: var(--acento-claro);
  margin-bottom: 8px;
  opacity: 0.85;
}
.mapa-carta-sensacion {
  font-size: 0.84rem;
  color: var(--tenue);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------- vacío ---------------- */
.vacio {
  text-align: center;
  padding: 60px 20px;
  color: var(--tenue);
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
  margin-top: 20px;
}
.vacio-icono { font-size: 2.4rem; margin-bottom: 10px; opacity: 0.6; }

/* ---------------- volver ---------------- */
.volver {
  background: none;
  border: 0;
  color: var(--tenue);
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0 2px 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: color var(--transicion);
}
.volver:hover { color: var(--acento); }
.volver-flecha { font-size: 1.15rem; transition: transform var(--transicion); }
.volver:hover .volver-flecha { transform: translateX(-4px); }

/* ---------------- detalle de un mapa ---------------- */
.detalle-cabeza { margin-bottom: 22px; }
.detalle-coleccion {
  font-size: 0.74rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--acento);
  font-weight: 700;
  margin-bottom: 6px;
}
.detalle-nombre { font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.15; }
.detalle-geometria { margin-top: 6px; color: var(--tenue); font-size: 0.92rem; }

/* ---------------- barra sobre el gráfico ---------------- */
.barra-grafo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.control-tonica { display: flex; align-items: center; gap: 10px; }
.control-tonica label {
  font-size: 0.72rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--tenue);
  font-weight: 700;
}
#sel-tonica {
  background: var(--carta-alta);
  border: 1px solid rgba(var(--acento-rgb), 0.45);
  border-radius: 40px;
  color: var(--acento-claro);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
  outline: none;
}
#sel-tonica:focus { box-shadow: 0 0 0 3px rgba(var(--acento-rgb), 0.16); }
#sel-tonica option { background: #14131c; color: var(--blanco); }
.tonica-original { font-size: 0.78rem; color: var(--tenue); }

.control-vista { display: flex; gap: 6px; }
.vista-btn {
  padding: 8px 15px;
  border-radius: 40px;
  border: 1px solid var(--borde);
  background: transparent;
  color: var(--tenue);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transicion);
}
.vista-btn:hover { color: var(--blanco); border-color: var(--acento-oscuro); }
.vista-btn.activo {
  background: rgba(var(--acento-rgb), 0.16);
  border-color: var(--acento);
  color: var(--acento-claro);
}

.detalle-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(280px, 38fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 880px) {
  .detalle-cuerpo { grid-template-columns: 1fr; }
}

.detalle-grafo {
  background: radial-gradient(circle at 50% 42%, rgba(var(--acento-rgb), 0.06), transparent 60%), var(--carta);
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 10px;
  box-shadow: var(--sombra);
  /* el SVG (viewBox 720×720) escala al 100% de este contenedor — en una
     pantalla ancha, la columna del gráfico (que en .detalle-cuerpo se
     lleva todo el espacio sobrante) podía superar los 1500px y el mapa
     quedaba gigante. Con un tope queda grande y legible sin comerse
     toda la pantalla, y en mobile sigue encogiendo normal porque el
     100% sigue funcionando por debajo del tope. */
  max-width: 640px;
  margin: 0 auto;
}
.sh-svg { width: 100%; height: auto; display: block; }

.detalle-lateral { display: flex; flex-direction: column; gap: 14px; }
.detalle-texto { color: var(--tenue); font-size: 0.92rem; line-height: 1.65; }
.detalle-sensacion { color: var(--acento-claro); font-style: italic; }

/* ---------------- bloques ---------------- */
.bloque {
  background: linear-gradient(165deg, var(--carta-alta), var(--carta));
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px 20px;
}
.bloque-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.86rem;
  color: var(--acento);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.bloque-titulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--acento-rgb), 0.4), transparent);
}
.bloque-acerca { max-width: 720px; margin: 0 auto; }
.bloque-acerca .detalle-texto { margin-bottom: 14px; }
.bloque-acerca .detalle-texto:last-child { margin-bottom: 0; }

/* ---------------- leyenda de colores ---------------- */
.leyenda-colores { display: flex; flex-direction: column; gap: 9px; }
.leyenda-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.86rem;
  color: var(--blanco);
  text-transform: capitalize;
}
.leyenda-punto {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: var(--c, var(--acento));
  box-shadow: 0 0 10px var(--c, var(--acento));
}

/* ---------------- recorrido de acordes (pasos) ---------------- */
.pasos { list-style: none; counter-reset: paso; display: flex; flex-direction: column; gap: 4px; }
.pasos li {
  position: relative;
  counter-increment: paso;
  padding: 2px 0 14px 38px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--tenue);
}
.pasos li strong { color: var(--blanco); font-weight: 700; }
.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0; top: -2px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--acento-oscuro);
  background: rgba(var(--acento-rgb), 0.08);
  color: var(--acento);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
}
.pasos li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 12px; top: 24px; bottom: 2px;
  width: 1px;
  background: linear-gradient(180deg, var(--acento-oscuro), transparent);
  opacity: 0.5;
}

/* ---------------- la telaraña ----------------
   Le da cuerpo a la figura: sin estas líneas los acordes quedan como
   puntos sueltos flotando. No son movimientos musicales, así que van muy
   por debajo de todo y no se llevan el mouse. */
.sh-capa-tela { pointer-events: none; }
.sh-tela {
  stroke: rgba(var(--blanco-rgb), 0.17);
  stroke-width: 1;
}
.sh-tela-radio { stroke: rgba(var(--blanco-rgb), 0.12); }
.sh-tela-contorno { stroke: rgba(var(--acento-rgb), 0.34); stroke-width: 1.3; }
.sh-tela-eje { stroke: rgba(var(--acento-rgb), 0.28); }
.sh-tela-malla { stroke: rgba(var(--blanco-rgb), 0.14); }
.sh-tela-rama { stroke: rgba(var(--violeta-rgb), 0.34); }
.sh-tela-recorrido {
  stroke: rgba(var(--acento-rgb), 0.3);
  stroke-width: 1.2;
  stroke-dasharray: 5 6;
}
.sh-tela-aro {
  stroke: rgba(var(--blanco-rgb), 0.09);
  stroke-width: 1;
}
/* durante la exploración la telaraña también se apaga */
.sh-svg.sh-explorando .sh-capa-tela { opacity: 0.25; }

/* ---------------- el grafo SVG ---------------- */
.sh-nodo-circulo {
  fill: rgba(8, 8, 12, 0.92);
  stroke-width: 2.2;
  filter: url(#sh-glow);
  transition: r 200ms ease;
}
.sh-nodo { cursor: default; }
.sh-nodo:hover .sh-nodo-circulo,
.sh-nodo:focus-visible .sh-nodo-circulo { stroke-width: 3.2; }
.sh-nodo-texto {
  text-anchor: middle;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  paint-order: stroke;
  stroke: rgba(4, 4, 8, 0.85);
  stroke-width: 3px;
}
.sh-nodo-notas {
  text-anchor: middle;
  fill: var(--tenue);
  font-family: "Inter", sans-serif;
  letter-spacing: 0.5px;
}
/* la nota que está sonando ESTE instante de "Escuchar la progresión" —
   dorado a propósito, fijo (no depende del tema): es una marca temporal
   de "acá estamos parados ahora", no parte de la paleta del sitio. */
.sh-nodo.en-sonido-dorado .sh-nodo-circulo {
  stroke: #ffd54a !important;
  stroke-width: 4px !important;
  filter: drop-shadow(0 0 12px rgba(255, 213, 74, 0.9));
}
.sh-nodo.en-sonido-dorado .sh-nodo-texto { fill: #ffd54a !important; }
/* en la rueda: las notas que fuiste clickeando a mano para armar tu
   propia progresión quedan marcadas con un anillo dorado punteado, sin
   perder su color propio — no se borran hasta que las volvés a tocar. */
.sh-nodo.sh-nodo-elegido .sh-nodo-circulo {
  stroke: #ffd54a;
  stroke-dasharray: 3 2;
  stroke-width: 2.6px;
}
.sh-flecha {
  stroke-width: 2.1;
  opacity: 0.88;
  filter: url(#sh-glow);
  transition: opacity 200ms ease;
}
.sh-capa-flechas:hover .sh-flecha { opacity: 0.3; }
.sh-capa-flechas .sh-flecha:hover { opacity: 1; stroke-width: 3; }

/* ---------------- la rueda completa ---------------- */
/* El sistema entero se dibuja siempre; lo que cambia según el mapa es qué
   se enciende. Por eso el fondo tiene que leerse como fondo: presente,
   pero sin robarle atención a la progresión de arriba. */
.sh-anillo-guia {
  stroke: rgba(var(--blanco-rgb), 0.055);
  stroke-width: 1;
}
.sh-fondo-linea {
  stroke: rgba(var(--blanco-rgb), 0.16);
  stroke-width: 1;
}
.sh-fondo-resolucion { stroke: rgba(var(--acento-rgb), 0.3); }
.sh-fondo-relativo {
  stroke: rgba(var(--violeta-rgb), 0.26);
  stroke-dasharray: 3 4;
}
.sh-fondo-quintas { stroke: rgba(var(--blanco-rgb), 0.13); }

.sh-nodo-tenue .sh-nodo-circulo {
  stroke: rgba(var(--blanco-rgb), 0.26);
  stroke-width: 1.2;
  filter: none;
}
.sh-nodo-tenue .sh-nodo-texto {
  fill: rgba(244, 242, 251, 0.42);
  stroke: none;
  font-weight: 500;
}
.sh-nodo-tenue:hover .sh-nodo-circulo { stroke: rgba(var(--blanco-rgb), 0.7); }
.sh-nodo-tenue:hover .sh-nodo-texto { fill: var(--blanco); }

.sh-nodo-activo .sh-nodo-circulo {
  stroke-width: 2.6;
  fill: rgba(10, 10, 16, 0.96);
}

/* --- exploración: "desde este acorde podés ir a…" ---
   Al pasar el mouse por un acorde, el resto del sistema se apaga y se
   desenfoca: quedan a la vista sólo el acorde donde estás parado y los
   lugares a los que podés moverte desde ahí. */
.sh-svg .sh-nodo,
.sh-svg .sh-flecha,
.sh-svg .sh-fondo-linea,
.sh-svg .sh-anillo-guia {
  transition: opacity 180ms ease, filter 180ms ease;
}
.sh-svg.sh-explorando .sh-nodo:not(.sh-nodo-origen):not(.sh-nodo-destino) {
  opacity: 0.07;
  filter: blur(2px);
}
.sh-svg.sh-explorando .sh-flecha,
.sh-svg.sh-explorando .sh-fondo-linea,
.sh-svg.sh-explorando .sh-anillo-guia {
  opacity: 0.05;
  filter: blur(2px);
}
/* la capa de flechas de exploración no se apaga nunca */
.sh-svg.sh-explorando .sh-capa-explorar { opacity: 1; filter: none; }

/* El color de cada flecha lo pone el JS según el tipo de movimiento; acá
   va sólo la forma. Las del mapa abierto van sólidas y más gruesas; las
   de teoría general, punteadas. */
.sh-flecha-explorar {
  stroke-width: 2;
  stroke-dasharray: 7 4;
  opacity: 0.95;
  filter: url(#sh-glow);
}
.sh-flecha-explorar.es-del-mapa {
  stroke-width: 3.4;
  stroke-dasharray: none;
  opacity: 1;
}
.sh-cabeza-explorar { filter: url(#sh-glow); }

.sh-nodo-origen .sh-nodo-circulo {
  stroke-width: 3.6 !important;
  filter: url(#sh-glow);
}
.sh-nodo-destino .sh-nodo-circulo {
  stroke-width: 2.4 !important;
  filter: url(#sh-glow);
}
.sh-nodo-destino-mapa .sh-nodo-circulo { stroke-width: 3.2 !important; }

.grafo-pista {
  margin: 4px 6px 6px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--tenue);
  opacity: 0.8;
}

.bloque-explorar { border-color: rgba(var(--acento-rgb), 0.4); }
.bloque-explorar .bloque-titulo { text-transform: none; letter-spacing: 0.6px; }
#d-explorar-acorde { color: var(--acento-claro); font-weight: 700; }

/* ---------------- cómo se toca el acorde ----------------
   Va a lo ancho de las dos columnas: el mástil se dibuja entero, de la
   cejuela al traste 12, y con el ancho de la columna lateral quedaba
   ilegible. */
.bloque-instrumento {
  border-color: rgba(var(--violeta-rgb), 0.45);
  grid-column: 1 / -1;
  margin-bottom: 4px;
}
.bloque-instrumento .bloque-titulo {
  color: var(--violeta);
  text-transform: none;
  letter-spacing: 0.6px;
}
.bloque-instrumento .bloque-titulo::after {
  background: linear-gradient(90deg, rgba(var(--violeta-rgb), 0.4), transparent);
}
#d-instrumento-acorde {
  color: var(--blanco);
  font-weight: 700;
  font-size: 1.05rem;
}
.cerrar-instrumento {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: transparent;
  color: var(--tenue);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transicion);
}
.cerrar-instrumento:hover { color: var(--blanco); border-color: var(--violeta); }

.instrumento-notas {
  font-size: 0.82rem;
  color: var(--tenue);
  letter-spacing: 0.8px;
  margin-bottom: 12px;
}
.btn-escuchar {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 16px; border-radius: 40px;
  background: rgba(var(--acento-rgb), 0.12);
  border: 1px solid rgba(var(--acento-rgb), 0.5);
  color: var(--acento); font-weight: 700; font-size: 0.82rem;
  cursor: pointer;
}
.btn-escuchar:hover { background: rgba(var(--acento-rgb), 0.22); }
.btn-escuchar:disabled { opacity: 0.6; cursor: default; }
.btn-escuchar-icono { font-size: 0.7rem; }
.btn-escuchar.sonando .btn-escuchar-icono { animation: sh-pulso-sonido 0.5s ease-in-out infinite alternate; }

/* modal de un lick: dos botones de escucha lado a lado — uno solo, una
   vuelta, y otro con la vuelta de acordes de fondo en loop */
.lick-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.btn-escuchar-acomp {
  background: rgba(var(--violeta-rgb), 0.14);
  border-color: rgba(var(--violeta-rgb), 0.55);
  color: var(--violeta);
}
.btn-escuchar-acomp:hover { background: rgba(var(--violeta-rgb), 0.24); }
@keyframes sh-pulso-sonido { from { opacity: 0.5; transform: scale(0.85); } to { opacity: 1; transform: scale(1.15); } }
.emo-progresion-escuchar { margin-top: 12px; }
.instrumento-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.inst-tab {
  flex: 1;
  padding: 7px 4px;
  border-radius: 40px;
  border: 1px solid var(--borde);
  background: transparent;
  color: var(--tenue);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transicion);
}
.inst-tab:hover { color: var(--blanco); border-color: rgba(var(--violeta-rgb), 0.5); }
.inst-tab.activo {
  background: rgba(var(--violeta-rgb), 0.18);
  border-color: var(--violeta);
  color: #e7dcff;
}
.instrumento-diagrama { display: grid; place-items: center; min-height: 120px; }

.instrumento-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(var(--blanco-rgb), 0.09);
}
.posiciones { display: flex; align-items: center; gap: 8px; }
.pos-flecha {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: transparent;
  color: var(--violeta);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transicion);
}
.pos-flecha:hover:not(:disabled) { border-color: var(--violeta); background: rgba(var(--violeta-rgb), 0.16); }
.pos-flecha:disabled { opacity: 0.3; cursor: default; }
.pos-info { font-size: 0.78rem; color: var(--tenue); min-width: 118px; text-align: center; }

.etiqueta-tabs { display: flex; gap: 4px; }
.etq-tab {
  padding: 5px 11px;
  border-radius: 40px;
  border: 1px solid var(--borde);
  background: transparent;
  color: var(--tenue);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transicion);
}
.etq-tab:hover { color: var(--blanco); }
.etq-tab.activo {
  background: rgba(var(--violeta-rgb), 0.18);
  border-color: var(--violeta);
  color: #e7dcff;
}
.instrumento-vacio { font-size: 0.82rem; color: var(--tenue); text-align: center; }

.diag-svg { width: 100%; max-width: 210px; height: auto; }
.diag-svg.diag-piano { max-width: 100%; }

/* --- mástil horizontal, entero de la cejuela al traste 12 --- */
.diag-svg.diag-mastil { max-width: 100%; }
.mast-traste { stroke: rgba(var(--blanco-rgb), 0.2); stroke-width: 1; }
.mast-cejuela-linea { stroke: rgba(var(--blanco-rgb), 0.75); stroke-width: 3; }
.mast-cuerda { stroke: rgba(var(--blanco-rgb), 0.3); stroke-width: 1; }
.mast-marca-pos { fill: rgba(var(--blanco-rgb), 0.09); }
.mast-num {
  fill: var(--tenue); font-size: 8px; text-anchor: middle;
  font-family: "Space Grotesk", sans-serif;
}
.mast-cuerda-nombre {
  fill: var(--tenue); font-size: 9px; text-anchor: middle;
  font-family: "Space Grotesk", sans-serif; font-weight: 600;
}
.mast-muda { fill: var(--tenue); font-size: 11px; text-anchor: middle; }

/* las notas del acorde que hay en el resto del mástil: están ahí si
   querés armar la forma en otra posición */
.mast-disponible { fill: rgba(185, 139, 255, 0.24); }
.mast-disponible.es-raiz { fill: rgba(91, 232, 216, 0.3); }

.mast-dedo { fill: var(--violeta); }
.mast-dedo.es-raiz { fill: var(--acento); }
.mast-cejilla { fill: var(--violeta); opacity: 0.92; }
.mast-cejilla.es-raiz { fill: var(--acento); }
.mast-dedo-texto.en-cejilla { fill: #0b0a12; }
.mast-dedo-texto {
  fill: #0b0a12; font-size: 8.5px; font-weight: 700;
  text-anchor: middle; font-family: "Space Grotesk", sans-serif;
}

.tecla.blanca { fill: #e9e6f2; stroke: #0b0a12; stroke-width: 1; }
.tecla.negra { fill: #14131c; stroke: #000; stroke-width: 1; }
.tecla.blanca.activa { fill: var(--violeta); }
.tecla.negra.activa { fill: var(--violeta); }
.tecla.activa.raiz { fill: var(--acento); }
.tecla-nombre {
  fill: #0b0a12; font-size: 8.5px; font-weight: 700;
  text-anchor: middle; font-family: "Space Grotesk", sans-serif;
}

.lista-movimientos { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.lista-movimientos li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(var(--blanco-rgb), 0.08);
}
.lista-movimientos li:last-child { border-bottom: 0; padding-bottom: 0; }
.lista-movimientos li.mov-titulo {
  display: block;
  border-bottom: 0;
  padding: 4px 0 2px;
  font-size: 0.7rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--tenue);
  font-weight: 700;
}
.lista-movimientos li.mov-titulo:not(:first-child) { margin-top: 8px; }
.mov-punto {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  align-self: center;
  background: var(--c, var(--acento));
  box-shadow: 0 0 8px var(--c, var(--acento));
}
.mov-acorde {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  min-width: 46px;
}
.mov-cuerpo { display: flex; flex-direction: column; gap: 1px; }
.mov-grado {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--blanco);
  opacity: 0.75;
}
.explorar-grado {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.82rem;
  color: var(--tenue);
  font-weight: 600;
}
.mov-razon { font-size: 0.84rem; color: var(--tenue); line-height: 1.45; }

@media (max-width: 620px) {
  .envoltorio { padding: 0 14px 90px; }
  .nav-btn { padding: 9px 12px; font-size: 0.84rem; }
  .grilla-mapas { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============ modal: cómo tocar el acorde ============ */
.modal-fondo {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(4, 4, 8, 0.72);
  backdrop-filter: blur(14px) saturate(120%);
  opacity: 0;
  transition: opacity 200ms ease;
  overflow-y: auto;
}
.modal-fondo.abierto { opacity: 1; }
/* "Cómo tocar" se puede abrir desde adentro de otro modal (clickeando
   un nodo del espectro, un acorde que armoniza con una escala, etc.) —
   tiene que quedar siempre arriba de cualquier otro, sin importar el
   orden en el que estén en el HTML (que si no, decide quién gana). */
#modal-instrumento { z-index: 210; }
.modal-caja {
  position: relative;
  width: min(880px, 100%);
  max-height: min(92vh, 900px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(170deg, var(--carta-alta), var(--carta));
  border: 1px solid rgba(var(--violeta-rgb), 0.45);
  border-radius: 20px;
  padding: 26px 28px 24px;
  box-shadow: 0 0 0 1px rgba(6, 5, 5, 0.9), 0 24px 70px rgba(0, 0, 0, 0.7);
  transform: translateY(18px) scale(0.98);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--acento-rgb), 0.45) transparent;
}
.modal-fondo.abierto .modal-caja { transform: none; }
.modal-caja::-webkit-scrollbar { width: 9px; }
.modal-caja::-webkit-scrollbar-track { background: transparent; }
.modal-caja::-webkit-scrollbar-thumb {
  background: rgba(var(--acento-rgb), 0.4);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.modal-caja::-webkit-scrollbar-thumb:hover { background: rgba(var(--acento-rgb), 0.65); }
.modal-cerrar {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: rgba(0, 0, 0, 0.35);
  color: var(--tenue);
  font-size: 1.15rem;
  cursor: pointer;
  transition: all var(--transicion);
}
.modal-cerrar:hover { color: var(--blanco); border-color: var(--violeta); transform: rotate(90deg); }

.modal-cima {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px; padding-right: 40px;
}
.modal-titulo-acorde {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem; font-weight: 600; color: var(--violeta);
  margin-bottom: 4px;
}
#d-instrumento-acorde { color: var(--blanco); font-size: 1.3rem; font-weight: 700; }

.modal-controles {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px dashed rgba(var(--blanco-rgb), 0.1);
}
.ctrl { display: flex; flex-direction: column; gap: 5px; }
.ctrl > span {
  font-size: 0.68rem; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--tenue); font-weight: 700;
}
.ctrl select {
  background: var(--carta);
  border: 1px solid rgba(var(--violeta-rgb), 0.45);
  border-radius: 40px;
  color: #e7dcff;
  font-family: inherit; font-size: 0.85rem; font-weight: 600;
  padding: 7px 13px; cursor: pointer; outline: none;
}
.ctrl select:focus { box-shadow: 0 0 0 3px rgba(var(--violeta-rgb), 0.18); }
.ctrl select option { background: #14131c; color: var(--blanco); }
.modal-controles .etiqueta-tabs { margin-left: auto; }

/* ---- los cuatro papeles de una nota dentro de la escala ----
   Misma paleta que el resto del sitio (cian/violeta/rosa), no colores
   sueltos — antes eran verde/celeste/crimson/dorado y desentonaban con
   el resto de la interfaz. */
:root {
  --p-base: var(--acento);        /* cian: notas del acorde, el color de siempre */
  --p-puente: var(--violeta);     /* violeta: notas de paso */
  --p-tension: var(--rosa);       /* rosa: la que choca */
  --p-resolucion: var(--acento-claro); /* cian claro: a dónde resuelve */
}
.mast-grado { stroke: rgba(0, 0, 0, 0.5); stroke-width: 0.6; }
.mast-grado.p-base { fill: var(--p-base); }
.mast-grado.p-puente { fill: var(--p-puente); }
.mast-grado.p-tension { fill: var(--p-tension); }
.mast-grado.p-resolucion { fill: var(--p-resolucion); }
.mast-grado.es-raiz { stroke: var(--blanco); stroke-width: 1.2; }
.mast-grado-texto {
  fill: #0b0a12; font-size: 6.5px; font-weight: 700;
  text-anchor: middle; font-family: "Space Grotesk", sans-serif;
}
.mast-grado.fuera-posicion, .mast-grado-texto.fuera-posicion {
  opacity: 0.16; transition: opacity 200ms ease;
}
.mast-grado, .mast-grado-texto { transition: opacity 200ms ease; }
/* la nota que está sonando en este instante, mientras tocás "Escuchar" */
.mast-grado.en-sonido {
  opacity: 1 !important;
  stroke: var(--blanco); stroke-width: 2px;
  filter: drop-shadow(0 0 7px rgba(var(--blanco-rgb), 0.85));
  animation: sh-nota-sonando 320ms ease-out;
}
@keyframes sh-nota-sonando {
  0% { r: 11; }
  100% { r: 8; }
}
.tecla.activa.p-base { fill: var(--p-base); }
.tecla.activa.p-puente { fill: var(--p-puente); }
.tecla.activa.p-tension { fill: var(--p-tension); }
.tecla.activa.p-resolucion { fill: var(--p-resolucion); }

.leyenda-papeles { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.lp { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; color: var(--tenue); }
.lp-punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.lp-punto.p-base { background: var(--p-base); }
.lp-punto.p-puente { background: var(--p-puente); }
.lp-punto.p-tension { background: var(--p-tension); }
.lp-punto.p-resolucion { background: var(--p-resolucion); }

.escala-explica {
  margin-top: 16px; padding: 16px 18px;
  background: rgba(var(--blanco-rgb), 0.04);
  border: 1px solid rgba(var(--blanco-rgb), 0.09);
  border-radius: 12px;
}
.escala-explica-titulo {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--acento); margin-bottom: 8px;
}
.escala-explica p { font-size: 0.88rem; line-height: 1.65; color: var(--tenue); }
.escala-explica b { color: var(--blanco); font-weight: 600; }
.escala-explica b.p-base { color: var(--p-base); }
.escala-explica b.p-puente { color: var(--p-puente); }
.escala-explica b.p-tension { color: var(--p-tension); }
.escala-explica b.p-resolucion { color: var(--p-resolucion); }

/* En pantallas anchas el gráfico se queda con el lado izquierdo y los
   paneles de lectura (propósito, sensación, colores, recorrido) con el
   derecho: antes todo iba en una columna angosta al medio y los costados
   quedaban vacíos. */
@media (min-width: 1280px) {
  .detalle-cuerpo {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    gap: 28px;
  }
  .detalle-grafo { position: sticky; top: 74px; }
  .detalle-lateral { max-height: calc(100vh - 100px); overflow-y: auto; padding-right: 4px; }
  .detalle-lateral::-webkit-scrollbar { width: 7px; }
  .detalle-lateral::-webkit-scrollbar-thumb {
    background: rgba(var(--acento-rgb), 0.28); border-radius: 8px;
  }
  .grilla-mapas { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
}

/* ---- color emocional del acorde ---- */
.color-emocional {
  margin-top: 16px; padding: 16px 18px;
  background: rgba(var(--rosa-rgb), 0.06);
  border: 1px solid rgba(var(--rosa-rgb), 0.28);
  border-radius: 12px;
}
.ce-titulo {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--rosa); margin-bottom: 6px;
}
.ce-titulo b { color: var(--blanco); }
.ce-resumen { font-size: 0.88rem; color: var(--blanco); margin-bottom: 12px; font-style: italic; }
.ce-bloque { margin-bottom: 12px; }
.ce-rotulo {
  font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--tenue); font-weight: 700; margin-bottom: 7px;
}
.ce-pista { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: 0.7; }
.ce-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.acorde-color {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 7px 13px; border-radius: 10px;
  border: 1px solid rgba(var(--rosa-rgb), 0.45);
  background: rgba(var(--rosa-rgb), 0.1);
  color: var(--blanco); font: inherit; cursor: pointer;
  transition: all var(--transicion);
}
.acorde-color:hover { background: rgba(var(--rosa-rgb), 0.22); border-color: var(--rosa); transform: translateY(-1px); }
.ac-cifrado { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 0.95rem; }
.ac-notas { font-size: 0.7rem; color: var(--tenue); letter-spacing: 0.4px; }
.escala-color {
  padding: 6px 12px; border-radius: 40px;
  border: 1px solid rgba(var(--acento-rgb), 0.45);
  background: transparent; color: var(--acento-claro);
  font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer;
  transition: all var(--transicion);
}
.escala-color:hover { background: rgba(var(--acento-rgb), 0.16); border-color: var(--acento); }
.ce-como, .ce-donde { font-size: 0.85rem; line-height: 1.6; color: var(--tenue); margin-top: 10px; }
.ce-como b, .ce-donde b { color: var(--blanco); }

/* ============ estilos musicales ============ */
.seccion-intro { color: var(--tenue); font-size: 0.95rem; max-width: 640px; margin-bottom: 22px; }
.grilla-estilos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;
}
.estilo-carta {
  position: relative; overflow: hidden; text-align: left;
  background: linear-gradient(165deg, var(--carta-alta), var(--carta));
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 22px 20px 18px; cursor: pointer; color: inherit; font: inherit;
  transition: transform var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}
.estilo-carta-marca {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--acento-estilo, var(--acento));
}
.estilo-carta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--acento-estilo) 16%, transparent), transparent 62%);
}
.estilo-carta:hover {
  transform: translateY(-4px);
  border-color: var(--acento-estilo, var(--acento));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5);
}
.estilo-carta-nombre {
  font-size: 1.35rem; margin-bottom: 8px; color: var(--acento-estilo, var(--blanco));
}
.estilo-carta-resumen { font-size: 0.88rem; color: var(--tenue); line-height: 1.55; margin-bottom: 14px; }
.estilo-carta-pie {
  display: flex; gap: 14px; font-size: 0.72rem; color: var(--tenue);
  text-transform: uppercase; letter-spacing: 1px; font-weight: 700; opacity: 0.7;
}

.estilo-cabeza { margin-bottom: 22px; }
.estilo-nombre { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--acento-estilo, var(--blanco)); }
.estilo-resumen { margin-top: 8px; color: var(--tenue); font-size: 1rem; max-width: 700px; }
.estilo-cuerpo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .estilo-cuerpo { grid-template-columns: 1fr; } }
.estilo-col { display: flex; flex-direction: column; gap: 16px; }
.bloque-pista { font-size: 0.78rem; color: var(--tenue); opacity: 0.85; margin-bottom: 12px; }
.bloque-ancho { margin-bottom: 18px; }

.prog { padding: 12px 0; border-bottom: 1px dashed rgba(var(--blanco-rgb), 0.08); }
.prog:last-child { border-bottom: 0; padding-bottom: 0; }
.prog-grados {
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 0.82rem;
  letter-spacing: 1.2px; color: var(--acento-estilo, var(--acento)); margin-bottom: 8px;
}
.prog-ejemplo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 8px; }
.prog-flecha { color: var(--tenue); opacity: 0.5; font-size: 0.8rem; }
.prog-acorde, .acorde-chip {
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 0.9rem;
  padding: 5px 11px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(var(--blanco-rgb), 0.14);
  background: rgba(var(--blanco-rgb), 0.05); color: var(--blanco);
  transition: all var(--transicion);
}
.prog-acorde:hover, .acorde-chip:hover {
  border-color: var(--acento-estilo, var(--acento));
  background: color-mix(in srgb, var(--acento-estilo, var(--acento)) 18%, transparent);
}
.prog-nota { font-size: 0.84rem; color: var(--tenue); line-height: 1.6; }
.acorde-chips { display: flex; flex-wrap: wrap; gap: 7px; }

.escala-item { padding: 9px 0; border-bottom: 1px dashed rgba(var(--blanco-rgb), 0.07); }
.escala-item:last-child { border-bottom: 0; }
.escala-item-nombre { font-weight: 700; font-size: 0.9rem; color: var(--blanco); margin-bottom: 3px; }
.escala-item-sabor { font-size: 0.8rem; color: var(--tenue); line-height: 1.5; }

.trans { padding: 10px 0; border-bottom: 1px dashed rgba(var(--blanco-rgb), 0.07); }
.trans:last-child { border-bottom: 0; }
.trans-mov { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; margin-bottom: 4px; }
.trans-mov b { font-family: "Space Grotesk", sans-serif; color: var(--acento-estilo, var(--acento)); }
.trans-flecha { color: var(--tenue); opacity: 0.6; }
.trans-como {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--tenue); font-weight: 700;
}
.trans-porque { font-size: 0.83rem; color: var(--tenue); line-height: 1.55; }

/* ---- licks en tablatura ---- */
.lick { padding: 14px 0; border-bottom: 1px dashed rgba(var(--blanco-rgb), 0.08); }
.lick:last-child { border-bottom: 0; padding-bottom: 0; }
.lick-cima { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lick-nombre { font-weight: 700; font-size: 0.94rem; color: var(--blanco); }
.lick-escala {
  font-size: 0.72rem; color: var(--acento-estilo, var(--acento));
  text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
}
.lick-nota { font-size: 0.82rem; color: var(--tenue); line-height: 1.55; margin: 5px 0 10px; }
.lick-tab {
  background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(var(--blanco-rgb), 0.08);
  border-radius: 10px; padding: 10px 8px; overflow-x: auto;
}
.tab-svg { width: 100%; max-width: 520px; height: auto; display: block; }
.tab-linea { stroke: rgba(var(--blanco-rgb), 0.22); stroke-width: 1; }
.tab-cuerda {
  fill: var(--tenue); font-size: 8px; text-anchor: middle;
  font-family: "Space Grotesk", sans-serif; font-weight: 600;
}
.tab-fondo { fill: #0c0c11; transition: fill 90ms ease; }
.tab-num {
  fill: var(--acento-claro); font-size: 9.5px; font-weight: 700;
  text-anchor: middle; font-family: "Space Grotesk", sans-serif;
  transition: fill 90ms ease;
}
/* nota que está sonando en este instante, en sincro con "Escuchar" —
   mismo dorado que usa el resto del sitio para "esto está sonando
   ahora", ver resaltarLickEnTab() en licks_vista.js */
.tab-fondo.en-sonido { fill: #ffd54a; }
.tab-num.en-sonido { fill: #1a1408; }
.lick-notas { font-size: 0.74rem; color: var(--tenue); margin-top: 8px; letter-spacing: 0.4px; }

/* ============ aprender ============ */
.aprender-cuerpo { max-width: 860px; }
.pasos-ruta { display: flex; flex-direction: column; gap: 4px; }
.paso { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px dashed rgba(var(--blanco-rgb), 0.08); }
.paso:last-child { border-bottom: 0; }
.paso-num {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--acento-oscuro);
  background: rgba(var(--acento-rgb), 0.1); color: var(--acento);
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
}
.paso-titulo { font-size: 1.02rem; margin-bottom: 7px; color: var(--blanco); }
.paso-cont p { font-size: 0.85rem; color: var(--tenue); line-height: 1.6; margin-bottom: 4px; }
.paso-cont b { color: var(--blanco); font-weight: 600; }
.paso-listo b { color: var(--acento); }

.puentes { display: flex; flex-direction: column; gap: 4px; }
.puente { padding: 12px 0; border-bottom: 1px dashed rgba(var(--blanco-rgb), 0.08); }
.puente:last-child { border-bottom: 0; }
.puente-mov { margin-bottom: 5px; font-family: "Space Grotesk", sans-serif; }
.puente-mov b { color: var(--acento-claro); }
.puente p { font-size: 0.84rem; color: var(--tenue); line-height: 1.55; margin-bottom: 3px; }
.puente p b { color: var(--blanco); }

/* ============ cartas de tarot (portada de estilos) ============ */
/* flex, no grid: con grid, la fila incompleta (los 3 de abajo en una
   grilla de 4 columnas) queda pegada a la izquierda con un hueco vacío
   a la derecha — el propio grid no centra filas parciales. Con flex +
   justify-content:center esa fila corta queda centrada de verdad. */
.grilla-estilos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  max-width: 1300px;
}
.carta-tarot { flex: 0 1 calc(50% - 12px); }
@media (min-width: 900px) {
  /* cuatro por fila: las siete quedan 4+3, ninguna huérfana, y la fila
     de 3 queda centrada en vez de pegada a la izquierda */
  .carta-tarot { flex-basis: calc(25% - 18px); }
}
.carta-tarot {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  aspect-ratio: 5 / 7;
  padding: 26px 20px 22px;
  cursor: pointer; color: inherit; font: inherit;
  border: 1px solid color-mix(in srgb, var(--acento-estilo) 40%, transparent);
  border-radius: 16px;
  background:
    radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--acento-estilo) 16%, transparent), transparent 70%),
    linear-gradient(170deg, #15151f, #0d0d13);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
/* el filete interior, como el borde impreso de una carta */
.carta-marco {
  position: absolute; inset: 9px;
  border: 1px solid color-mix(in srgb, var(--acento-estilo) 26%, transparent);
  border-radius: 10px; pointer-events: none;
}
.carta-marco::before, .carta-marco::after {
  content: ""; position: absolute; width: 9px; height: 9px;
  border: 1px solid color-mix(in srgb, var(--acento-estilo) 55%, transparent);
}
.carta-marco::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.carta-marco::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.carta-tarot:hover {
  transform: translateY(-7px);
  border-color: var(--acento-estilo);
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.66),
              0 0 0 1px color-mix(in srgb, var(--acento-estilo) 45%, transparent),
              0 0 44px color-mix(in srgb, var(--acento-estilo) 22%, transparent);
}
.carta-tarot:focus-visible { outline: 2px solid var(--acento-estilo); outline-offset: 3px; }

.carta-numero {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.78rem; letter-spacing: 3px; font-weight: 700;
  color: color-mix(in srgb, var(--acento-estilo) 80%, white);
  opacity: 0.85;
}
.carta-simbolo {
  flex: 1; display: grid; place-items: center; width: 100%;
  padding: 14px 0 10px;
  min-height: 0; /* que el símbolo ceda antes que el texto */
}
.carta-simbolo svg { width: min(200px, 82%); height: auto; overflow: visible; }
.sim-aro {
  fill: none;
  stroke: color-mix(in srgb, var(--acento-estilo) 38%, transparent);
  stroke-width: 1;
}
.sim-fig {
  fill: none;
  stroke: var(--acento-estilo);
  stroke-width: 1.6; stroke-linejoin: round;
}
.sim-linea {
  fill: none;
  stroke: color-mix(in srgb, var(--acento-estilo) 70%, transparent);
  stroke-width: 1.2; stroke-linecap: round;
}
.sim-grueso { stroke-width: 2; }
.sim-relleno { fill: color-mix(in srgb, var(--acento-estilo) 16%, transparent); }
.carta-tarot:hover .sim-fig { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acento-estilo) 60%, transparent)); }

/* Estilos: el símbolo de cada carta gira despacio todo el tiempo, como
   un sigilo — se acelera un poco al pasar el mouse, y el centro relleno
   respira aparte para que no se sienta todo como un solo giro plano. */
#grilla-estilos .carta-simbolo svg {
  animation: sh-simbolo-gira 34s linear infinite;
  transition: animation-duration var(--transicion);
}
#grilla-estilos .carta-tarot:hover .carta-simbolo svg { animation-duration: 9s; }
#grilla-estilos .sim-relleno { animation: sh-simbolo-respira 3.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes sh-simbolo-gira { to { transform: rotate(360deg); } }
@keyframes sh-simbolo-respira { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) {
  #grilla-estilos .carta-simbolo svg, #grilla-estilos .sim-relleno { animation: none; }
}

.carta-nombre {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.16rem; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--acento-estilo);
  margin-bottom: 7px;
}
.carta-resumen {
  font-size: 0.78rem; line-height: 1.5; color: var(--tenue);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  /* tres líneas siempre, aunque el texto sea más corto: si no, los
     títulos de las cartas quedan a distinta altura entre sí */
  min-height: calc(0.78rem * 1.5 * 3);
}
.carta-pie {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--acento-estilo) 20%, transparent);
  width: 100%;
  font-size: 0.66rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--tenue); opacity: 0.72; font-weight: 700;
}

@media (max-width: 620px) {
  /* En pantallas chicas la proporción fija apretaba el texto contra el
     símbolo: la carta pasa a crecer con su contenido. */
  .grilla-estilos { gap: 14px; }
  .carta-tarot { flex-basis: calc(50% - 7px); }
  .carta-tarot { aspect-ratio: auto; min-height: 260px; padding: 16px 11px 14px; }
  .carta-simbolo { padding: 10px 0 8px; }
  .carta-simbolo svg { width: min(84px, 60%); }
  .carta-nombre { font-size: 0.88rem; letter-spacing: 0.5px; margin-bottom: 5px; }
  .carta-resumen {
    font-size: 0.68rem; line-height: 1.45;
    -webkit-line-clamp: 3; min-height: calc(0.68rem * 1.45 * 3);
  }
  .carta-pie { font-size: 0.58rem; margin-top: 8px; padding-top: 7px; }
  .carta-numero { font-size: 0.68rem; }
}

/* ---- cartas de los mapas armónicos ---- */
/* auto-fit deja que sea el propio ancho disponible el que decida cuántas
   columnas entran — antes se fijaba en exactamente 5 desde 1100px, así
   que en un monitor ancho esas 5 tarjetas se estiraban gigantes en vez de
   sumar una sexta o séptima columna. El tope de 1900px (en vez de 1500)
   acompaña el nuevo ancho de .envoltorio. */
.grilla-mapas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  max-width: 1900px;
}
/* Antes 5/7.4 (bien alta): con la grilla ahora sumando columnas en vez
   de estirarlas, dos filas de diez tarjetas + el buscador/chips de
   arriba no entraban en una pantalla de notebook típica sin scrollear.
   5/5.6 achica la tarjeta lo justo para que quepa una página completa
   (10 mapas) sin perder el símbolo ni el nombre. */
.carta-mapa { aspect-ratio: 5 / 4.9; padding: 12px 12px 8px; }
.carta-mapa .carta-simbolo { padding: 6px 0; }
.carta-mapa .carta-simbolo svg { width: min(88px, 58%); }
.carta-mapa .carta-numero { font-size: 0.7rem; }
.carta-nombre-mapa {
  font-size: 0.78rem; line-height: 1.22; letter-spacing: 0.3px;
  text-transform: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(0.78rem * 1.22 * 2);
}
.carta-mapa .carta-resumen {
  font-size: 0.66rem; -webkit-line-clamp: 1;
  min-height: calc(0.66rem * 1.4 * 1);
}
.carta-mapa .carta-pie {
  margin-top: 6px; padding-top: 6px;
  font-size: 0.56rem; letter-spacing: 0.6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- paginación ---- */
.paginacion {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; margin-top: 16px;
}
.pag-flecha {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--borde); background: transparent;
  color: var(--acento); font-size: 1.1rem; line-height: 1; cursor: pointer;
  transition: all var(--transicion);
}
.pag-flecha:hover:not(:disabled) { border-color: var(--acento); background: rgba(var(--acento-rgb), 0.14); }
.pag-flecha:disabled { opacity: 0.3; cursor: default; }
.pag-puntos { display: flex; gap: 7px; align-items: center; }
.pag-punto {
  width: 9px; height: 9px; border-radius: 50%; padding: 0;
  border: 1px solid rgba(var(--blanco-rgb), 0.25);
  background: transparent; cursor: pointer;
  transition: all var(--transicion);
}
.pag-punto:hover { border-color: var(--acento); }
.pag-punto.activo { background: var(--acento); border-color: var(--acento); transform: scale(1.25); }
.pag-info { font-size: 0.76rem; color: var(--tenue); min-width: 96px; text-align: center; }

/* ---------------- ajustes: idioma + tema, detrás de la tuerca ----------------
   La tuerca abre un modal centrado (mismas .modal-fondo/.modal-caja que
   usa "Cómo tocar" — fondo con blur, tarjeta al medio), no un popover
   colgando de la tuerca. */
.btn-ajustes {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 70;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--blanco-rgb), 0.05);
  border: 1px solid rgba(var(--blanco-rgb), 0.14);
  border-radius: 50%;
  color: var(--tenue);
  cursor: pointer;
  transition: color var(--transicion), border-color var(--transicion), transform var(--transicion);
}
.btn-ajustes:hover, .btn-ajustes[aria-expanded="true"] { color: var(--acento); border-color: var(--acento); transform: rotate(35deg); }
.icono-tuerca { width: 19px; height: 19px; }
.modal-ajustes-caja {
  width: min(360px, 100%);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ajustes-bloque { display: flex; flex-direction: column; gap: 8px; }
.ajustes-etiqueta {
  font-size: 0.72rem; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--tenue); font-weight: 700;
}
.ajustes-select {
  background: var(--negro-2);
  border: 1px solid var(--borde);
  border-radius: 10px;
  color: var(--blanco);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  padding: 9px 12px;
  cursor: pointer;
}
.ajustes-select:hover, .ajustes-select:focus { border-color: var(--acento); }
.temas-subgrupo-titulo {
  font-size: 0.68rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--tenue); margin: 4px 0 2px;
}
.temas-grilla-ajustes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.temas-grilla-ajustes .tarjeta-tema {
  width: auto; flex-direction: row; align-items: center; gap: 10px;
  padding: 8px 10px;
}
.temas-grilla-ajustes .tema-swatch { width: 13px; height: 13px; }
.temas-grilla-ajustes .tema-nombre { font-size: 0.84rem; }
.temas-grilla-ajustes .tema-fuente { display: none; }
.temas-grilla-ajustes .tema-activo-marca { position: static; margin-left: auto; }
.fuentes-grilla { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-fuente { font-size: 0.86rem; }
.chip-fuente.activo { background: var(--acento); color: #0a0a0f; border-color: var(--acento); font-weight: 700; }

/* ---------------- loader de entrada ---------------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  background:
    radial-gradient(ellipse 60% 50% at 14% 22%, rgba(125, 232, 214, 0.16), transparent 60%),
    radial-gradient(ellipse 65% 55% at 88% 78%, rgba(200, 90, 60, 0.16), transparent 60%),
    #030304;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 1.1s ease;
}
.loader.oculto {
  opacity: 0;
  pointer-events: none;
}
.loader-escena {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.8s ease;
}
.loader-escena.visible { opacity: 1; }
.loader-escena svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.loader-mapa-svg .sh-nodo-texto { font-family: var(--font-titulo); }
.loader-mapa-svg { opacity: 0.6; transition: opacity 1.8s ease; }
.loader-marco-giro {
  transform-box: fill-box;
  transform-origin: center;
  animation: sh-loader-girar var(--giro-dur, 90s) linear infinite;
  animation-direction: normal;
}
@keyframes sh-loader-girar {
  from { transform: rotate(calc(var(--giro-dir, 1) * 0deg)); }
  to { transform: rotate(calc(var(--giro-dir, 1) * 360deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .loader-marco-giro { animation: none; }
}

.loader-titulo {
  position: relative;
  z-index: 2;
  text-align: center;
  font-family: var(--font-titulo);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.4s ease 0.5s, transform 1.4s ease 0.5s;
  pointer-events: none;
  padding: 28px 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse 62% 70% at center, rgba(3, 3, 4, 0.72) 0%, rgba(3, 3, 4, 0.4) 55%, transparent 78%);
}
.loader-titulo.visible { opacity: 1; transform: translateY(0); }
.loader-titulo-linea1, .loader-titulo-linea2 {
  margin: 0;
  font-size: clamp(1.1rem, 3vw, 1.7rem);
  font-weight: 600;
  letter-spacing: 4px;
  line-height: 1.22;
  text-transform: uppercase;
  color: #e9dcb8;
  text-shadow: 0 0 18px rgba(255, 210, 130, 0.55), 0 0 40px rgba(255, 180, 90, 0.3);
}
.loader-titulo-regla {
  width: 130px;
  max-width: 40vw;
  height: 1px;
  margin: 6px auto;
  background: linear-gradient(90deg, transparent, rgba(233, 220, 184, 0.85), transparent);
  box-shadow: 0 0 10px rgba(255, 210, 130, 0.6);
}
.loader-titulo-firma {
  margin: 5px 0 0;
  font-size: 0.62rem;
  font-family: var(--font-titulo);
  letter-spacing: 2px;
  color: rgba(233, 220, 184, 0.7);
}
@media (prefers-reduced-motion: reduce) {
  .loader-mapa-svg .sh-nodo, .loader-mapa-svg .sh-nodo-circulo { animation: none; }
}
.loader-vineta {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, 0.85) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, transparent 22%, transparent 78%, rgba(0, 0, 0, 0.55) 100%);
}
.loader-saltear {
  position: absolute;
  bottom: 26px;
  right: 26px;
  z-index: 2;
  background: rgba(var(--blanco-rgb), 0.06);
  border: 1px solid rgba(var(--blanco-rgb), 0.18);
  color: var(--tenue);
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s ease, background 0.2s, color 0.2s;
}
.loader-saltear.visible { opacity: 1; }
.loader-saltear:hover { background: var(--acento); color: #0a0a0f; }
@media (prefers-reduced-motion: reduce) {
  .loader-media, .loader { transition: none; }
}

/* ---------------- antorcha del cursor ---------------- */
.cursor-antorcha {
  position: fixed;
  top: 0;
  left: 0;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  z-index: 45;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s;
  mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(var(--acento-rgb), 0.16), rgba(var(--acento-rgb), 0.05) 40%, transparent 68%);
  will-change: transform;
}
body.con-antorcha .cursor-antorcha { opacity: 1; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-antorcha { display: none; }
}

/* ---------------- pulso orgánico al hacer hover en una nota ---------------- */
@keyframes sh-pulso-vivo {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(var(--sh-pulso-amp, 1.045)); }
}
.sh-nodo-circulo, .acorde-chip, .prog-acorde, .carta-mapa .carta-simbolo, .escala-color, .acorde-color {
  transform-origin: center;
}
.sh-nodo-circulo { transform-box: fill-box; }
.sh-nodo.sh-vivo .sh-nodo-circulo,
.acorde-chip:hover, .prog-acorde:hover, .escala-color:hover, .acorde-color:hover {
  animation: sh-pulso-vivo var(--sh-pulso-dur, 2.2s) ease-in-out var(--sh-pulso-delay, 0s) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sh-nodo.sh-vivo .sh-nodo-circulo,
  .acorde-chip:hover, .prog-acorde:hover, .escala-color:hover, .acorde-color:hover {
    animation: none;
  }
}
body.loader-activo { overflow: hidden; height: 100vh; }

/* ---------------- diccionario de acordes ---------------- */
/* usa Diccionario/Escalas/Licks/Identificar/Emociones — mismo criterio
   que .envoltorio: se queda en 980px hasta pantallas grandes y recién ahí
   crece, así la grilla de tarjetas aprovecha el ancho extra sin que el
   texto de los párrafos (que ya tiene su propio max-width más angosto,
   ver .dic-detalle-descripcion) se estire de forma rara. */
.diccionario-cuerpo { max-width: clamp(980px, 64vw, 1500px); margin: 0 auto; }
.dic-raiz {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 22px;
}
.dic-raiz-fila { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.dic-raiz-fila .dic-raiz { margin-bottom: 22px; }
.dic-raiz label {
  font-size: 0.72rem; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--tenue); font-weight: 700;
}
.dic-raiz select {
  background: var(--carta-alta);
  border: 1px solid rgba(var(--acento-rgb), 0.45);
  border-radius: 40px;
  color: var(--blanco);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  padding: 6px 16px;
  cursor: pointer;
}
.dic-categoria { margin-bottom: 26px; }
.dic-tarjetas { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; }
.tarjeta-acorde {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid rgba(var(--blanco-rgb), 0.14);
  background: rgba(var(--blanco-rgb), 0.04);
  cursor: pointer;
  text-align: left;
  transition: all var(--transicion);
  min-width: 108px;
}
.tarjeta-acorde:hover { border-color: var(--acento); background: rgba(var(--acento-rgb), 0.1); }
.tarjeta-acorde.activo {
  border-color: var(--acento);
  background: color-mix(in srgb, var(--acento) 18%, transparent);
  box-shadow: 0 0 0 1px rgba(var(--acento-rgb), 0.4);
}
.tarjeta-acorde-cifrado {
  font-family: var(--font-titulo);
  font-weight: 700; font-size: 1.05rem; color: var(--blanco);
}
.tarjeta-acorde-nombre { font-size: 0.72rem; color: var(--tenue); line-height: 1.3; }

/* ---- licks: paso 1, elegir tonalidad (tarjetas grandes, no botones
   chicos como .tarjeta-acorde — es la puerta de entrada, tiene que
   notarse que agrupa, no que es una opción más entre cien) ---- */
.licks-tonalidades {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  max-width: 1100px;
}
.tarjeta-tonalidad {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 26px 16px;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: linear-gradient(165deg, var(--carta-alta), var(--carta));
  cursor: pointer;
  transition: all var(--transicion);
}
.tarjeta-tonalidad:hover {
  border-color: var(--acento);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.tarjeta-tonalidad-nombre {
  font-family: var(--font-titulo);
  font-weight: 700; font-size: 1.8rem; color: var(--acento);
}
.tarjeta-tonalidad-cuenta { font-size: 0.76rem; color: var(--tenue); }

.licks-volver {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  color: var(--tenue); font-size: 0.82rem; font-weight: 600;
  padding: 0; margin-bottom: 16px;
  transition: color var(--transicion);
}
.licks-volver::before { content: "←"; }
.licks-volver:hover { color: var(--acento); }

.dic-detalle {
  margin-top: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--borde);
}
.dic-detalle:empty { display: none; }
.dic-detalle-cabeza { margin-bottom: 18px; }
.dic-detalle-cabeza h3 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--acento);
}
.dic-detalle-nombre { color: var(--blanco); font-size: 0.65em; font-weight: 400; }
.dic-detalle-formula, .dic-detalle-notas {
  font-size: 0.86rem; color: var(--tenue); margin-top: 6px;
}
.dic-detalle-formula b, .dic-detalle-notas b { color: var(--blanco); }
.dic-detalle-descripcion {
  margin-top: 12px; font-size: 0.92rem; line-height: 1.6; color: var(--claro);
  max-width: 680px;
}
.dic-ver-modal { margin-top: 16px; }
.dic-instrumento-tabs { display: flex; gap: 8px; margin: 18px 0 8px; }
.dic-pista { font-size: 0.78rem; color: var(--tenue); opacity: 0.85; margin-bottom: 14px; }
.dic-posiciones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.dic-posicion {
  background: var(--carta);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 10px;
}
.dic-posicion-piano { grid-column: 1 / -1; max-width: 520px; }
.dic-posicion-svg svg { width: 100%; height: auto; display: block; }
.dic-vacio { color: var(--tenue); font-size: 0.85rem; grid-column: 1 / -1; }
@media (max-width: 640px) {
  .dic-posiciones { grid-template-columns: 1fr; }
}

/* ---------------- escalas en el mástil ---------------- */
.tarjeta-acorde-chica { padding: 7px 12px; min-width: 0; }
.tarjeta-acorde-chica .tarjeta-acorde-cifrado { font-size: 0.92rem; }
.esc-acordes-bloque { margin: 20px 0; }
.esc-mastil-completo { margin-top: 10px; }
.esc-mastil-completo svg { width: 100%; height: auto; display: block; }
.esc-leyenda { display: flex; flex-wrap: wrap; gap: 16px; margin: 14px 0 4px; font-size: 0.82rem; color: var(--tenue); }
.esc-leyenda-item { display: inline-flex; align-items: center; gap: 6px; }
.esc-leyenda-punto { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: none; }
.esc-leyenda-punto.p-base { background: var(--p-base); }
.esc-leyenda-punto.p-puente { background: var(--p-puente); }
.esc-leyenda-punto.p-tension { background: var(--p-tension); }
.esc-leyenda-punto.p-resolucion { background: var(--p-resolucion); }
.esc-transportar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--carta-alta); border: 1px solid rgba(var(--acento-rgb), 0.45);
  color: var(--blanco); font-size: 1.1rem; font-weight: 700; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.esc-transportar:hover { border-color: var(--acento); color: var(--acento); }
.esc-modal-cuerpo { padding-right: 4px; }
.esc-vista-switch { display: flex; gap: 6px; margin: 16px 0 10px; }
.esc-posiciones-nav { margin: 4px 0 14px; }
.esc-vista-mastil, .esc-vista-partitura, .esc-vista-tablatura { margin-top: 4px; }

/* ---------------- partitura y tablatura ---------------- */
.not-svg { width: 100%; height: auto; display: block; }
.not-partitura { max-width: 640px; }
.part-linea { stroke: var(--tenue); stroke-width: 1; opacity: 0.7; }
.part-linea-adicional { stroke: var(--tenue); stroke-width: 1; opacity: 0.7; }
.part-clave { font-size: 44px; fill: var(--acento); }
.part-nota { fill: var(--acento); }
.part-alteracion { font-size: 13px; fill: var(--acento); text-anchor: middle; }
.not-tablatura { max-width: 640px; }
.tab-linea { stroke: var(--tenue); stroke-width: 1; opacity: 0.6; }
.tab-tapa { fill: var(--negro); }
.tab-numero { font-size: 12px; font-weight: 700; fill: var(--blanco); text-anchor: middle; font-family: "Space Grotesk", sans-serif; }

/* ---------------- emociones: qué acordes tocar para transmitir algo ---------------- */
.emo-grilla { margin-bottom: 22px; }
.emo-tarjeta { text-align: left; max-width: 260px; }
.emo-tarjeta .tarjeta-acorde-nombre { white-space: normal; }
.emo-familia { margin: 22px 0; }
.emo-chips-escalas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.emo-como-usar { margin-top: 24px; }
.emo-progresion-bloque { margin: 20px 0 26px; padding: 16px 18px; border: 1px solid rgba(var(--acento-rgb), 0.3); border-radius: 14px; background: rgba(255,255,255,0.02); }
.emo-progresion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.emo-paso { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 84px; }
.emo-paso-grado { font-size: 0.68rem; letter-spacing: 1px; text-transform: uppercase; color: var(--acento); font-weight: 700; }
.emo-progresion-flecha { color: var(--tenue); font-size: 1.1rem; flex: none; }
@media (max-width: 640px) {
  .emo-progresion { gap: 6px; }
  .emo-progresion-flecha { transform: rotate(90deg); }
}

/* ---------------- identificar acorde: espectro (rueda de quintas) ----------------
   Antes iba chica, al costado de las sugerencias — quedaba apretada.
   Ahora es un botón que abre el círculo de quintas en su propio modal,
   grande y en primer plano, mismo mecanismo que "Cómo tocar". */
.id-ver-espectro { margin: 18px 0 4px; }
.modal-espectro-caja { width: min(720px, 100%); }
.id-rueda-svg-modal { width: 100%; height: auto; display: block; margin-top: 10px; }

/* ---------------- cursor propio ---------------- */
body {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2210.5%22%20fill%3D%22none%22%20stroke%3D%22%235be8d8%22%20stroke-opacity%3D%220.25%22%20stroke-width%3D%221%22/%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%226.5%22%20fill%3D%22%2307070a%22%20fill-opacity%3D%220.35%22%20stroke%3D%22%235be8d8%22%20stroke-width%3D%221.4%22/%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%221.5%22%20fill%3D%22%235be8d8%22/%3E%3Cline%20x1%3D%2215%22%20y1%3D%221.5%22%20x2%3D%2215%22%20y2%3D%225.5%22%20stroke%3D%22%235be8d8%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22/%3E%3Cline%20x1%3D%2215%22%20y1%3D%2224.5%22%20x2%3D%2215%22%20y2%3D%2228.5%22%20stroke%3D%22%235be8d8%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22/%3E%3Cline%20x1%3D%221.5%22%20y1%3D%2215%22%20x2%3D%225.5%22%20y2%3D%2215%22%20stroke%3D%22%235be8d8%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22/%3E%3Cline%20x1%3D%2224.5%22%20y1%3D%2215%22%20x2%3D%2228.5%22%20y2%3D%2215%22%20stroke%3D%22%235be8d8%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") 15 15, auto;
}
a, button, .nav-btn, .chip, .chip-idioma, .tarjeta-acorde, .carta-mapa, .carta-tarot,
.acorde-chip, .prog-acorde, .escala-color, .acorde-color, .inst-tab, .etq-tab,
.vista-btn, .pag-flecha, .pos-flecha, .loader-saltear, .modal-cerrar,
[data-idioma], [data-vista], [data-cifrado], [data-escala], select, input[type="search"],
.sh-nodo, .volver, .id-punto, .id-principal-cifrado {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cg%20fill%3D%22%2307070a%22%20fill-opacity%3D%220.55%22%20stroke%3D%22%23ffd873%22%20stroke-width%3D%221.3%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%204.5c0-1.1.9-2%202-2s2%20.9%202%202v7.2l1.6-1.1c.7-.5%201.6-.4%202.2.2.5.5.6%201.3.2%202l-2.6%204.6c-1%201.8-2.9%202.9-4.9%202.9h-1.8c-2.3%200-4.4-1.3-5.4-3.4l-2.3-4.7c-.4-.8-.1-1.7.6-2.2.7-.5%201.7-.4%202.3.3l1.6%201.8V8.6c0-1.1.9-2%202-2s2%20.9%202%202%22/%3E%3C/g%3E%3C/svg%3E") 8 3, pointer;
}

/* ---------------- mobile: mastil legible con scroll horizontal ----------
   En vez de achicar los 12 trastes hasta que el traste tiene 2mm y las
   notas no se leen, en pantallas chicas el diagrama mantiene su tamaño
   natural (legible) y el contenedor scrollea — el patron de siempre
   para tablaturas en el celular, en vez de forzarlo a entrar entero. */
@media (max-width: 640px) {
  .instrumento-diagrama {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .diag-svg.diag-mastil {
    width: auto;
    min-width: 460px;
    max-width: none;
    margin: 0 auto;
  }
  .dic-posicion-svg, .esc-mastil-completo {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .dic-posicion-svg svg, .esc-mastil-completo svg {
    width: auto;
    min-width: 460px;
    max-width: none;
  }

  /* los botones de navegar posiciones/paginas/cerrar modal eran mas
     chicos que el minimo cómodo para el dedo (26-34px); en touch pasan
     a 42-44px sin agrandar tanto el icono de adentro. */
  .pos-flecha { width: 42px; height: 42px; font-size: 1.15rem; }
  .pag-flecha { width: 44px; height: 44px; font-size: 1.25rem; }
  .modal-cerrar { width: 42px; height: 42px; font-size: 1.3rem; }
}

/* ---------------- anillo de mantener presionado (touch) ---------------- */
.sh-grupo-presion { pointer-events: none; }
.sh-anillo-presion {
  fill: none;
  stroke-width: 3.4;
  stroke-linecap: round;
  opacity: 0.95;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-90deg);
}
.sh-disco-presion {
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------------- identificador de acordes ---------------- */
.id-mastil-wrap { position: relative; }
.id-mastil-svg svg { width: 100%; height: auto; display: block; }
.id-limpiar {
  margin-top: 12px;
  background: rgba(var(--blanco-rgb), 0.05);
  border: 1px solid rgba(var(--blanco-rgb), 0.16);
  color: var(--tenue);
  font-size: 0.8rem;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--transicion);
}
.id-limpiar:hover { border-color: var(--acento); color: var(--blanco); }

.id-punto-circulo {
  fill: rgba(var(--blanco-rgb), 0.05);
  stroke: rgba(var(--blanco-rgb), 0.16);
  stroke-width: 1;
  transition: all var(--transicion);
}
.id-punto:hover .id-punto-circulo { fill: rgba(var(--acento-rgb), 0.18); stroke: var(--acento); }
.id-punto.marcado .id-punto-circulo { fill: var(--acento); stroke: var(--acento); }
.id-punto-texto {
  fill: #0b0a12; font-size: 8.5px; font-weight: 700;
  text-anchor: middle; font-family: "Space Grotesk", sans-serif;
  pointer-events: none;
}

.id-tambien { font-size: 0.8rem; color: var(--tenue); margin-top: 6px; }
.id-principal-cifrado { cursor: pointer; }
.id-principal-cifrado:hover { color: var(--acento); }

@media (max-width: 640px) {
  .id-mastil-svg { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .id-mastil-svg svg { width: auto; min-width: 460px; }
  .id-punto-circulo { r: 12; }
}

/* ---------------- temas ---------------- */
.temas-grilla { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.tarjeta-tema {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  width: 190px; padding: 16px 18px;
  background: var(--carta-alta);
  border: 1px solid var(--borde);
  border-radius: 14px;
  cursor: pointer;
  transition: all var(--transicion);
  position: relative;
}
.tarjeta-tema:hover { border-color: var(--acento); background: rgba(var(--acento-rgb), 0.1); }
.tarjeta-tema.activo {
  border-color: var(--acento);
  background: color-mix(in srgb, var(--acento) 18%, transparent);
  box-shadow: 0 0 0 1px rgba(var(--acento-rgb), 0.4);
}
.tema-swatches { display: flex; gap: 5px; }
.tema-swatch {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  border: 1px solid rgba(var(--blanco-rgb), 0.2);
}
.tema-nombre { font-size: 1rem; color: var(--blanco); font-weight: 700; }
.tema-fuente { font-size: 0.68rem; color: var(--tenue); }
.tema-activo-marca {
  position: absolute; top: 10px; right: 10px;
  font-size: 0.62rem; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--acento); font-weight: 700;
}