/* ══ INTERRUPTOR DE SONIDO de las páginas sueltas (perfil y manifiesto) ════
   El mismo de la home, en chico: palabra + onda + perilla. Toma el color del
   header (currentColor), así sirve sobre claro y sobre oscuro. Lo maneja
   musica.js: suelto arma su propia música; dentro de la capa de la home
   maneja la de la home. La onda se mueve SÓLO cuando de verdad suena. */
.sn{display:inline-flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;
  padding:10px 0;color:inherit;font-family:var(--sans);font-weight:500;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase}
.sn:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
.sn__eq{display:inline-flex;align-items:center;gap:2px;height:12px;width:0;overflow:hidden;opacity:0;
  transition:width .45s cubic-bezier(.65,0,.35,1),opacity .3s ease}
.sn[data-suena] .sn__eq{width:12px;opacity:1}
.sn__eq i{width:2px;height:3px;border-radius:2px;background:currentColor}
.sn[data-suena] .sn__eq i{animation:sn-onda 1.1s ease-in-out infinite}
.sn[data-suena] .sn__eq i:nth-child(2){animation-delay:-.35s}
.sn[data-suena] .sn__eq i:nth-child(3){animation-delay:-.7s}
@keyframes sn-onda{0%,100%{height:3px}50%{height:11px}}
.sn__sw{position:relative;flex:0 0 auto;width:36px;height:22px;border-radius:999px;
  background:color-mix(in srgb,currentColor 22%,transparent);transition:background-color .35s ease}
.sn__sw i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:var(--sn-perilla,#fff);box-shadow:0 2px 6px rgba(0,0,0,.18);
  transition:transform .42s cubic-bezier(.34,1.3,.64,1)}
.sn[aria-pressed="true"] .sn__sw{background:currentColor}
.sn[aria-pressed="true"] .sn__sw i{transform:translateX(14px)}
@media(max-width:480px){.sn__txt{display:none}.sn{padding:12px 4px}}
@media(prefers-reduced-motion:reduce){.sn[data-suena] .sn__eq i{animation:none;height:11px}}