/* Visor 3D de envases — J.DRON estudio
   Todo cuelga de .jds3d-fondo para no chocar con el tema de la tienda.
   Un solo aspecto (claro), porque la tienda es blanca. */

.jds3d-abrir{
  display:inline-flex;align-items:center;gap:.5em;margin:4px 0 20px;
  font:600 15px/1.2 inherit;color:#fff;background:#DD0453;border:1px solid #DD0453;
  border-radius:9px;padding:11px 18px;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.jds3d-abrir::before{content:"";width:15px;height:15px;flex:none;
  background:currentColor;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);}
.jds3d-abrir:hover{background:#B8033F;border-color:#B8033F}
.jds3d-abrir:focus-visible{outline:2px solid #1D1D1B;outline-offset:2px}

.jds3d-fondo{position:fixed;inset:0;z-index:99990;background:rgba(18,17,18,.76);
  display:flex;align-items:center;justify-content:center;
  padding:max(14px,env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px))
          max(14px,env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));}
.jds3d-fondo[hidden]{display:none!important}

.jds3d-caja{background:#fff;color:#1D1D1B;border-radius:14px;width:min(1080px,100%);
  max-height:94vh;display:flex;flex-direction:column;overflow:hidden;
  font-family:inherit;font-size:15px;line-height:1.5;box-shadow:0 24px 70px rgba(0,0,0,.42)}
.jds3d-barra{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-bottom:1px solid #E3DFE1;flex:none}
.jds3d-titulo{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:13px;color:#6B6668}
.jds3d-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:16px;padding:16px;overflow:auto}
@media (max-width:820px){.jds3d-cuerpo{grid-template-columns:minmax(0,1fr)}}
.jds3d-oculto{display:none!important}

/* Escenario: luz de estudio fija, es una foto de producto */
.jds3d-fondo .escenario{position:relative;min-width:0;border:1px solid #E3DFE1;border-radius:12px;
  overflow:hidden;max-width:100%;height:min(58vh,540px);
  background:radial-gradient(118% 94% at 50% 8%,#FFF 0%,#F6F5F6 44%,#E6E3E6 100%)}
@media (max-width:820px){.jds3d-fondo .escenario{height:auto;aspect-ratio:4/5}}
.jds3d-fondo .escenario canvas{position:absolute;inset:0;display:block;touch-action:none;cursor:grab}
.jds3d-fondo .escenario.agarrando canvas{cursor:grabbing}
.jds3d-fondo .cargando{position:absolute;inset:0;display:grid;place-items:center;background:#F6F5F6;
  font-size:14px;letter-spacing:.09em;text-transform:uppercase;color:#8C8689}
.jds3d-fondo .cargando[hidden]{display:none!important}
.jds3d-fondo .pista{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;
  gap:10px;padding:9px 13px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;
  color:#6B6668;background:linear-gradient(to top,rgba(255,255,255,.92),rgba(255,255,255,0))}

.jds3d-fondo .panel{display:flex;flex-direction:column;gap:13px;min-width:0}
.jds3d-fondo .bloque{border:1px solid #E3DFE1;border-radius:12px;background:#F7F5F6;padding:13px}
.jds3d-fondo .rotulo{margin:0 0 9px;font-size:12px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:#6B6668}

.jds3d-fondo .lista{display:flex;flex-direction:column;gap:5px}
.jds3d-fondo .pieza{display:grid;grid-template-columns:5px 1fr;gap:10px;align-items:center;width:100%;
  text-align:left;background:#fff;border:1px solid #E3DFE1;border-radius:9px;padding:9px 11px;
  cursor:pointer;font:inherit;color:#1D1D1B;transition:border-color .14s,background .14s}
.jds3d-fondo .pieza:hover{border-color:#CFC9CC}
.jds3d-fondo .pieza .barra{width:5px;height:28px;border-radius:3px;background:#CFC9CC;transition:background .14s}
.jds3d-fondo .pieza[aria-pressed="true"]{border-color:#DD0453;background:#FDE7EF}
.jds3d-fondo .pieza[aria-pressed="true"] .barra{background:#DD0453}
.jds3d-fondo .pieza .nombre{font-weight:700;font-size:15px;line-height:1.15}
.jds3d-fondo .pieza .medida{font-size:12px;color:#6B6668}

.jds3d-fondo .mandos{display:flex;flex-direction:column;gap:7px}
.jds3d-fondo .boton,.jds3d-caja .boton{font:inherit;font-weight:600;font-size:14px;padding:10px 13px;
  border-radius:9px;cursor:pointer;border:1px solid #CFC9CC;background:#fff;color:#1D1D1B;
  transition:border-color .14s,color .14s,background .14s}
.jds3d-fondo .boton:hover{border-color:#DD0453;color:#DD0453}
.jds3d-fondo .boton[aria-pressed="true"]{border-color:#DD0453;background:#DD0453;color:#fff}
.jds3d-fondo .boton.fuerte{border-color:#DD0453;background:#DD0453;color:#fff}
.jds3d-fondo .boton.fuerte:hover{background:#B8033F;border-color:#B8033F;color:#fff}
.jds3d-fondo :focus-visible{outline:2px solid #DD0453;outline-offset:2px}

.jds3d-fondo .datos{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:0;font-size:13.5px}
.jds3d-fondo .datos dt{color:#6B6668}
.jds3d-fondo .datos dd{margin:0;font-weight:600}

/* Etiqueta completa, por encima del visor */
.jds3d-fondo .velo{position:fixed;inset:0;z-index:99995;display:grid;place-items:center;
  background:rgba(18,17,18,.82);padding:14px}
.jds3d-fondo .velo[hidden]{display:none!important}
.jds3d-fondo .hoja{background:#fff;border-radius:12px;padding:11px;max-width:min(980px,100%);
  max-height:90vh;overflow:auto;display:flex;flex-direction:column;gap:9px}
.jds3d-fondo .hoja img{width:100%;height:auto;border-radius:7px;display:block}

@media (prefers-reduced-motion:reduce){.jds3d-fondo *{transition:none!important}}

/* Banner de la gama en la portada */
.jds3d-banner{margin:0 auto;padding:6px 0 26px}
.jds3d-banner-enlace{position:relative;display:block;border-radius:14px;overflow:hidden;
  line-height:0;text-decoration:none;box-shadow:0 10px 30px rgba(18,17,18,.16);
  transition:transform .18s ease, box-shadow .18s ease}
.jds3d-banner-enlace:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(18,17,18,.24)}
.jds3d-banner-img{display:block;width:100%;height:auto}
.jds3d-banner-cta{position:absolute;right:16px;bottom:16px;display:inline-block;
  background:#DD0453;color:#fff;font:700 15px/1 inherit;letter-spacing:.02em;
  padding:13px 20px;border-radius:9px;box-shadow:0 4px 14px rgba(0,0,0,.3)}
@media (max-width:600px){.jds3d-banner-cta{right:10px;bottom:10px;padding:10px 14px;font-size:13px}}
@media (prefers-reduced-motion:reduce){.jds3d-banner-enlace{transition:none}}