/* p-sonido.css · página Video · sonido · clases so-* · solo tokens de tokens.css (sin hex, sin sombras, sin degradados, sin rebotes) */

/* ---- ritmo de la página (solo aquí): portada baja, títulos a todo el ancho ---- */
.so-pg .hero{padding:var(--s-48) 0 var(--s-32)}
.so-pg .sec-head{max-width:64em;margin-bottom:var(--s-24)}
.so-pg h1,.so-pg h2,.so-pg .lede{text-wrap:balance}
.so-pg .mas{margin-top:var(--s-24)}.so-pg .mas+.mas{margin-top:0}

/* ---- mini-mezclador ---- */
.so-mix{background:var(--superficie);border-radius:var(--r-tarjeta);padding:var(--s-24)}
@media (max-width:620px){.so-mix{padding:var(--s-16)}}
.so-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-12) var(--s-24);margin-bottom:var(--s-16)}
.so-top .so-t{margin-left:auto;font-size:var(--t-15);font-variant-numeric:tabular-nums;color:var(--texto-2)}
.so-chk{display:inline-flex;align-items:center;gap:var(--s-8);font-size:var(--t-15);color:var(--texto-2);cursor:pointer}
.so-chk input{accent-color:var(--acento);width:18px;height:18px;margin:0}
.so-strips{display:grid;gap:var(--s-8)}
.so-strip{display:grid;grid-template-columns:72px minmax(0,1fr) 150px;gap:var(--s-16);align-items:center}
@media (max-width:620px){.so-strip{grid-template-columns:56px minmax(0,1fr);row-gap:2px}.so-strip .so-db{grid-column:2}}
.so-nm{font-size:var(--t-15);font-weight:var(--bold)}
.so-meter{position:relative;height:18px;background:var(--elevado);border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-pill);overflow:hidden}
.so-meter i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--texto-2);border-radius:var(--r-pill)}
.so-meter.mus i{background:var(--acento)}
.so-meter.clc i{background:var(--texto)}
.so-meter s{position:absolute;top:0;bottom:0;background:transparent;border-left:var(--borde-encendido) dashed var(--texto);border-right:var(--borde-encendido) dashed var(--texto);pointer-events:none}
.so-db{font-size:var(--t-15);font-variant-numeric:tabular-nums;white-space:nowrap}
.so-db em{font-style:normal;font-size:var(--t-12);color:var(--texto-2);margin-left:var(--s-4)}
.so-esc{display:grid;grid-template-columns:72px minmax(0,1fr) 150px;gap:var(--s-16);font-size:var(--t-12);color:var(--texto-2);font-variant-numeric:tabular-nums;margin-top:var(--s-4)}
.so-esc div{display:flex;justify-content:space-between}
.so-esc div span:nth-child(n){flex:none}
@media (max-width:620px){.so-esc{grid-template-columns:56px minmax(0,1fr)}}
.so-esc>span{display:block}
.so-fader{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-12) var(--s-16);margin-top:var(--s-16);padding-top:var(--s-16);border-top:var(--borde-ancho) solid var(--borde)}
.so-fader label{font-size:var(--t-15);font-weight:var(--bold)}
.so-fader input[type="range"]{flex:1;min-width:180px;accent-color:var(--acento);height:28px;margin:0}
.so-msg{margin:0;font-size:var(--t-17);min-height:1.5em;flex-basis:100%}
@media (max-width:760px){.so-msg{min-height:3em}}
.so-msg.ok{color:var(--texto);font-weight:var(--bold)}
.so-msg b{color:var(--acento-texto)}
.so-tl{margin-top:var(--s-16);display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 var(--s-16);position:relative}
@media (max-width:620px){.so-tl{grid-template-columns:56px minmax(0,1fr)}}
.so-ln{grid-column:1/2;font-size:var(--t-12);font-weight:var(--bold);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2);display:flex;align-items:center;min-height:44px}
.so-lane{position:relative;height:44px;border-top:var(--borde-ancho) solid var(--borde)}
.so-lane.mu{height:72px}
.so-b{position:absolute;top:8px;bottom:8px;left:var(--l);width:var(--w);background:var(--elevado);border:var(--borde-ancho) solid var(--texto-3);border-radius:6px;display:flex;align-items:center;padding:0 var(--s-8);font-size:var(--t-12);color:var(--texto);white-space:nowrap;overflow:hidden}
.so-b.k{background:var(--acento-suave);border:var(--borde-encendido) solid var(--acento)}
.so-lane svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.so-lane svg path{fill:none;stroke:var(--acento);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.so-mk{position:absolute;top:6px;bottom:6px;left:var(--l);width:3px;margin-left:-1.5px;border-radius:2px;background:var(--texto)}
.so-mk.k{background:var(--acento)}
.so-mk.p{background:var(--texto-3);top:14px;bottom:14px}
.so-mkt{position:absolute;top:50%;left:calc(var(--l) + 6px);transform:translateY(-50%);font-size:var(--t-12);color:var(--texto-2);white-space:nowrap}
.so-eje{grid-column:2/3;position:relative;height:22px;border-top:var(--borde-ancho) solid var(--texto)}
.so-eje i{position:absolute;top:4px;left:var(--l);white-space:nowrap;font-style:normal;font-size:var(--t-12);color:var(--texto-2);transform:translateX(-50%);font-variant-numeric:tabular-nums}
.so-eje i:first-child{transform:none}.so-eje i:last-child{transform:translateX(-100%)}
.so-ph{position:absolute;top:0;bottom:22px;left:0;width:2px;background:var(--texto);pointer-events:none;opacity:0;transform:translateX(var(--x,0px))}
.so-tl.on .so-ph{opacity:1}
.so-gaps{position:absolute;left:var(--l);width:var(--w);top:0;bottom:0;background:var(--acento-suave);border-left:var(--borde-ancho) dashed var(--acento);border-right:var(--borde-ancho) dashed var(--acento)}

/* ---- música: tres preguntas ---- */
.so-dos{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-48);align-items:start}
@media (max-width:900px){.so-dos{grid-template-columns:minmax(0,1fr);gap:var(--s-32)}}
.so-def{margin:0}
.so-def dt{font-size:var(--t-12);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2);font-weight:var(--bold);margin-bottom:var(--s-4)}
.so-def dd{margin:0 0 var(--s-16);font-size:var(--t-17)}
.so-q{list-style:none;margin:0;padding:0;border-top:var(--borde-encendido) solid var(--texto)}
.so-q li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-16);align-items:center;padding:var(--s-16) 0;border-bottom:var(--borde-ancho) solid var(--borde)}
.so-q b{display:block;font-size:var(--t-19);letter-spacing:var(--trk-19);line-height:1.25}
.so-q span.d{display:block;font-size:var(--t-15);color:var(--texto-2);margin-top:2px}
.so-q .r{font-size:var(--t-12);font-weight:var(--bold);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;padding:4px 14px;border-radius:var(--r-pill);border:var(--borde-ancho) solid var(--borde);color:var(--texto-2)}
.so-q .r.si{background:var(--acento-suave);border-color:var(--acento);color:var(--acento-texto);font-size:var(--t-12)}
.so-pie{margin:var(--s-16) 0 0;font-size:var(--t-15);color:var(--texto-2);max-width:46em}
.so-mix .so-lane{height:36px}.so-mix .so-lane.mu{height:56px}.so-mix .so-ln{min-height:36px}.so-mix .so-b{top:6px;bottom:6px}

