*{ box-sizing:border-box; }

html, body{
  margin:0;
  height:100%;
  background:#141414;
}

.ritmo{
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
}

/* =========================
   REJILLA 9×9 (desktop/tablet)
   ========================= */
.piano{
  --gap-x: 10px;
  --gap-y: 10px;

  display:grid;
  grid-template-columns:repeat(9, 1fr);
  grid-template-rows:repeat(9, 1fr);

  column-gap: var(--gap-x);
  row-gap: var(--gap-y);

  /* conjunto horizontal */
  aspect-ratio: 16 / 9;

  /* encaje en viewport sin deformar */
  width: min(100%, calc((100svh - 2rem) * (16 / 9)));
  max-height: calc(100svh - 2rem);

  margin: 0 auto;
}

/* =========================
   TECLA BASE
   ========================= */
.key{
  position:relative;
  width:100%;
  aspect-ratio:16/9;

  background:#2b2b2b;
  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;

  transition: transform .22s ease, filter .22s ease;
  cursor:pointer;
  text-decoration:none;
}

/* Hover: capa 1 gris */
.key::before{
  content:"";
  position:absolute;
  inset:0;
  background:#2a2a2a;
  opacity:0;
  transition: opacity .22s ease;
}

/* Hover / beat: capa 2 cromática (color real via --mix) */
.key::after{
  content:"";
  position:absolute;
  inset:0;
  background: var(--mix, #fd6400);
  opacity:0;
  transition: opacity .26s ease;
}

.key:hover::before{ opacity:1; }
.key:hover::after{ opacity:.85; }
.key:hover{ transform: scale(1.025); }

/* Pulso */
.key.is-beat{
  filter: brightness(1.35) contrast(1.05);
  transform: scale(1.03);
}
.key.is-beat::before{ opacity:1; }
.key.is-beat::after{ opacity:.55; }

/* =========================
   TECLAS BLANCAS
   ========================= */
.key--white{
  background:#3d2727;
  color:#bfaaaa;
  cursor:pointer;
}

.key--white::before,
.key--white::after{ display:none; }

.key__label{
  position:relative;
  z-index:1;
  font-family: Ubuntu, "Helvetica Neue", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: clamp(1.05rem, 2.1vw, 1.9rem);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
/* =========================
   POPUP (modal transparente)
   ========================= */

body.is-popup{
  overflow: hidden;
}

.popup[hidden]{ display:none; }

.popup{
  position: fixed;
  inset: 0;
  z-index: 999999;
}

.popup__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
}

.popup__panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: min(560px, calc(100vw - 2rem));
  padding: 22px 22px 18px;

  border-radius: 22px;
  background: rgba(221, 222, 222, .22);       /* transparente tipo The Walk */
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);

  color: rgba(255,255,255,.92);
  text-align: center;

  font-family: Ubuntu, "Helvetica Neue", system-ui, sans-serif;
}

.popup__kicker{
  margin: 0 0 8px 0;
  letter-spacing: .18em;
  font-size: .85rem;
  opacity: .85;
}

.popup__title{
  margin: 0 0 10px 0;
  font-weight: 300;
  letter-spacing: .06em;
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
}

.popup__text{
  margin: 0 0 14px 0;
  font-weight: 300;
  opacity: .9;
}

.popup__actions{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.popup__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 14px;
  border-radius: 999px;

  text-decoration: none;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .82rem;

  color: rgba(255,255,255,.92);
  background: rgba(42,42,42,.70);           /* gris The Walk */
  border: 1px solid rgba(255,255,255,.16);
}

.popup__btn:hover{
  background: rgba(248,10,15,.18);          /* eco rojo #f80a0f */
  border-color: rgba(248,10,15,.35);
}
.popup__btn-salto{ display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 14px;
  border-radius: 999px;

  text-decoration: none;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .82rem;

  color: rgba(255,255,255,.92);
  background: rgba(42,42,42,.70);           /* gris The Walk */
  border: 1px solid rgba(255,255,255,.16);}
  
.popup__btn-salto:hover{
  background: rgba(255, 115, 1, 1.0);          /* eco rojo #f80a0f */
  border-color: rgba(248,10,15,.35);
}

.popup__btn--ghost{
  background: rgba(255,255,255,.08);
}

.popup__close{
  position: absolute;
  right: 10px;
  top: 10px;
  width: 38px;
  height: 38px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.9);

  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.popup__close:hover{
  background: rgba(0,0,0,.35);
}
.ritmo-oraculo {
  margin-top: 24px;
  text-align: right;
}

.ritmo-oraculo a {
  font-size: 0.9rem;
  text-decoration: none;
  color: rgba(0,0,0,.5);
  border-bottom: 1px solid rgba(0,0,0,.2);
  transition: 0.3s ease;
}

.ritmo-oraculo a:hover {
  color: #fd6400;
  border-color: #fd6400;
}

/* móvil: más aire */
@media (max-width:700px){
  .popup__panel{
    padding: 18px 16px 14px;
  }
}

/* =========================
   MÓVIL: piano vertical + texto apilado
   ========================= */
