/* ===== V48: motor de niveles 3D / limpio, sin tocar intro ni tienda ===== */
.v48-screen,
.v48-stage{
  width:100vw;
  height:100vh;
  overflow:hidden;
}
.v48-stage{
  position:relative;
  color:#fff3c8;
  font-family:Arial, Helvetica, sans-serif;
}
.v48-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.v48-shade{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 36%,rgba(80,38,12,.20),rgba(18,7,2,.76) 72%);
}
.v48-back{
  position:absolute;
  z-index:160;
  top:6vh;
  left:2.4vw;
  width:72px;
  height:72px;
  border:0;
  border-radius:50%;
  background:linear-gradient(180deg,#ffd95d,#d99a21);
  color:#fff;
  font-size:36px;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 10px 18px rgba(0,0,0,.32), inset 0 3px 0 rgba(255,255,255,.34);
}
.v48-back:hover{filter:brightness(1.06); transform:scale(1.03)}
.v48-hud{
  position:absolute;
  z-index:150;
  top:2.5vh;
  left:50%;
  transform:translateX(-50%);
  width:min(760px,60vw);
  text-align:center;
}
.v48-time{
  font-weight:1000;
  color:#fff;
  font-size:22px;
  text-shadow:0 3px 5px #000;
}
.v48-progress{
  display:grid;
  grid-template-columns:104px 1fr 62px;
  gap:12px;
  align-items:center;
  margin-top:7px;
  padding:9px 14px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(70,36,13,.92),rgba(26,11,4,.93));
  border:3px solid rgba(255,223,134,.62);
  font-weight:1000;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.v48-track{
  height:16px;
  border-radius:99px;
  background:rgba(16,6,2,.9);
  overflow:hidden;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.4);
}
.v48-track i{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,#f9d24c,#78cf46);
  border-radius:inherit;
  transition:width .12s linear;
}
.v48-master{
  position:absolute;
  z-index:70;
  left:3.6vw;
  top:33vh;
  width:175px;
  text-align:center;
}
.v48-master img{
  width:145px;
  filter:drop-shadow(0 12px 9px rgba(0,0,0,.45));
}
.v48-master p{
  margin-top:-4px;
  padding:12px;
  border-radius:10px;
  background:rgba(20,8,3,.92);
  border:4px solid #fff;
  color:#fff;
  font-weight:1000;
  font-size:12px;
  text-transform:uppercase;
  line-height:1.12;
}
.v48-target{
  position:absolute;
  z-index:70;
  right:5vw;
  top:28vh;
  text-align:center;
}
.v48-target img{
  width:138px;
  height:138px;
  object-fit:contain;
  background:#f8ecd6;
  border:7px solid rgba(110,61,25,.72);
  border-radius:10px;
  box-shadow:0 10px 18px rgba(0,0,0,.32);
}
.v48-target strong{
  display:inline-block;
  margin-top:8px;
  padding:5px 14px;
  background:rgba(42,20,8,.9);
  border:3px solid #fff;
  border-radius:8px;
  color:#fff;
  font-weight:1000;
}
.v48-work{
  position:absolute;
  z-index:95;
  left:50%;
  top:15.5vh;
  transform:translateX(-50%);
  width:min(860px,64vw);
  min-height:62vh;
  text-align:center;
}
.v48-work--3d{
  top:13.3vh;
  width:min(1000px,72vw);
}
.v48-title{
  position:relative;
  z-index:100;
  margin:0 0 9px;
  font-size:clamp(22px,2.35vw,34px);
  color:#fff;
  font-weight:1000;
  text-transform:uppercase;
  text-shadow:0 4px 8px #000;
  letter-spacing:.02em;
}
.v48-message{
  position:relative;
  z-index:140;
  width:min(94%,860px);
  margin:10px auto 8px;
  padding:12px 18px;
  border-radius:15px;
  background:linear-gradient(180deg,rgba(58,30,12,.97),rgba(24,11,5,.97));
  border:3px solid rgba(255,220,135,.78);
  color:#fff0bf;
  font-weight:1000;
  text-align:center;
  line-height:1.18;
  box-shadow:0 10px 20px rgba(0,0,0,.3);
}
.v48-paper{
  position:relative;
  width:min(54vh,500px);
  height:min(54vh,500px);
  margin:0 auto;
  background:#f8ecd6;
  border:7px solid rgba(110,61,25,.72);
  border-radius:16px;
  box-shadow:0 15px 25px rgba(0,0,0,.28), inset 0 0 24px rgba(131,73,28,.12);
}
.v48-paper svg,
.v48-paper canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.v48-paper canvas{touch-action:none; cursor:none}
.v48-paper svg path{
  fill:none;
  stroke:rgba(143,105,51,.46);
  stroke-width:8;
  stroke-linejoin:round;
  stroke-linecap:round;
}
.v48-pencil{
  position:absolute;
  z-index:20;
  width:96px;
  height:18px;
  transform:translate(0,-9px) rotate(-24deg);
  transform-origin:left center;
  background:linear-gradient(90deg,#222 0 10%,#e9d4a8 10% 22%,#c07b31 22% 100%);
  border-radius:8px;
  pointer-events:none;
  opacity:0;
  filter:drop-shadow(0 6px 4px rgba(0,0,0,.28));
}
.v48-pencil.is-active{opacity:1}
.v48-pencil:before{
  content:"";
  position:absolute;
  left:-15px;
  top:2px;
  border-right:18px solid #202020;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
}
.v48-step-badges{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  width:min(92%,860px);
  margin:0 auto 8px;
  position:relative;
  z-index:120;
}
.v48-step-badges span{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(22,9,3,.72);
  border:2px solid rgba(255,221,143,.35);
  color:#f6d99a;
  font-size:12px;
  font-weight:1000;
  text-transform:uppercase;
  box-shadow:0 6px 12px rgba(0,0,0,.22);
}
.v48-step-badges span.is-active{
  background:linear-gradient(180deg,#ffe07c,#d28b18);
  border-color:#fff1bc;
  color:#492604;
}
.v48-step-badges span.is-done{
  background:linear-gradient(180deg,#9cd85d,#4f9326);
  border-color:#cfff99;
  color:#173506;
}
.v48-3d-viewport{
  position:relative;
  z-index:100;
  width:min(96vw,1000px);
  height:min(58vh,560px);
  margin:0 auto;
  border-radius:26px;
  overflow:hidden;
  background:radial-gradient(circle at 50% 35%,#44200b,#160804 68%);
  border:5px solid rgba(138,82,32,.88);
  box-shadow:0 20px 30px rgba(0,0,0,.38), inset 0 0 28px rgba(255,201,102,.10);
}
.v48-3d-viewport:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 40%,rgba(255,221,136,.13),transparent 46%), linear-gradient(180deg,rgba(255,255,255,.06),transparent 30%,rgba(0,0,0,.18));
  z-index:3;
}
.v48-webgl,
.v48-canvas3d{
  display:block;
  width:100%;
  height:100%;
  cursor:none;
  touch-action:none;
}
.v48-loading3d{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#ffedb7;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.05em;
  text-shadow:0 3px 8px #000;
}
.v48-fallback-label{
  position:absolute;
  right:14px;
  bottom:12px;
  z-index:4;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(20,8,3,.75);
  border:1px solid rgba(255,223,150,.42);
  color:#ffedb7;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
.v48-btn{
  position:relative;
  z-index:160;
  margin:8px 8px 0;
  padding:13px 24px;
  border:3px solid rgba(255,235,160,.78);
  border-radius:14px;
  background:linear-gradient(180deg,#ffca45,#c98013);
  color:#fff;
  font-weight:1000;
  text-shadow:0 2px 4px rgba(0,0,0,.35);
  cursor:pointer;
  box-shadow:0 10px 16px rgba(0,0,0,.25), inset 0 3px 0 rgba(255,255,255,.25);
}
.v48-btn:hover{filter:brightness(1.06); transform:translateY(-1px)}
.v48-btn.green{background:linear-gradient(180deg,#9dda55,#4f9c22)}
.v48-hidden{display:none!important}
.v48-result .v48-piece{
  width:min(250px,28vw);
  height:min(250px,28vw);
  object-fit:contain;
  background:#f7ead4;
  border:8px solid rgba(119,69,29,.75);
  border-radius:16px;
  box-shadow:0 15px 25px rgba(0,0,0,.35);
}
.v48-reward{
  width:max-content;
  margin:-18px auto 12px;
  padding:9px 22px;
  border-radius:20px;
  background:linear-gradient(180deg,#ffe477,#d8981d);
  color:#4b2706;
  font-weight:1000;
  font-size:24px;
  border:4px solid #fff2b8;
  box-shadow:0 10px 18px rgba(0,0,0,.24);
}
@media(max-width:1100px){
  .v48-hud{width:70vw}
  .v48-work--3d{width:78vw}
  .v48-master{left:2vw;width:145px}.v48-master img{width:125px}
  .v48-target{right:2.5vw}.v48-target img{width:116px;height:116px}
}
@media(max-width:900px){
  .v48-back{top:2vh;left:3vw;width:54px;height:54px;font-size:29px;z-index:190}
  .v48-hud{width:76vw;top:1.6vh;left:58%}
  .v48-progress{grid-template-columns:82px 1fr 48px;padding:7px 10px;font-size:11px;gap:8px}
  .v48-time{font-size:17px}
  .v48-master,.v48-target{display:none}
  .v48-work{width:94vw;top:15vh}
  .v48-work--3d{width:96vw;top:13vh}
  .v48-title{font-size:clamp(19px,6vw,28px);margin-bottom:7px}
  .v48-paper{width:min(72vw,430px);height:min(72vw,430px)}
  .v48-3d-viewport{width:95vw;height:min(54vh,520px);border-width:4px;border-radius:20px}
  .v48-step-badges{gap:5px;margin-bottom:7px}
  .v48-step-badges span{font-size:9.8px;padding:7px 8px}
  .v48-message{font-size:12px;padding:9px 12px;margin-top:8px}
  .v48-result .v48-piece{width:min(55vw,230px);height:min(55vw,230px)}
}
@media(max-width:520px){
  .v48-hud{left:59%;width:72vw}
  .v48-work{top:14.5vh}
  .v48-work--3d{top:12.5vh}
  .v48-3d-viewport{height:min(51vh,460px)}
  .v48-step-badges span{font-size:8.8px;padding:6px 6px}
  .v48-paper{width:min(86vw,390px);height:min(86vw,390px)}
}

/* ===== V50: layout compacto + mentor animado + audio ===== */
.v48-stage{
  isolation:isolate;
}
.v48-hud{
  top:1.8vh;
  width:min(720px,58vw);
}
.v48-progress{
  margin-top:5px;
  padding:7px 13px;
  border-width:2px;
}
.v48-track{height:14px}
.v48-back{
  top:5vh;
  width:64px;
  height:64px;
  font-size:32px;
}
.v48-audio-toggle{
  position:absolute;
  z-index:165;
  right:2.4vw;
  top:5vh;
  width:50px;
  height:50px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:23px;
  background:linear-gradient(180deg,#ffe381,#d28d18);
  color:#fff;
  box-shadow:0 8px 14px rgba(0,0,0,.28), inset 0 3px 0 rgba(255,255,255,.3);
}
.v48-audio-toggle.is-muted{
  filter:saturate(.55) brightness(.82);
}
.v48-master{
  left:3vw;
  top:27vh;
  width:190px;
}
.v48-master .v48-mentor-gif{
  width:128px;
  max-height:330px;
  object-fit:contain;
  transform-origin:50% 100%;
  animation:v48MentorTalk 1.15s ease-in-out infinite;
}
.v48-speech{
  position:relative;
  width:188px;
  min-height:76px;
  margin:0 auto;
  padding:10px 12px;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,246,220,.98),rgba(238,211,161,.98));
  border:3px solid rgba(92,53,22,.85);
  color:#3d210a;
  text-align:left;
  box-shadow:0 10px 15px rgba(0,0,0,.26), inset 0 2px 0 rgba(255,255,255,.4);
}
.v48-speech::before{
  content:"";
  position:absolute;
  left:50%;
  top:-13px;
  transform:translateX(-50%) rotate(45deg);
  width:20px;
  height:20px;
  background:rgba(255,246,220,.98);
  border-left:3px solid rgba(92,53,22,.85);
  border-top:3px solid rgba(92,53,22,.85);
}
.v48-master .v48-speech p,
.v48-master p#v48Mentor{
  margin:0;
  padding:0;
  min-height:52px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#3d210a;
  font-size:11.5px;
  font-weight:1000;
  line-height:1.24;
  text-transform:none;
  box-shadow:none;
}
.v48-master .v48-speech p.is-typing::after,
.v48-master p#v48Mentor.is-typing::after{
  content:"▌";
  display:inline-block;
  margin-left:2px;
  color:#7a4214;
  animation:v48Caret .7s steps(1) infinite;
}
.v48-target{
  right:4.2vw;
  top:28vh;
}
.v48-target img{
  width:116px;
  height:116px;
  border-width:6px;
}
.v48-target strong{
  font-size:12px;
  padding:4px 12px;
}
.v48-work{
  top:12.1vh;
  width:min(740px,56vw);
  min-height:0;
}
.v48-work--3d{
  top:11.4vh;
  width:min(860px,65vw);
}
.v48-title{
  margin-bottom:7px;
  font-size:clamp(20px,2.1vw,30px);
  line-height:1.05;
}
.v48-paper{
  width:min(43vh,410px);
  height:min(43vh,410px);
  border-width:6px;
}
.v48-step-badges{
  gap:7px;
  margin-bottom:6px;
}
.v48-step-badges span{
  padding:6px 10px;
  font-size:11px;
}
.v48-3d-viewport{
  width:min(74vw,860px);
  height:min(45vh,410px);
  border-radius:22px;
  border-width:4px;
}
.v48-message{
  width:min(90%,720px);
  margin:7px auto 5px;
  padding:9px 14px;
  border-radius:12px;
  border-width:2px;
  font-size:13px;
  line-height:1.15;
}
.v48-btn{
  margin:5px 6px 0;
  padding:10px 22px;
  border-width:2px;
  border-radius:13px;
  font-size:12px;
  letter-spacing:.03em;
}
.v48-result{
  top:13vh;
  width:min(680px,52vw);
}
.v48-result .v48-title{
  margin-bottom:6px;
  font-size:clamp(20px,2.05vw,30px);
}
.v48-result .v48-piece{
  width:min(180px,17vw);
  height:min(180px,17vw);
  border-width:7px;
}
.v48-reward{
  margin:-12px auto 7px;
  padding:6px 18px;
  font-size:20px;
  border-width:3px;
}
.v48-result .v48-message{
  display:none;
}
.v48-result .v48-btn{
  margin-top:8px;
}
@keyframes v48MentorTalk{
  0%,100%{transform:translateY(0) scaleY(1)}
  35%{transform:translateY(-3px) scaleY(1.012)}
  60%{transform:translateY(1px) scaleY(.996)}
}
@keyframes v48Caret{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}
@media(max-height:760px) and (min-width:901px){
  .v48-hud{top:1.5vh}
  .v48-back{top:4.8vh;width:60px;height:60px;font-size:30px}
  .v48-work{top:11.2vh}
  .v48-work--3d{top:10.7vh}
  .v48-paper{width:min(40vh,390px);height:min(40vh,390px)}
  .v48-3d-viewport{height:min(42vh,390px)}
  .v48-result{top:11.5vh}
  .v48-result .v48-piece{width:min(162px,16vw);height:min(162px,16vw)}
.v48-master{top:26vh}
  .v48-master .v48-mentor-gif{width:240px;height:240px;max-height:none}
  .v48-speech{width:180px;min-height:70px;padding:9px 11px}
  .v48-master .v48-speech p,.v48-master p#v48Mentor{font-size:11px;line-height:1.18}
}
@media(max-width:1100px){
  .v48-hud{width:68vw}
  .v48-work--3d{width:76vw}
  .v48-master{left:2vw;width:172px}
  .v48-master .v48-mentor-gif{width:112px}
  .v48-speech{width:166px}
  .v48-target{right:2vw}.v48-target img{width:104px;height:104px}
}
@media(max-width:900px){
  .v48-audio-toggle{top:2vh;right:3vw;width:44px;height:44px;font-size:20px;z-index:190}
  .v48-master,.v48-target{display:none}
  .v48-hud{width:74vw;top:1.4vh;left:58%}
  .v48-work{width:94vw;top:13.2vh}
  .v48-work--3d{width:96vw;top:12.2vh}
  .v48-paper{width:min(72vw,400px);height:min(72vw,400px)}
  .v48-3d-viewport{width:95vw;height:min(48vh,480px)}
  .v48-message{display:block;font-size:12px;margin-top:7px;padding:8px 11px}
  .v48-result{width:92vw;top:13vh}
  .v48-result .v48-message{display:block}
  .v48-result .v48-piece{width:min(48vw,200px);height:min(48vw,200px)}
}
@media(max-width:520px){
  .v48-work{top:13.8vh}
  .v48-work--3d{top:12.6vh}
  .v48-3d-viewport{height:min(46vh,430px)}
  .v48-paper{width:min(84vw,370px);height:min(84vw,370px)}
  .v48-title{font-size:clamp(18px,5.8vw,25px)}
}
@media(min-width:901px){
  .v48-message{display:none}
  .v48-result .v48-message{display:none}
}

/* ===== V51: nivel centrado, motor 3D ampliado, guía hablante y música global ===== */
.v48-master.is-speaking .v48-mentor-gif{
  animation:v48MentorTalkFast .42s ease-in-out infinite;
  filter:drop-shadow(0 12px 10px rgba(0,0,0,.28));
}
.v48-speech{
  overflow:visible;
}
.v48-master .v48-speech p.is-typing,
.v48-master p#v48Mentor.is-typing{
  text-shadow:0 1px 0 rgba(255,255,255,.38);
}
.v48-master .v48-speech p.is-typing::after,
.v48-master p#v48Mentor.is-typing::after{
  content:"▌";
  display:inline-block;
  margin-left:3px;
  transform:translateY(-1px);
  color:#7a4214;
  animation:v48Caret .55s steps(1) infinite;
}
@keyframes v48MentorTalkFast{
  0%,100%{transform:translateY(0) scaleY(1) rotate(0deg)}
  25%{transform:translateY(-3px) scaleY(1.018) rotate(-.45deg)}
  52%{transform:translateY(1px) scaleY(.99) rotate(.45deg)}
  76%{transform:translateY(-1px) scaleY(1.006) rotate(0deg)}
}
@media(min-width:901px){
  .v48-hud{
    top:2.2vh;
    width:min(760px,56vw);
  }
  .v48-work{
    top:16vh;
    width:min(860px,62vw);
  }
  .v48-work--3d{
    top:16.8vh;
    width:min(920px,64vw);
  }
  .v48-title{
    margin-bottom:10px;
    font-size:clamp(23px,2.35vw,34px);
    line-height:1.02;
  }
  .v48-step-badges{
    gap:8px;
    margin-bottom:9px;
  }
  .v48-step-badges span{
    padding:8px 13px;
    font-size:11.5px;
  }
  .v48-3d-viewport{
    width:min(64vw,920px);
    height:min(52vh,500px);
    border-radius:24px;
  }
  .v48-paper{
    width:min(52vh,480px);
    height:min(52vh,480px);
  }
.v48-master{
    left:3.4vw;
    top:26.5vh;
    width:210px;
  }
  .v48-master .v48-mentor-gif{
    width:380px;
    height:380px;
    max-height:none;
    display:block;
    margin:0 auto -2px;
    object-fit:contain;
    object-position:bottom center;
  }
  .v48-speech{
    width:205px;
    min-height:88px;
    padding:11px 13px;
  }
  .v48-master .v48-speech p,
  .v48-master p#v48Mentor{
    font-size:11.8px;
    line-height:1.24;
  }
  .v48-target{
    right:4.4vw;
    top:32vh;
  }
  .v48-target img{
    width:122px;
    height:122px;
  }
  .v48-result{
    top:18vh;
    width:min(720px,54vw);
  }
  .v48-result .v48-piece{
    width:min(220px,19vw);
    height:min(220px,19vw);
  }
  .v48-reward{
    margin:-10px auto 9px;
  }
}
@media(max-height:760px) and (min-width:901px){
  .v48-hud{top:2vh}
  .v48-work{top:15.8vh}
  .v48-work--3d{top:16vh}
  .v48-3d-viewport{height:min(49vh,470px)}
  .v48-paper{width:min(48vh,455px);height:min(48vh,455px)}
.v48-master{top:27.5vh}
  .v48-master .v48-mentor-gif{width:280px;height:280px;max-height:none}
  .v48-speech{width:200px;min-height:82px;padding:10px 12px}
  .v48-result{top:16.2vh}
  .v48-result .v48-piece{width:min(205px,18vw);height:min(205px,18vw)}
}
@media(max-width:900px){
  .v48-work{top:15vh}
  .v48-work--3d{top:14.5vh}
  .v48-3d-viewport{height:min(51vh,500px)}
}
@media(max-width:520px){
  .v48-work{top:14.8vh}
  .v48-work--3d{top:14.2vh}
  .v48-3d-viewport{height:min(48vh,440px)}
}


/* ===== V52: niveles más grandes, centrados y barra visual mejor acompañada ===== */
@media(min-width:901px){
  .v48-hud{
    top:2.1vh;
    width:min(780px,58vw);
  }
  .v48-work{
    top:19vh;
    width:min(940px,68vw);
  }
  .v48-work--3d{
    top:19.2vh;
    width:min(1060px,76vw);
  }
  .v48-title{
    margin-bottom:12px;
    font-size:clamp(26px,2.65vw,40px);
  }
  .v48-paper{
    width:min(58vh,540px);
    height:min(58vh,540px);
  }
  .v48-step-badges{
    gap:9px;
    margin-bottom:10px;
  }
  .v48-step-badges span{
    padding:9px 15px;
    font-size:12.5px;
  }
  .v48-3d-viewport{
    width:min(72vw,1020px);
    height:min(56vh,560px);
  }
  .v48-master{
    top:30vh;
  }
  .v48-target{
    top:31vh;
  }
}
@media(max-height:760px) and (min-width:901px){
  .v48-work{top:18.4vh}
  .v48-work--3d{top:18.7vh}
  .v48-paper{width:min(54vh,500px);height:min(54vh,500px)}
  .v48-3d-viewport{height:min(53vh,510px)}
  .v48-master{top:30.2vh}
}
@media(max-width:900px){
  .v48-work{top:15.4vh}
  .v48-work--3d{top:15.1vh}
  .v48-3d-viewport{height:min(52vh,510px)}
}


/* ===== V53: viewport transparente + pantalla final ===== */
.v48-3d-viewport{
  background:transparent !important;
  border:2px solid rgba(255,214,123,.38) !important;
  border-radius:12px !important;
  box-shadow:none !important;
  overflow:visible;
}
.v48-3d-viewport::before{
  display:none !important;
}
.v48-loading3d{
  background:linear-gradient(180deg,rgba(24,10,4,.08),rgba(24,10,4,.02));
  border-radius:12px;
}
.v48-canvas3d,
.v48-webgl{
  background:transparent !important;
}
.v48-work--3d .v48-message{
  margin-top:12px;
}
.v48-final-screen,
.v48-final-stage{
  width:100vw;
  height:100vh;
  overflow:hidden;
}
.v48-final-stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff5d3;
  font-family:Arial, Helvetica, sans-serif;
}
.v48-final-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.v48-final-overlay{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 40%, rgba(255,198,87,.18), rgba(20,8,3,.84) 72%);
}
.v48-final-card{
  position:relative;
  z-index:2;
  width:min(780px,88vw);
  padding:34px 38px 30px;
  text-align:center;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(85,39,14,.90), rgba(28,11,4,.94));
  border:4px solid rgba(255,214,123,.66);
  box-shadow:0 24px 40px rgba(0,0,0,.42), inset 0 2px 0 rgba(255,255,255,.14);
}
.v48-final-kicker{
  display:inline-block;
  margin-bottom:10px;
  padding:8px 18px;
  border-radius:999px;
  background:linear-gradient(180deg,#ffd861,#e6a11c);
  color:#5d320b;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.v48-final-title{
  margin:0 0 10px;
  font-size:clamp(34px,4vw,60px);
  line-height:.98;
  font-weight:1000;
  text-transform:uppercase;
  text-shadow:0 5px 0 rgba(53,20,5,.65), 0 0 26px rgba(255,224,126,.16);
}
.v48-final-copy{
  max-width:640px;
  margin:0 auto;
  font-size:clamp(17px,1.4vw,24px);
  line-height:1.5;
  color:#fff3cb;
}
.v48-final-reward{
  width:max-content;
  margin:18px auto 0;
  padding:10px 24px;
  border-radius:18px;
  background:linear-gradient(180deg,#ffe478,#d9971c);
  color:#4b2807;
  font-size:clamp(22px,2vw,32px);
  font-weight:1000;
  border:3px solid #fff2b8;
  box-shadow:0 10px 18px rgba(0,0,0,.28);
}
.v48-final-actions{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:24px;
}
.v48-final-btn{
  min-width:240px;
  padding:14px 28px;
  border:0;
  border-radius:999px;
  cursor:pointer;
  color:#fff;
  font-size:clamp(15px,1.15vw,20px);
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.04em;
  background:linear-gradient(180deg,#ffd95d,#d99922);
  box-shadow:0 10px 18px rgba(0,0,0,.26), inset 0 3px 0 rgba(255,255,255,.24);
}
.v48-final-btn.secondary{
  background:linear-gradient(180deg,#a3df62,#579f2a);
}
.v48-final-btn:hover{filter:brightness(1.05); transform:translateY(-1px)}
@media(max-width:700px){
  .v48-final-card{padding:28px 22px 24px}
  .v48-final-actions{gap:12px}
  .v48-final-btn{min-width:210px}
}


/* ===== V54: motor gráfico menos invasivo en desktop ===== */
@media(min-width:901px){
  .v48-work{
    left:54.2%;
  }
  .v48-work--3d{
    left:54.5%;
    width:min(860px,62vw) !important;
    top:18.5vh !important;
  }
  .v48-3d-viewport{
    width:min(860px,62vw) !important;
    height:min(47vh,420px) !important;
    margin:0 auto;
  }
  .v48-paper{
    width:min(50vh,460px) !important;
    height:min(50vh,460px) !important;
  }
  .v48-master{
    left:3.5vw;
    top:31vh;
    width:195px;
  }
  .v48-speech{
    width:188px;
  }
  .v48-target{
    right:4.3vw;
    top:32vh;
  }
}
@media(max-height:760px) and (min-width:901px){
  .v48-work--3d{
    top:18.1vh !important;
  }
  .v48-3d-viewport{
    height:min(45vh,390px) !important;
  }
}
@media(max-width:900px){
  .v48-work--3d{
    width:94vw !important;
    left:50%;
  }
  .v48-3d-viewport{
    width:94vw !important;
  }
}


/* ===== V55: referencia de pieza abajo a la derecha, solo imagen ===== */
.v48-target strong{
  display:none !important;
}
@media(min-width:901px){
  .v48-target{
    right:2.6vw !important;
    top:auto !important;
    bottom:3.2vh !important;
    z-index:72;
  }
  .v48-target img{
    width:112px !important;
    height:112px !important;
    border-width:5px !important;
    border-radius:12px !important;
    box-shadow:0 8px 16px rgba(0,0,0,.28);
  }
}
@media(max-height:760px) and (min-width:901px){
  .v48-target{
    bottom:2.5vh !important;
  }
  .v48-target img{
    width:102px !important;
    height:102px !important;
  }
}
@media(max-width:900px){
  .v48-target{
    display:block !important;
    right:2vw !important;
    left:auto !important;
    top:auto !important;
    bottom:2vh !important;
    z-index:90;
  }
  .v48-target img{
    width:84px !important;
    height:84px !important;
    border-width:4px !important;
  }
}


/* ===== V56: corrección solicitada - flechas más gruesas y motor 3D más vertical ===== */
.v48-back{
  color:transparent !important;
  font-size:0 !important;
  position:absolute;
}
.v48-back::before,
.v48-back::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  display:block;
  background:#fff8dd;
  filter:drop-shadow(0 2px 2px rgba(80,35,5,.42));
}
.v48-back::before{
  width:31%;
  height:31%;
  background:transparent;
  border-left:clamp(5px,.56vw,8px) solid #fff8dd;
  border-bottom:clamp(5px,.56vw,8px) solid #fff8dd;
  border-radius:3px;
  transform:translate(-38%,-50%) rotate(45deg);
}
.v48-back::after{
  width:39%;
  height:clamp(5px,.56vw,8px);
  border-radius:999px;
  transform:translate(-24%,-50%);
}
@media(min-width:901px){
  .v48-work--3d{
    top:17.2vh !important;
    width:min(900px,64vw) !important;
  }
  .v48-3d-viewport{
    width:min(900px,64vw) !important;
    height:min(53vh,500px) !important;
  }
}
@media(max-height:760px) and (min-width:901px){
  .v48-work--3d{ top:16.8vh !important; }
  .v48-3d-viewport{ height:min(49vh,450px) !important; }
}
@media(max-width:900px){
  .v48-3d-viewport{ height:min(54vh,520px) !important; }
}

/* ===== AJUSTE FINAL SOLICITADO 2: motor más grande y contenedor más cuadrado ===== */
.v48-back{
  left:2.5% !important;
  top:4.3vh !important;
  width:68px !important;
  height:68px !important;
}
.v48-audio-toggle{
  top:4.3vh !important;
}
.v48-work--3d{
  top:15.4vh !important;
  width:min(1060px,78vw) !important;
}
.v48-title{
  margin-bottom:10px !important;
}
.v48-step-badges{
  margin-bottom:12px !important;
}
.v48-3d-viewport{
  width:min(980px,78vw) !important;
  height:min(63vh,660px) !important;
  max-height:660px !important;
  aspect-ratio:1.08 / 1 !important;
  margin:0 auto !important;
  background:radial-gradient(circle at 50% 38%, rgba(93,49,20,.62), rgba(26,10,4,.92) 64%) !important;
  border:3px solid rgba(255,218,135,.46) !important;
  border-radius:20px !important;
  box-shadow:0 18px 26px rgba(0,0,0,.30), inset 0 0 18px rgba(255,211,118,.07) !important;
  overflow:hidden !important;
}
.v48-3d-viewport::before{
  display:block !important;
  background:radial-gradient(circle at 50% 40%, rgba(255,224,145,.12), transparent 44%), linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%, rgba(0,0,0,.10)) !important;
}
.v48-work--3d .v48-message{
  max-width:min(920px,78vw) !important;
  margin-top:14px !important;
}

@media (max-height:860px) and (min-width:901px){
  .v48-work--3d{
    top:15.6vh !important;
  }
  .v48-3d-viewport{
    height:min(59vh,580px) !important;
  }
}
@media (max-height:760px) and (min-width:901px){
  .v48-work--3d{
    top:16.1vh !important;
  }
  .v48-3d-viewport{
    height:min(56vh,540px) !important;
  }
}
@media(max-width:900px){
  .v48-back{
    left:3.1% !important;
    top:2.3vh !important;
    width:60px !important;
    height:60px !important;
  }
  .v48-audio-toggle{
    top:2.3vh !important;
    right:3.1% !important;
  }
  .v48-work--3d{
    top:12.8vh !important;
    width:95vw !important;
  }
  .v48-3d-viewport{
    width:95vw !important;
    height:min(56vh,560px) !important;
    aspect-ratio:1 / 1 !important;
    border-radius:18px !important;
  }
}

/* ===== AJUSTE FINAL 3: viewport rectangular premium y mejor composición ===== */
.v48-work--3d{
  top:15.2vh !important;
  width:min(1020px,78vw) !important;
}
.v48-3d-viewport{
  width:min(940px,74vw) !important;
  height:min(49vh,470px) !important;
  max-height:470px !important;
  aspect-ratio:16 / 9 !important;
  margin:0 auto !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(118,66,27,.56), rgba(33,13,5,.96) 67%),
    linear-gradient(90deg, rgba(14,5,2,.62), rgba(50,20,8,.10) 15%, rgba(50,20,8,.10) 85%, rgba(14,5,2,.62)) !important;
  border:3px solid rgba(214,165,92,.66) !important;
  border-radius:24px !important;
  box-shadow:0 18px 30px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,233,180,.10), inset 0 0 18px rgba(255,204,112,.08) !important;
  overflow:hidden !important;
}
.v48-3d-viewport::before{
  display:block !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,224,145,.10), transparent 42%),
    linear-gradient(90deg, rgba(0,0,0,.22), transparent 14%, transparent 86%, rgba(0,0,0,.22)),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 28%, rgba(0,0,0,.10)) !important;
}
.v48-work--3d .v48-message{
  max-width:min(900px,72vw) !important;
  margin-top:14px !important;
}