/* ---- el clic ---- */
.so-clic-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-48);align-items:stretch}
.so-der{min-width:0}
@media (max-width:900px){.so-clic-g{grid-template-columns:minmax(0,1fr);gap:var(--s-32)}}
.so-stage{--alto:340px;padding:36px 0 56px}
.so-cap{--W:72px;position:relative;width:var(--W);height:calc(var(--W)*3.076);border-radius:calc(var(--W)/2);background:var(--apagado)}
.so-cap::after{content:"";position:absolute;left:calc(var(--W)*.0445);top:calc(var(--W)*2.1205);width:calc(var(--W)*.911);height:calc(var(--W)*.911);border-radius:50%;background:var(--elevado)}
.is-playing .so-cap{animation:so-azul 200ms var(--mov-micro) 500ms both}
.is-playing .so-cap::after{animation:so-sube 500ms var(--mov-estado) both}
@keyframes so-sube{from{top:calc(var(--W)*2.1205)}to{top:calc(var(--W)*.0445)}}
@keyframes so-azul{from{background:var(--apagado)}to{background:var(--acento)}}
.so-cl{position:absolute;left:calc(50% + 70px);top:50%;font-size:var(--t-19);font-weight:var(--bold);letter-spacing:var(--trk-19);color:var(--acento-texto);opacity:0}
.is-playing .so-cl{animation:so-cl 900ms linear 500ms both}
@keyframes so-cl{0%{opacity:0}10%{opacity:1}70%{opacity:1}100%{opacity:0}}
.so-lbl{position:absolute;left:var(--s-16);top:var(--s-12);font-size:var(--t-12);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;font-weight:var(--bold);color:var(--texto-2)}
.so-btns{display:flex;flex-wrap:wrap;gap:var(--s-8);margin-top:var(--s-16)}
.so-aviso{max-width:46em}
.so-aviso{margin:var(--s-12) 0 0;font-size:var(--t-15);color:var(--texto-2)}
.so-wave{background:var(--superficie);border-radius:var(--r-tarjeta);padding:var(--s-24) var(--s-24) var(--s-16)}
.so-wave svg{display:block;width:100%;height:120px}
.so-wave .ax{display:flex;justify-content:space-between;font-size:var(--t-12);color:var(--texto-2);font-variant-numeric:tabular-nums;margin-top:var(--s-8)}
.so-wave .nt{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-24);margin-top:var(--s-8);font-size:var(--t-15);color:var(--texto-2)}
.so-wave .nt b{color:var(--texto)}
.so-sub{margin:var(--s-32) 0 var(--s-12);font-size:var(--t-12);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2);font-weight:var(--bold)}
.so-sub:first-child{margin-top:0}
.so-fotos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-16)}
@media (max-width:620px){.so-fotos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.so-ft{margin:0}
.so-ft .c{position:relative;height:160px;display:grid;place-items:center;background:var(--elevado);border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-captura)}
.so-ft .c .so-cap{--W:36px}
.so-ft .c .so-cap::after{top:calc(var(--W)*var(--k,2.1205))}
.so-ft .c .so-cap.on{background:var(--acento)}
.so-ft figcaption{font-size:var(--t-12);line-height:1.35;color:var(--texto-2);margin-top:var(--s-8)}
.so-ft figcaption b{display:block;color:var(--texto);font-size:var(--t-12)}
.so-mapa{margin-top:var(--s-8)}
.so-mapa .so-lane{height:48px}
.so-mapa .so-b{top:6px;bottom:6px;font-size:var(--t-12)}
.so-mapa .so-b.k{background:var(--acento-suave)}
.code.so-c{margin-top:var(--s-12)}

