/* ================= VISTA EXPLOSIONADA (controlada por el ratón) ================= */
.exploded-section{
  position:relative;
  background: var(--ink);
}
.exploded-sticky{
  position:relative;
  min-height:600px;
  height:80vh;
  max-height:680px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: crosshair;
}
.exploded-sticky::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at center, rgba(0,0,0,0.6), transparent 70%);
}

.exploded-caption{
  position:absolute;
  top:56px; left:50%;
  transform:translateX(-50%);
  text-align:center;
  z-index:2;
}
.exploded-caption .eyebrow{ justify-content:center; color:#9FB3D4; }
.exploded-caption h2{ color:#fff; margin-top:10px; font-size:clamp(20px,2.6vw,28px); max-width:22ch; }

.stage{
  position:relative;
  width:560px;
  max-width:86vw;
  height:400px;
  --p: 0; /* progreso de ensamblaje: 0 = piezas separadas, 1 = ensamblado */
}

.pieza{
  position:absolute;
  border:1.5px solid rgba(255,255,255,0.55);
  background: rgba(43,76,126,0.38);
  border-radius:4px;
  will-change: transform, opacity;
}

.pieza .etiqueta{
  position:absolute;
  font-family: var(--mono);
  font-size:11px;
  color:#C9D3E3;
  white-space:nowrap;
  letter-spacing:0.05em;
  opacity: calc(1 - var(--p));
}

/* Carcasa exterior: pantalla y base con teclado — quedan siempre visibles */
.pieza-pantalla{
  left:130px; top:8px; width:300px; height:172px;
  background: linear-gradient(160deg, rgba(43,76,126,0.5), rgba(43,76,126,0.2));
  transform:
    translate(calc(-260px * (1 - var(--p))), calc(-170px * (1 - var(--p))))
    rotate(calc(-18deg * (1 - var(--p))))
    scale(calc(1 - 0.15 * (1 - var(--p))));
}
.pieza-pantalla .etiqueta{ top:-24px; left:0; }
.pieza-pantalla .glow{
  position:absolute; inset:14px;
  border:1px solid rgba(255,255,255,0.25);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; letter-spacing:0.04em;
  color:#fff;
  opacity: clamp(0, calc((var(--p) - 0.82) * 5.5), 1);
}

.pieza-base{
  left:130px; top:206px; width:300px; height:150px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 26px), rgba(43,76,126,0.32);
  transform:
    translate(calc(280px * (1 - var(--p))), calc(190px * (1 - var(--p))))
    rotate(calc(14deg * (1 - var(--p))))
    scale(calc(1 - 0.1 * (1 - var(--p))));
}
.pieza-base .etiqueta{ bottom:-24px; right:0; }

/* Componentes internos: se deslizan a su hueco y "se instalan" (desaparecen) al ensamblar */
.pieza-interna{ opacity: calc(1 - var(--p)); }

.pieza-bateria{
  left:196px; top:296px; width:170px; height:36px;
  transform:
    translate(calc(-230px * (1 - var(--p))), calc(150px * (1 - var(--p))))
    rotate(calc(24deg * (1 - var(--p))));
}
.pieza-bateria .etiqueta{ left:0; bottom:-22px; }

.pieza-ram{
  left:246px; top:236px; width:70px; height:14px;
  transform:
    translate(calc(250px * (1 - var(--p))), calc(-150px * (1 - var(--p))))
    rotate(calc(-20deg * (1 - var(--p))));
}
.pieza-ram .etiqueta{ right:-4px; top:-20px; }

.pieza-ssd{
  left:150px; top:258px; width:44px; height:30px;
  transform:
    translate(calc(10px * (1 - var(--p))), calc(-230px * (1 - var(--p))))
    rotate(calc(10deg * (1 - var(--p))));
}
.pieza-ssd .etiqueta{ left:-6px; top:-20px; }

.exploded-hint{
  position:absolute;
  bottom:28px; left:50%;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#7E8CA6;
  opacity: clamp(0, calc(1 - var(--p) * 3), 1);
  pointer-events:none;
}

@media (max-width: 640px){
  .stage{ transform: scale(0.72); }
  .exploded-sticky{ height:70vh; min-height:480px; }
}

/* Las piezas van colocadas con posiciones fijas pensadas para una escena de
   560px, así que en móvil se reduce entera con transform. A 0.72 seguía
   saliéndose en pantallas de 360-400px (se recortaba por los lados, porque
   .exploded-sticky lleva overflow:hidden), así que se baja un poco más. */
@media (max-width: 480px){
  .stage{ transform: scale(0.58); }
}

@media (prefers-reduced-motion: reduce){
  .exploded-sticky{ height:auto; min-height:0; padding:64px 0; cursor:default; }
}

/* ---- Variante: PC de sobremesa (torre con panel transparente) ---- */
.stage.stage-torre{ width:460px; height:420px; }

.stage-torre .pieza-torre-chasis{
  left:150px; top:10px; width:160px; height:400px;
  background:transparent;
  border:2px solid rgba(255,255,255,0.4);
  border-radius:8px;
  transform:
    translate(0, calc(-230px * (1 - var(--p))))
    scale(calc(1 - 0.08 * (1 - var(--p))));
}
.stage-torre .pieza-torre-chasis .etiqueta{ top:-24px; left:0; }

.stage-torre .pieza-torre-placa{
  left:175px; top:45px; width:110px; height:290px;
  transform:
    translate(calc(-260px * (1 - var(--p))), 0)
    rotate(calc(-14deg * (1 - var(--p))))
    scale(calc(1 - 0.15 * (1 - var(--p))));
}
.stage-torre .pieza-torre-placa .etiqueta{ top:50%; left:-150px; transform:translateY(-50%); }

.stage-torre .pieza-torre-disipador{
  left:200px; top:70px; width:60px; height:60px;
  border-radius:50%;
  transform:
    translate(0, calc(-210px * (1 - var(--p))))
    rotate(calc(30deg * (1 - var(--p))))
    scale(calc(1 - 0.2 * (1 - var(--p))));
}
.stage-torre .pieza-torre-disipador .etiqueta{ top:-22px; left:-30px; }

.stage-torre .pieza-torre-ram{
  width:10px; height:70px;
}
.stage-torre .pieza-torre-ram-a{
  left:272px; top:60px;
  transform:
    translate(calc(230px * (1 - var(--p))), calc(-150px * (1 - var(--p))))
    rotate(calc(-18deg * (1 - var(--p))));
}
.stage-torre .pieza-torre-ram-a .etiqueta{ top:-20px; left:-10px; }
.stage-torre .pieza-torre-ram-b{
  left:290px; top:60px;
  transform:
    translate(calc(255px * (1 - var(--p))), calc(-120px * (1 - var(--p))))
    rotate(calc(-10deg * (1 - var(--p))));
}

.stage-torre .pieza-torre-gpu{
  left:180px; top:230px; width:100px; height:26px;
  transform:
    translate(calc(-250px * (1 - var(--p))), calc(190px * (1 - var(--p))))
    rotate(calc(16deg * (1 - var(--p))));
}
.stage-torre .pieza-torre-gpu .etiqueta{ bottom:-22px; left:0; }

.stage-torre .pieza-torre-fuente{
  left:175px; top:330px; width:110px; height:55px;
  transform:
    translate(calc(250px * (1 - var(--p))), calc(210px * (1 - var(--p))))
    rotate(calc(-12deg * (1 - var(--p))));
}
.stage-torre .pieza-torre-fuente .etiqueta{ bottom:-22px; right:0; }

@media (max-width: 640px){
  .stage.stage-torre{ transform: scale(0.62); }
}