@media (max-height:860px) and (min-width:901px){
  .v48-work--3d{ top:15.4vh !important; }
  .v48-3d-viewport{ height:min(47vh,430px) !important; }
}
@media (max-height:760px) and (min-width:901px){
  .v48-work--3d{ top:15.8vh !important; }
  .v48-3d-viewport{ height:min(45vh,400px) !important; }
}
@media(max-width:900px){
  .v48-work--3d{
    top:12.7vh !important;
    width:95vw !important;
  }
  .v48-3d-viewport{
    width:95vw !important;
    height:min(50vh,480px) !important;
    max-height:none !important;
    aspect-ratio:1.65 / 1 !important;
    border-radius:20px !important;
  }
}


/* ===== AJUSTE FINAL 4: viewport cuadrado para tallado ===== */
.v48-work--3d{
  top:15.1vh !important;
  width:min(960px,74vw) !important;
}
.v48-3d-viewport{
  width:min(620px,62vw) !important;
  height:min(620px,62vw) !important;
  max-width:620px !important;
  max-height:620px !important;
  aspect-ratio:1 / 1 !important;
  margin:0 auto !important;
  border-radius:24px !important;
  overflow:hidden !important;
}
.v48-work--3d .v48-message{
  max-width:min(760px,68vw) !important;
}
@media (max-height:860px) and (min-width:901px){
  .v48-work--3d{ top:15.4vh !important; }
  .v48-3d-viewport{
    width:min(540px,56vh) !important;
    height:min(540px,56vh) !important;
  }
}
@media (max-height:760px) and (min-width:901px){
  .v48-work--3d{ top:15.8vh !important; }
  .v48-3d-viewport{
    width:min(500px,50vh) !important;
    height:min(500px,50vh) !important;
  }
}
@media(max-width:900px){
  .v48-work--3d{
    top:12.6vh !important;
    width:95vw !important;
  }
  .v48-3d-viewport{
    width:min(88vw,520px) !important;
    height:min(88vw,520px) !important;
    max-width:none !important;
    max-height:none !important;
    aspect-ratio:1 / 1 !important;
    border-radius:20px !important;
  }
}