/* ---- silencio ---- */
.so-sil{--alto:260px;padding:var(--s-16) var(--s-24) 56px;place-items:stretch}
.so-sil .so-tl{width:100%;margin:0;align-self:center}
.so-sil .so-ph{opacity:1;transform:translateX(var(--lx0,0px))}
.so-sil.is-playing .so-ph{animation:so-barrido 6s linear both}
@keyframes so-barrido{from{transform:translateX(var(--lx0))}to{transform:translateX(var(--lx1))}}
.so-sil .so-b.v2{opacity:1}
.is-playing.so-sil .so-b.v2{animation:so-v2 300ms var(--mov-entrada) both;animation-delay:3.7s}
.is-playing.so-sil .so-gaps{animation:so-v2 200ms var(--mov-entrada) both;animation-delay:3.4s}
@keyframes so-v2{from{opacity:0}to{opacity:1}}
.so-reg{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-16)}
.so-reg li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--s-12);font-size:var(--t-17)}
.so-reg li>b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:var(--r-pill);border:var(--borde-ancho) solid var(--borde);font-size:var(--t-12);color:var(--texto-2);margin-top:3px}
.so-reg li.k>b{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}
.so-reg p{margin:0}

/* ---- volumen ---- */
.so-vol{position:relative;--b:20px;background:var(--superficie);border-radius:var(--r-tarjeta);padding:0;overflow:hidden}
.so-vol .pk{position:absolute;left:calc(52px + var(--i)*((100% - 52px - 190px)/22));width:calc((100% - 242px)/22*.62);top:var(--t);bottom:var(--b);background:var(--texto-3);border-radius:2px}
.so-vol .li{position:absolute;left:0;right:0;height:0}
.so-vol .li.tp{border-top:var(--borde-encendido) dashed var(--texto)}
.so-vol .li.lu{border-top:3px solid var(--acento)}
.so-vol .li span{position:absolute;right:16px;font-size:var(--t-12);font-weight:var(--bold);color:var(--texto);background:var(--superficie);padding:0 var(--s-8);line-height:1.2}
.so-vol .li.tp span{top:6px}.so-vol .li.lu span{top:-24px}
.so-vol .li.lu span em,.so-vol .li.tp span em{font-style:normal;display:block;font-weight:var(--regular);color:var(--texto-2)}
.so-vol .db{position:absolute;left:12px;font-size:var(--t-12);color:var(--texto-2);font-variant-numeric:tabular-nums;transform:translateY(-50%)}
@media (max-width:700px){.so-vol .pk{left:calc(44px + var(--i)*((100% - 44px - 140px)/22));width:calc((100% - 184px)/22*.6)}.so-vol .li span{right:8px}}
.so-glos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-32);margin-top:var(--s-32)}
.so-vsplit{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-48);align-items:center}
@media (max-width:900px){.so-vsplit{grid-template-columns:minmax(0,1fr);gap:var(--s-24)}}
.so-vsplit .so-pie{margin-top:var(--s-8)}
.so-glos.so-vd{grid-template-columns:minmax(0,1fr);gap:var(--s-24);margin-top:0}
@media (max-width:700px){.so-glos{grid-template-columns:minmax(0,1fr);gap:var(--s-16)}}
.so-glos div{border-top:var(--borde-encendido) solid var(--texto);padding-top:var(--s-12)}
.so-glos b{display:block;font-size:var(--t-19);letter-spacing:var(--trk-19);margin-bottom:var(--s-4)}
.so-glos span{font-size:var(--t-15);color:var(--texto-2)}

