/* Hero 3D: laptop + teléfono con balanceo independiente.
   Todo va con el prefijo h3d- para no chocar con los estilos del sitio.
   Parámetros aprobados: ángulo ±15°, ciclo 8 s, cámara -10°. */
.h3d{
  --h3d-amp:15; --h3d-dur:8s; --h3d-cam:-10deg;
  --l-top:#323337; --l-top2:#28292c; --l-edge:#2a2b2e; --l-edge-hi:#55575d; --l-key:#0b0b0c; --l-pad:#36373b; --l-back:#2b2c30;
  --p-rim:#d8743a; --p-rim-hi:#f6b48a; --p-edge:#b65f2c; --p-back:#c96a33;
  position:relative; width:100%;
}
.h3d *,.h3d *::before,.h3d *::after{box-sizing:border-box}

/* Sin .is-on se ve la imagen original y la escena no existe visualmente */
.h3d-scene{display:none}
.h3d.is-on{aspect-ratio:780/500}
.h3d.is-on>.h3d-fallback{display:none}
.h3d.is-on>.h3d-scene{display:block;position:absolute;inset:0;animation:h3d-in .6s ease both}
@keyframes h3d-in{from{opacity:0}to{opacity:1}}

/* Escena: se dibuja a 780×500 y JS la escala al ancho disponible */
.h3d-stage{position:absolute;left:0;top:0;width:780px;height:500px;perspective:3200px;perspective-origin:40% 35%;
  transform:scale(var(--h3d-fit,1));transform-origin:0 0}