/* ===== AJUSTE FINAL 5: viewport cuadrado más grande y sin recorte ===== */
.v48-work--3d{
  top:14.9vh !important;
  width:min(1080px,84vw) !important;
}
.v48-3d-viewport{
  width:min(700px,70vh) !important;
  height:min(700px,70vh) !important;
  max-width:700px !important;
  max-height:700px !important;
  aspect-ratio:1 / 1 !important;
}
.v48-work--3d .v48-message{
  max-width:min(820px,72vw) !important;
}
@media (max-height:860px) and (min-width:901px){
  .v48-work--3d{ top:15.0vh !important; }
  .v48-3d-viewport{
    width:min(620px,64vh) !important;
    height:min(620px,64vh) !important;
    max-width:620px !important;
    max-height:620px !important;
  }
}
@media (max-height:760px) and (min-width:901px){
  .v48-work--3d{ top:15.3vh !important; }
  .v48-3d-viewport{
    width:min(560px,58vh) !important;
    height:min(560px,58vh) !important;
    max-width:560px !important;
    max-height:560px !important;
  }
}
@media(max-width:900px){
  .v48-work--3d{
    top:12.4vh !important;
    width:96vw !important;
  }
  .v48-3d-viewport{
    width:min(92vw,560px) !important;
    height:min(92vw,560px) !important;
    max-width:none !important;
    max-height:none !important;
  }
}


