/* ===========================================================================
   CARRUSEL 3D DE LA PORTADA — "maqueta giratoria"
   Las herramientas dan la vuelta alrededor de un eje, siempre de frente. La
   profundidad la dan el tamaño, la altura, el desenfoque y la sombra: NO hay
   ningún giro del objeto (con una sola foto por producto no se puede).
   Todo cuelga de las variables del tema, así que el modo oscuro funciona solo.
   =========================================================================== */

.wk3d{
  --wk3d-pieza:430px;
  --wk3d-alto:430px;
  --wk3d-sombra:rgba(18,16,14,.24);
  margin-top:var(--s5,24px);
  user-select:none;
}
html[data-tema="oscuro"] .wk3d{ --wk3d-sombra:rgba(0,0,0,.55); }

/* La ventana RECORTA; la perspectiva va dentro. Si compartieran elemento,
   `overflow:hidden` aplanaría la escena. */
.wk3d__ventana{position:relative;overflow:hidden}
.wk3d__escena{position:relative;height:var(--wk3d-alto);perspective:1250px;perspective-origin:50% 50%}
.wk3d__pista{
  position:absolute;inset:0;margin:0 !important;padding:0 !important;list-style:none;
  transform-style:preserve-3d;
}
/* Sin `will-change`: serían doce capas de composición, y con desenfoque dentro
   hay navegadores y móviles justitos que se rinden y dejan de pintarlas. */
.wk3d__item{
  position:absolute;left:50%;top:50%;
  width:var(--wk3d-pieza);
  transform-origin:50% 74%;
  margin:0 !important;padding:0 !important;
  list-style:none;
}
.wk3d__item::before{content:none !important}   /* la rejilla de WooCommerce mete pseudos */

/* Las transiciones se encienden DESPUÉS de colocar las piezas la primera vez:
   si no, la primera pintada las pilla viajando desde el montón del centro y se
   ve un fogonazo de fotos amontonadas. */
.wk3d.is-listo .wk3d__item{
  transition:transform 620ms var(--wk-ease,cubic-bezier(.2,.6,.2,1)),
             opacity 460ms var(--wk-ease,cubic-bezier(.2,.6,.2,1)),
             filter 460ms var(--wk-ease,cubic-bezier(.2,.6,.2,1));
}

.wk3d__enlace{
  display:block;position:relative;text-decoration:none;
  transition:transform 180ms linear;      /* el paralaje del ratón */
  -webkit-tap-highlight-color:transparent;
}
.wk3d__foto{display:block;position:relative;aspect-ratio:1/1}
.wk3d__foto>img{
  width:100%;height:100%;object-fit:contain;
  background:none !important;             /* el recorte no lleva lámina */
  mix-blend-mode:normal !important;       /* ni fusión: ya es transparente */
}
/* La sombra recortada sigue el contorno real de la herramienta —por eso
   drop-shadow y no box-shadow— y solo va en la del centro: es cara de pintar y
   en las pequeñas del fondo no se distingue de la elipse. */
.wk3d__item.is-activo .wk3d__foto>img{
  filter:drop-shadow(0 30px 22px var(--wk3d-sombra)) drop-shadow(0 4px 6px rgba(18,16,14,.12));
}
/* Sombra de contacto: la elipse que convierte "una imagen" en "un objeto
   apoyado en algo". Sin ella el 3D no se lee. */
.wk3d__suelo{
  position:absolute;left:50%;bottom:2%;width:58%;height:22px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,var(--wk3d-sombra),rgba(18,16,14,0) 68%);
}
.wk3d__item:not(.is-activo) .wk3d__suelo{opacity:.45}
/* En oscuro una sombra oscura no existe: bajo el objeto va un charco de luz
   tenue, que es lo que se ve de verdad cuando algo se apoya sobre una
   superficie oscura y brillante.
   ⚠️ SUBIDO de .08 a .16 el 2026-09-01: con productos de plástico NEGRO
   (los soportes de llaves, por ejemplo) el charco tenue no bastaba y la pieza
   desaparecía contra el fondo. */
html[data-tema="oscuro"] .wk3d__suelo{
  background:radial-gradient(ellipse at center,rgba(255,255,255,.16),rgba(255,255,255,0) 68%);
}
/* Y una luz DETRÁS del objeto, no solo debajo. Es lo que separa del fondo a
   los productos oscuros: sin ella un soporte negro sobre #12161D no se ve.
   Se probó la alternativa —ponerle lámina blanca a cada pieza— y convierte el
   carrusel en rectángulos blancos girando, que es justo lo que este diseño
   evita (ver la cabecera del archivo). */
html[data-tema="oscuro"] .wk3d__foto{
  background:radial-gradient(58% 46% at 50% 52%,
              rgba(255,255,255,.13) 0%,
              rgba(255,255,255,.05) 48%,
              rgba(255,255,255,0) 74%);
}
.wk3d__enlace:focus-visible{outline:2px solid var(--wk-rojo);outline-offset:8px}
@media (hover:hover) and (pointer:fine){
  .wk3d__item.is-activo .wk3d__foto>img{transition:transform 300ms var(--wk-ease,ease)}
  .wk3d__item.is-activo:hover .wk3d__foto>img{transform:scale(1.03)}
}

/* --- Mandos ---------------------------------------------------------------
   ⚠️ Color y fondo DECLARADOS A MANO: `body.wk-neu .site-content :is(.button,
   button,…)` pinta todos los botones de rojo con !important y ya se ha comido
   antes la hamburguesa, la lupa y las flechas del carrusel viejo. */
