:root{
  --noche:#111215;
  --carta:#1a1b20;
  --carta-alta:#23242b;
  --arena:#eee7db;
  --arena-tenue:#b3ac9f;
  --naranja:#ff4800;
  --naranja-claro:#ff7a45;
  --ambar:#f2b33d;
  --trazo:rgba(238,231,219,.13);
  --trazo-fuerte:rgba(238,231,219,.28);
  --radio:14px;
  --ancho:1120px;
  --f-titulo:"Fraunces",Georgia,"Times New Roman",serif;
  --f-texto:"Epilogue",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background-color:var(--noche);
  background-image:
    repeating-radial-gradient(circle at 88% -10%,transparent 0 46px,rgba(255,72,0,.045) 46px 47px),
    linear-gradient(rgba(238,231,219,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(238,231,219,.025) 1px,transparent 1px);
  background-size:auto,64px 64px,64px 64px;
  color:var(--arena);
  font:400 17px/1.72 var(--f-texto);
  overflow-x:hidden;
}
body.compas-fijo{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--naranja-claro);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ambar)}
h1,h2,h3{font-family:var(--f-titulo);font-weight:600;line-height:1.18;letter-spacing:-.01em;margin:0 0 .6em}
h1{font-size:clamp(2rem,4.6vw,3.25rem);font-variation-settings:"SOFT" 50,"WONK" 1}
h2{font-size:clamp(1.45rem,2.8vw,2rem)}
h3{font-size:1.18rem;color:var(--arena)}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.2em;padding-left:1.3em}
li{margin-bottom:.4em}
strong{color:#fff;font-weight:600}

/* cabecera */
.acorde-top{
  position:sticky;top:0;z-index:40;
  background:rgba(17,18,21,.88);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--trazo);
}
.acorde-top__fila{
  max-width:var(--ancho);margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.clave-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.clave-logo img{width:132px;height:auto}
.acorde-top__der{display:flex;align-items:center;gap:10px}
.solo-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--naranja);color:#fff;text-decoration:none;
  font:600 .92rem/1 var(--f-texto);letter-spacing:.02em;
  padding:12px 18px;border-radius:999px;
  box-shadow:0 0 0 0 rgba(255,72,0,.5);transition:box-shadow .25s,background .25s;
}
.solo-btn:hover{background:#ff5f1f;color:#fff;box-shadow:0 0 0 6px rgba(255,72,0,.18)}
.solo-btn__flecha{display:inline-block;transform:rotate(-45deg);font-size:1.05em}
.clave-giro{
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--trazo-fuerte);background:var(--carta);
  display:grid;place-items:center;cursor:pointer;padding:0;color:var(--arena);
}
.clave-giro svg{width:24px;height:24px;transition:transform .45s ease}
.clave-giro[aria-expanded="true"] svg{transform:rotate(135deg)}
.clave-giro:focus-visible,.solo-btn:focus-visible{outline:2px solid var(--ambar);outline-offset:3px}