/* ===== AJUSTE FINAL 6: viewport mucho más grande y flecha v48 corregida ===== */
.v48-back{
  width:74px !important;
  height:74px !important;
  color:transparent !important;
  font-size:0 !important;
}
.v48-back::before,
.v48-back::after{
  content:"";
  position:absolute;
  top:50%;
  display:block;
}
.v48-back::before{
  left:31%;
  width:24%;
  height:24%;
  background:transparent !important;
  border-left:clamp(5px,.56vw,8px) solid #fff8dd;
  border-bottom:clamp(5px,.56vw,8px) solid #fff8dd;
  border-radius:3px;
  transform:translate(-50%,-50%) rotate(45deg);
  filter:drop-shadow(0 2px 2px rgba(80,35,5,.36));
}
.v48-back::after{
  left:56%;
  width:30%;
  height:clamp(5px,.56vw,8px);
  border-radius:999px;
  background:#fff8dd !important;
  transform:translate(-50%,-50%);
  box-shadow:0 2px 2px rgba(80,35,5,.22);
}

.v48-work--3d{
  top:13.8vh !important;
  width:min(1220px,96vw) !important;
}
.v48-title{
  margin-bottom:8px !important;
}
.v48-step-badges{
  margin-bottom:10px !important;
}
.v48-3d-viewport{
  width:min(82vh,78vw,760px) !important;
  height:min(82vh,78vw,760px) !important;
  max-width:760px !important;
  max-height:760px !important;
  aspect-ratio:1 / 1 !important;
}
.v48-work--3d .v48-message{
  max-width:min(900px,74vw) !important;
}
@media (max-height:860px) and (min-width:901px){
  .v48-work--3d{ top:14.1vh !important; }
  .v48-3d-viewport{
    width:min(74vh,74vw,680px) !important;
    height:min(74vh,74vw,680px) !important;
    max-width:680px !important;
    max-height:680px !important;
  }
}
@media (max-height:760px) and (min-width:901px){
  .v48-work--3d{ top:14.4vh !important; }
  .v48-3d-viewport{
    width:min(68vh,72vw,620px) !important;
    height:min(68vh,72vw,620px) !important;
    max-width:620px !important;
    max-height:620px !important;
  }
}
@media(max-width:900px){
  .v48-work--3d{
    top:12.1vh !important;
    width:98vw !important;
  }
  .v48-back{
    width:62px !important;
    height:62px !important;
  }
  .v48-3d-viewport{
    width:min(94vw,600px) !important;
    height:min(94vw,600px) !important;
    max-width:none !important;
    max-height:none !important;
  }
}


