/* Una pequeña estación de música, dentro del universo ilustrado Kindomy. */
.hero-art .scene-main{height:auto;width:110%;max-width:none;right:-4%;bottom:77px;filter:none;mask-image:linear-gradient(to bottom,#000 0 79%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0 79%,transparent 100%)}
.scene-meadow{position:absolute;left:-2%;bottom:43px;width:108%;height:97px;pointer-events:none}.scene-meadow .meadow-back{fill:#d8e2c5}.scene-meadow .meadow-front{fill:#e7ebd7}.scene-meadow .meadow-line{fill:none;stroke:#9eb993;stroke-width:2;stroke-linecap:round}.scene-meadow .meadow-petal{fill:#fffaf2}.scene-meadow .meadow-heart{fill:#ebbe3d}.hero-art .story-label{z-index:2;bottom:-4px}.hero-art .scene-orbit{border-radius:46% 54% 59% 41% / 45% 41% 59% 55%;transform:rotate(-9deg);background:#e1e8cf;box-shadow:none}.night .scene-meadow{opacity:.8}
.listen-panel{grid-template-columns:.72fr 1.28fr;gap:42px;padding:43px;isolation:isolate;background:#eef1e5;border:1px solid #d7dfcc;box-shadow:0 9px 0 #dce3d04a;border-radius:30px}.listen-panel:after{display:none}.listen-panel>div:first-child{padding-top:12px}.listen-panel .fine{display:inline-block;margin-top:18px;padding:7px 12px;border:1px dashed #b9cdb8;border-radius:20px;font-size:10px;color:#526e62}.listen-panel h3{font-size:49px;margin:13px 0 20px}.audio-list{display:grid;gap:14px;min-width:0}.sample-card{--sample:#4e9291;--sample-soft:#e4efea;--sample-wave:#80b3a9;--played:0%;display:grid;grid-template-columns:59px minmax(0,1fr);gap:14px;padding:20px 23px;border:1px solid #d7e2d8;border-radius:22px;background:#fffdf7;box-shadow:0 4px 0 #d1dccb40;position:relative;transition:box-shadow .2s,border-color .2s}.sample-card:nth-child(2){--sample:#bc775d;--sample-soft:#f9e6db;--sample-wave:#e3a58b}.sample-card:nth-child(3){--sample:#8a77a5;--sample-soft:#eee8f5;--sample-wave:#b8a6d0}.sample-card.is-playing{border-color:var(--sample);box-shadow:0 5px 0 var(--sample-soft),0 9px 24px #3148390a}.sample-cover{width:59px;height:66px;display:grid;place-items:center;border-radius:45% 45% 20px 20px;background:var(--sample-soft);color:var(--sample);font:31px Georgia,serif;border:1px dashed #fff;align-self:center}.sample-body{min-width:0}.sample-heading{display:flex;align-items:start;justify-content:space-between;gap:10px}.sample-heading strong{display:block;font:700 15px/1.4 KindomyRound,Poppins,sans-serif;color:#314e50}.sample-heading p{font-size:9px;margin-top:3px;color:#728478}.sample-tag{font:8px KindomyRound,sans-serif;color:var(--sample);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;padding-top:3px}.sample-controls{display:none;grid-template-columns:43px minmax(0,1fr);align-items:center;gap:13px;margin-top:11px}.sample-enhanced .sample-controls{display:grid}.sample-card audio{width:100%;height:35px;margin-top:10px}.sample-enhanced audio{display:none}.sample-play{width:43px;height:43px;border:0;border-radius:50%;background:var(--sample);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 0 #263e3e16;transition:transform .15s}.sample-play:hover{transform:scale(1.07)}.sample-play svg{width:18px;height:18px;fill:currentColor}.sample-play .pause-shape,.is-playing .sample-play .play-shape{display:none}.is-playing .sample-play .pause-shape{display:block}.wave-track{height:34px;position:relative;min-width:0}.sample-wave{height:34px;display:flex;align-items:center;justify-content:space-between;gap:3px;overflow:hidden;mask-image:linear-gradient(to right,#000 0 var(--played),#0006 var(--played) 100%)}.sample-wave i{flex:1;max-width:5px;min-width:2px;height:var(--bar);border-radius:5px;background:var(--sample-wave);transform-origin:center;animation:kindomy-sound 900ms ease-in-out infinite alternate;animation-delay:var(--delay);animation-play-state:paused}.is-playing:not(.is-loading) .sample-wave i{animation-play-state:running}.sample-seek{position:absolute;inset:0;margin:0;width:100%;height:34px;cursor:pointer;appearance:none;background:transparent;opacity:.01}.sample-seek:focus-visible{opacity:1;background:#fffaf2dd;border-radius:10px;outline:2px solid var(--sample);outline-offset:3px}.sample-seek::-webkit-slider-thumb{appearance:none;width:9px;height:34px;background:var(--sample);border-radius:8px}.sample-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:5px}.sample-status{font-size:8px;color:#74847a;min-height:14px}.sample-time{font:9px Poppins,sans-serif;white-space:nowrap;color:#57716a;font-variant-numeric:tabular-nums}.sample-mute{border:0;padding:0;width:28px;height:28px;background:transparent;color:#748b80;display:grid;place-items:center;cursor:pointer}.sample-mute svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}.sample-mute .muted-shape,.is-muted .sample-mute .sound-shape{display:none}.is-muted .sample-mute .muted-shape{display:block}.sample-time-group{display:flex;align-items:center;gap:8px}.sample-play:focus-visible,.sample-mute:focus-visible{outline:3px solid #293f42;outline-offset:4px}@keyframes kindomy-sound{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
@media(max-width:1050px){.listen-panel{grid-template-columns:1fr 1.4fr;padding:30px;gap:25px}.sample-card{padding:17px;grid-template-columns:45px minmax(0,1fr);gap:12px}.sample-cover{width:45px;height:56px}.sample-heading strong{font-size:13px}.sample-tag{display:none}}
@media(max-width:760px){.hero-art .scene-main{bottom:69px;width:112%;right:-6%}.scene-meadow{bottom:41px;height:66px;width:112%;left:-6%}.hero-art .story-label{bottom:0;font-size:20px}.listen-panel{grid-template-columns:1fr;padding:26px 18px;gap:25px;border-radius:25px}.listen-panel>div:first-child{padding:0 6px}.listen-panel h3{font-size:40px;margin:10px 0 14px}.listen-panel h3 br{display:none}.listen-panel .fine{margin-top:12px}.sample-card{grid-template-columns:42px minmax(0,1fr);padding:17px 13px;gap:11px;border-radius:18px}.sample-cover{width:42px;height:52px;font-size:25px}.sample-heading strong{font-size:12px}.sample-heading p{font-size:8px}.sample-controls{grid-template-columns:40px minmax(0,1fr);gap:10px}.sample-play{width:40px;height:40px}.sample-wave{gap:2px}.sample-wave i:nth-child(3n){display:none}.sample-status{font-size:7px;max-width:105px}.sample-time{font-size:8px}.sample-meta{gap:4px}.sample-time-group{gap:2px}.sample-mute{width:25px}}
.hero-art .scene-main{mask-image:linear-gradient(to bottom,#000 0 79%,transparent 100%),linear-gradient(to right,#000 0 88%,transparent 100%);mask-composite:intersect;-webkit-mask-image:linear-gradient(to bottom,#000 0 79%,transparent 100%),linear-gradient(to right,#000 0 88%,transparent 100%);-webkit-mask-composite:source-in}
@media(prefers-reduced-motion:reduce){.sample-wave i{animation:none}.sample-play,.sample-card{transition:none}}

@media(max-width:760px){.listen-panel h3 em{display:block}.sample-play{width:44px;height:44px}.sample-controls{grid-template-columns:44px minmax(0,1fr)}}