/* Detector de tonalidad y BPM — encaja con estilos.css/casa.css */
.det-hero{padding:3rem 0 1rem}
.det-hero h1{max-width:20ch}
.det-zona{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center;
  min-height:190px;margin:1.4rem 0 .8rem;padding:1.6rem;border:1.5px dashed rgba(124,90,240,.55);border-radius:1rem;
  background:rgba(124,90,240,.06);cursor:pointer;transition:background .2s,border-color .2s}
.det-zona:hover,.det-zona.encima{background:rgba(124,90,240,.14);border-color:var(--cyan,#4fd8ff)}
.det-zona b{font-size:1.15rem}
.det-zona small{color:var(--muted)}
.det-zona input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.det-privado{font-size:.85rem;color:var(--muted);margin:.2rem 0 1.2rem}
.det-resultados{display:grid;gap:1rem;margin:1rem 0 2rem}
.det-tarjeta{border:1px solid var(--line);border-radius:.9rem;padding:1rem 1.1rem;background:rgba(10,8,24,.55)}
.det-tarjeta.det-fallo{border-color:#a3445a}
.det-archivo{font-size:.85rem;color:var(--muted);margin:0 0 .5rem;word-break:break-all}
.det-estado{margin:0}
.det-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem}
.det-dato span{display:block;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.det-dato b{font-size:1rem}
.det-dato small{display:block;color:var(--muted);font-size:.78rem}
.det-grande b{font-size:1.6rem;background:linear-gradient(90deg,#b49cff,#4fd8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.det-pie{margin:.8rem 0 0;font-size:.8rem;color:var(--muted)}
.det-copiar{background:none;border:1px solid var(--line);border-radius:999px;color:var(--text);padding:2px 10px;cursor:pointer;font:inherit}
.det-tap-caja{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin:1rem 0}
.det-tap{width:120px;height:120px;border-radius:50%;border:2px solid #7c5af0;background:rgba(124,90,240,.12);color:var(--text);
  font:inherit;font-size:.8rem;padding:.6rem;cursor:pointer}
.det-tap.golpe{animation:det-golpe .18s ease-out}
@keyframes det-golpe{from{transform:scale(.92);background:rgba(79,216,255,.35)}to{transform:scale(1)}}
.det-tap-res b{font-size:1.6rem}
.det-q{margin:2.2rem 0}
.det-q h2{font-size:1.35rem;margin-bottom:.5rem}
.det-tabla{width:100%;border-collapse:collapse;font-size:.9rem;margin:.8rem 0}
.det-tabla th,.det-tabla td{border-bottom:1px solid var(--line);padding:.4rem .5rem;text-align:left}
.det-tabla th{color:var(--muted);font-weight:600}
.det-scroll{overflow-x:auto}
.det-faq details{border-bottom:1px solid var(--line);padding:.7rem 0}
.det-faq summary{cursor:pointer;font-weight:600}
.det-faq p{margin:.5rem 0 0}
.det-cta{border-left:3px solid #7c5af0;padding:.9rem 1.1rem;background:rgba(124,90,240,.07);border-radius:.4rem}
.det-otras{display:flex;flex-wrap:wrap;gap:.6rem;margin:.6rem 0}
.det-siguiente{margin:0 0 1.5rem}
.det-siguiente p{margin:.3rem 0}
.det-botones{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.8rem!important}
.det-circulo-caja{max-width:420px;margin:1rem auto}
.det-circulo{width:100%;height:auto;display:block}
.dc-casilla path{fill:rgba(124,90,240,.10);stroke:rgba(180,156,255,.35);stroke-width:1;transition:fill .3s}
.dc-men path{fill:rgba(79,216,255,.06)}
.dc-casilla text{fill:var(--text,#e8e6f5);font-size:15px;text-anchor:middle;font-weight:600}
.dc-men text{font-size:12px;fill:var(--muted,#a9a4c7)}
.dc-arm{fill:var(--muted,#a9a4c7);font-size:9px;text-anchor:middle}
.dc-centro{fill:var(--muted,#a9a4c7);font-size:12px;text-anchor:middle}
.dc-vecina path{fill:rgba(124,90,240,.38)}
.dc-on path{fill:#7c5af0;stroke:#4fd8ff;stroke-width:2}
.dc-on text,.dc-vecina text{fill:#fff}
.det-principales{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-bottom:.9rem}
.det-principales .det-dato b{font-size:2rem}
.det-principales .det-dato small{font-size:.9rem;margin-top:.15rem}
.det-detalle{padding-top:.8rem;border-top:1px solid var(--line)}
.det-detalle .det-dato b{font-size:.92rem}