/* ===== AJUSTE FINAL 7: flecha v48 y tallado más cómodo ===== */
.v48-back::before{
  left:35% !important;
  width:23% !important;
  height:23% !important;
}
.v48-back::after{
  left:49% !important;
  width:24% !important;
}
.v48-work--3d{
  top:13.5vh !important;
  width:min(1260px,98vw) !important;
}
.v48-3d-viewport{
  width:min(86vh,82vw,800px) !important;
  height:min(86vh,82vw,800px) !important;
  max-width:800px !important;
  max-height:800px !important;
}
@media (max-height:860px) and (min-width:901px){
  .v48-work--3d{ top:13.8vh !important; }
  .v48-3d-viewport{
    width:min(78vh,78vw,720px) !important;
    height:min(78vh,78vw,720px) !important;
    max-width:720px !important;
    max-height:720px !important;
  }
}
@media (max-height:760px) and (min-width:901px){
  .v48-work--3d{ top:14.1vh !important; }
  .v48-3d-viewport{
    width:min(72vh,76vw,660px) !important;
    height:min(72vh,76vw,660px) !important;
    max-width:660px !important;
    max-height:660px !important;
  }
}
@media(max-width:900px){
  .v48-3d-viewport{
    width:min(96vw,640px) !important;
    height:min(96vw,640px) !important;
  }
}


