/* Piano de dos octavas: mismo módulo para la web artística y la venta de entradas. */
.piano-interactivo{--piano-noche:#151a31;--piano-oro:#d9ba82;--piano-marfil:#fbf8f2;position:relative;isolation:isolate;background:var(--piano-noche);color:var(--piano-marfil);padding:34px max(18px,calc((100vw - 1080px)/2)) 34px;font-family:'Jost',system-ui,sans-serif}
.piano-interactivo *{box-sizing:border-box}
.piano-interactivo .piano-cabecera{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.piano-interactivo .piano-etq{display:block;color:var(--piano-oro);font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;margin-bottom:3px}
.piano-interactivo .piano-titulo{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(30px,4vw,44px);font-weight:400;line-height:1.04;color:#fff;margin:0}
.piano-interactivo .piano-titulo em{color:var(--piano-oro);font-weight:400}
.piano-interactivo .piano-desc{font-size:12px;line-height:1.5;color:#d4d0d0;margin:8px 0 0;max-width:550px}
.piano-interactivo .piano-acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.piano-interactivo .piano-boton{font-family:inherit;min-height:40px;border:1px solid rgba(235,210,165,.55);background:transparent;border-radius:24px;color:#eedbbb;padding:8px 14px;font-size:12px;letter-spacing:.035em;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.piano-interactivo .piano-boton:hover,.piano-interactivo .piano-boton:focus-visible{background:rgba(230,210,175,.12);border-color:#e8cc98}
.piano-interactivo .piano-boton[aria-pressed="true"]{background:#dfc48e;color:#172039;border-color:#dfc48e}
.piano-interactivo .piano-boton:focus-visible,.piano-interactivo .piano-tecla:focus-visible{outline:3px solid #e5bc73;outline-offset:2px;z-index:5}
.piano-interactivo .piano-teclado{position:relative;display:flex;width:100%;height:clamp(108px,15vw,161px);border-radius:6px;overflow:hidden;background:#151a31;padding:0 3px 4px;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 14px 28px rgba(0,0,0,.24);cursor:crosshair}
.piano-interactivo .piano-tecla{position:absolute;appearance:none;-webkit-appearance:none;font-size:0;cursor:pointer;outline:none;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform 85ms ease,background 100ms ease,box-shadow 100ms ease}
.piano-interactivo .piano-tecla.blanca{top:0;bottom:4px;background:linear-gradient(to bottom,#fffefc 0%,#f9f4eb 73%,#e6dac8 100%);border:1px solid #b9ad9e;border-bottom:5px solid #c6b39b;border-radius:0 0 5px 5px;z-index:1;box-shadow:inset 0 3px 7px rgba(0,0,0,.045)}
.piano-interactivo .piano-tecla.negra{top:0;height:61%;border:1px solid #0c0f20;border-bottom:6px solid #060812;border-radius:0 0 4px 4px;background:linear-gradient(90deg,#181d33 0%,#343b56 38%,#111524 90%);z-index:2;box-shadow:0 4px 5px rgba(0,0,0,.31)}
.piano-interactivo .piano-tecla.blanca.activa{background:linear-gradient(to bottom,#f4e2c0,#dfbd83);border-bottom-width:2px;transform:translateY(3px);box-shadow:inset 0 3px 8px rgba(90,64,28,.23)}
.piano-interactivo .piano-tecla.negra.activa{background:linear-gradient(90deg,#604b35,#a28259 65%,#56402f);border-bottom-width:2px;transform:translateY(4px);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.piano-interactivo .piano-info{margin:12px 0 0;min-height:20px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#cfbfaa;font-size:11px}
.piano-interactivo .piano-leyenda{letter-spacing:.1em;color:rgba(246,238,222,.53);white-space:nowrap}
@media(max-width:700px){.piano-interactivo{padding:27px 15px 24px}.piano-interactivo .piano-cabecera{align-items:flex-start;flex-direction:column;gap:14px}.piano-interactivo .piano-acciones{width:100%}.piano-interactivo .piano-boton{flex:1}.piano-interactivo .piano-teclado{height:120px}.piano-interactivo .piano-leyenda{display:none}}
@media(prefers-reduced-motion:reduce){.piano-interactivo .piano-tecla{transition:none}}