@media (max-width:700px){

  .ritmo{ padding: .8rem; }

  .piano{
    aspect-ratio: 9 / 16;
    width: 100%;
    max-height: 100svh;

    /* fallback seguro si JS no corre */
    --gap-x: 7px;
    --gap-y: 7px;
  }

  .key{
    aspect-ratio: 9 / 16;
  }

  /* padding real en blancas */
  .key--white{
    padding: clamp(10px, 3.2vw, 18px);
  }
  .key--white:last-child{
    padding: clamp(14px, 4vw, 22px);
  }

  /* modo apilado: letras horizontales en columna */
  .key__label.is-stacked{
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    gap: .12em;
    font-weight: 600;
    font-size: clamp(0.10rem, 3.6vw, 0.5rem);
    line-height: 1;
    letter-spacing: .12em;
    text-align:center;
  }

  .key__label.is-stacked .stack-ch{ display:block; }
  .key__label.is-stacked .stack-dash{
    display:block;
    opacity:.85;
    transform: translateY(-0.05em);
  }
  .key__label.is-stacked .stack-break{
    display:block;
    height: .25em;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .key{ transition:none; }
  .key::before, .key::after{ transition:none; }
}
/* =========================
   CABECERA NEÓN · PUERTA-RITMO
   ========================= */

.ritmo-neon{
  position: fixed;
  top: clamp(10px, 2.2vw, 24px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: min(92vw, 980px);
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.neonJazzSession{
  margin: 0;
  padding: .28em .9em .34em;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .22em;
  line-height: 1.05;
  white-space: nowrap;

  font-family: Ubuntu, "Helvetica Neue", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(1rem, 2.1vw, 2.1rem);

  color: #ffffff;
  border: 1px solid rgba(255, 115, 0, 0.9);
  border-radius: 999px;
  background: rgba(20, 20, 20, .16);

  text-shadow:
    0 0 4px rgba(255, 186, 120, .85),
    0 0 10px rgba(255, 140, 40, .75),
    0 0 18px rgba(255, 110, 20, .65),
    0 0 34px rgba(253, 100, 0, .45);

  box-shadow:
    inset 0 0 8px rgba(255, 180, 120, .08),
    0 0 10px rgba(255, 130, 30, .16),
    0 0 30px rgba(253, 100, 0, .12);

  opacity: .94;
}

/* TABLET */
@media (max-width: 1024px){
  .ritmo-neon{
    top: clamp(10px, 2.8vw, 18px);
    width: min(94vw, 760px);
  }

  .neonJazzSession{
    font-size: clamp(.92rem, 2.4vw, 1.45rem);
    letter-spacing: .18em;
    padding: .3em .8em .36em;
  }
}

/* MÓVIL */
@media (max-width: 700px){
  .ritmo-neon{
    top: max(8px, env(safe-area-inset-top));
    width: calc(100vw - 1rem);
  }

  .neonJazzSession{
    white-space: normal;
    max-width: 100%;
    font-size: clamp(.72rem, 3.5vw, 1rem);
    letter-spacing: .14em;
    line-height: 1.15;
    padding: .42em .72em .48em;
    border-radius: 18px;
  }
}

/* MÓVIL MUY PEQUEÑO */
@media (max-width: 420px){
  .neonJazzSession{
    font-size: clamp(.68rem, 3.8vw, .86rem);
    letter-spacing: .1em;
    padding: .46em .62em .5em;
  }
}

/* BOTÓN */

.tw-audio-btn{
  position: fixed;
  top: clamp(72px, 10vw, 100px);
  right: clamp(12px, 3vw, 28px);
  z-index: 50;

  padding: 10px 14px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);

  font-size: clamp(.78rem, 1.6vw, .95rem);
  line-height: 1.1;
  max-width: min(42vw, 220px);
}
@media (max-width: 700px){
  .tw-audio-btn{
    top: auto;
    right: 12px;
    bottom: 12px;
    left: auto;

    padding: 9px 12px;
    font-size: .78rem;
    max-width: 46vw;
  }
}


/* MODAL */

.tw-audio-modal{

position:fixed;
inset:0;

display:flex;
align-items:center;
justify-content:center;

background:rgba(0,0,0,.65);

z-index:200;

}


.tw-audio-modal[hidden]{
display:none;
}


.tw-audio-panel{

width:600px;
max-width:90vw;

background:rgba(20,20,20,.95);

padding:24px;

border:1px solid rgba(255,255,255,.2);

color:#fff;

}


.tw-audio-close{

position:absolute;
top:14px;
right:16px;

font-size:28px;

border:none;
background:none;

color:white;

cursor:pointer;

}


#tw-audio-list{

list-style:none;
padding:0;
margin:20px 0;

display:grid;
gap:10px;

}


#tw-audio-list li{

display:flex;
justify-content:space-between;

border:1px solid rgba(255,255,255,.15);

padding:8px 12px;

}


#tw-audio-list button{

background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.2);

color:white;

cursor:pointer;

padding:4px 10px;

}