/* Ajustes finales: reproductor fijo y teclado completo de 88 notas. */

.hero-player-strip:not(.expanded){
  display:grid!important;
  place-items:center;
  background:#f5f3ee!important;
  border-color:rgba(255,255,255,.72)!important;
  box-shadow:0 7px 24px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.08);
  opacity:1!important;
  visibility:visible!important;
}
.hero-player-strip:not(.expanded) .hero-audio-controls{
  position:static!important;
  inset:auto!important;
  z-index:2!important;
  width:40px;
  height:40px;
  display:grid!important;
  place-items:center;
  padding:0!important;
  margin:0!important;
  opacity:1!important;
  transform:none!important;
}
.hero-player-strip:not(.expanded) #clairAudioPlay{
  position:static!important;
  width:40px!important;
  height:40px!important;
  display:grid!important;
  place-items:center;
  color:#111!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.hero-player-strip:not(.expanded):hover,
.hero-player-strip:not(.expanded):focus-visible{
  background:#fff!important;
}
.hero-player-strip #clairAudioPlay,
.hero-player-strip #clairAudioPause,
.header-audio-bar button{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
.hero-player-strip.expanded #clairAudioPause{
  color:#ead5b2!important;
}
.hero-player-strip:not(.expanded) #clairAudioPlay svg{
  display:block!important;
  width:15px!important;
  height:15px!important;
  position:relative;
  z-index:3;
  color:#080808!important;
  fill:currentColor!important;
  opacity:1!important;
  filter:drop-shadow(0 0 5px rgba(225,190,133,.32));
}
.hero-player-strip:not(.expanded) #clairAudioPlay svg path{
  display:block!important;
  fill:#080808!important;
  opacity:1!important;
}
.hero-player-strip:not(.expanded) #clairAudioPlay svg{display:none!important;}
.hero-player-strip:not(.expanded) #clairAudioPlay::before{
  display:none!important;
}
.hero-player-strip:not(.expanded)::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  z-index:50;
  display:block!important;
  width:0;
  height:0;
  margin:0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:11px solid #050505;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:none;
  filter:none!important;
  transform:translate(-38%,-50%)!important;
}

.header-audio-bar{
  right:0;
  left:0!important;
  width:100%!important;
  max-width:none;
  padding-right:clamp(18px,4vw,54px);
  padding-left:clamp(18px,4vw,54px);
  border-right:0;
  border-left:0;
  border-radius:0;
  opacity:0;
  pointer-events:none;
  transform:translateY(-8px)!important;
}
.site-header.scrolled + .header-audio-bar.playing:not(.past-hero){
  opacity:0;
  pointer-events:none;
}
.header-audio-bar.playing.past-hero{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0)!important;
}
.header-audio-progress{
  right:0;
  left:0;
}