/* barra lateral */
.acorde-velo{
  position:fixed;inset:0;background:rgba(5,5,7,.6);z-index:50;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.acorde-velo--activo{opacity:1;pointer-events:auto}
.acorde-nav{
  position:fixed;top:0;right:0;bottom:0;z-index:60;
  width:min(340px,86vw);
  background:var(--carta);border-left:1px solid var(--trazo-fuerte);
  transform:translateX(102%);visibility:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s linear .35s;
  display:flex;flex-direction:column;padding:22px 22px 28px;overflow-y:auto;
}
.acorde-nav--abierto{transform:translateX(0);visibility:visible;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s}
.acorde-nav__cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.acorde-nav__titulo{font:600 .78rem/1 var(--f-texto);letter-spacing:.18em;text-transform:uppercase;color:var(--arena-tenue)}
.acorde-nav__cerrar{background:none;border:1px solid var(--trazo-fuerte);color:var(--arena);border-radius:50%;width:38px;height:38px;cursor:pointer;font-size:1.2rem;line-height:1}
.acorde-nav ol{list-style:none;margin:0;padding:0;counter-reset:parada}
.acorde-nav li{margin:0;border-top:1px solid var(--trazo)}
.acorde-nav li:last-child{border-bottom:1px solid var(--trazo)}
.acorde-nav a{
  display:flex;align-items:baseline;gap:14px;padding:14px 4px;
  color:var(--arena);text-decoration:none;font:500 1.05rem/1.3 var(--f-titulo);
}
.acorde-nav a::before{
  counter-increment:parada;content:counter(parada,decimal-leading-zero);
  font:600 .72rem/1 var(--f-texto);color:var(--naranja);letter-spacing:.08em;min-width:22px;
}
.acorde-nav a:hover,.acorde-nav a[aria-current="page"]{color:var(--naranja-claro)}
.acorde-nav__nota{margin-top:auto;padding-top:24px;font-size:.82rem;color:var(--arena-tenue)}

/* contenedor */
.partitura{max-width:var(--ancho);margin:0 auto;padding:0 20px}
.tempo-ruta{font-size:.85rem;color:var(--arena-tenue);padding:22px 0 0}
.tempo-ruta a{color:var(--arena-tenue)}
.tempo-ruta span{margin:0 8px;color:var(--naranja)}

/* apertura */
.preludio{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:40px;align-items:center;
  padding:46px 0 34px;border-bottom:1px solid var(--trazo);
}
.preludio__antetitulo{
  display:inline-flex;gap:10px;align-items:center;
  font:600 .76rem/1 var(--f-texto);letter-spacing:.2em;text-transform:uppercase;color:var(--ambar);margin-bottom:18px;
}
.preludio__antetitulo::before{content:"";width:28px;height:1px;background:var(--ambar)}
.preludio__bajada{font-size:1.12rem;color:#ddd5c8;max-width:62ch}
.preludio__firma{font-size:.88rem;color:var(--arena-tenue);margin-top:18px}
.preludio__firma time{color:var(--arena)}
.rosa-vientos{width:100%;max-width:300px;margin-left:auto;aspect-ratio:1}
.rosa-vientos__aguja{transform-origin:150px 150px;animation:aguja-oscila 7s ease-in-out infinite}
@keyframes aguja-oscila{0%,100%{transform:rotate(28deg)}50%{transform:rotate(41deg)}}
@media (prefers-reduced-motion:reduce){.rosa-vientos__aguja{animation:none;transform:rotate(34deg)}}

/* indice */
.repertorio{margin:26px 0 4px;padding:18px 20px;border:1px solid var(--trazo);border-radius:var(--radio);background:var(--carta)}
.repertorio__titulo{display:block;font:600 .74rem/1 var(--f-texto);letter-spacing:.18em;text-transform:uppercase;color:var(--ambar);margin-bottom:12px}
.repertorio ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;counter-reset:tramo}
.repertorio li{margin:0}
.repertorio a{display:inline-flex;gap:6px;align-items:baseline;padding:6px 12px;border:1px solid var(--trazo-fuerte);border-radius:999px;color:var(--arena);text-decoration:none;font-size:.88rem}
.repertorio a::before{counter-increment:tramo;content:counter(tramo,decimal-leading-zero);color:var(--naranja);font-weight:700;font-size:.72rem}
.repertorio a:hover{border-color:var(--naranja)}
.coda-cierre__base a{color:var(--arena)}

/* secciones con ruta */
.melodia{position:relative;padding:20px 0 30px}
.melodia::before{
  content:"";position:absolute;left:21px;top:40px;bottom:40px;width:0;
  border-left:2px dashed rgba(255,72,0,.38);
}
.ritmo-section{position:relative;padding:34px 0 18px 76px}
.compas-marca{
  position:absolute;left:0;top:34px;width:44px;height:44px;border-radius:50%;
  background:var(--noche);border:2px solid var(--naranja);
  display:grid;place-items:center;font:700 .8rem/1 var(--f-texto);color:var(--naranja);
}
.compas-marca::after{
  content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(255,72,0,.25);
}
.ritmo-section__coord{
  display:block;font:500 .74rem/1 var(--f-texto);letter-spacing:.16em;text-transform:uppercase;
  color:var(--arena-tenue);margin-bottom:10px;
}
.ritmo-section > p,.ritmo-section > ul,.ritmo-section > ol{max-width:72ch}

/* fichas */
.pentagrama-tabla{width:100%;border-collapse:collapse;margin:8px 0 22px;font-size:.95rem}
.pentagrama-tabla caption{text-align:left;font:600 .78rem/1 var(--f-texto);letter-spacing:.16em;text-transform:uppercase;color:var(--ambar);padding-bottom:12px}
.pentagrama-tabla th,.pentagrama-tabla td{padding:11px 12px;border-bottom:1px solid var(--trazo);text-align:left;vertical-align:top}
.pentagrama-tabla th{color:var(--arena-tenue);font-weight:500;width:36%}
.pentagrama-tabla thead th{color:var(--arena);font-weight:600;width:auto;border-bottom:1px solid var(--trazo-fuerte)}
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tabla-scroll .pentagrama-tabla{margin-bottom:6px}
.pentagrama-origen{font-size:.8rem;line-height:1.45;color:var(--arena-tenue);margin:0 0 22px;max-width:72ch}

.nota-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:10px 0 24px}
.nota-card{
  background:var(--carta);border:1px solid var(--trazo);border-radius:var(--radio);
  padding:20px 20px 16px;position:relative;
}
.nota-card h3{margin-bottom:.4em}
.nota-card p{font-size:.95rem;margin-bottom:.4em;color:#d9d1c4}
.nota-card--norte{border-top:3px solid var(--naranja)}
.nota-card--sur{border-top:3px solid var(--arena-tenue)}
.nota-card__rumbo{font:600 .7rem/1 var(--f-texto);letter-spacing:.18em;text-transform:uppercase;color:var(--naranja);margin-bottom:10px;display:block}

.silencio-nota{
  border-left:3px solid var(--ambar);background:rgba(242,179,61,.07);
  padding:14px 18px;border-radius:0 10px 10px 0;margin:6px 0 20px;font-size:.96rem;max-width:72ch;
}
.silencio-nota strong{color:var(--ambar)}

.partitura-fig{margin:14px 0 26px}
.partitura-fig img{border-radius:var(--radio);border:1px solid var(--trazo);width:100%}
.partitura-fig figcaption{font-size:.82rem;color:var(--arena-tenue);margin-top:8px}
.mosaico-teclas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:10px 0 24px}
.mosaico-teclas img{border-radius:10px;width:100%}