/* ---- flujo de producción ---- */
.so-flujo{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-8);counter-reset:p}
@media (max-width:760px){.so-flujo{grid-template-columns:repeat(2,minmax(0,1fr))}.so-flujo li:last-child{grid-column:1/-1}.so-flujo button{padding:var(--s-12) var(--s-16)}.so-flujo .n{margin-bottom:var(--s-8)}}
.so-flujo button{all:unset;box-sizing:border-box;display:block;width:100%;height:100%;cursor:pointer;padding:var(--s-16);border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-tarjeta);background:var(--fondo);transition:background var(--dur-micro) var(--mov-micro),border-color var(--dur-micro) var(--mov-micro);position:relative}
.so-flujo button:hover{border-color:var(--texto-2)}
.so-flujo button:focus-visible{outline:var(--foco-ancho) solid var(--acento);outline-offset:2px}
.so-flujo button[aria-selected="true"]{background:var(--acento-suave);border:var(--borde-encendido) solid var(--acento)}
.so-flujo .n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:var(--r-pill);border:var(--borde-encendido) solid var(--texto-2);font-size:var(--t-15);font-weight:var(--bold);margin-bottom:var(--s-12)}
.so-flujo button[aria-selected="true"] .n{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}
.so-flujo b{display:block;font-size:var(--t-19);letter-spacing:var(--trk-19)}
.so-flujo em{display:block;font-style:normal;font-size:var(--t-12);color:var(--texto-2);margin-top:var(--s-4);font-variant-numeric:tabular-nums}
.so-fd[hidden]{display:none}
.so-fd{margin-top:var(--s-16);padding:var(--s-24);background:var(--superficie);border-radius:var(--r-tarjeta);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--s-24) var(--s-48)}
@media (max-width:760px){.so-fd{grid-template-columns:minmax(0,1fr);gap:var(--s-16)}}
.so-fd dt{font-size:var(--t-12);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2);font-weight:var(--bold);margin-bottom:var(--s-4)}
.so-fd dd{margin:0;font-size:var(--t-17)}
.so-fd code{font-size:.9em}
.so-mudo{margin-top:var(--s-32)}
.so-bars{display:grid;gap:var(--s-12);margin-top:var(--s-16)}
.so-br{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:var(--s-16);align-items:center;font-size:var(--t-15)}
@media (max-width:620px){.so-br{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}}
.so-br i{display:block;height:22px;border-radius:4px;background:var(--apagado);width:calc(var(--v)/8*100%);min-width:24px;font-style:normal;color:var(--sobre-acento);font-size:var(--t-12);font-weight:var(--bold);padding:3px var(--s-8);transform-origin:left}
.so-br.k i{background:var(--acento)}
.is-lit .so-br i{animation:so-bar 800ms var(--mov-estado) both}
@keyframes so-bar{from{transform:scaleX(0)}to{transform:none}}