.piano-keyboard-overlay{
  display:block;
  overflow:hidden!important;
}
.piano-keyboard-overlay span{
  position:absolute;
  display:block;
  min-width:0;
  margin:0;
  border:0;
  transition:background-color .2s ease,box-shadow .2s ease;
}
.piano-keyboard-overlay span.white-key{z-index:1;}
.piano-keyboard-overlay span.black-key{z-index:3;}
.piano-keyboard-overlay span.left-hand-key.pressed::before{
  transform-origin:40% top;
}
.piano-keyboard-overlay span.right-hand-key.pressed::before{
  transform-origin:60% top;
}
.piano-keyboard-overlay span::before{
  background-image:none!important;
  background-position:initial!important;
  background-size:auto!important;
  transition:opacity .12s ease-out,transform .22s cubic-bezier(.18,.72,.24,1),filter .22s ease,box-shadow .22s ease!important;
  backface-visibility:hidden;
}
.piano-keyboard-overlay span::after{
  content:"";
  position:absolute;
  right:12%;
  bottom:-5px;
  left:12%;
  z-index:5;
  height:2px;
  border-radius:999px;
  background:rgba(225,191,135,.84);
  box-shadow:0 2px 5px rgba(214,167,94,.38);
  opacity:0;
  transform:translateY(-3px) scaleX(.55);
  transition:opacity .12s ease,transform .2s cubic-bezier(.18,.72,.24,1);
  pointer-events:none;
}
.piano-keyboard-overlay span::after{display:none!important;}
.piano-keyboard-overlay span.pressed::after{
  opacity:.82;
  transform:translateY(0) scaleX(1);
}
.piano-keyboard-overlay span.black-key::after{
  right:5%;
  bottom:-3px;
  left:5%;
  height:1px;
  background:#f0c982;
  box-shadow:0 1px 6px rgba(231,181,98,.72);
}
.piano-keyboard-overlay span.white-key.pressed{
  background:rgba(0,0,0,.76);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.82);
}
.piano-keyboard-overlay span.white-key::before{
  background:linear-gradient(90deg,#ddd9cf 0%,#fffdf7 25%,#f4f0e6 72%,#c7c1b7 100%)!important;
  border-right:1px solid rgba(25,25,25,.5);
  border-bottom:1px solid rgba(25,25,25,.72);
  border-radius:0 0 1px 1px;
}
.piano-keyboard-overlay span.white-key.pressed::before{
  opacity:1;
  transform:perspective(100px) rotateX(-9deg) translateY(var(--white-key-travel,3px)) scaleY(.94);
  filter:brightness(.9);
  box-shadow:0 6px 7px rgba(0,0,0,.82),inset 0 -2px 2px rgba(0,0,0,.26),0 1px 2px rgba(224,185,121,.18);
}
.piano-keyboard-overlay span.black-key.pressed{
  background:rgba(0,0,0,.94);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.9);
}
.piano-keyboard-overlay span.black-key::before{
  background:linear-gradient(90deg,#050505 0%,#27231f 44%,#080808 100%)!important;
  border:1px solid rgba(208,163,94,.34);
  border-top:0;
  border-radius:0 0 2px 2px;
}
.piano-keyboard-overlay span.black-key.pressed::before{
  opacity:1;
  transform:perspective(85px) rotateX(-11deg) translateY(var(--black-key-travel,2px)) scaleY(.94);
  filter:brightness(1.22) contrast(1.08);
  box-shadow:0 5px 7px rgba(0,0,0,.78),0 1px 5px rgba(218,174,107,.38),inset 0 -1px 1px rgba(255,231,187,.2);
}

@media (max-width:900px){
  .header-audio-bar{width:100%!important;}
  .piano-keyboard-overlay span.white-key.pressed::before{
    transform:perspective(75px) rotateX(-10deg) translateY(var(--white-key-travel,3px)) scaleY(.94);
  }
  .piano-keyboard-overlay span.black-key.pressed::before{
    transform:perspective(68px) rotateX(-12deg) translateY(var(--black-key-travel,2px)) scaleY(.94);
  }
}

@media (max-width:760px){
  .hero .hero-media{
    object-fit:contain!important;
    object-position:center 72%!important;
  }
  .hero-scene{
    transform:scale(1)!important;
  }
  .piano-keyboard-overlay{
    transform:none!important;
  }
}

@media (max-width:420px){
  .hero .hero-media{object-position:center 75%!important;}
}

/* Movimiento fluido del reproductor y de la barra fija. */
.hero-player-strip{
  will-change:width,height,border-radius,transform;
  transition:
    width .5s cubic-bezier(.22,.78,.2,1),
    height .42s cubic-bezier(.22,.78,.2,1),
    min-height .42s cubic-bezier(.22,.78,.2,1),
    padding .42s cubic-bezier(.22,.78,.2,1),
    gap .38s ease,
    border-radius .38s ease,
    border-color .28s ease,
    background-color .32s ease,
    box-shadow .4s ease!important;
}
.hero-player-strip .hero-player-copy,
.hero-player-strip .hero-resonance,
.hero-player-strip .hero-player-progress,
.hero-player-strip #clairAudioMute{
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transform:translateX(10px) scale(.97);
  transition:opacity .18s ease,transform .3s cubic-bezier(.22,.72,.22,1),visibility 0s linear .25s;
}
.hero-player-strip .hero-player-copy{display:block!important;}
.hero-player-strip .hero-resonance{display:flex!important;}
.hero-player-strip .hero-player-progress{display:block!important;}
.hero-player-strip #clairAudioMute{display:grid!important;}
.hero-player-strip.expanded .hero-player-copy,
.hero-player-strip.expanded .hero-resonance,
.hero-player-strip.expanded .hero-player-progress,
.hero-player-strip.expanded #clairAudioMute{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transform:translateX(0) scale(1);
  transition-delay:.14s;
}
.hero-player-strip.expanded .hero-resonance{transition-delay:.2s;}
.hero-player-strip.expanded .hero-player-progress{transition-delay:.08s;}
.hero-player-strip.expanded .hero-audio-controls{
  position:relative!important;
  inset:auto!important;
  width:auto;
  height:auto;
  display:flex!important;
  place-items:center;
  opacity:1!important;
  transform:none!important;
  transition:opacity .24s ease .16s,transform .3s ease .16s;
}
.hero-player-strip::after{
  content:"";
  transition:opacity .18s ease,transform .28s cubic-bezier(.22,.72,.22,1)!important;
}
.hero-player-strip.expanded::after{
  opacity:0!important;
  transform:translate(-38%,-50%) scale(.35)!important;
}