/* ===== AJUSTE FINAL V9: back PNG limpio y viewport apenas corregido ===== */
.v48-back{
  background:transparent url('back_arrow_button.png') center center / contain no-repeat !important;
  color:transparent !important;
  font-size:0 !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.v48-back::before,
.v48-back::after{
  content:none !important;
  display:none !important;
}


/* ===== V16 FINAL LIMPIO: textos guía, pantallas ganar/perder y tamaños optimizados ===== */
.v48-screen--end .v48-hud,
.v48-screen--end .v48-target,
.v48-screen--end .v48-master,
.v48-screen--end .v48-audio-toggle{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.v48-screen--end .v48-back{
  z-index:220;
}
.v48-work.v48-level-end{
  top:0 !important;
  left:0 !important;
  transform:none !important;
  width:100vw !important;
  height:100vh !important;
  min-height:100vh !important;
  overflow:hidden !important;
  display:block !important;
  text-align:center !important;
  z-index:140 !important;
  padding:0 !important;
}
.v48-end-bg-light{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 43%, rgba(255,204,45,.62) 0 7%, rgba(255,153,28,.42) 8% 17%, rgba(83,32,8,.28) 30%, rgba(10,4,1,.15) 62%),
    radial-gradient(circle at 50% 42%, rgba(255,229,84,.38), transparent 36%);
  pointer-events:none;
}
.v48-end-bg-light--fail{
  background:
    radial-gradient(circle at 50% 43%, rgba(255,31,14,.56) 0 9%, rgba(144,0,0,.44) 10% 22%, rgba(37,5,4,.18) 45%, rgba(10,4,1,.18) 70%),
    radial-gradient(circle at 50% 42%, rgba(255,30,12,.36), transparent 38%);
}
.v48-end-header{
  position:absolute;
  z-index:5;
  top:4.2vh;
  left:50%;
  transform:translateX(-50%);
  width:min(94vw,1040px);
  pointer-events:none;
}
.v48-end-header h2{
  margin:0;
  font-size:clamp(42px,6.2vw,92px);
  line-height:.88;
  letter-spacing:-.04em;
  font-weight:1000;
  text-transform:uppercase;
  color:#ffdb53;
  -webkit-text-stroke: clamp(1px,.22vw,4px) #5a1705;
  text-shadow:0 5px 0 #2c0a02, 0 11px 16px rgba(0,0,0,.48), 0 0 22px rgba(255,203,55,.58);
}
.v48-end-header--fail h2{
  color:#ff392c;
  -webkit-text-stroke: clamp(1px,.22vw,4px) #4a0704;
  text-shadow:0 5px 0 #210302, 0 12px 16px rgba(0,0,0,.55), 0 0 22px rgba(255,40,25,.55);
}
.v48-end-ribbon{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:clamp(3px,.7vh,8px);
  min-width:min(82vw,720px);
  min-height:clamp(38px,7vh,76px);
  padding:.18em 1.7em;
  color:#fff8e2;
  font-size:clamp(21px,3.1vw,48px);
  line-height:1;
  font-weight:1000;
  text-transform:uppercase;
  background:linear-gradient(180deg,#d61f16,#7d0805 58%,#420302);
  border:clamp(2px,.32vw,5px) solid #ffc04b;
  border-radius:14px 14px 18px 18px;
  box-shadow:0 6px 0 #390302, 0 12px 16px rgba(0,0,0,.38), inset 0 2px 0 rgba(255,255,255,.24);
  text-shadow:0 3px 0 rgba(0,0,0,.55);
}
.v48-end-ribbon strong{
  color:#ffdd4b;
  margin-left:.25em;
}
.v48-end-piece-wrap{
  position:absolute;
  z-index:3;
  left:50%;
  top:49%;
  transform:translate(-50%,-50%);
  width:min(38vh,320px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
}
.v48-end-rays{
  position:absolute;
  inset:-42%;
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg, rgba(255,221,78,.72) 0deg 8deg, rgba(255,119,20,.10) 8deg 16deg);
  filter:blur(.2px);
  opacity:.82;
  animation:v48RaysSpin 18s linear infinite;
}
.v48-end-rays--fail{
  background:repeating-conic-gradient(from 0deg, rgba(255,42,26,.76) 0deg 8deg, rgba(255,20,20,.08) 8deg 16deg);
}
@keyframes v48RaysSpin{to{transform:rotate(360deg)}}
.v48-end-piece{
  position:relative;
  z-index:2;
  width:min(31vh,260px);
  height:min(31vh,260px);
  object-fit:contain;
  filter:drop-shadow(0 16px 12px rgba(0,0,0,.55)) saturate(1.08) contrast(1.08);
}
.v48-end-reward{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:20.2vh;
  transform:translateX(-50%);
  min-width:min(46vw,340px);
  padding:.18em 1.05em;
  border-radius:10px;
  color:#fff;
  font-size:clamp(28px,4.3vw,58px);
  line-height:1.02;
  font-weight:1000;
  background:linear-gradient(180deg,rgba(108,72,44,.94),rgba(51,28,15,.97));
  border:clamp(2px,.34vw,5px) solid #bd8e4e;
  box-shadow:0 8px 0 rgba(41,18,7,.85), 0 13px 18px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.2);
  text-shadow:0 4px 0 rgba(0,0,0,.45);
}
.v48-end-level-label{
  color:#fff4df;
  font-size:clamp(29px,4vw,54px);
}
.v48-end-note{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:17.3vh;
  transform:translateX(-50%);
  width:min(78vw,620px);
  margin:0;
  color:#ffd8b3;
  font-size:clamp(13px,1.25vw,18px);
  line-height:1.15;
  font-weight:900;
  text-shadow:0 3px 4px rgba(0,0,0,.7);
}
.v48-end-button{
  position:absolute;
  z-index:8;
  left:50%;
  bottom:7vh;
  transform:translateX(-50%);
  min-width:min(70vw,430px);
  min-height:clamp(54px,8.2vh,78px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45em;
  padding:.22em 1.1em;
  border-radius:20px;
  border:clamp(3px,.42vw,6px) solid #ffe1a0;
  color:#fff8dc;
  font-size:clamp(24px,3vw,43px);
  line-height:1;
  font-weight:1000;
  text-transform:uppercase;
  cursor:pointer;
  background:linear-gradient(180deg,#ffbc2d 0%,#e88a10 58%,#af5306 100%);
  box-shadow:0 9px 0 #5b2704, 0 16px 22px rgba(0,0,0,.38), inset 0 3px 0 rgba(255,255,255,.28);
  text-shadow:0 3px 0 rgba(0,0,0,.42);
}
.v48-end-button span{
  display:grid;
  place-items:center;
  width:1.35em;
  height:1.35em;
  border-radius:50%;
  background:rgba(255,255,255,.18);
}
.v48-end-button--fail{
  background:linear-gradient(180deg,#ffad25 0%,#e0780d 58%,#a84a05 100%);
}
.v48-end-button:hover{filter:brightness(1.06); transform:translateX(-50%) translateY(-1px)}

/* etapa: evitar títulos montados sobre HUD o globo del guía */
.v48-title{
  font-size:clamp(20px,2vw,30px) !important;
  line-height:1.04 !important;
  margin-bottom:clamp(6px,1vh,10px) !important;
  max-width:min(86vw,880px);
  margin-left:auto !important;
  margin-right:auto !important;
}
.v48-message{
  font-size:clamp(12px,1.08vw,16px) !important;
  line-height:1.18 !important;
  padding:10px 16px !important;
  max-height:3.9em;
  overflow:hidden;
}
.v48-work--3d .v48-message{
  max-height:4.4em;
}
.v48-master{
  top:32vh !important;
}
.v48-speech p,
#v48Mentor{
  font-size:clamp(12px,.95vw,15px) !important;
  line-height:1.18 !important;
  text-transform:none !important;
}
@media (max-height:760px){
  .v48-end-header{top:3.2vh}
  .v48-end-header h2{font-size:clamp(36px,5.4vw,72px)}
  .v48-end-ribbon{font-size:clamp(18px,2.6vw,38px);min-height:clamp(34px,6vh,60px)}
  .v48-end-piece-wrap{top:48%;width:min(32vh,270px)}
  .v48-end-piece{width:min(26vh,220px);height:min(26vh,220px)}
  .v48-end-reward{bottom:19vh;font-size:clamp(24px,3.6vw,46px)}
  .v48-end-button{bottom:6vh;min-height:54px;font-size:clamp(21px,2.7vw,34px)}
  .v48-end-note{bottom:16vh}
}
@media (max-width:900px){
  .v48-end-header{width:96vw;top:4vh}
  .v48-end-header h2{font-size:clamp(33px,8vw,64px)}
  .v48-end-ribbon{min-width:84vw;font-size:clamp(17px,4.6vw,34px)}
  .v48-end-piece-wrap{width:min(40vw,250px)}
  .v48-end-piece{width:min(34vw,205px);height:min(34vw,205px)}
  .v48-end-reward{min-width:70vw;font-size:clamp(26px,6vw,42px)}
  .v48-end-button{min-width:72vw;font-size:clamp(22px,5.2vw,34px)}
}


/* ===== V17: ajuste fino de globos guía y referencia ===== */
/* Textos guía más pequeños y controlados para que encajen en el cuadro */
.v48-speech{
  width: clamp(205px, 16.5vw, 245px) !important;
  min-height: clamp(118px, 17vh, 158px) !important;
  max-height: clamp(130px, 19vh, 170px) !important;
  padding: clamp(9px, 1.25vh, 13px) clamp(11px, 1.25vw, 16px) !important;
  overflow: visible !important;
}
.v48-master .v48-speech p,
.v48-master p#v48Mentor,
.v48-speech p,
#v48Mentor{
  font-size: clamp(8.6px, .68vw, 10.4px) !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  letter-spacing: -.01em !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  text-transform: none !important;
}
.v48-master{
  width: clamp(210px, 18vw, 260px) !important;
}
/* Ajuste en pantallas bajas para evitar que el globo se salga */
@media (max-height: 760px) and (min-width:901px){
  .v48-speech{
    width: clamp(200px, 16vw, 232px) !important;
    min-height: 110px !important;
    max-height: 144px !important;
    padding: 9px 12px !important;
  }
  .v48-master .v48-speech p,
  .v48-master p#v48Mentor,
  .v48-speech p,
  #v48Mentor{
    font-size: clamp(8.2px, .62vw, 9.6px) !important;
    line-height: 1.08 !important;
  }
}

/* Imagen referencial de cada nivel ligeramente más grande */
@media (min-width:901px){
  .v48-target{
    right: 2.2vw !important;
    bottom: 2.4vh !important;
  }
  .v48-target img{
    width: 136px !important;
    height: 136px !important;
    border-width: 5px !important;
  }
}
@media (max-height:760px) and (min-width:901px){
  .v48-target img{
    width: 122px !important;
    height: 122px !important;
  }
}
@media (max-width:900px){
  .v48-target img{
    width: 96px !important;
    height: 96px !important;
  }
}


/* ===== V18: texto guía más legible + referencia un poco más grande ===== */
.v48-speech{
  width: clamp(235px, 18.5vw, 285px) !important;
  min-height: clamp(120px, 17vh, 158px) !important;
  max-height: none !important;
  padding: clamp(11px, 1.35vh, 15px) clamp(13px, 1.25vw, 17px) !important;
  overflow: visible !important;
}
.v48-master .v48-speech p,
.v48-master p#v48Mentor,
.v48-speech p,
#v48Mentor{
  font-size: clamp(11px, .76vw, 13px) !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: -.015em !important;
  text-align: left !important;
  overflow: visible !important;
}
.v48-master{
  width: clamp(230px, 19vw, 285px) !important;
}
@media (min-width:901px){
  .v48-target img{
    width: 152px !important;
    height: 152px !important;
  }
}
@media (max-height:760px) and (min-width:901px){
  .v48-speech{
    width: 250px !important;
    min-height: 118px !important;
    padding: 10px 13px !important;
  }
  .v48-master .v48-speech p,
  .v48-master p#v48Mentor,
  .v48-speech p,
  #v48Mentor{
    font-size: 11px !important;
    line-height: 1.1 !important;
  }
  .v48-target img{
    width: 138px !important;
    height: 138px !important;
  }
}
@media (max-width:900px){
  .v48-target img{
    width: 108px !important;
    height: 108px !important;
  }
}


