:root{
  --bg:#02060c;
  --panel:#07111d;
  --panel2:#0b1724;
  --line:#1b3045;
  --muted:#9dafc4;
  --text:#f4f8ff;
  --green:#24e071;
  --blue:#129bff;
  --purple:#a64cff;
  --orange:#ff9026;
  --yellow:#ffe431;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  margin:0;
  width:100%;
  min-height:100%;
  background:#02060c;
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
}
body{overflow-x:hidden}
button,select,input{font-family:inherit}
button{cursor:pointer}

#phone{
  width:100%;
  max-width:930px;
  margin:0 auto;
  min-height:100vh;
  padding:8px;
  background:radial-gradient(circle at 50% 12%,#10243a 0,#050b13 42%,#02060b 100%);
}

.card{
  background:linear-gradient(180deg,rgba(8,18,30,.98),rgba(3,8,15,.99));
  border:1px solid var(--line);
  border-radius:15px;
  box-shadow:0 14px 45px rgba(0,0,0,.35);
}

.top{
  display:grid;
  grid-template-columns:38px 1fr 170px 42px;
  gap:8px;
  align-items:center;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#050d17;
}
.hamb,.gear{
  border:0;
  background:transparent;
  color:white;
  font-size:27px;
}
.top h1{
  margin:0;
  color:var(--green);
  font-size:28px;
  line-height:1;
}
.top p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:14px;
}
.top select{
  height:44px;
  border-radius:10px;
  border:1px solid #28455e;
  background:#07121f;
  color:white;
  padding:0 12px;
}

.audio{
  margin-top:8px;
  padding:12px;
}
.songrow{
  display:grid;
  grid-template-columns:36px 1fr 44px;
  gap:10px;
  align-items:center;
}
.music{font-size:28px}
.songrow strong{display:block;font-size:19px}
.songrow small{display:block;color:var(--muted);margin-top:5px;font-size:15px}
.songrow button{
  height:40px;
  border-radius:9px;
  border:1px solid #274057;
  color:white;
  background:#07131f;
}
#wave{
  margin-top:9px;
  width:100%;
  height:95px;
  display:block;
}

