/* Demo pública: composición propia, aislada de la portada institucional. */
.demo-page .demo-hero{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:32px;padding:34px 25px 42px;position:relative}
.demo-page .demo-hero-copy{position:relative;z-index:1;min-width:0}
.demo-page .demo-hero .eyebrow{font-size:10px;letter-spacing:1.6px;display:flex;align-items:center;gap:10px}
.demo-page .demo-hero h1{font-size:clamp(55px,6.7vw,96px);line-height:.98;letter-spacing:-4px;margin:24px 0}
.demo-page .demo-lead{font-size:27px;line-height:1.2;letter-spacing:-.7px}
.demo-page .demo-description{font-size:16px;color:var(--muted);line-height:1.6;max-width:440px;margin-top:20px}
.demo-page .demo-hero-art{min-width:0;margin-inline:-50px -20px;align-self:center;position:relative}
.demo-page .demo-hero-art img{display:block;width:100%;height:auto}
.demo-page .demo-hero-art figcaption{text-align:right;font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin:0 30px 0 0}
.demo-page .demo-first{max-width:460px;margin-top:27px;border-top:1px solid var(--line);padding-top:17px}
.demo-page .demo-first>div{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:13px;font-size:12px}
.demo-page .demo-first .eyebrow{font-size:9px;color:#9f3517;letter-spacing:1px}
.demo-page audio{display:block;width:100%;height:44px;accent-color:var(--orange);border-radius:0;color-scheme:light}
.demo-page .demo-note{font-size:11px;color:var(--muted);margin-top:12px;line-height:1.6}
.demo-page .demo-index{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line);padding:0 25px}
.demo-page .demo-index a{display:flex;gap:20px;align-items:center;font-size:14px;padding:23px 0}
.demo-page .demo-index a+a{border-left:1px solid var(--line);padding-left:28px}
.demo-page .demo-index span{font-size:11px;color:#a23617}
.demo-page .demo-index a:hover{color:#a23617}
.demo-page .demo-section{padding:78px 25px 0;scroll-margin-top:30px}
.demo-page .demo-section-heading{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:37px}
.demo-page .demo-section-heading h2{font-size:clamp(34px,3.6vw,50px);line-height:1.04;letter-spacing:-1.9px;margin-top:20px}
.demo-page .demo-section-heading>p{font-size:15px;line-height:1.7;color:var(--muted);max-width:460px}
.demo-page .demo-section .eyebrow,.demo-page .demo-takeaway .eyebrow{font-size:10px;letter-spacing:1.5px}
.demo-page .demo-two{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.demo-page .demo-recording,.demo-page .demo-scenario{min-width:0;border-top:1px solid var(--ink);padding-top:21px}
.demo-page .demo-recording h3,.demo-page .demo-scenario h3{font-weight:600;font-size:27px;letter-spacing:-.6px;line-height:1.15;margin-top:18px}
.demo-page .demo-recording>p:not(.eyebrow),.demo-page .demo-scenario>p:not(.eyebrow){font-size:14px;line-height:1.65;color:var(--muted);margin-top:16px;max-width:475px}
.demo-page .demo-options{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:10px;align-items:center;margin:24px 0 17px}
.demo-page .demo-recording .demo-options{grid-template-columns:auto minmax(0,1fr)}
.demo-page .demo-options label,.demo-page .demo-scenario-select label{font-size:11px;color:var(--muted);line-height:1.4}
.demo-page select{font:inherit;font-size:13px;padding:12px 28px 12px 11px;border:1px solid #a3a79d;border-radius:0;background:transparent;color:var(--ink);width:100%;min-width:0;max-width:100%}
.demo-page select:focus-visible{outline:2px solid #b63b17;outline-offset:3px}
.demo-page .demo-scenario-select{margin-top:24px;display:grid;gap:9px}
.demo-page .demo-transcript{margin-top:20px;border-block:1px solid #b5b9b0}
.demo-page .demo-transcript summary{cursor:pointer;font-size:12px;list-style:none;padding:17px 0;display:flex;justify-content:space-between;align-items:center;gap:20px}
.demo-page .demo-transcript summary::-webkit-details-marker{display:none}
.demo-page .demo-transcript[open] summary>span{transform:rotate(90deg)}
.demo-page summary:focus-visible{outline:2px solid #b63b17;outline-offset:4px}
.demo-page .demo-transcript ol{list-style:none;padding:0;margin:0 0 18px;max-height:400px;overflow-y:auto;overscroll-behavior:contain}
.demo-page .demo-turn{width:100%;text-align:left;padding:16px 13px;border-top:1px solid #b5b9b0;display:block;line-height:1.6}
.demo-page .demo-turn>span{font-size:10px;letter-spacing:1px;text-transform:uppercase;display:flex;gap:15px;color:var(--muted)}
.demo-page .demo-turn p{font-size:14px;margin-top:7px}
.demo-page .demo-transcript li[data-active=true]{background:#e7e7de;border-left:3px solid #b63b17}
.demo-page .demo-turn:hover{background:#e9e9e1}
.demo-page .demo-audio-error{font-size:12px!important;color:#9b2c15!important;margin-top:12px!important}
.demo-page .demo-context{border-bottom:1px solid var(--line);margin-top:30px;padding:0 0 22px}
.demo-page .demo-context summary{cursor:pointer;font-size:15px;line-height:1.6}
.demo-page .demo-context p{font-size:14px;color:var(--muted);line-height:1.8;max-width:850px;margin-top:18px}
.demo-page .demo-intros{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.demo-page .demo-intros article{border-top:1px solid var(--line);padding:22px 0;min-width:0}
.demo-page .demo-voice-dot{display:block;width:13px;height:13px;background:var(--orange);margin-bottom:21px;border-radius:50%}
.demo-page .demo-intros article:nth-child(2) .demo-voice-dot{background:var(--ink)}
.demo-page .demo-intros article:nth-child(3) .demo-voice-dot{background:#7d8473}
.demo-page .demo-intros h3{font-size:30px;font-weight:400;letter-spacing:-.8px}
.demo-page .demo-intros p{font-size:12px;color:var(--muted);line-height:1.5;margin:9px 0 18px}
.demo-page .demo-compare{display:grid;grid-template-columns:1fr 1.2fr;gap:70px;background:#e9e9e1;padding:34px;margin-top:24px}
.demo-page .demo-compare h3{font-size:31px;line-height:1.15;font-weight:400;letter-spacing:-.8px;margin:22px 0 18px}
.demo-page .demo-compare>div{min-width:0}
.demo-page .demo-compare>div>p:not(.eyebrow){font-size:14px;line-height:1.7;color:var(--muted);max-width:300px}
.demo-page .demo-compare .demo-scenario-select{margin-top:0}
.demo-page .demo-takeaway{border-block:1px solid var(--line);margin-top:78px;padding:38px 25px;display:flex;gap:40px;justify-content:space-between;align-items:center}
.demo-page .demo-takeaway h2{font-size:39px;line-height:1.05;letter-spacing:-1.5px;margin-top:20px}
.demo-page .demo-takeaway p:not(.eyebrow){font-size:14px;color:var(--muted);line-height:1.7;max-width:470px;margin-top:20px}
.demo-page .closing{padding-top:60px}
@media(max-width:1000px){.demo-page .demo-hero{gap:10px}.demo-page .demo-hero h1{font-size:62px;letter-spacing:-3px}.demo-page .demo-options{grid-template-columns:auto 1fr}.demo-page .demo-compare{gap:35px}.demo-page .demo-hero-art{margin-left:-30px}}
@media(max-width:800px){.demo-page .demo-hero{grid-template-columns:1fr;padding:25px 0 20px;gap:0}.demo-page .demo-hero-copy{max-width:none}.demo-page .demo-hero h1{font-size:clamp(52px,10vw,74px);margin:22px 0;letter-spacing:-2.8px}.demo-page .demo-hero .eyebrow{font-size:9px;letter-spacing:1.2px}.demo-page .demo-lead{font-size:23px}.demo-page .demo-description{font-size:15px;max-width:470px;margin-top:18px}.demo-page .demo-first{max-width:470px;margin-top:24px}.demo-page .demo-first>div{font-size:11px;gap:10px}.demo-page .demo-first .eyebrow{font-size:8px;letter-spacing:.7px}.demo-page .demo-note{font-size:10px}.demo-page .demo-hero-art{margin:12px 0 0;width:100%;max-width:600px;justify-self:center}.demo-page .demo-hero-art img{max-height:300px;object-fit:contain}.demo-page .demo-hero-art figcaption{font-size:7px;margin:0 0 18px}.demo-page .demo-index{padding:0;grid-template-columns:1fr 1fr 1fr}.demo-page .demo-index a{font-size:10px;gap:7px;padding:18px 0;white-space:nowrap}.demo-page .demo-index a+a{padding-left:10px}.demo-page .demo-index span{font-size:9px}.demo-page .demo-section{padding:47px 0 0;scroll-margin-top:20px}.demo-page .demo-section-heading{grid-template-columns:1fr;gap:22px;margin-bottom:28px}.demo-page .demo-section-heading h2{font-size:37px;letter-spacing:-1.5px;margin-top:17px}.demo-page .demo-section-heading>p{font-size:14px;max-width:500px}.demo-page .demo-two{grid-template-columns:1fr;gap:36px}.demo-page .demo-recording h3,.demo-page .demo-scenario h3{font-size:25px}.demo-page .demo-options{grid-template-columns:auto 1fr auto 1fr;gap:8px}.demo-page .demo-options label{font-size:10px}.demo-page select{font-size:12px;padding:12px 18px 12px 8px}.demo-page .demo-intros{grid-template-columns:1fr;gap:10px}.demo-page .demo-intros article{display:grid;grid-template-columns:16px 1fr;column-gap:15px;align-items:center;padding:20px 0 24px}.demo-page .demo-voice-dot{margin:0;grid-row:1/3;align-self:start;margin-top:8px}.demo-page .demo-intros h3{font-size:27px}.demo-page .demo-intros p{margin:7px 0 16px}.demo-page .demo-intros audio{grid-column:2}.demo-page .demo-compare{grid-template-columns:1fr;gap:27px;padding:24px 18px;margin-top:10px}.demo-page .demo-compare h3{font-size:29px;margin:17px 0}.demo-page .demo-takeaway{margin-top:45px;padding:31px 0;display:block}.demo-page .demo-takeaway h2{font-size:36px}.demo-page .demo-takeaway .button{margin-top:25px}.demo-page .closing{padding-top:37px}.demo-page .demo-context summary{font-size:14px}}
@media(max-width:360px){.demo-page .demo-options{grid-template-columns:auto 1fr}.demo-page .demo-index a{font-size:9px;gap:5px}.demo-page .demo-first>div{align-items:start;flex-direction:column;gap:8px}}

/* Reproductores SAIL y jerarquía del archivo sonoro. */
.demo-page .demo-hero{grid-template-columns:1fr 1.12fr;padding-top:22px;padding-bottom:38px;gap:45px}
.demo-page .demo-hero h1{font-size:clamp(55px,6.3vw,90px);letter-spacing:-4.5px}
.demo-page .demo-hero h1 em{font-style:normal;color:var(--orange)}
.demo-page .demo-description{max-width:410px}
.demo-page .demo-hero-art{margin-left:-45px;margin-right:-5px;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.demo-page .demo-art-label{display:flex;justify-content:space-between;font-family:monospace;font-size:9px;letter-spacing:1.6px;margin:20px 25px 0 60px;color:#636960}
.demo-page .demo-art-label>span{font-size:8px}
.demo-page .demo-hero-art img{transform:scale(1.07);margin-block:12px}
.demo-page .demo-first{padding:21px 23px 17px;border:1px solid #242925;background:#1b1e1c;color:#f3f3ee;max-width:460px;margin-top:23px;box-shadow:0 9px 26px #1113130b}
.demo-page .demo-first>div:first-child{font-size:11px;gap:12px;line-height:1.4;margin-bottom:15px}
.demo-page .demo-first .eyebrow{color:#ff9877;font-size:8px;letter-spacing:1px}
.demo-page .audio-enhanced{display:none!important}
.demo-page .sail-player{--player-line:#9b9f94;--player-track:#c9ccc2;--player-progress:#a83b1b;display:grid;grid-template-columns:44px minmax(0,1fr) 38px;gap:14px;align-items:center;padding:8px 0;margin:14px 0 0;min-width:0}
.demo-page .sail-player button{display:flex;align-items:center;justify-content:center;flex:none;min-height:44px;min-width:38px;padding:0}
.demo-page .sail-player-play{background:#1b1e1c;color:#f3f3ee;border-radius:50%;width:44px;height:44px;transition:background .2s,transform .2s}
.demo-page .sail-player-play:hover{background:#a83b1b;transform:scale(1.04)}
.demo-page .sail-player-play svg{width:19px;height:19px;fill:currentColor;stroke:none}
.demo-page .sail-player-mute{color:#555e52;width:38px;height:44px}
.demo-page .sail-player-mute svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.demo-page .sail-player-track{min-width:0}
.demo-page .sail-player-times{font-family:monospace;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.4px;line-height:1;color:#5d655a;margin-top:-4px}
.demo-page .sail-player input[type=range]{--played:0%;appearance:none;-webkit-appearance:none;display:block;width:100%;height:36px;margin:0;padding:0;border:0;background:transparent;cursor:pointer;accent-color:var(--player-progress)}
.demo-page .sail-player input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--player-progress) var(--played),var(--player-track) var(--played));border-radius:0}
.demo-page .sail-player input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:10px;border:0;border-radius:50%;background:var(--player-progress);margin-top:-4px;box-shadow:0 0 0 4px transparent;transition:box-shadow .2s}
.demo-page .sail-player input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 4px #ad4b2520}
.demo-page .sail-player input[type=range]::-moz-range-track{height:2px;background:var(--player-track)}
.demo-page .sail-player input[type=range]::-moz-range-progress{height:2px;background:var(--player-progress)}
.demo-page .sail-player input[type=range]::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:var(--player-progress)}
.demo-page .sail-player-error{grid-column:1/-1;color:#9b2c15;font-size:12px;line-height:1.5}
.demo-page .sail-player-error[hidden]{display:none}
.demo-page .demo-first .sail-player{--player-track:#626a5e;--player-progress:#ff8b64;display:grid;gap:15px;margin:0;padding:0;font-size:12px;grid-template-columns:48px minmax(0,1fr) 30px}
.demo-page .demo-first .sail-player-play{width:48px;height:48px;color:#111313;background:#f5794b}
.demo-page .demo-first .sail-player-play:hover{background:#ff9877}
.demo-page .demo-first .sail-player-mute,.demo-page .demo-first .sail-player-times{color:#d4d7ce}
.demo-page .demo-first .sail-player-error{color:#ffa98e}
.demo-page .demo-index{padding-inline:0;border-bottom-color:#bdc1b6}
.demo-page .demo-index a{padding:24px 25px;font-size:13px;transition:background .2s}
.demo-page .demo-index a:hover{background:#e8e9df}
.demo-page .demo-index span{display:flex;align-items:center;justify-content:center;border:1px solid #aeb3a5;border-radius:50%;width:26px;height:26px;font-size:10px;color:#4b5447}
.demo-page .demo-section{padding-top:65px}
.demo-page .demo-section-heading{margin-bottom:30px}
.demo-page .demo-two{gap:22px}
.demo-page .demo-recording,.demo-page .demo-scenario{padding:26px 27px 0;border:1px solid #b9bdb1;background:#f8f8f2;position:relative;transition:border-color .2s}
.demo-page .demo-recording:hover,.demo-page .demo-scenario:hover{border-color:#747e6b}
.demo-page .demo-recording .eyebrow,.demo-page .demo-scenario .eyebrow{color:#656d5f;font-size:9px;letter-spacing:1.4px}
.demo-page .demo-recording h3,.demo-page .demo-scenario h3{margin-top:22px;font-size:29px;max-width:360px}
.demo-page .demo-recording:before,.demo-page .demo-scenario:before{content:'';display:block;position:absolute;top:-1px;left:27px;width:35px;height:2px;background:var(--orange)}
.demo-page .demo-recording>p:not(.eyebrow),.demo-page .demo-scenario>p:not(.eyebrow){font-size:13px;line-height:1.7;min-height:45px}
.demo-page .demo-transcript{margin-top:22px;border-bottom:0}
.demo-page .demo-transcript summary{padding:19px 0;font-size:11px}
.demo-page .demo-transcript summary>span{color:#a43b1d}
.demo-page .demo-context{margin-top:22px}
.demo-page .demo-voice-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;min-width:0}
.demo-page .demo-voice-picker button{border:1px solid #a3aa99;padding:11px 5px;font-size:11px;min-height:41px;line-height:1.3;background:transparent;transition:background .15s,color .15s}
.demo-page .demo-voice-picker button[aria-pressed=true]{background:#242a21;color:#f3f3ee;border-color:#242a21}
.demo-page .demo-voice-picker button:hover{border-color:#a83b1b}
.demo-page .demo-options:has(.demo-voice-picker){grid-template-columns:38px minmax(0,1fr);gap:10px 12px}
.demo-page .demo-options:has(.demo-voice-picker)>label{font-size:10px}
.demo-page select{border-color:#a3aa99;background-color:transparent;font-size:12px}
.demo-page .demo-intros{gap:20px}
.demo-page .demo-intros article{border:1px solid #b9bdb1;background:#e9ebe2;padding:25px 22px 17px;position:relative}
.demo-page .demo-intros article>h3{font-size:34px;letter-spacing:-1.2px}
.demo-page .demo-intros article>p{font-size:11px;margin-top:9px}
.demo-page .demo-voice-dot{height:28px;width:28px;margin-bottom:22px;border-radius:50%;box-shadow:0 0 0 5px #f3f3ee,0 0 0 6px #b3b9a9}
.demo-page .demo-intros .sail-player{gap:10px;margin-top:3px;grid-template-columns:38px minmax(0,1fr) 28px}
.demo-page .demo-intros .sail-player-play{height:38px;width:38px;min-height:38px;min-width:38px}
.demo-page .demo-intros .sail-player-mute{min-width:28px;width:28px}
.demo-page .demo-compare{background:#e4e7dc;margin-top:22px;padding:35px;gap:60px;border:1px solid #b9bdb1}
.demo-page .demo-takeaway{background:#20251e;color:#f3f3ee;padding:38px 35px;border:0;margin-top:65px}
.demo-page .demo-takeaway .eyebrow{color:#c1c9b8}
.demo-page .demo-takeaway p:not(.eyebrow){color:#d0d7c8}
.demo-page .demo-takeaway .button{background:#f3f3ee;color:#1b2119;min-height:46px;font-size:12px;padding:14px 22px}
@media(max-width:1000px){.demo-page .demo-hero{gap:20px}.demo-page .demo-hero h1{font-size:65px;letter-spacing:-3.5px}.demo-page .demo-first{padding:17px}.demo-page .demo-first>div:first-child{align-items:start;flex-direction:column;gap:6px}.demo-page .demo-art-label{margin-left:35px}.demo-page .demo-recording,.demo-page .demo-scenario{padding-inline:22px}.demo-page .demo-intros{gap:12px}.demo-page .demo-intros article{padding-inline:16px}.demo-page .demo-compare{gap:35px}}
@media(max-width:800px){.demo-page .demo-hero{grid-template-columns:1fr;padding:24px 0 20px;gap:0}.demo-page .demo-hero h1{font-size:clamp(52px,10vw,74px);letter-spacing:-2.9px;margin-block:22px}.demo-page .demo-first{max-width:470px;padding:18px 19px 15px;margin-top:22px}.demo-page .demo-first>div:first-child{flex-direction:row;align-items:center;font-size:10px;gap:10px;margin-bottom:9px}.demo-page .demo-first .eyebrow{font-size:7px;letter-spacing:.8px}.demo-page .demo-first .sail-player{grid-template-columns:44px minmax(0,1fr) 26px;gap:11px}.demo-page .demo-first .sail-player-play{width:44px;height:44px}.demo-page .demo-first .sail-player-mute{min-width:26px;width:26px}.demo-page .demo-hero-art{margin:24px 0 0;width:100%;align-self:center}.demo-page .demo-hero-art img{max-height:240px;transform:none;margin-block:0}.demo-page .demo-art-label{font-size:7px;letter-spacing:1.4px;margin:0 0 4px}.demo-page .demo-art-label>span{font-size:7px}.demo-page .demo-hero-art figcaption{font-size:7px;margin-bottom:6px}.demo-page .demo-index{grid-template-columns:repeat(3,1fr);padding:0}.demo-page .demo-index a,.demo-page .demo-index a+a{font-size:10px;gap:8px;padding:17px 8px;border-left:0}.demo-page .demo-index a:first-child{padding-left:0}.demo-page .demo-index a:last-child{padding-right:0;justify-content:end}.demo-page .demo-index span{width:20px;height:20px;font-size:8px}.demo-page .demo-section{padding-top:43px}.demo-page .demo-two{gap:19px}.demo-page .demo-recording,.demo-page .demo-scenario{padding:24px 22px 0}.demo-page .demo-recording h3,.demo-page .demo-scenario h3{font-size:27px;margin-top:19px}.demo-page .demo-recording>p:not(.eyebrow),.demo-page .demo-scenario>p:not(.eyebrow){min-height:0}.demo-page .demo-options{margin-top:22px}.demo-page .demo-intros{gap:15px}.demo-page .demo-intros article{padding:23px 21px 17px;grid-template-columns:38px 1fr;column-gap:18px}.demo-page .demo-intros .demo-voice-dot{width:25px;height:25px;margin-top:9px;margin-left:6px}.demo-page .demo-intros article>h3{font-size:31px}.demo-page .demo-intros .sail-player{grid-column:1/-1;margin-top:0;grid-template-columns:44px minmax(0,1fr) 32px;gap:14px}.demo-page .demo-intros .sail-player-play{width:44px;height:44px}.demo-page .demo-compare{padding:26px 22px;gap:27px}.demo-page .demo-takeaway{width:calc(100% - 40px);margin-top:43px;padding:29px 23px}.demo-page .demo-takeaway h2{font-size:34px}.demo-page .demo-takeaway .button{font-size:11px;margin-top:24px}}
@media(max-width:360px){.demo-page .demo-first{padding-inline:15px}.demo-page .demo-first>div:first-child{flex-direction:column;align-items:start;gap:7px}.demo-page .demo-index a,.demo-page .demo-index a+a{font-size:9px;gap:5px;padding-inline:4px}.demo-page .demo-index span{width:18px;height:18px}.demo-page .demo-recording,.demo-page .demo-scenario{padding-inline:18px}.demo-page .demo-options:has(.demo-voice-picker){grid-template-columns:31px minmax(0,1fr);gap:9px}.demo-page .demo-voice-picker button{font-size:10px}}
@media(min-width:801px){.demo-page .demo-recording h3{min-height:67px}}

/* Archivo interactivo: ondas reales, escenas visibles y comparación central. */
.demo-page .demo-index{position:sticky;top:0;z-index:8;background:#f3f3eef5;backdrop-filter:blur(12px);box-shadow:0 3px 12px #11131305}
.demo-page .demo-index a[aria-current=location]{background:#e6e9dd;color:#111313}
.demo-page .demo-index a[aria-current=location]>span{background:#252c21;border-color:#252c21;color:#f3f3ee}
.demo-page .demo-section{scroll-margin-top:100px}
.demo-page .sail-player-scrub{position:relative;min-width:0;height:42px}
.demo-page .sail-player-scrub input[type=range]{position:relative;z-index:1;height:42px}
.demo-page .sail-wave{position:absolute;inset:3px 0;pointer-events:none;overflow:hidden}
.demo-page .sail-wave svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#9ca690;stroke-width:2;stroke-linecap:round}
.demo-page .sail-wave .sail-wave-played{stroke:#b13e1c;clip-path:inset(0 calc(100% - var(--played,0%)) 0 0)}
.demo-page .has-wave input[type=range]::-webkit-slider-runnable-track{background:transparent}
.demo-page .has-wave input[type=range]::-moz-range-track,.demo-page .has-wave input[type=range]::-moz-range-progress{background:transparent}
.demo-page .has-wave input[type=range]::-webkit-slider-thumb{box-shadow:0 0 0 3px #f3f3ee}
.demo-page .demo-first .sail-wave svg{stroke:#7c8872}
.demo-page .demo-first .sail-wave .sail-wave-played{stroke:#ff9877}
.demo-page .demo-first .has-wave input[type=range]::-webkit-slider-thumb{box-shadow:0 0 0 3px #1b1e1c}
.demo-page .sail-player-times{margin-top:3px}
.demo-page .demo-scene-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.demo-page .demo-scene-picker button{display:flex;text-align:left;align-items:center;gap:12px;padding:13px 12px;min-height:57px;border:1px solid #b5bdab;color:#454e40;background:transparent;line-height:1.35;font-size:12px;transition:border-color .15s,background .15s}
.demo-page .demo-scene-picker button>span:first-child{font-family:monospace;font-size:9px;color:#4c5a42;align-self:start;padding-top:3px}
.demo-page .demo-scene-picker button[aria-pressed=true]{border-color:#323e2a;background:#e5eadb;color:#20281b;box-shadow:inset 2px 0 #667b4d}
.demo-page .demo-scene-picker button:hover{border-color:#8b431f}
.demo-page .demo-compare{grid-template-columns:.8fr 1.2fr;padding:0;gap:0;background:#242b20;border-color:#242b20;color:#f3f3ee;overflow:hidden}
.demo-page .demo-compare>div:first-child{padding:37px 35px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.demo-page .demo-compare>div:first-child>.eyebrow{color:#d3dbca;font-size:9px;letter-spacing:1.8px}
.demo-page .demo-compare h3{font-size:38px;letter-spacing:-1.4px;line-height:1.07;max-width:330px;margin:25px 0 22px}
.demo-page .demo-compare>div:first-child>p:not(.eyebrow){font-size:14px;color:#d3dbca;line-height:1.7;max-width:270px}
.demo-page .demo-compare-console{margin:15px;padding:25px;background:#f5f5ee;color:#111313;min-width:0}
.demo-page .demo-compare-console .demo-scenario-select label{color:#585b59}
.demo-page .demo-compare-guide{margin:29px 0 0;padding:0;list-style:none;border-top:1px solid #727e65;max-width:270px}
.demo-page .demo-compare-guide li{border-bottom:1px solid #727e65;padding:15px 0;display:flex;gap:23px;align-items:center;font-size:12px;line-height:1.4}
.demo-page .demo-compare-guide span{font-family:monospace;font-size:9px;color:#ffab87}
.demo-page .demo-compare .demo-voice-picker button[aria-pressed=true]{background:#2e3826;border-color:#2e3826}
.demo-page .demo-intro-label{font-size:14px;letter-spacing:-.1px;margin:31px 0 18px;color:#585b59}
.demo-page .demo-intros article:has(.sail-player[data-playing=true]){border-color:#8d411e;box-shadow:inset 0 2px #f35727}
.demo-page .demo-recording:has(.sail-player[data-playing=true]),.demo-page .demo-scenario:has(.sail-player[data-playing=true]){border-color:#63764f}
@media(max-width:1100px) and (min-width:801px){.demo-page .demo-compare{grid-template-columns:.75fr 1.25fr}.demo-page .demo-compare>div:first-child{padding:28px}.demo-page .demo-compare h3{font-size:32px}.demo-page .demo-compare-console{padding:22px;margin:12px}.demo-page .demo-scene-picker button{padding:11px 9px;gap:8px;font-size:11px}}
@media(max-width:800px){.demo-page .demo-section{scroll-margin-top:78px}.demo-page .demo-index a,.demo-page .demo-index a+a{padding-block:16px}.demo-page .demo-compare{grid-template-columns:1fr;gap:0;padding:0}.demo-page .demo-compare>div:first-child{padding:27px 25px 23px}.demo-page .demo-compare h3{font-size:33px;margin:20px 0 16px;max-width:none}.demo-page .demo-compare>div:first-child>p:not(.eyebrow){font-size:13px;max-width:410px}.demo-page .demo-compare-guide{display:none}.demo-page .demo-compare-console{margin:0 12px 12px;padding:21px 18px}.demo-page .demo-scene-picker{gap:6px}.demo-page .demo-scene-picker button{font-size:11px;padding:11px 10px;gap:8px;min-height:54px}.demo-page .demo-scene-picker button>span:first-child{font-size:8px}.demo-page .demo-intro-label{font-size:13px;margin-top:28px}.demo-page .demo-intros{gap:13px}}
@media(max-width:360px){.demo-page .demo-scene-picker button{font-size:10px;padding:10px 8px;gap:7px}.demo-page .demo-compare-console{padding:18px 13px}.demo-page .demo-compare h3{font-size:29px}}
.demo-page :where(button,input,select,summary){scroll-margin-top:100px}

/* El pitido invita a imaginar la identidad de quien escucha. */
.demo-page .demo-name-cue{grid-column:2/-1;justify-self:start;font-size:10px;line-height:1.5;letter-spacing:.1px;color:#5d6555;padding:5px 8px;border:1px dashed #929d86;background:#edf0e6;transition:background .15s,border-color .15s,color .15s}
.demo-page .demo-name-cue[hidden]{display:none}
.demo-page .demo-name-cue[data-active=true]{color:#762a13;background:#ffe1cd;border-color:#ad4a27;border-style:solid}
.demo-page .demo-first .demo-name-cue{color:#d3dcca;background:#30392a;border-color:#8b997c;font-size:9px}
.demo-page .demo-first .demo-name-cue[data-active=true]{color:#111313;background:#ffab83;border-color:#ffab83}
.demo-page .demo-company-placeholder{color:#8e3216;background:#f1e3d6;padding:1px 4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
@media(max-width:360px){.demo-page .demo-name-cue{font-size:9px}.demo-page .demo-first .demo-name-cue{font-size:8px}}