/* ===== V19 FINAL: guía v48 legible ===== */
.v48-speech {
  width: clamp(285px, 23vw, 340px) !important;
  max-width: clamp(285px, 23vw, 340px) !important;
  min-height: clamp(128px, 18vh, 166px) !important;
  padding: clamp(13px, 1.6vh, 17px) clamp(15px, 1.6vw, 20px) !important;
  overflow: visible !important;
}
.v48-master .v48-speech p,
.v48-master p#v48Mentor,
.v48-speech p,
#v48Mentor {
  font-size: clamp(13px, 1.02vw, 16px) !important;
  line-height: 1.14 !important;
  font-weight: 950 !important;
  letter-spacing: -0.015em !important;
  text-align: left !important;
}
@media (max-height: 760px) and (min-width: 901px) {
  .v48-speech {
    width: 300px !important;
    max-width: 300px !important;
    min-height: 126px !important;
    padding: 12px 15px !important;
  }
  .v48-master .v48-speech p,
  .v48-master p#v48Mentor,
  .v48-speech p,
  #v48Mentor {
    font-size: 13px !important;
    line-height: 1.11 !important;
  }
}

/* ===== V20: assets de tallado/lijado/barnizado + resultado corregido ===== */
.v48-target img{
  background:linear-gradient(180deg,#fff3d8,#f1d6a5) !important;
  padding:6px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 8px 7px rgba(74,32,7,.25)) saturate(1.08) !important;
}
.v48-work--3d .v48-message{
  margin-top:12px !important;
  line-height:1.18 !important;
}
.v48-level-fail .v48-end-header{
  top:3.6vh !important;
}
.v48-level-fail .v48-end-piece-wrap{
  top:45.5% !important;
}
.v48-level-fail .v48-end-reward{
  bottom:20.2vh !important;
}
.v48-level-fail .v48-end-note{
  bottom:28.2vh !important;
  width:min(82vw,760px) !important;
  padding:.55em 1em !important;
  border-radius:12px !important;
  color:#fff0d2 !important;
  background:rgba(45,12,5,.64) !important;
  border:2px solid rgba(255,196,92,.42) !important;
  font-size:clamp(15px,1.45vw,22px) !important;
  line-height:1.12 !important;
  text-shadow:0 3px 4px rgba(0,0,0,.85) !important;
}
.v48-level-fail .v48-end-button{
  bottom:5.8vh !important;
}
@media (max-height:760px) and (min-width:901px){
  .v48-level-fail .v48-end-header{top:2.8vh !important;}
  .v48-level-fail .v48-end-piece-wrap{top:44.5% !important;}
  .v48-level-fail .v48-end-note{bottom:29.5vh !important;font-size:15px !important;}
  .v48-level-fail .v48-end-reward{bottom:20.2vh !important;}
  .v48-level-fail .v48-end-button{bottom:4.8vh !important;}
}
@media(max-width:900px){
  .v48-level-fail .v48-end-note{bottom:27vh !important;width:88vw !important;}
}

/* ===== V22: botones de mejora visibles, guía compacta y cinemática final real ===== */
.v48-speech{
  min-height:0 !important;
  height:auto !important;
  max-height:min(22vh, 146px) !important;
  padding:clamp(9px, 1.25vh, 13px) clamp(13px, 1.4vw, 18px) !important;
  overflow:hidden !important;
  display:inline-block !important;
}
.v48-master .v48-speech p,
.v48-master p#v48Mentor,
.v48-speech p,
#v48Mentor{
  margin:0 !important;
  font-size:clamp(12px, .88vw, 14px) !important;
  line-height:1.08 !important;
  text-align:left !important;
}
@media(max-height:760px) and (min-width:901px){
  .v48-speech{
    max-height:132px !important;
    padding:9px 13px !important;
  }
  .v48-master .v48-speech p,
  .v48-master p#v48Mentor,
  .v48-speech p,
  #v48Mentor{
    font-size:12px !important;
    line-height:1.05 !important;
  }
}