.wk3d .wk3d__flecha,
.wk3d .wk3d__pausa{
  position:absolute;z-index:20;
  display:flex;align-items:center;justify-content:center;
  background:var(--wk-celda) !important;
  color:var(--wk-tinta) !important;
  border:1px solid var(--wk-filete-2) !important;
  border-radius:0 !important;
  cursor:pointer;padding:0 !important;box-shadow:none !important;
  transition:border-color 160ms ease,background 160ms ease,transform 140ms var(--wk-ease,ease);
}
.wk3d .wk3d__flecha{top:50%;width:46px;height:46px;margin-top:-23px}
.wk3d .wk3d__flecha--izq{left:6px}
.wk3d .wk3d__flecha--der{right:6px}
.wk3d .wk3d__flecha svg{width:22px;height:22px;fill:none;stroke:var(--wk-tinta);stroke-width:1.6;stroke-linecap:square}
.wk3d .wk3d__pausa{right:6px;bottom:6px;width:32px;height:32px}
.wk3d .wk3d__pausa svg{width:14px;height:14px;fill:var(--wk-tinta)}
.wk3d .wk3d__ic-play{display:none}
.wk3d.is-parado .wk3d__ic-pausa{display:none}
.wk3d.is-parado .wk3d__ic-play{display:block}
@media (hover:hover) and (pointer:fine){
  .wk3d .wk3d__flecha:hover,
  .wk3d .wk3d__pausa:hover{border-color:var(--wk-tinta) !important;background:var(--wk-realce) !important}
}
.wk3d .wk3d__flecha:active,.wk3d .wk3d__pausa:active{transform:scale(.94)}

/* --- Pie: los datos del producto del centro, en tamaño legible ------------ */
.wk3d__pie{
  text-align:center;
  border-top:1px solid var(--wk-filete);
  margin-top:var(--s4,16px);
  padding:var(--s5,24px) var(--s4,16px) 0;
}
.wk3d__ficha[hidden]{display:none}
.wk3d__pie p{margin:0}
.wk3d__art{
  font-family:var(--wk-mono);font-size:12px;letter-spacing:.04em;
  color:var(--wk-tinta-3) !important;
}
.wk3d .wk3d__nombre{
  font-family:var(--wk-sans) !important;
  font-size:17px;font-weight:600;line-height:1.35;
  margin:4px auto 0 !important;max-width:52ch;
  text-transform:none !important;letter-spacing:0 !important;
}
.wk3d .wk3d__nombre a{color:var(--wk-tinta) !important;text-decoration:none}
@media (hover:hover) and (pointer:fine){
  .wk3d .wk3d__nombre a:hover{text-decoration:underline;text-underline-offset:3px}
}
.wk3d__precio{
  font-size:20px;font-weight:600;color:var(--wk-tinta) !important;
  font-variant-numeric:tabular-nums;margin-top:6px !important;
}
.wk3d__precio .woocommerce-Price-amount{color:inherit !important}
/* Avisos obligatorios de la PAngV: pequeños pero legibles y con contraste AA. */
.wk3d__legal{margin-top:var(--s2,8px)}
.wk3d__legal,
.wk3d__legal p,
.wk3d__legal span,
.wk3d__legal .wc-gzd-additional-info{
  font-size:12px !important;line-height:1.5;
  color:var(--wk-tinta-3) !important;margin:0 !important;
}
.wk3d__legal a{color:var(--wk-tinta-3) !important;text-decoration:underline}
.wk3d .wk3d__btn{
  display:inline-block;margin-top:var(--s4,16px);
  background:transparent !important;
  border:1px solid var(--wk-rojo) !important;
  color:var(--wk-rojo) !important;
  border-radius:0 !important;
  font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;padding:11px 26px;
  transition:background 180ms var(--wk-ease,ease),color 180ms var(--wk-ease,ease);
}
@media (hover:hover) and (pointer:fine){
  .wk3d .wk3d__btn:hover{background:var(--wk-rojo) !important;color:#fff !important}
}
.wk3d__contador{
  font-family:var(--wk-mono);font-size:12px;
  color:var(--wk-tinta-3) !important;margin-top:var(--s4,16px) !important;
}

/* --- Medidas -------------------------------------------------------------- */
/* Dentro de un bloque de categoría la columna es más estrecha que la portada
   entera, así que la pieza tiene que encoger o las de los lados se salen. */
.wk-bloque__productos .wk3d{--wk3d-pieza:310px;--wk3d-alto:390px}

@media (max-width:1200px){
  .wk3d{--wk3d-pieza:360px;--wk3d-alto:430px}
  .wk-bloque__productos .wk3d{--wk3d-pieza:290px;--wk3d-alto:370px}
}
@media (max-width:900px){
  .wk3d,
  .wk-bloque__productos .wk3d{--wk3d-pieza:320px;--wk3d-alto:410px}
  .wk3d .wk3d__flecha{width:40px;height:40px;margin-top:-20px}
}
@media (max-width:560px){
  .wk3d,
  .wk-bloque__productos .wk3d{--wk3d-pieza:265px;--wk3d-alto:350px}
  .wk3d .wk3d__nombre{font-size:16px}
  .wk3d__precio{font-size:18px}
}

/* Quien pide menos movimiento no recibe ninguno: ni giro automático ni
   transiciones. El carrusel se sigue usando con flechas, dedo y teclado. */
@media (prefers-reduced-motion:reduce){
  .wk3d__item,.wk3d__enlace{transition:none !important}
  .wk3d .wk3d__pausa{display:none}
}