/* ---- exportar ---- */
.so-zonas{display:grid;grid-template-columns:minmax(0,1.778fr) minmax(0,.5625fr) minmax(0,.8fr);gap:var(--s-24);align-items:start}
@media (max-width:620px){.so-zonas{grid-template-columns:minmax(0,.5625fr) minmax(0,.8fr);gap:var(--s-16) var(--s-12)}.so-zonas .so-z:first-child{grid-column:1/-1}}
.so-z{margin:0}
.so-z .f{position:relative;width:100%;background:var(--superficie);border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-campo);overflow:hidden}
.so-z .f i{position:absolute;border:var(--borde-encendido) dashed var(--acento);background:var(--acento-suave)}
.so-z .f i::after{content:"Zona segura";position:absolute;left:var(--s-8);top:var(--s-4);font-size:var(--t-12);font-weight:var(--bold);color:var(--acento-texto);letter-spacing:0}
.so-z figcaption{font-size:var(--t-12);line-height:1.35;color:var(--texto-2);margin-top:var(--s-8)}
.so-z figcaption span{display:block}
.so-z figcaption b{display:block;color:var(--texto);font-size:var(--t-15)}
.so-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-16) var(--s-48);margin-top:var(--s-24)}
@media (max-width:760px){.so-spec{grid-template-columns:minmax(0,1fr)}}
.so-ex{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:var(--s-48);align-items:start}
@media (max-width:900px){.so-ex{grid-template-columns:minmax(0,1fr);gap:var(--s-32)}}
.so-ent ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-12)}
.so-ent li{display:grid;gap:var(--s-4);justify-items:start}
.so-ent li span{font-size:var(--t-15);color:var(--texto-2)}
.so-ent .copy{max-width:100%;overflow-wrap:anywhere;text-align:left}

/* ---- lo que no se hace ---- */
.so-nos{display:grid;gap:var(--s-48)}
.so-nos .pair{gap:var(--s-16)}
.so-nos .so-esq{max-width:460px}
@media (min-width:1301px){.so-nos{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-32)}.so-nos .pair{grid-template-columns:minmax(0,1fr);gap:var(--s-24)}.so-nos .so-esq{max-width:none}}
.so-pt{margin:0 0 var(--s-16);font-size:var(--t-12);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2);font-weight:var(--bold)}
.so-esq{position:relative;width:100%;aspect-ratio:16/9;border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-captura);overflow:hidden;background:var(--superficie)}
.dont .so-esq{border-color:var(--texto-3)}
.so-esq svg{display:block;width:100%;height:100%}
.so-esq text{font-family:var(--fuente)}

.so-glos.t3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.so-glos.t3{grid-template-columns:minmax(0,1fr)}}
.so-lane.vz .so-gaps{top:8px;bottom:8px}
.so-lane.sl{height:36px}
.so-lane.sl .so-gaps{top:6px;bottom:6px}
.so-lane.sl .so-mkt{left:auto;right:calc(100% - var(--l) + 8px)}

.so-mk.l+.so-mkt{left:auto;right:calc(100% - var(--l) + 6px)}
.code pre{padding-right:64px}
.so-stack{min-width:600px}
@media (max-width:700px){
  .so-stack{min-width:0}
  .so-stack thead{display:none}
  .so-stack tr{display:block;border-bottom:var(--borde-ancho) solid var(--borde);padding:var(--s-12) 0}
  .so-stack td{display:block;border:0;padding:2px 0}
  .so-stack td::before{content:attr(data-l);display:block;margin-top:var(--s-8);font-size:var(--t-12);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2);font-weight:var(--bold)}
  .so-stack td:first-child::before{display:none}
}

/* en celular el botón «Copiar» va en su propia franja y no tapa el código */
@media (max-width:700px){.code{padding-top:var(--s-48)}}
@media (max-width:620px){.so-mapa{min-width:560px}}