.controls{
  margin-top:8px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.box{padding:12px;min-height:160px}
.box h2{margin:0 0 12px;font-size:17px}
.speedline{
  display:grid;
  grid-template-columns:52px 1fr 52px;
  align-items:center;
  gap:10px;
}
.speedline button,.reset,.ab button,.nums button,.fakeSelect{
  border:1px solid #263e56;
  background:#0b1828;
  color:white;
  border-radius:9px;
  height:44px;
  font-size:18px;
}
.speedline b{
  color:var(--green);
  text-align:center;
  font-size:39px;
}
input[type=range]{width:100%;accent-color:var(--green)}
.range{display:flex;justify-content:space-between;color:var(--muted);font-size:14px}
.reset{width:100px;display:block;margin:9px auto 0;height:36px}
.ab{display:grid;grid-template-columns:1fr 1fr}
.ab button{border-radius:8px 8px 0 0}
.on{background:#118542!important;border-color:var(--green)!important;color:white!important}
.times{
  margin:10px 0;
  display:grid;
  grid-template-columns:1fr 28px 1fr;
  align-items:center;
  gap:4px;
}
.times span{
  border:1px solid #263e56;
  border-radius:8px;
  padding:9px 4px;
  font-size:14px;
  text-align:center;
}
.times em{text-align:center;color:var(--muted);font-style:normal}
.loop label{display:flex;align-items:center;gap:8px;color:var(--muted)}
.loop input{display:none}
.loop i{
  width:44px;height:25px;border-radius:999px;background:#19a85b;display:inline-block;position:relative;
}
.loop i:after{
  content:"";width:21px;height:21px;border-radius:50%;background:white;position:absolute;right:2px;top:2px;
}
.count p{color:var(--muted);margin:0 0 18px}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.fakeSelect{display:block;width:100%;text-align:left;padding-left:12px;margin-bottom:9px}
.vol{display:flex;align-items:center;gap:8px}

.guitar{
  margin-top:8px;
  padding:12px;
}
.ghead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
.ghead h2{margin:0;font-size:19px;font-weight:500}
.tabs3d{
  display:flex;
  border:1px solid #263e56;
  border-radius:10px;
  overflow:hidden;
}
.tabs3d button{
  height:40px;
  padding:0 16px;
  border:0;
  background:#07131f;
  color:white;
}

.stage{
  position:relative;
  height:430px;
  border-radius:12px;
  overflow:hidden;
  background:radial-gradient(circle at 78% 38%,#48200d 0,#07121f 42%,#02060b 100%);
}
.guitarPhoto{position:absolute;inset:0}
.neck{
  position:absolute;
  left:4%;
  top:28%;
  width:74%;
  height:28%;
  border-radius:8px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.07),transparent 8%,transparent),
    repeating-linear-gradient(90deg,transparent 0 7.2%,rgba(230,230,230,.88) 7.3% 7.55%,transparent 7.7% 8.4%),
    linear-gradient(180deg,#8b4a24,#55240f 50%,#3a1708);
  box-shadow:inset 0 0 35px rgba(0,0,0,.55),0 8px 25px rgba(0,0,0,.38);
}
.headstock{
  position:absolute;
  left:0;
  top:25%;
  width:13%;
  height:35%;
  border-radius:45% 8px 8px 45%;
  background:linear-gradient(90deg,#2d160b,#7a3d1c);
}
.body{
  position:absolute;
  right:-7%;
  top:5%;
  width:48%;
  height:88%;
  border-radius:50%;
  background:
    radial-gradient(circle at 44% 47%,transparent 0 13%,rgba(0,0,0,.9) 14% 22%,transparent 23%),
    radial-gradient(circle at 44% 47%,transparent 0 23%,#75400f 24% 25%,transparent 26%),
    linear-gradient(110deg,#b96d24,#6c2e0e 66%,#2b1005);
  box-shadow:inset 0 0 55px rgba(0,0,0,.58);
}
.strings{
  position:absolute;
  left:3%;
  right:4%;
  top:34%;
  height:17%;
  background:repeating-linear-gradient(180deg,rgba(235,245,255,.85) 0 1.5px,transparent 2px 17%);
  z-index:5;
}
.frets{
  position:absolute;
  left:13%;
  top:25%;
  width:68%;
  height:36%;
  background:repeating-linear-gradient(90deg,transparent 0 7.5%,rgba(245,245,245,.8) 7.6% 7.8%,transparent 7.9% 8.6%);
  z-index:6;
}
.dots{
  position:absolute;
  left:20%;
  top:38%;
  width:55%;
  height:9%;
  background:
    radial-gradient(circle at 12% 50%,rgba(220,210,190,.45) 0 7%,transparent 8%),
    radial-gradient(circle at 32% 50%,rgba(220,210,190,.45) 0 7%,transparent 8%),
    radial-gradient(circle at 52% 50%,rgba(220,210,190,.45) 0 7%,transparent 8%),
    radial-gradient(circle at 72% 50%,rgba(220,210,190,.45) 0 7%,transparent 8%);
  z-index:7;
}
.soundhole{
  position:absolute;
  right:10%;
  top:30%;
  width:15%;
  height:30%;
  border-radius:50%;
  background:#030405;
  box-shadow:0 0 0 9px rgba(174,91,24,.7);
  z-index:9;
}

.leftHand{
  position:absolute;
  left:18%;
  top:31%;
  width:145px;
  height:170px;
  z-index:20;
  transition:.12s linear;
}
.leftHand b{
  position:absolute;
  left:42px;
  top:66px;
  width:86px;
  height:88px;
  border-radius:48%;
  background:linear-gradient(180deg,#d68b55,#91502a);
  box-shadow:0 8px 24px rgba(0,0,0,.38);
}
.leftHand span{
  position:absolute;
  bottom:63px;
  width:31px;
  border-radius:18px;
  background:linear-gradient(180deg,#df985d,#a65b2f);
}
.leftHand span:nth-child(1){left:4px;height:86px}
.leftHand span:nth-child(2){left:38px;height:109px}
.leftHand span:nth-child(3){left:72px;height:108px}
.leftHand span:nth-child(4){left:106px;height:88px}

.rightHand{
  position:absolute;
  right:4%;
  top:28%;
  width:160px;
  height:180px;
  z-index:20;
  transition:.12s linear;
}
.rightHand b{
  position:absolute;
  left:0;
  top:48px;
  width:96px;
  height:102px;
  border-radius:50%;
  background:linear-gradient(180deg,#c97842,#92502a);
}
.rightHand span{
  position:absolute;
  right:8px;
  width:35px;
  height:35px;
  border-radius:50%;
  background:#7f37df;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  box-shadow:0 0 18px rgba(166,76,255,.9);
}
.rp{top:14px!important;background:#236dff!important}
.ri{top:53px}
.rm{top:92px}
.ra{top:131px}

.note{
  position:absolute;
  z-index:30;
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  color:white;
  transform:translate(-50%,-50%);
  border:2px solid rgba(255,255,255,.66);
  box-shadow:0 0 23px currentColor;
}
.note.active{transform:translate(-50%,-50%) scale(1.55)}
.green{background:#0fae50;color:var(--green)}
.blue{background:#106ecb;color:var(--blue)}
.purple{background:#7330c8;color:var(--purple)}
.yellow{background:#d3bd00;color:var(--yellow)}
.orange{background:#c1680e;color:var(--orange)}

.stringMini{
  position:absolute;
  left:3%;
  right:3%;
  bottom:7%;
  height:24%;
  z-index:12;
}
.labels{
  position:absolute;
  width:26px;
  left:0;
  top:0;
  bottom:0;
  display:grid;
  grid-template-rows:repeat(6,1fr);
}
.labels span{font-size:16px;display:flex;align-items:center}
.miniLines{
  position:absolute;
  left:34px;
  right:0;
  top:0;
  bottom:0;
  background:repeating-linear-gradient(180deg,rgba(140,180,210,.25) 0 1px,transparent 1px 16.66%);
}
.miniCursor{
  position:absolute;
  left:44%;
  top:-4px;
  bottom:-4px;
  width:2px;
  background:var(--green);
  box-shadow:0 0 20px var(--green);
}

.info{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
}
.info div{
  border:1px solid var(--line);
  border-radius:10px;
  padding:9px 4px;
  text-align:center;
  background:#06111d;
}
.info small{display:block;color:var(--muted);font-size:13px}
.info b{display:block;margin-top:6px;font-size:17px}
.purple{color:var(--purple)!important}

.tab{
  margin-top:8px;
  padding:12px;
}
.tab nav{
  display:flex;
  gap:28px;
  border-bottom:1px solid var(--line);
  height:42px;
}
.tab nav button{
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:16px;
}
.tab nav .on{
  color:var(--green)!important;
  border-bottom:2px solid var(--green)!important;
}
.tabview{
  position:relative;
  height:180px;
  border:1px solid var(--line);
  border-radius:8px;
  margin-top:10px;
  background:#03080f;
  overflow:hidden;
}
.tablines{
  position:absolute;
  inset:22px 16px;
  background:repeating-linear-gradient(180deg,transparent 0 22px,rgba(220,230,245,.55) 23px 24px);
}
.tabnum{
  position:absolute;
  font-size:26px;
  color:white;
}
.tabnum.glow{
  color:var(--yellow);
  text-shadow:0 0 18px var(--yellow);
}
.tabcursor{
  position:absolute;
  left:18%;
  top:8%;
  bottom:8%;
  width:2px;
  background:var(--green);
  box-shadow:0 0 18px var(--green);
}
.timeline{
  position:relative;
  height:40px;
  border:1px solid var(--line);
  margin-top:10px;
  background:#03080f;
  overflow:hidden;
}
.dot{
  position:absolute;
  width:10px;
  height:10px;
  top:14px;
  border-radius:50%;
}
.timelineCursor{
  position:absolute;
  top:0;
  bottom:0;
  left:20%;
  width:2px;
  background:var(--green);
  box-shadow:0 0 18px var(--green);
}
.transport{
  margin-top:10px;
  height:72px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#06111d;
  display:grid;
  grid-template-columns:1.2fr .8fr 44px 62px 44px 44px 1.3fr 1fr;
  gap:7px;
  align-items:center;
  padding:8px;
}
.transport strong{color:var(--green);font-size:24px}
.transport span{color:var(--muted)}
.transport button{
  height:44px;
  border-radius:50%;
  border:0;
  background:#0b1828;
  color:white;
  font-size:20px;
}
.transport .play{
  width:56px;
  height:56px;
  background:var(--green);
  font-size:27px;
}
.transport b{color:var(--green)}
.vol2{display:flex;align-items:center;gap:8px}

footer{
  margin-top:8px;
  height:86px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#06111d;
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
footer button{
  border:0;
  background:transparent!important;
  color:var(--muted);
  font-size:25px;
}
footer span{display:block;font-size:13px;margin-top:3px}
footer .on{color:var(--green)!important}

@media(max-width:760px){
  #phone{padding:6px}
  .top{grid-template-columns:34px 1fr 132px 34px}
  .top h1{font-size:20px}
  .top p{font-size:11px}
  .audio{display:block}
  .controls{grid-template-columns:1fr 1fr}
  .box{min-height:132px;padding:9px}
  .count,.metro{display:none}
  .stage{height:330px}
  .ghead h2{font-size:15px}
  .tabs3d button{height:33px;padding:0 9px}
  .leftHand{transform:scale(.72);transform-origin:left top}
  .rightHand{transform:scale(.72);transform-origin:right top}
  .info{grid-template-columns:repeat(3,1fr)}
  .tabview{height:150px}
  .transport{grid-template-columns:1fr .6fr 38px 54px 38px 38px; height:64px}
  .transport div:last-child,.vol2{display:none}
}

/* =========================================================
   FLAMENCO TAB PRO V5.2 VISUAL PRO PLUS
   Objetivo: acercar la pantalla móvil a la maqueta objetivo.
   ========================================================= */

body {
  background:#02060c !important;
}

#phone {
  max-width: 960px !important;
  padding: 8px !important;
  background:
    radial-gradient(circle at 50% 5%, rgba(18,45,72,.75), transparent 35%),
    linear-gradient(180deg,#02060c,#030912 48%,#02060c) !important;
}

/* Cabecera más limpia */
.top {
  grid-template-columns: 42px 1fr 168px 42px !important;
  padding: 12px 14px !important;
  margin-bottom: 8px !important;
}

.top h1 {
  font-size: 30px !important;
  letter-spacing: -.5px !important;
}

.top p {
  font-size: 14px !important;
}

/* Audio compacto pero profesional */
.audio {
  padding: 12px 14px !important;
  margin-bottom: 8px !important;
}

#wave {
  height: 82px !important;
  filter: drop-shadow(0 0 10px rgba(0,153,255,.75));
}

/* Controles: más parecidos a tarjetas de la maqueta */
.controls {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.box {
  min-height: 150px !important;
  padding: 13px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg,rgba(8,19,32,.98),rgba(3,8,15,.99)) !important;
}

.speedline b {
  font-size: 42px !important;
  color: #26e77b !important;
  text-shadow: 0 0 18px rgba(38,231,123,.35);
}

/* Guitarra como protagonista */
.guitar {
  padding: 12px !important;
  margin-top: 10px !important;
  border-radius: 18px !important;
}

.ghead {
  margin-bottom: 10px !important;
}

.ghead h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
}

/* Escenario más alto, dominante */
.stage {
  height: 520px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 82% 41%, rgba(167,90,30,.75) 0 22%, transparent 41%),
    radial-gradient(circle at 28% 36%, rgba(18,38,58,.95) 0 25%, transparent 52%),
    linear-gradient(180deg,#071420 0%, #02060b 100%) !important;
  box-shadow:
    inset 0 0 70px rgba(0,0,0,.55),
    0 20px 50px rgba(0,0,0,.45) !important;
}

/* Mástil más realista y más ancho */
.neck {
  left: 1.5% !important;
  top: 29% !important;
  width: 84% !important;
  height: 25% !important;
  border-radius: 9px !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.15), transparent 5%, transparent 93%, rgba(0,0,0,.25)),
    repeating-linear-gradient(90deg,
      transparent 0 6.2%,
      rgba(235,235,225,.92) 6.35% 6.55%,
      rgba(70,45,30,.2) 6.65% 7.15%),
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.07) 0 1px,
      transparent 1px 16.5%),
    linear-gradient(180deg,#9a5b2e 0%,#713819 48%,#4a210e 100%) !important;
  box-shadow:
    inset 0 8px 18px rgba(255,255,255,.09),
    inset 0 -18px 35px rgba(0,0,0,.42),
    0 12px 30px rgba(0,0,0,.45) !important;
}

/* Pala más presente */
.headstock {
  left: -2% !important;
  top: 24% !important;
  width: 16% !important;
  height: 38% !important;
  border-radius: 50% 16px 16px 50% !important;
  background:
    radial-gradient(circle at 22% 30%, rgba(255,190,110,.45), transparent 18%),
    linear-gradient(90deg,#211007,#8c4b23 54%,#331609) !important;
  box-shadow: inset 0 0 28px rgba(0,0,0,.65) !important;
}

/* Cuerpo más foto/maqueta */
.body {
  right: -10% !important;
  top: -3% !important;
  width: 54% !important;
  height: 98% !important;
  background:
    radial-gradient(circle at 48% 48%, #030303 0 10%, transparent 11%),
    radial-gradient(circle at 48% 48%, transparent 0 16%, rgba(215,126,45,.95) 17% 18%, transparent 19%),
    radial-gradient(circle at 36% 35%, rgba(255,190,95,.36), transparent 32%),
    linear-gradient(115deg,#c47b2d 0%,#8a4418 48%,#3d1506 100%) !important;
  box-shadow:
    inset 0 0 80px rgba(0,0,0,.58),
    -18px 0 50px rgba(0,0,0,.42) !important;
}

/* Boca más creíble */
.soundhole {
  right: 13.8% !important;
  top: 34.5% !important;
  width: 16% !important;
  height: 25% !important;
  background:#010203 !important;
  box-shadow:
    0 0 0 8px rgba(177,91,29,.85),
    0 0 0 13px rgba(55,20,6,.95),
    0 0 24px rgba(0,0,0,.9) !important;
}

/* Cuerdas más finas y visibles */
.strings {
  left: 1.5% !important;
  right: 3% !important;
  top: 35.5% !important;
  height: 15% !important;
  background:
    repeating-linear-gradient(180deg,
      rgba(245,250,255,.95) 0 1.35px,
      transparent 1.8px 16.6%) !important;
  z-index: 12 !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.8));
}

.frets {
  left: 9% !important;
  top: 27% !important;
  width: 76% !important;
  height: 30% !important;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 6.35%,
      rgba(240,238,230,.88) 6.48% 6.68%,
      transparent 6.8% 7.05%) !important;
  z-index: 14 !important;
}

.dots {
  left: 17% !important;
  top: 39% !important;
  width: 61% !important;
  height: 8% !important;
  opacity: .65 !important;
}

/* Manos más grandes, mejor colocadas */
.leftHand {
  left: 19% !important;
  top: 28.5% !important;
  width: 165px !important;
  height: 205px !important;
  z-index: 28 !important;
  opacity: .93 !important;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.45));
}

.leftHand b {
  left: 46px !important;
  top: 86px !important;
  width: 98px !important;
  height: 104px !important;
  background:
    radial-gradient(circle at 35% 20%, rgba(255,206,160,.55), transparent 26%),
    linear-gradient(180deg,#d88d57,#86451f) !important;
}

.leftHand span {
  width: 35px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 40% 12%, rgba(255,210,165,.7), transparent 24%),
    linear-gradient(180deg,#e39a5e,#a25729) !important;
}

.leftHand span:nth-child(1){left:3px!important;height:106px!important}
.leftHand span:nth-child(2){left:41px!important;height:132px!important}
.leftHand span:nth-child(3){left:80px!important;height:129px!important}
.leftHand span:nth-child(4){left:119px!important;height:107px!important}

.rightHand {
  right: 2% !important;
  top: 28.5% !important;
  width: 185px !important;
  height: 205px !important;
  z-index: 30 !important;
  opacity: .94 !important;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.45));
}

.rightHand b {
  left: 8px !important;
  top: 57px !important;
  width: 110px !important;
  height: 114px !important;
  background:
    radial-gradient(circle at 36% 22%, rgba(255,205,160,.5), transparent 30%),
    linear-gradient(180deg,#c87942,#88451f) !important;
}

.rightHand span {
  right: 8px !important;
  width: 38px !important;
  height: 38px !important;
  font-size: 16px !important;
}

/* Notas más integradas en traste/cuerda */
.note {
  width: 38px !important;
  height: 38px !important;
  border: 2px solid rgba(255,255,255,.78) !important;
  box-shadow:
    0 0 18px currentColor,
    0 0 35px currentColor !important;
  z-index: 34 !important;
}

.note.active {
  transform: translate(-50%,-50%) scale(1.55) !important;
  outline: 2px solid rgba(255,255,255,.32);
}

/* Visual de cuerdas bajo guitarra */
.stringMini {
  left: 3% !important;
  right: 3% !important;
  bottom: 6% !important;
  height: 25% !important;
}

.labels span {
  font-size: 17px !important;
  color: #eaf3ff !important;
}

/* Info inferior más legible */
.info {
  margin-top: 10px !important;
  grid-template-columns: repeat(6, minmax(0,1fr)) !important;
}

.info div {
  padding: 12px 4px !important;
  border-radius: 12px !important;
}

.info small {
  font-size: 13px !important;
}

.info b {
  font-size: 18px !important;
}

/* Tablatura profesional */
.tab {
  padding: 13px !important;
  border-radius: 18px !important;
}

.tabview {
  height: 190px !important;
  background:
    linear-gradient(180deg,rgba(3,8,15,.95),rgba(2,6,11,.98)) !important;
}

.tabnum {
  font-size: 28px !important;
}

.transport {
  height: 78px !important;
}

/* Móvil: la maqueta debe ocupar ancho completo, no mini escritorio */
@media(max-width:760px){
  #phone {
    max-width: none !important;
    width: 100% !important;
    padding: 6px !important;
  }

  .top {
    grid-template-columns: 34px 1fr 130px 34px !important;
    padding: 9px !important;
  }

  .top h1 {
    font-size: 22px !important;
  }

  .top p {
    font-size: 11px !important;
  }

  .audio {
    padding: 9px !important;
  }

  #wave {
    height: 66px !important;
  }

  .controls {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .box {
    min-height: 126px !important;
    padding: 9px !important;
  }

  .box h2 {
    font-size: 14px !important;
    margin-bottom: 7px !important;
  }

  .speedline {
    grid-template-columns: 40px 1fr 40px !important;
    gap: 5px !important;
  }

  .speedline b {
    font-size: 31px !important;
  }

  .count,.metro {
    display: block !important;
  }

  .nums button,
  .fakeSelect,
  .speedline button {
    height: 34px !important;
    font-size: 14px !important;
  }

  .reset {
    height: 30px !important;
    margin-top: 5px !important;
  }

  .guitar {
    padding: 8px !important;
  }

  .ghead h2 {
    font-size: 15px !important;
  }

  .tabs3d button {
    height: 31px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  .stage {
    height: 410px !important;
  }

  .neck {
    left: 0% !important;
    width: 88% !important;
    top: 31% !important;
    height: 24% !important;
  }

  .headstock {
    width: 15% !important;
    left: -3% !important;
  }

  .body {
    right: -16% !important;
    top: 0% !important;
    width: 61% !important;
    height: 82% !important;
  }

  .soundhole {
    right: 10% !important;
    top: 35% !important;
    width: 18% !important;
    height: 23% !important;
  }

  .leftHand {
    transform: scale(.8) !important;
    transform-origin: left top !important;
    left: 21% !important;
    top: 29% !important;
  }

  .rightHand {
    transform: scale(.78) !important;
    transform-origin: right top !important;
    right: -2% !important;
    top: 30% !important;
  }

  .note {
    width: 31px !important;
    height: 31px !important;
    font-size: 13px !important;
  }

  .info {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 6px !important;
  }

  .info div {
    padding: 8px 3px !important;
  }

  .info small {
    font-size: 11px !important;
  }

  .info b {
    font-size: 14px !important;
  }

  .tab nav {
    gap: 12px !important;
    overflow-x: auto !important;
  }

  .tab nav button {
    min-width: max-content !important;
    font-size: 13px !important;
  }

  .tabview {
    height: 145px !important;
  }

  .tabnum {
    font-size: 20px !important;
  }

  .transport {
    grid-template-columns: 1fr .6fr 34px 48px 34px 34px !important;
    height: 62px !important;
    gap: 4px !important;
  }

  .transport strong {
    font-size: 18px !important;
  }

  .transport button {
    width: 34px !important;
    height: 34px !important;
    font-size: 14px !important;
  }

  .transport .play {
    width: 48px !important;
    height: 48px !important;
    font-size: 23px !important;
  }

  footer {
    height: 72px !important;
  }
}

/* En pantallas muy estrechas: priorizar guitarra */
@media(max-width:430px){
  .audio {
    display:none !important;
  }

  .controls {
    grid-template-columns: 1fr 1fr !important;
  }

  .count,.metro {
    display:none !important;
  }

  .stage {
    height: 395px !important;
  }

  .tabview {
    height: 130px !important;
  }
}