.v48-end-actions{
  position:absolute;
  z-index:9;
  left:50%;
  bottom:4.6vh;
  transform:translateX(-50%);
  width:min(92vw, 820px);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(10px, 1.4vw, 18px);
}
.v48-end-actions .v48-end-button{
  position:relative !important;
  left:auto !important;
  bottom:auto !important;
  transform:none !important;
  min-width:min(43vw, 380px) !important;
  min-height:clamp(46px, 6.9vh, 66px) !important;
  padding:.18em .9em !important;
  font-size:clamp(18px, 2.1vw, 34px) !important;
}
.v48-end-actions .v48-end-button:hover{
  transform:translateY(-1px) !important;
}
.v48-end-button--upgrade{
  background:linear-gradient(180deg,#ffd35b 0%,#c77813 58%,#7c3506 100%) !important;
  border-color:#fff0b8 !important;
  color:#fff8dc !important;
}
.v48-end-actions--fail .v48-end-button{
  min-width:min(42vw, 370px) !important;
}
.v48-level-fail .v48-end-actions{
  bottom:4.8vh !important;
}
.v48-level-fail .v48-end-button:not(.v48-end-actions .v48-end-button){
  display:none !important;
}
.v48-level-fail .v48-end-note{
  bottom:29.5vh !important;
}
.v48-level-fail .v48-end-reward{
  bottom:20.6vh !important;
}
@media(max-height:760px) and (min-width:901px){
  .v48-end-actions{bottom:3.9vh !important;}
  .v48-end-actions .v48-end-button{
    min-height:44px !important;
    font-size:clamp(16px, 1.9vw, 27px) !important;
    border-radius:16px !important;
  }
  .v48-end-reward{bottom:19.3vh !important;}
  .v48-level-fail .v48-end-reward{bottom:20.3vh !important;}
  .v48-level-fail .v48-end-note{bottom:29.3vh !important;}
}
@media(max-width:760px){
  .v48-end-actions{
    bottom:3.6vh !important;
    flex-direction:column;
    gap:8px;
    width:92vw;
  }
  .v48-end-actions .v48-end-button{
    width:92vw !important;
    min-width:0 !important;
    min-height:44px !important;
    font-size:clamp(16px, 4.4vw, 25px) !important;
    border-radius:15px !important;
  }
  .v48-end-reward{bottom:18.8vh !important;}
  .v48-level-fail .v48-end-note{bottom:31vh !important;}
  .v48-level-fail .v48-end-reward{bottom:21.4vh !important;}
}

.v48-final-screen,
.v48-final-stage--cinematic{
  width:100vw !important;
  height:100vh !important;
  overflow:hidden !important;
}
.v48-final-stage--cinematic{
  position:relative;
  display:block !important;
  background:#160803;
  color:#fff4cf;
}
.v48-final-stage--cinematic .v48-final-bg{
  filter:brightness(.58) saturate(1.08);
  transform:scale(1.018);
}
.v48-final-stage--cinematic .v48-final-overlay{
  background:radial-gradient(circle at 50% 45%, rgba(255,203,65,.20) 0 18%, rgba(24,8,2,.52) 53%, rgba(9,3,1,.88) 100%) !important;
}
.v48-final-rays{
  position:absolute;
  z-index:2;
  left:50%;
  top:47%;
  width:min(78vh, 62vw, 680px);
  aspect-ratio:1;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg, rgba(255,226,76,.52) 0 8deg, rgba(255,129,23,.06) 8deg 16deg);
  animation:v48FinalRaysSpin 16s linear infinite;
  opacity:.9;
}
@keyframes v48FinalRaysSpin{to{transform:translate(-50%, -50%) rotate(360deg)}}
.v48-final-stage--cinematic .v48-final-title{
  position:absolute;
  z-index:5;
  left:50%;
  top:4.3vh;
  width:96vw;
  transform:translateX(-50%) rotate(-1.2deg);
  margin:0;
  text-align:center;
  font-size:clamp(34px, 5.8vw, 88px);
  line-height:.88;
  color:#ffe66b;
  -webkit-text-stroke:clamp(1px,.18vw,3px) #743004;
  text-shadow:0 6px 0 #311002,0 11px 18px rgba(0,0,0,.5),0 0 24px rgba(255,222,86,.45);
}
.v48-final-stage--cinematic .v48-final-copy{
  position:absolute;
  z-index:5;
  left:50%;
  top:18.4vh;
  transform:translateX(-50%);
  width:min(88vw, 860px);
  margin:0;
  padding:.55em 1.05em;
  border-radius:999px;
  background:rgba(35,14,5,.74);
  border:3px solid rgba(255,219,116,.62);
  color:#fff1c8;
  font-size:clamp(13px, 1.35vw, 21px);
  line-height:1.15;
  font-weight:950;
  text-align:center;
}
.v48-final-pieces{
  position:absolute;
  z-index:4;
  left:50%;
  top:45.5vh;
  transform:translate(-50%, -50%);
  width:min(86vw, 780px);
  height:min(30vh, 270px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px, 2vw, 28px);
}
.v48-final-pieces img{
  width:min(28%, 210px);
  max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 16px 12px rgba(0,0,0,.56)) saturate(1.1);
  animation:v48FinalPieceFloat 2.6s ease-in-out infinite;
}
.v48-final-pieces img:nth-child(2){animation-delay:.18s}
.v48-final-pieces img:nth-child(3){animation-delay:.36s}
@keyframes v48FinalPieceFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.035)}}
.v48-final-badge{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:20.4vh;
  transform:translateX(-50%);
  min-width:min(80vw, 630px);
  padding:.42em 1.2em .48em;
  border-radius:18px;
  background:linear-gradient(180deg,#70421e,#301508);
  border:4px solid #e9b85e;
  color:#fff8dd;
  font-size:clamp(19px,2.35vw,38px);
  line-height:1;
  font-weight:1000;
  text-align:center;
  text-shadow:0 3px 0 rgba(0,0,0,.48);
  box-shadow:0 8px 0 rgba(77,38,9,.95),0 15px 20px rgba(0,0,0,.34),inset 0 2px 0 rgba(255,255,255,.16);
}
.v48-final-stage--cinematic .v48-final-reward{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:13.1vh;
  transform:translateX(-50%);
  margin:0 !important;
  color:#4b2807;
}
.v48-final-stage--cinematic .v48-final-actions{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:4.2vh;
  transform:translateX(-50%);
  width:min(92vw, 650px);
  margin:0 !important;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:nowrap;
}
.v48-final-stage--cinematic .v48-final-btn{
  min-width:0 !important;
  flex:1 1 0;
  padding:12px 16px !important;
  font-size:clamp(13px, 1.2vw, 19px) !important;
}
.v48-final-sparkles{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}
.v48-final-sparkles span{
  position:absolute;
  width:clamp(8px, 1vw, 15px);
  aspect-ratio:1;
  border-radius:50%;
  background:#ffe66b;
  box-shadow:0 0 16px rgba(255,230,93,.9);
  animation:v48FinalSpark 1.7s ease-in-out infinite;
}
.v48-final-sparkles span:nth-child(1){left:14%;top:36%;animation-delay:.05s}
.v48-final-sparkles span:nth-child(2){left:28%;top:24%;animation-delay:.25s}
.v48-final-sparkles span:nth-child(3){right:20%;top:31%;animation-delay:.45s}
.v48-final-sparkles span:nth-child(4){left:18%;bottom:28%;animation-delay:.65s}
.v48-final-sparkles span:nth-child(5){right:28%;bottom:25%;animation-delay:.85s}
.v48-final-sparkles span:nth-child(6){right:12%;top:49%;animation-delay:1.05s}
@keyframes v48FinalSpark{0%,100%{transform:scale(.65);opacity:.24}50%{transform:scale(1.25);opacity:1}}
@media(max-height:760px){
  .v48-final-stage--cinematic .v48-final-title{top:3.3vh;font-size:clamp(30px,5vw,66px)}
  .v48-final-stage--cinematic .v48-final-copy{top:16.6vh;font-size:clamp(12px,1.2vw,18px);padding:.42em .8em}
  .v48-final-pieces{top:43.5vh;height:26vh}
  .v48-final-badge{bottom:20vh;font-size:clamp(18px,2.1vw,30px);padding:.35em .9em .42em}
  .v48-final-stage--cinematic .v48-final-reward{bottom:12.8vh;padding:8px 20px;font-size:clamp(20px,1.8vw,28px)}
  .v48-final-stage--cinematic .v48-final-actions{bottom:3.6vh}
  .v48-final-stage--cinematic .v48-final-btn{padding:10px 13px !important;font-size:clamp(12px,1.05vw,17px) !important}
}
@media(max-width:760px){
  .v48-final-stage--cinematic .v48-final-title{top:5vh;font-size:clamp(30px,10vw,58px)}
  .v48-final-stage--cinematic .v48-final-copy{top:20vh;width:90vw;border-radius:18px;font-size:clamp(12px,3.4vw,17px)}
  .v48-final-pieces{top:45vh;width:94vw;height:24vh;gap:4px}
  .v48-final-pieces img{width:31%;max-width:31%}
  .v48-final-badge{bottom:21vh;min-width:86vw;font-size:clamp(17px,4.6vw,27px)}
  .v48-final-stage--cinematic .v48-final-reward{bottom:13.6vh}
  .v48-final-stage--cinematic .v48-final-actions{bottom:4vh;flex-direction:column;gap:8px;width:82vw}
  .v48-final-stage--cinematic .v48-final-btn{width:100%;flex:auto;padding:9px 12px !important}
}