.header-audio-bar{
  transform:translateY(-105%)!important;
  box-shadow:0 0 0 rgba(0,0,0,0);
  will-change:opacity,transform;
  transition:
    top .35s var(--ease),
    opacity .3s ease,
    transform .46s cubic-bezier(.2,.76,.2,1),
    box-shadow .4s ease,
    border-color .3s ease,
    background-color .3s ease!important;
}
.header-audio-bar.playing.past-hero{
  transform:translateY(0)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.3);
}
.header-audio-progress i{transition:width .2s linear;}

@media (max-width:900px){
  .hero-player-strip{
    transition:
      width .44s cubic-bezier(.22,.78,.2,1),
      height .4s cubic-bezier(.22,.78,.2,1),
      left .44s cubic-bezier(.22,.78,.2,1),
      padding .36s ease,
      border-radius .34s ease,
      background-color .3s ease!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .hero-player-strip,.header-audio-bar,
  .hero-player-strip .hero-player-copy,
  .hero-player-strip .hero-resonance,
  .hero-player-strip .hero-player-progress{transition-duration:.01ms!important;}
}

/* Teclado tridimensional alineado con el piano fotografiado. */
.hero-piano-3d{
  position:absolute;
  z-index:4;
  display:block;
  width:0;
  height:0;
  opacity:0;
  pointer-events:none;
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.48));
  transition:opacity .7s ease;
}
body.piano-3d-ready .hero-piano-3d{opacity:.98;}
body.piano-3d-ready .piano-keyboard-overlay{opacity:0!important;visibility:hidden;}
@media (max-width:760px){
  .hero-piano-3d{filter:drop-shadow(0 3px 5px rgba(0,0,0,.45));}
}
@media (prefers-reduced-motion:reduce){
  .hero-piano-3d{display:none!important;}
  body.piano-3d-ready .piano-keyboard-overlay{display:none!important;}
}

/* Controles de reinicio y búsqueda temporal accesibles con ratón o tacto. */
.audio-restart-btn svg{
  display:block;
  width:13px;
  height:13px;
  fill:currentColor;
}
.hero-player-strip:not(.expanded) .audio-restart-btn{display:none!important;}
.hero-player-strip.expanded .audio-restart-btn{
  display:grid!important;
  place-items:center;
  color:rgba(238,218,184,.72);
}
.header-audio-restart{
  color:rgba(216,189,145,.7)!important;
  opacity:.78;
}
.header-audio-bar{grid-template-columns:18px 18px auto 1fr;}
.audio-restart-btn:hover,.audio-restart-btn:focus-visible{
  color:#f3dfbd!important;
  opacity:1;
}
.audio-seek{
  box-sizing:border-box;
  height:13px!important;
  overflow:visible!important;
  cursor:pointer;
  touch-action:none;
  background:transparent!important;
  outline:none;
}
.audio-seek::before{
  content:"";
  position:absolute;
  top:50%;
  right:0;
  left:0;
  height:2px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  transform:translateY(-50%);
}
.audio-seek > i{
  position:absolute;
  top:50%;
  left:0;
  height:2px!important;
  border-radius:999px;
  transform:translateY(-50%);
}
.audio-seek > i::after{
  content:"";
  position:absolute;
  top:50%;
  right:-4px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ead3ac;
  box-shadow:0 0 0 3px rgba(234,211,172,.12);
  opacity:0;
  transform:translateY(-50%) scale(.75);
  transition:opacity .16s ease,transform .16s ease;
}
.audio-seek:hover > i::after,
.audio-seek:focus-visible > i::after,
.audio-seek.is-seeking > i::after{
  opacity:1;
  transform:translateY(-50%) scale(1);
}
.hero-player-progress{bottom:-5px!important;}
.header-audio-progress{bottom:-6px!important;}

@media (max-width:900px){
  .header-audio-bar{grid-template-columns:18px 18px 1fr;}
  .audio-seek{height:18px!important;}
  .hero-player-progress{bottom:-8px!important;}
  .header-audio-progress{bottom:-9px!important;}
}