/* MAVI MUSIC · Herramientas de libre acceso (afinador y metrónomo)
   Usa las variables de paginas.css: --verde, --verde2, --turq, --aqua, --menta, --crema, --tinta, --oscuro, --titulos, --texto */

/* ---------- Encabezado de la herramienta ---------- */
.hl-hero{position:relative;padding:118px 0 34px;color:#fff;overflow:hidden;
  background:radial-gradient(900px 420px at 85% -10%,rgba(32,231,223,.28),transparent 60%),
             radial-gradient(700px 380px at -10% 110%,rgba(23,180,170,.22),transparent 60%),
             linear-gradient(135deg,#06433d 0%,#075e57 55%,#0a746b 100%)}
.hl-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;
  background:repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 34px)}
.hl-hero-in{position:relative;z-index:1}
.hl-hero .pg-migas{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:rgba(255,255,255,.75);margin-bottom:14px}
.hl-hero .pg-migas a{text-decoration:none}.hl-hero .pg-migas a:hover{color:#fff}
.hl-hero-fila{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hl-hero h1{font-size:clamp(34px,5vw,54px);color:#fff}
.hl-hero h1 b{color:var(--aqua);font-weight:700}
.hl-lead{max-width:640px;margin:10px 0 0;font-size:18px;color:rgba(255,255,255,.88)}
.hl-lead b{color:#fff}
.hl-pestanas{display:flex;gap:6px;padding:6px;border-radius:999px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.18)}
.hl-pestanas a{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;text-decoration:none;font-weight:800;font-size:15px;color:rgba(255,255,255,.85)}
.hl-pestanas a svg{font-size:20px}
.hl-pestanas a:hover{color:#fff;background:rgba(255,255,255,.08)}
.hl-pestanas a[aria-current]{background:#fff;color:var(--verde)}

/* ---------- Secciones ---------- */
.hl-sec{padding:28px 0 18px}
.hl-info{padding-top:40px;padding-bottom:70px}

/* ---------- Tarjeta de la aplicación (oscura, tipo instrumento) ---------- */
.hl-app{position:relative;border-radius:28px;padding:22px;color:#eafaf8;margin-top:-6px;
  background:radial-gradient(800px 300px at 50% -80px,rgba(32,231,223,.12),transparent 70%),linear-gradient(180deg,#0f3532 0%,#0c2523 100%);
  box-shadow:0 30px 70px -30px rgba(4,40,36,.7),inset 0 1px 0 rgba(255,255,255,.06)}
.hl-app button,.hl-app select,.hl-app input{font-family:var(--texto)}
.hl-app :focus-visible{outline:3px solid var(--aqua);outline-offset:2px}

/* Campos genéricos */
.hl-campo{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:rgba(234,250,248,.7);min-width:0}
.hl-campo select,.hl-campo input[type=number]{appearance:none;-webkit-appearance:none;background:#123f3b;color:#fff;border:1px solid rgba(140,228,222,.25);border-radius:12px;padding:10px 12px;font-size:15px;font-weight:700;min-height:44px;width:100%}
.hl-campo select{background-image:linear-gradient(45deg,transparent 50%,#8ce4de 50%),linear-gradient(135deg,#8ce4de 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
.hl-app input[type=range]{width:100%;accent-color:var(--aqua);height:28px}
.hl-check{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:rgba(234,250,248,.85);cursor:pointer}
.hl-check input{width:20px;height:20px;accent-color:var(--aqua)}
.hl-paso{display:flex;align-items:center;gap:6px}
.hl-paso button{width:42px;height:42px;border-radius:12px;border:1px solid rgba(140,228,222,.3);background:#123f3b;color:#fff;font-size:22px;font-weight:700;cursor:pointer}
.hl-paso button:hover{background:#17504b}
.hl-paso output{min-width:76px;text-align:center;font-family:var(--titulos);font-size:20px;font-weight:700;color:#fff}

/* Botones */
.hl-btn-grande{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:0 30px;border-radius:999px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--turq),var(--verde2));color:#fff;font-weight:800;font-size:18px;box-shadow:0 14px 30px -14px rgba(32,231,223,.8);transition:transform .15s,filter .2s}
.hl-btn-grande svg{font-size:24px;fill:currentColor;stroke:none}
.hl-afinador .hl-btn-grande svg{fill:none;stroke:currentColor}
.hl-btn-grande:hover{transform:translateY(-2px);filter:brightness(1.08)}
.hl-btn-grande.encendido{background:linear-gradient(135deg,#e2575b,#b8343d);box-shadow:0 14px 30px -14px rgba(226,87,91,.8)}
.hl-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 22px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.07);border:1.5px solid rgba(140,228,222,.35);color:#fff;font-weight:800;font-size:16px}
.hl-btn svg{font-size:22px}
.hl-btn:hover{background:rgba(255,255,255,.13)}
.hl-btn[aria-pressed=true]{background:var(--aqua);color:#06332f;border-color:var(--aqua)}
.hl-btn-mini{margin-left:10px;border:1px solid rgba(140,228,222,.35);background:transparent;color:var(--menta);border-radius:999px;padding:4px 12px;font-weight:800;font-size:13px;cursor:pointer}
.hl-btn-mini:hover{background:rgba(140,228,222,.12)}

/* Chips */
.hl-chips{display:flex;flex-wrap:wrap;gap:8px}
.hl-chip{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 15px;border-radius:12px;border:1px solid rgba(140,228,222,.22);background:#123f3b;color:#dff7f4;font-weight:700;font-size:14px;cursor:pointer;transition:background .15s,border-color .15s}
.hl-chip:hover{border-color:rgba(140,228,222,.6)}
.hl-chip[aria-pressed=true]{background:var(--aqua);border-color:var(--aqua);color:#06332f}
.hl-figura{font-size:19px;line-height:1;min-width:16px;text-align:center}
.hl-bloque{margin-top:18px}
.hl-bloque-tit{display:flex;align-items:center;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--menta);margin-bottom:9px}
.hl-bloque-tit.hl-sub{margin-top:16px}

/* ======================= AFINADOR ======================= */
.hl-instrumentos{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.hl-instrumentos button{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:88px;padding:12px 10px 10px;border-radius:16px;cursor:pointer;
  background:#123f3b;border:1px solid rgba(140,228,222,.16);color:#cfeeea;font-weight:800;font-size:13px}
.hl-instrumentos button svg{font-size:30px;stroke-width:1.5}
.hl-instrumentos button:hover{border-color:rgba(140,228,222,.5)}
.hl-instrumentos button[aria-selected=true]{background:linear-gradient(160deg,var(--turq),var(--verde2));border-color:transparent;color:#fff;box-shadow:0 10px 24px -14px rgba(32,231,223,.9)}
.hl-fila-opciones{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:8px}
.hl-fila-opciones .hl-campo{flex:1 1 260px;max-width:420px}
.hl-modo{display:inline-flex;padding:4px;border-radius:12px;background:#123f3b;border:1px solid rgba(140,228,222,.2)}
.hl-modo button{border:0;background:transparent;color:#cfeeea;font-weight:800;font-size:14px;padding:9px 14px;border-radius:9px;cursor:pointer;min-height:36px}
.hl-modo button[aria-pressed=true]{background:#fff;color:var(--verde)}
[hidden]{display:none!important}

.hl-pantalla{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:12px;margin:18px 0 6px;padding:18px;border-radius:22px;
  background:radial-gradient(420px 200px at 30% 100%,rgba(32,231,223,.10),transparent 70%),#0a201e;border:1px solid rgba(140,228,222,.12)}
.hl-medidor{width:100%;max-width:440px;display:block;margin:auto;overflow:visible}
.hl-m-fondo{fill:none;stroke:rgba(255,255,255,.08);stroke-width:22;stroke-linecap:round}
.hl-m-ok{fill:none;stroke:rgba(32,231,223,.45);stroke-width:22}
.hl-m-raya{stroke:rgba(234,250,248,.35);stroke-width:2}
.hl-m-cero{stroke:var(--aqua);stroke-width:3.5}
.hl-m-num{fill:rgba(234,250,248,.55);font:700 12px var(--texto);text-anchor:middle}
.hl-m-lado{fill:rgba(234,250,248,.6);font:700 22px var(--titulos);text-anchor:middle}
.hl-m-aguja{transition:transform .12s linear,opacity .3s}
.hl-m-aguja line{stroke:#fff;stroke-width:4;stroke-linecap:round}
.hl-m-aguja circle{fill:#fff}
.hl-afinador.afinado .hl-m-aguja line{stroke:var(--aqua);filter:drop-shadow(0 0 6px rgba(32,231,223,.9))}
.hl-afinador.afinado .hl-m-aguja circle{fill:var(--aqua)}
.hl-afinador.afinado .hl-m-ok{stroke:var(--aqua)}
.hl-lectura{text-align:center}
.hl-nota{font-family:var(--titulos);font-weight:700;font-size:clamp(64px,9vw,104px);line-height:1;color:#fff;letter-spacing:-.02em;transition:color .2s,text-shadow .2s}
.hl-nota sub{font-size:.36em;vertical-align:baseline;margin-left:4px;color:rgba(234,250,248,.6)}
.hl-afinador.afinado .hl-nota{color:var(--aqua);text-shadow:0 0 28px rgba(32,231,223,.45)}
.hl-nota-otra{font-size:16px;font-weight:700;color:rgba(234,250,248,.65);margin-top:6px;min-height:1.4em}
.hl-datos{display:flex;justify-content:center;gap:16px;margin-top:10px;font-variant-numeric:tabular-nums;font-weight:800;color:#cfeeea;font-size:15px}
.hl-datos span{background:rgba(255,255,255,.06);padding:5px 12px;border-radius:999px}
.hl-estado{margin:14px auto 0;display:inline-block;padding:9px 18px;border-radius:999px;font-weight:800;font-size:15px;background:rgba(255,255,255,.07);color:#eafaf8;min-height:40px}
.hl-estado.ok{background:var(--aqua);color:#06332f}
.hl-estado.bajo,.hl-estado.alto{background:rgba(255,196,87,.16);color:#ffd27d}
.hl-estado.lejos{background:rgba(226,87,91,.18);color:#ffb3b5}
.hl-estado.fuera{background:rgba(255,140,90,.18);color:#ffc2a3}

/* Clavijero: dibujo de la cabeza del instrumento con la clavija que se está afinando */
.hl-pantalla.con-clavijero{grid-template-columns:minmax(170px,230px) minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"clav med lec"}
.hl-pantalla.con-clavijero .hl-clavijero{grid-area:clav}
.hl-pantalla.con-clavijero .hl-medidor{grid-area:med}
.hl-pantalla.con-clavijero .hl-lectura{grid-area:lec}
.hl-clavijero{margin:0;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:6px 4px 4px;border-radius:18px;background:radial-gradient(160px 220px at 50% 45%,rgba(255,210,125,.07),transparent 70%)}
.hl-clavijero figcaption{font-size:11.5px;font-weight:700;color:rgba(234,250,248,.5);text-align:center;line-height:1.3}
.hl-clav-svg{width:100%;max-width:240px;height:auto;max-height:330px;display:block;overflow:hidden}
.pg .hl-clav-svg{width:100%;height:auto;max-height:330px;stroke:none}
.pg .hl-clav-svg text{stroke:none}
.hl-clav-cabeza{stroke:rgba(0,0,0,.45);stroke-width:1.2}
.hl-clav-brillo{fill:none;stroke:rgba(255,226,190,.16);stroke-width:1;transform:translate(1px,1px)}
.hl-clav-mastil{fill:#22150d}
.hl-clav-traste{stroke:#b9bec0;stroke-width:2.2}
.hl-clav-cejilla{fill:#efe6cf}
.hl-clav-cuerda{stroke:#cfc7b6;stroke-linecap:round;opacity:.75;transition:stroke .2s,opacity .2s}
.hl-clav-cuerda.activa{stroke:#ffd27d;opacity:1}
.hl-clav-cuerda.ok{stroke:var(--aqua)}
.hl-clav-cuerda.vibra{animation:hlVibra .09s linear infinite alternate}
@keyframes hlVibra{from{stroke-dasharray:none;filter:none}to{filter:drop-shadow(0 0 2.5px rgba(255,210,125,.9))}}
.hl-clav-peg{cursor:pointer;outline:none}
.hl-clav-eje{stroke:#8d9497;stroke-width:3;stroke-linecap:round}
.hl-clav-boton{stroke:rgba(0,0,0,.35);stroke-width:.8;transition:fill .2s,filter .2s}
.hl-clav-poste{fill:#d7dcde;stroke:#5c6366;stroke-width:1}
.hl-clav-hueco{fill:#2b2f31}
.hl-clav-anillo{fill:none;stroke:#ffd27d;stroke-width:3;stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray .15s linear,stroke .2s;opacity:0}
.hl-clav-nota{font:700 13px var(--titulos);fill:rgba(234,250,248,.85)}
.hl-clav-sub{font:800 9.5px var(--texto);fill:rgba(234,250,248,.5);letter-spacing:.02em}
.hl-clav-peg:hover .hl-clav-boton,.hl-clav-peg:focus-visible .hl-clav-boton{filter:drop-shadow(0 0 4px rgba(140,228,222,.8))}
.hl-clav-peg:focus-visible .hl-clav-nota{fill:var(--aqua)}
.hl-clav-peg.lista .hl-clav-sub{fill:var(--aqua)}
.hl-clav-peg.activa .hl-clav-boton{fill:#ffd27d;filter:drop-shadow(0 0 7px rgba(255,210,125,.85))}
.hl-clav-peg.activa .hl-clav-nota{fill:#ffd27d;font-size:15px}
.hl-clav-peg.activa .hl-clav-sub{fill:#ffd27d;font-size:10.5px}
.hl-clav-peg.sonando .hl-clav-anillo{opacity:1}
.hl-clav-peg.sonando .hl-clav-boton{animation:hlClavPulso .9s ease-in-out infinite}
.hl-clav-peg.cerca .hl-clav-anillo{stroke:#d8f06a}
.hl-clav-peg.ok .hl-clav-boton{fill:var(--aqua);filter:drop-shadow(0 0 9px rgba(32,231,223,.95));animation:none}
.hl-clav-peg.ok .hl-clav-anillo{stroke:var(--aqua)}
.hl-clav-peg.ok .hl-clav-nota,.hl-clav-peg.ok .hl-clav-sub{fill:var(--aqua)}
@keyframes hlClavPulso{50%{filter:drop-shadow(0 0 12px rgba(255,210,125,1))}}
.hl-campo-clav{flex:0 1 230px!important}

.hl-cuerdas{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.hl-cuerda{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:74px;padding:9px 8px;border-radius:14px;cursor:pointer;
  background:#123f3b;border:1.5px solid rgba(140,228,222,.18);color:#fff;transition:transform .12s,background .2s,border-color .2s}
.hl-cuerda small{font-size:11px;font-weight:800;color:rgba(234,250,248,.55);text-transform:uppercase;letter-spacing:.06em}
.hl-cuerda b{font-family:var(--titulos);font-size:24px;line-height:1.1}
.hl-cuerda b sub{font-size:12px;color:rgba(234,250,248,.55);margin-left:1px}
.hl-cuerda i{font-style:normal;font-size:12px;font-weight:700;color:rgba(234,250,248,.6)}
.hl-cuerda:hover{border-color:rgba(140,228,222,.55)}
.hl-cuerda.activa{border-color:#ffd27d;background:#1a4a45;transform:translateY(-2px)}
.hl-cuerda.fija{box-shadow:0 0 0 2px rgba(255,210,125,.35)}
.hl-cuerda.ok{background:var(--aqua);border-color:var(--aqua);color:#06332f}
.hl-cuerda.ok small,.hl-cuerda.ok i,.hl-cuerda.ok b sub{color:#06332f}

.hl-vientos{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px;margin-top:14px}
.hl-escala{display:flex;flex-direction:column;gap:10px}
.hl-escala-notas{display:flex;flex-wrap:wrap;gap:6px}
.hl-escala-notas span{min-width:46px;text-align:center;padding:7px 8px;border-radius:10px;background:#123f3b;font-weight:800;font-size:14px;border:1px solid rgba(140,228,222,.15);transition:all .15s}
.hl-escala-notas span.activa{background:var(--aqua);color:#06332f;transform:translateY(-2px)}
.hl-estabilidad{display:flex;flex-direction:column;gap:8px;justify-content:center;font-size:13px;font-weight:700;color:rgba(234,250,248,.7)}
.hl-estabilidad b{font-size:16px;color:#fff}
.hl-barra{height:12px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.hl-barra i{display:block;height:100%;width:0;border-radius:inherit;background:var(--aqua);transition:width .25s,background .25s}
.hl-barra i.medio{background:#ffd27d}.hl-barra i.mal{background:#ff8c8f}

.hl-historial{margin-top:16px;padding:12px 14px 10px;border-radius:18px;background:#0a201e;border:1px solid rgba(140,228,222,.1)}
.hl-historial-tit{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:800;color:rgba(234,250,248,.65);margin-bottom:6px}
.hl-historial-tit small{font-weight:600;color:rgba(234,250,248,.45)}
.hl-historial canvas{display:block;width:100%;height:90px}

.hl-controles{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:18px}
.hl-ajustes{margin-top:18px;border-top:1px solid rgba(140,228,222,.12);padding-top:12px}
.hl-ajustes summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:800;color:var(--menta);list-style:none;padding:6px 4px}
.hl-ajustes summary::-webkit-details-marker{display:none}
.hl-ajustes summary svg{font-size:20px;transition:transform .3s}
.hl-ajustes[open] summary svg{transform:rotate(60deg)}
.hl-ajustes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:12px;align-items:end}
.hl-aviso{margin:16px 0 0;padding:12px 16px;border-radius:14px;background:rgba(226,87,91,.15);color:#ffd0d1;font-weight:700}

/* ======================= METRÓNOMO ======================= */
.hl-mt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.hl-mt-escenario{display:flex;flex-direction:column;align-items:center}
.hl-vistas{display:inline-flex;padding:4px;border-radius:12px;background:#123f3b;border:1px solid rgba(140,228,222,.2);margin-bottom:10px}
.hl-vistas button{border:0;background:transparent;color:#cfeeea;font-weight:800;font-size:14px;padding:9px 16px;border-radius:9px;cursor:pointer}
.hl-vistas button[aria-selected=true]{background:#fff;color:var(--verde)}
.hl-visor{position:relative;width:100%;max-width:420px;aspect-ratio:1/1}
.hl-vista{position:absolute;inset:0;width:100%;height:100%}
.hl-mt-centro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;width:62%}
.hl-mt-centro b{display:block;font-family:var(--titulos);font-size:clamp(70px,13vw,112px);line-height:1;color:#fff}
.hl-mt-centro small{display:block;font-weight:800;font-size:14px;color:#ffd27d;min-height:1.3em;margin-top:4px}
.vista-pendulo .hl-mt-centro{top:auto;bottom:-6px;transform:translateX(-50%)}
.vista-pendulo .hl-mt-centro b{font-size:44px;display:inline-block}
.vista-pendulo .hl-mt-centro small{display:inline-block;margin-left:8px}
.vista-pulsos .hl-mt-centro{display:none}
.hl-metronomo.en-silencio .hl-mt-centro b{color:rgba(255,255,255,.35)}
.hl-metronomo.en-conteo .hl-mt-centro b{color:#ffd27d}

.hl-c-anillo{fill:none;stroke:rgba(255,255,255,.08);stroke-width:14}
.hl-c-estela{fill:none;stroke:rgba(32,231,223,.55);stroke-width:14;stroke-linecap:round}
.hl-c-sub{fill:rgba(234,250,248,.35)}
.hl-c-pulso{fill:#173f3b;stroke:rgba(140,228,222,.55);stroke-width:2.5;transition:fill .08s,transform .08s;transform-box:fill-box;transform-origin:center}
.hl-c-pulso.nivel-2{stroke:#8ce4de}
.hl-c-pulso.nivel-3{stroke:#fff;stroke-width:3}
.hl-c-pulso.nivel-0{stroke-dasharray:3 3;stroke:rgba(234,250,248,.35)}
.hl-c-pulso.uno{stroke:#ffd27d}
.hl-c-pulso.activo{fill:var(--aqua);transform:scale(1.35)}
.hl-c-pulso.uno.activo{fill:#ffd27d}
.hl-c-mano{stroke:rgba(255,255,255,.85);stroke-width:3;stroke-linecap:round}
.hl-c-eje{fill:#fff}
.hl-p-caja{fill:rgba(255,255,255,.04);stroke:rgba(140,228,222,.25);stroke-width:2}
.hl-p-escala{stroke:rgba(234,250,248,.4);stroke-width:2}
.hl-p-varilla{stroke:#dff7f4;stroke-width:4;stroke-linecap:round}
.hl-p-pesa{fill:var(--aqua)}
.hl-metronomo.en-conteo .hl-p-pesa{fill:#ffd27d}

.hl-pulsos-grandes{display:grid;grid-template-columns:repeat(var(--n,4),1fr);align-content:center;gap:10px}
.hl-pg{position:relative;aspect-ratio:3/4;border-radius:18px;background:#123f3b;border:2px solid rgba(140,228,222,.2);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background .06s}
.hl-pg b{font-family:var(--titulos);font-size:clamp(28px,5vw,48px);color:rgba(255,255,255,.65);position:relative;z-index:1}
.hl-pg i{position:absolute;left:0;bottom:0;height:6px;width:100%;background:rgba(255,255,255,.5);transform:scaleX(0);transform-origin:left}
.hl-pg.nivel-0{background:repeating-linear-gradient(45deg,#0f3532 0 8px,#123f3b 8px 16px)}
.hl-pg.activo{background:var(--aqua);border-color:var(--aqua)}
.hl-pg.activo b{color:#06332f}
.hl-pg.uno.activo{background:#ffd27d;border-color:#ffd27d}

.hl-acentos{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.hl-acento{display:flex;flex-direction:column;align-items:center;gap:4px;width:44px;padding:6px 0;border-radius:12px;border:1px solid rgba(140,228,222,.18);background:#123f3b;cursor:pointer;color:#cfeeea}
.hl-acento span{display:block;width:14px;border-radius:4px;background:var(--menta);transition:height .15s}
.hl-acento.nivel-3 span{height:30px;background:#fff}
.hl-acento.nivel-2 span{height:21px}
.hl-acento.nivel-1 span{height:12px;opacity:.75}
.hl-acento.nivel-0 span{height:4px;opacity:.3}
.hl-acento.uno span{background:#ffd27d}
.hl-acento small{font-weight:800;font-size:12px}
.hl-acento.activo{border-color:var(--aqua);box-shadow:0 0 0 2px rgba(32,231,223,.4)}
.hl-ayuda-mini{margin:8px 0 0;font-size:12.5px;color:rgba(234,250,248,.5);text-align:center}

.hl-mt-panel{min-width:0}
.hl-tempo{display:flex;align-items:center;justify-content:center;gap:14px}
.hl-redondo{flex:none;width:58px;height:58px;border-radius:50%;border:1.5px solid rgba(140,228,222,.35);background:#123f3b;color:#fff;font-size:30px;font-weight:700;cursor:pointer;touch-action:manipulation;user-select:none}
.hl-redondo:hover{background:#17504b}
.hl-bpm{text-align:center;min-width:0}
.hl-bpm input{width:3.4ch;background:transparent;border:0;color:#fff;font-family:var(--titulos);font-weight:700;font-size:clamp(64px,9vw,92px);line-height:1;text-align:center;padding:0;-moz-appearance:textfield}
.hl-bpm input::-webkit-outer-spin-button,.hl-bpm input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.hl-bpm span{display:block;font-size:13px;font-weight:800;letter-spacing:.2em;color:var(--menta)}
.hl-bpm em{display:block;font-style:italic;font-family:var(--titulos);font-size:17px;color:#ffd27d;margin-top:2px}
#mtDeslizador{margin-top:8px}
.hl-fila-btns{display:flex;gap:10px;margin-top:12px}
.hl-fila-btns .hl-btn-grande{flex:1}
.hl-tap{flex-direction:column;gap:0;min-width:120px;min-height:58px;border-radius:18px;touch-action:manipulation;user-select:none}
.hl-tap b{font-size:18px;letter-spacing:.12em}.hl-tap small{font-size:11px;color:rgba(234,250,248,.6)}
.hl-tap.pulsado{animation:hlTap .25s}
@keyframes hlTap{0%{background:var(--aqua);color:#06332f}100%{background:rgba(255,255,255,.07)}}
.hl-chip-compas{flex-direction:column;gap:0;min-width:48px;padding:5px 10px;line-height:1}
.hl-chip-compas b{font-family:var(--titulos);font-size:17px}
.hl-chip-compas i{display:block;width:16px;height:2px;background:currentColor;margin:2px 0;opacity:.7}
.hl-compas-otro{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px;font-weight:800;color:rgba(234,250,248,.75)}
.hl-compas-otro select{background:#123f3b;color:#fff;border:1px solid rgba(140,228,222,.3);border-radius:12px;padding:9px 12px;font-weight:800;font-size:16px}
.hl-compas-otro .hl-paso output{min-width:36px}
.hl-sonido{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:12px}
.hl-toggles{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.hl-toggle{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:12px;background:#123f3b;border:1px solid rgba(140,228,222,.2);font-weight:700;font-size:14px;cursor:pointer;color:#dff7f4}
.hl-toggle input{width:18px;height:18px;accent-color:var(--aqua)}
.hl-toggle:has(input:checked){border-color:var(--aqua);background:#164a45}
.hl-toggle-btn{font-family:var(--texto)}

.hl-practica{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
.hl-modulo{border-radius:16px;background:#0a201e;border:1px solid rgba(140,228,222,.12)}
.hl-modulo summary{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;list-style:none}
.hl-modulo summary::-webkit-details-marker{display:none}
.hl-modulo summary>span:nth-child(2){flex:1;min-width:0}
.hl-modulo summary b{display:block;font-size:15px;color:#fff}
.hl-modulo summary small{display:block;font-size:12.5px;color:rgba(234,250,248,.55)}
.hl-mod-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#123f3b;font-size:19px;flex:none}
.hl-mod-cuerpo{padding:0 14px 14px;display:grid;grid-template-columns:1fr;gap:10px}
.hl-mod-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.hl-switch{position:relative;flex:none;width:48px;height:28px}
.hl-switch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1}
.hl-switch i{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.15);transition:background .2s}
.hl-switch i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s}
.hl-switch input:checked+i{background:var(--aqua)}
.hl-switch input:checked+i::after{transform:translateX(20px)}
.hl-switch input:focus-visible+i{outline:3px solid var(--aqua);outline-offset:2px}

.hl-estado-mt{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.04);font-weight:700;color:rgba(234,250,248,.7);font-size:14px}
.hl-estado-mt b{color:#fff;font-variant-numeric:tabular-nums;margin-left:4px}
#mtModoTxt{color:#ffd27d}
.hl-favoritos{margin-top:18px}
.hl-fav{display:inline-flex;align-items:center}
.hl-fav .hl-chip{border-radius:12px 0 0 12px}
.hl-fav-x{min-height:42px;padding:0 10px;border-radius:0 12px 12px 0;border:1px solid rgba(140,228,222,.22);border-left:0;background:#0f3532;color:#ffb3b5;font-size:18px;cursor:pointer}
.hl-chip-ritmo{flex-direction:column;align-items:flex-start;gap:0;padding:6px 14px;line-height:1.2}
.hl-chip-ritmo small{font-size:12px;color:rgba(234,250,248,.6);font-weight:700}
.hl-aviso-mini{margin:16px 0 0;font-size:12.5px;color:rgba(234,250,248,.45)}

/* Destello de pantalla completa */
.hl-destello{position:fixed;inset:0;pointer-events:none;z-index:200;opacity:0}
.hl-destello.uno{background:radial-gradient(circle at center,rgba(255,210,125,.75),rgba(255,210,125,.35))}
.hl-destello.otro{background:radial-gradient(circle at center,rgba(32,231,223,.45),rgba(32,231,223,.18))}
.hl-destello.ya{animation:hlFlash .16s ease-out}
@keyframes hlFlash{0%{opacity:1}100%{opacity:0}}

/* Pantalla completa (proyección en clase) */
.hl-metronomo.pantalla-completa{border-radius:0;overflow:auto;padding:24px 4vw}
.hl-metronomo.pantalla-completa .hl-visor{max-width:min(70vh,640px)}
.hl-metronomo.pantalla-completa .hl-practica,.hl-metronomo.pantalla-completa .hl-favoritos,.hl-metronomo.pantalla-completa .hl-aviso-mini{display:none}

/* ---------- Información y llamado a la acción ---------- */
.hl-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.hl-info article{background:#fff;border-radius:var(--radio);padding:24px;box-shadow:var(--sombra);border:1px solid var(--linea)}
.hl-info h2{font-size:22px;color:var(--verde);margin-bottom:10px}
.hl-info p{margin:0 0 10px;color:var(--gris);font-size:16px}
.hl-pasos{margin:0;padding-left:20px;color:var(--gris);font-size:16px}
.hl-pasos li{margin-bottom:8px}
.hl-pasos b,.hl-info p b{color:var(--tinta)}
.hl-tabla{list-style:none;margin:0;padding:0}
.hl-tabla li{display:flex;flex-direction:column;padding:9px 0;border-bottom:1px solid var(--linea);font-size:15px}
.hl-tabla li:last-child{border-bottom:0}
.hl-tabla b{color:var(--tinta)}.hl-tabla span{color:var(--gris);font-variant-numeric:tabular-nums}
.hl-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:28px;padding:28px 30px;border-radius:var(--radio);color:#fff;
  background:linear-gradient(135deg,#06433d,#0a746b)}
.hl-cta h2{font-size:clamp(22px,3vw,28px);color:#fff}
.hl-cta p{margin:6px 0 0;color:rgba(255,255,255,.85)}
.hl-cta-btns{display:flex;flex-wrap:wrap;gap:10px}
.hl-cta .pg-btn-borde{color:#fff!important;border-color:rgba(255,255,255,.6)}
.hl-cta .pg-btn-borde:hover{background:#fff;color:var(--verde)!important}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hl-mt-grid{grid-template-columns:1fr}
  .hl-info-grid{grid-template-columns:1fr}
  .hl-pantalla{grid-template-columns:1fr}
  .hl-pantalla.con-clavijero{grid-template-columns:minmax(150px,200px) minmax(0,1fr);grid-template-areas:"clav med" "clav lec"}
}
@media (max-width:520px){
  .hl-pantalla.con-clavijero{grid-template-columns:1fr;grid-template-areas:"lec" "clav" "med"}
  .hl-pantalla.con-clavijero .hl-clav-svg{max-width:250px}
}
@media (max-width:640px){
  .hl-hero{padding:100px 0 26px}
  .hl-hero-fila{flex-direction:column;align-items:flex-start}
  .hl-pestanas{width:100%}.hl-pestanas a{flex:1;justify-content:center;padding:10px 8px}
  .hl-app{padding:14px;border-radius:22px;margin-inline:-6px}
  .hl-pantalla{padding:12px 8px}
  .hl-vientos{grid-template-columns:1fr}
  .hl-cuerda{min-width:0;flex:1 1 calc(33% - 8px);max-width:110px}
  .hl-practica{grid-template-columns:1fr}
  .hl-sonido{grid-template-columns:1fr 1fr}.hl-sonido .hl-campo:first-child{grid-column:1/-1}
  .hl-redondo{width:52px;height:52px}
  .hl-tap{min-width:96px}
  .hl-btn-grande{padding:0 20px;font-size:17px}
  .hl-cta{padding:22px}
}
@media (prefers-reduced-motion:reduce){
  .hl-m-aguja,.hl-c-pulso,.hl-cuerda{transition:none}
  .hl-clav-cuerda.vibra,.hl-clav-peg.sonando .hl-clav-boton{animation:none}
}

/* Los gráficos grandes no deben heredar el tamaño de icono (.pg svg{width:1em}) de paginas.css */
.pg .hl-medidor{width:100%;height:auto;max-width:440px;stroke:none}
.pg .hl-vista{width:100%;height:100%;stroke:none}
.pg .hl-medidor text,.pg .hl-vista text{stroke:none}
.vista-pendulo .hl-mt-centro{top:4%;left:auto;right:2%;bottom:auto;transform:none;width:auto;text-align:right}
.vista-pendulo .hl-mt-centro b{font-size:clamp(40px,7vw,56px);display:block}
.vista-pendulo .hl-mt-centro small{display:block;margin:0}