.escala-pasos{list-style:none;padding:0;counter-reset:paso;max-width:72ch}
.escala-pasos li{position:relative;padding:4px 0 14px 52px;margin:0}
.escala-pasos li::before{
  counter-increment:paso;content:counter(paso);
  position:absolute;left:0;top:2px;width:34px;height:34px;border-radius:8px;
  background:var(--carta-alta);border:1px solid var(--trazo-fuerte);
  display:grid;place-items:center;font:700 .9rem/1 var(--f-titulo);color:var(--naranja-claro);
}

/* medidor de veredicto */
.tono-medidor{display:grid;gap:12px;margin:8px 0 24px;max-width:640px}
.tono-medidor__fila{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) 44px;gap:12px;align-items:center;font-size:.95rem}
.tono-medidor__barra{height:8px;border-radius:999px;background:var(--carta-alta);overflow:hidden}
.tono-medidor__barra i{display:block;height:100%;background:linear-gradient(90deg,var(--naranja),var(--ambar));border-radius:999px}
.tono-medidor__valor{font-weight:600;text-align:right}

/* preguntas */
.estribillo{border-top:1px solid var(--trazo);max-width:76ch}
.estribillo:last-of-type{border-bottom:1px solid var(--trazo)}
.estribillo summary{
  cursor:pointer;list-style:none;padding:16px 36px 16px 0;position:relative;
  font:600 1.05rem/1.35 var(--f-titulo);
}
.estribillo summary::-webkit-details-marker{display:none}
.estribillo summary::after{
  content:"+";position:absolute;right:6px;top:12px;font:400 1.5rem/1 var(--f-texto);color:var(--naranja);transition:transform .25s;
}
.estribillo[open] summary::after{transform:rotate(45deg)}
.estribillo > div{padding:0 0 14px;color:#d9d1c4}

/* bloque de salida */
.cadencia-cta{
  margin:26px 0 30px;padding:24px 26px;border-radius:var(--radio);
  background:
    radial-gradient(circle at 100% 0,rgba(255,72,0,.28),transparent 55%),
    var(--carta-alta);
  border:1px solid rgba(255,72,0,.35);
  display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;
}
.cadencia-cta p{margin:0;max-width:52ch;font-size:.98rem}
.cadencia-cta__lema{font:600 1.2rem/1.3 var(--f-titulo);color:#fff;display:block;margin-bottom:4px}

/* cierre */
.coda-cierre{margin-top:40px;border-top:1px solid var(--trazo-fuerte);background:#0c0d0f}
.coda-cierre__rejilla{
  max-width:var(--ancho);margin:0 auto;padding:40px 20px 26px;
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:36px;
}
.coda-cierre h2{font-size:1.05rem;letter-spacing:.04em;margin-bottom:.7em;color:var(--ambar)}
.coda-cierre p{font-size:.9rem;color:var(--arena-tenue)}
.coda-cierre ul{list-style:none;padding:0;margin:0;columns:2;column-gap:20px}
.coda-cierre li{font-size:.92rem;break-inside:avoid}
.coda-cierre a{color:var(--arena)}
.coda-cierre__base{
  max-width:var(--ancho);margin:0 auto;padding:16px 20px 30px;border-top:1px solid var(--trazo);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:.82rem;color:var(--arena-tenue);
}
.coda-cierre__edad{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1.5px solid var(--arena-tenue);font-weight:700;font-size:.78rem;color:var(--arena);margin-right:8px;vertical-align:middle;
}

/* 404 */
.fuera-de-mapa{min-height:62vh;display:grid;place-items:center;text-align:center;padding:60px 0}
.fuera-de-mapa .rosa-vientos{margin:0 auto 18px;max-width:200px}
.fuera-de-mapa .rosa-vientos__aguja{animation:aguja-perdida 2.6s ease-in-out infinite}
@keyframes aguja-perdida{0%{transform:rotate(0)}35%{transform:rotate(200deg)}70%{transform:rotate(150deg)}100%{transform:rotate(360deg)}}
.fuera-de-mapa ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}
.fuera-de-mapa li a{display:inline-block;padding:10px 16px;border:1px solid var(--trazo-fuerte);border-radius:999px;text-decoration:none;color:var(--arena)}
.fuera-de-mapa li a:hover{border-color:var(--naranja);color:var(--naranja-claro)}

@media (max-width:860px){
  .preludio{grid-template-columns:1fr;gap:18px;padding-top:30px}
  .rosa-vientos{max-width:150px;margin:0;order:-1}
  .melodia::before{left:15px}
  .ritmo-section{padding-left:50px}
  .compas-marca{width:32px;height:32px;font-size:.7rem}
  .compas-marca::after{inset:-5px}
  .mosaico-teclas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .coda-cierre__rejilla{grid-template-columns:1fr}
}
@media (max-width:520px){
  body{font-size:16px}
  .clave-logo img{width:108px}
  .solo-btn{padding:10px 13px;font-size:.82rem}
  .acorde-top__fila{padding:10px 14px}
  .partitura{padding:0 16px}
  .ritmo-section{padding-left:42px}
  .melodia::before{left:13px}
  .compas-marca{width:28px;height:28px}
  .tono-medidor__fila{grid-template-columns:1fr 44px}
  .tono-medidor__barra{grid-column:1 / -1;order:3}
  .pentagrama-tabla th{width:42%}
  .pentagrama-tabla{font-size:.84rem}
  .pentagrama-tabla th,.pentagrama-tabla td{padding:9px 7px;hyphens:auto;-webkit-hyphens:auto}
  .pentagrama-tabla thead th{width:auto}
  .coda-cierre ul{columns:1}
  .cadencia-cta{padding:20px}
}