.h3d-rig{position:absolute;left:45px;top:50px;width:460px;height:300px;transform-style:preserve-3d;
  transform:rotateX(calc(var(--h3d-cam) + var(--h3d-tx,0deg))) rotateY(var(--h3d-ty,0deg));
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.h3d-pos,.h3d-sway{position:absolute;left:0;top:0;transform-style:preserve-3d}

/* Cada equipo gira sobre su propio centro, con ritmos distintos.
   El teléfono está fuera del espacio que barre el laptop: no se cruzan ni a 30°. */
.h3d-sway-l{width:460px;height:300px;transform-origin:230px 300px 160px;animation:h3d-swayL var(--h3d-dur) ease-in-out infinite}
@keyframes h3d-swayL{
  0%,100%{transform:rotateY(calc(var(--h3d-amp) * -1deg)) translateY(0)}
  50%{transform:rotateY(calc(var(--h3d-amp) * 1deg)) translateY(-6px)}
}
.h3d-pos-p{transform:translate3d(545px,30px,170px)}
.h3d-sway-p{width:128px;height:272px;transform-origin:64px 136px -4px;animation:h3d-swayP calc(var(--h3d-dur) * .72) ease-in-out -1.4s infinite}
@keyframes h3d-swayP{
  0%,100%{transform:rotateY(calc(-14deg + var(--h3d-amp) * 1.2deg)) rotateZ(1.2deg) translateY(0)}
  50%{transform:rotateY(calc(-14deg - var(--h3d-amp) * 1.2deg)) rotateZ(-1.2deg) translateY(-12px)}
}

/* Sombras en el piso */
.h3d-shadow{position:absolute;transform-origin:50% 0;pointer-events:none;border-radius:50%}
.h3d-sh-l{left:-60px;top:312px;width:580px;height:420px;transform:rotateX(90deg);
  background:radial-gradient(ellipse 48% 42% at 50% 42%,rgba(20,23,94,.30),transparent 72%);animation:h3d-shL var(--h3d-dur) ease-in-out infinite}
.h3d-sh-p{left:-30px;top:274px;width:188px;height:76px;transform:translateZ(-20px) rotateX(90deg);
  background:radial-gradient(ellipse at center,rgba(20,23,94,.35),transparent 70%);animation:h3d-shP calc(var(--h3d-dur) * .72) ease-in-out -1.4s infinite}
@keyframes h3d-shL{0%,100%{opacity:1}50%{opacity:.75}}
@keyframes h3d-shP{0%,100%{opacity:1;scale:1}50%{opacity:.55;scale:.8}}

/* Cuerpos con grosor: capas apiladas con las mismas esquinas */
.h3d-dev{position:absolute;transform-style:preserve-3d}
.h3d-dev>.h3d-face,.h3d-dev>.h3d-layer{position:absolute;inset:0;border-radius:inherit}
.h3d-dev>.h3d-layer{background:var(--edge)}
.h3d-dev>.h3d-layer.h3d-hi{background:var(--edge-hi)}

/* Laptop */
.h3d-lid{left:0;top:0;width:460px;height:296px;border-radius:13px 13px 5px 5px;transform-origin:50% 100%;transform:rotateX(9deg);--edge:var(--l-edge);--edge-hi:var(--l-edge-hi)}
.h3d-lid>.h3d-front{background:#050506;padding:7px 7px 10px;box-shadow:inset 0 0 0 1px var(--l-edge-hi)}
.h3d-lid>.h3d-back{background:linear-gradient(160deg,var(--l-back),var(--l-edge))}
.h3d-screen{position:relative;height:100%;overflow:hidden;background:#fff;border-radius:7px 7px 1px 1px}
.h3d-notch{position:absolute;top:0;left:50%;width:54px;height:9px;margin-left:-27px;background:#050506;border-radius:0 0 6px 6px;z-index:7}
.h3d-notch::after{content:"";position:absolute;left:50%;top:3px;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:#1d2433}
.h3d-deck{left:0;top:300px;width:460px;height:320px;border-radius:6px 6px 18px 18px;transform-origin:50% 0;transform:translateZ(-4px) rotateX(90deg);--edge:var(--l-edge);--edge-hi:var(--l-edge-hi)}
.h3d-deck>.h3d-front{background:linear-gradient(180deg,var(--l-top),var(--l-top2));padding:16px 16px 0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.h3d-kbrow{display:flex;gap:10px;justify-content:center}
.h3d-grille{width:34px;height:112px;background:radial-gradient(circle,rgba(0,0,0,.55) .8px,transparent 1.2px) 0 0/4px 4px}
.h3d-kb{width:340px;display:flex;flex-direction:column;gap:3px;padding:4px;border-radius:5px;background:rgba(0,0,0,.18)}
.h3d-kr{display:flex;gap:3px}
.h3d-k{display:block;flex:var(--g,1);height:var(--h);border-radius:2.5px;background:var(--l-key);box-shadow:inset 0 -1px 0 rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.04)}
.h3d-arr{display:flex;gap:3px;align-items:flex-end}
.h3d-arr>.h3d-k{height:8px}
.h3d-arr>span{display:flex;flex-direction:column;gap:1px;flex:1}
.h3d-arr>span>.h3d-k{height:7.5px;flex:none}
.h3d-pad{width:200px;height:122px;margin:14px auto 0;border-radius:9px;background:var(--l-pad);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.08)}
.h3d-lip{position:absolute;bottom:0;left:50%;width:70px;height:6px;margin-left:-35px;border-radius:6px 6px 0 0;background:rgba(0,0,0,.18)}
.h3d-hinge{position:absolute;left:40px;top:291px;width:380px;height:12px;border-radius:6px;background:linear-gradient(#0d0d0e,#2a2b2e);transform:translateZ(-8px)}

/* Teléfono */
.h3d-phone{left:0;top:0;width:128px;height:272px;border-radius:23px;--edge:var(--p-edge);--edge-hi:var(--p-rim-hi)}
.h3d-phone>.h3d-front{padding:1.3px;background:linear-gradient(140deg,var(--p-rim-hi),var(--p-rim) 30%,var(--p-rim) 70%,var(--p-rim-hi))}
.h3d-phone>.h3d-back{background:var(--p-back)}
.h3d-bezel{height:100%;border-radius:21.7px;background:#000;padding:2.8px}
.h3d-pscreen{position:relative;height:100%;overflow:hidden;background:#fff;border-radius:19px}
.h3d-island{position:absolute;top:5px;left:50%;width:30px;height:8.5px;margin-left:-15px;border-radius:9px;background:#000;z-index:7}
.h3d-btn{position:absolute;width:2.2px;border-radius:2px;background:linear-gradient(90deg,var(--p-edge),var(--p-rim-hi));transform:translateZ(-4px)}

/* Reflejo */
.h3d-glare{position:absolute;inset:0;z-index:6;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 44%,rgba(255,255,255,0) 58%);
  background-size:260% 100%;animation:h3d-glare var(--h3d-dur) ease-in-out infinite}
.h3d-pscreen .h3d-glare{animation-duration:calc(var(--h3d-dur) * .72);animation-delay:-1.4s}
@keyframes h3d-glare{0%,100%{background-position:100% 0}50%{background-position:0% 0}}

/* Capturas */
.h3d img.h3d-shot{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top center;
  opacity:0;transform:translateX(6%);transition:opacity .7s ease,transform .7s ease}
.h3d img.h3d-shot.is-active{opacity:1;transform:none}

/* Fuera de pantalla o con la pestaña oculta: no gasta CPU */
.h3d.is-paused .h3d-sway,.h3d.is-paused .h3d-shadow,.h3d.is-paused .h3d-glare{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .h3d-sway,.h3d-shadow,.h3d-glare{animation:none!important}
}