/* =============================================================================
   TARJETA DE PRODUCTO (29-jul-2026) — SI.boxArt() en ui.js pinta el HTML

   Sigue el modelo que pidió el dueño: tarjeta cuadrada clara, el logo del
   programa grande sobre un pedestal hexagonal, el nombre en negrita debajo y
   la marca de NexKey365 abajo a la izquierda.

   POR QUÉ CLARA Y NO OSCURA (esto no es gusto, es técnico)
   La primera versión era una caja oscura y el logo de CorelDRAW salía moteado,
   con un halo sucio alrededor. La causa: los PNG de logos3d están recortados
   con el borde suavizado en tono CLARO —se hicieron para fondo blanco—. Sobre
   un fondo oscuro ese borde claro se ve como suciedad; sobre fondo claro
   desaparece. Encima llevaban un drop-shadow, que subraya exactamente ese
   halo. Por eso la tarjeta clara se ve nítida y la caja oscura no podía.
   NO volver a poner filter: drop-shadow() sobre estos logos.

   Los 512x512 dan de sobra: se muestran a ~150-250px, nunca se amplían.

   Cuando un producto tenga su propia tarjeta terminada en
   assets/img/products/<id>.png, esa imagen sustituye a toda esta composición
   (ver .boxart--art más abajo). Mientras no la tenga, la tarjeta se compone
   aquí y se ve igual de uniforme.
   ============================================================================= */

.boxart {
  --bx-ink: oklch(0.19 0.02 245);
  --bx-teal: oklch(0.62 0.115 178);

  /* Una sola zona: el logo. El nombre salió de aquí el 30-jul-2026 porque en
     el celular la tarjeta mide ~90px y el texto se comía la fila del logo
     hasta dejarla en nada — las fichas salían con nombre y sin imagen. */
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 9%;
  overflow: hidden;
  border-radius: 8%;
  background: linear-gradient(162deg, oklch(1 0 0) 0%, oklch(0.955 0.004 236) 100%);
  color: var(--bx-ink);
  container-type: inline-size;
}

/* Las imágenes de dentro NO deben heredar el estirado a pantalla completa.
   commerce.css lleva `.deck__box > img { position:absolute; width:100% }` para
   el estuche antiguo; esto blinda la tarjeta esté donde esté. */
.boxart img {
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---- Decoración: retícula de puntos y trazos de circuito -----------------
   Muy tenue a propósito. Da el acabado "técnico" del modelo sin competir con
   el logo, que es lo único que el visitante tiene que reconocer. */
.boxart::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(oklch(0.62 0.115 178 / 0.32) 1px, transparent 1px);
  background-size: 7px 7px;
  background-position: 6% 6%;
  -webkit-mask-image: radial-gradient(38% 26% at 8% 7%, #000, transparent 70%);
  mask-image: radial-gradient(38% 26% at 8% 7%, #000, transparent 70%);
  opacity: 0.75;
}

.boxart::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(45deg, transparent calc(50% - 0.5px), oklch(0.62 0.115 178 / 0.22) 50%, transparent calc(50% + 0.5px)) 0 0 / 34% 34% no-repeat,
    linear-gradient(-45deg, transparent calc(50% - 0.5px), oklch(0.62 0.115 178 / 0.22) 50%, transparent calc(50% + 0.5px)) 100% 0 / 30% 30% no-repeat;
  background-position: 4% 96%, 96% 4%;
}

/* ---- El logo del programa sobre su pedestal ------------------------------ */
.boxart__art {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* Sello de la tienda en la esquina, como en el modelo. Va absoluto para no
   robarle sitio al logo: es una firma, no un elemento de la composición. */
img.boxart__nk {
  position: absolute;
  left: 7%;
  bottom: 6%;
  z-index: 2;
  width: clamp(11px, 17cqw, 40px);
  height: auto;
  opacity: 0.92;
}

/* Pedestal hexagonal: el mismo gesto del logotipo de la tienda, en blanco y
   apenas insinuado. Es lo que hace que un logo suelto parezca colocado. */
.boxart__art::before {
  content: "";
  position: absolute;
  width: 82cqw;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  background: oklch(1 0 0);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  filter: drop-shadow(0 6px 18px oklch(0.55 0.03 245 / 0.16));
}

/* Sin pedestal cuando dentro va una baldosa vectorial: la baldosa ya es un
   cuerpo opaco con sombra, y el hexágono asomaba por detrás de sus esquinas
   como una mancha suelta. Lo marca ui.js al componer (boxart__art--tile). */
.boxart__art--tile::before { display: none; }

/* SIN drop-shadow sobre el logo: ver la nota de cabecera — subraya el borde
   claro del recorte y es lo que lo hacía verse moteado. */
/* Más grande que antes: al salir el nombre, el logo se queda con la tarjeta
   entera y es lo único que el visitante tiene que reconocer de un vistazo. */
.boxart__art img {
  position: relative;
  max-width: 62cqw;
  max-height: 88%;
}

/* Productos sin PNG 3D: el glifo de marca vectorial (icons.js), que ya trae el
   color corporativo del programa. Va a 52cqw —no a 40— porque el glifo lleva su
   propio fondo de color y, al lado de un logo recortado a 62cqw, uno más
   pequeño se veía hundido en la tarjeta; a este tamaño las dos familias de
   tarjeta (foto y vector) pesan lo mismo en la fila del catálogo. */
.boxart__art .brand-glyph {
  position: relative;
  /* Porcentaje del cuadro del logo, NO cqw: con clamp(34px, 52cqw, 124px) la
     baldosa se quedaba clavada en los 34px del mínimo y se veía diminuta al
     lado de los PNG. El cuadro contenedor ya mide lo que tiene que medir, así
     que un 62% suyo iguala el 62cqw con que se pinta el PNG de al lado. */
  width: 62% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  max-width: 130px;
  border-radius: 22%;
  /* El primer valor repite el aro interior de .brand-glyph (styles.css): al
     declarar box-shadow aquí se reemplaza entero, no se suma. */
  box-shadow:
    inset 0 0 0 1px oklch(0.24 0.05 255 / 0.07),
    0 4px 14px oklch(0.45 0.03 245 / 0.14);
}

/* El SVG de dentro lo dimensiona brandGlyph() con atributos width/height en
   píxeles fijos (62% del tamaño pedido). Al escalar el tile con cqw hay que
   soltarlo, o el dibujo se queda pequeño en una baldosa grande. */
.boxart__art .brand-glyph > svg {
  width: 62% !important;
  height: 62% !important;
}

/* (Las reglas del nombre del programa y del pie con la marca se retiraron
   el 30-jul-2026: la tarjeta muestra SOLO el logo. Ver la nota de .boxart.) */

/* =============================================================================
   TARJETA YA TERMINADA COMO IMAGEN
   Cuando el producto tiene su propio archivo en assets/img/products/<id>.png,
   ui.js pinta .boxart--art y la imagen ocupa la tarjeta entera: la composición
   de arriba no se usa. Así se pueden ir sustituyendo de una en una sin que el
   catálogo quede a medias.
   ============================================================================= */
.boxart--art {
  display: block;
  padding: 0;
  background: oklch(1 0 0);
}

.boxart--art::before,
.boxart--art::after { display: none; }

.boxart--art > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =============================================================================
   DÓNDE VIVE LA TARJETA
   ============================================================================= */

/* ---- En el carrusel ------------------------------------------------------
   El estuche vuelve a ser CUADRADO (la versión anterior lo hacía vertical para
   la caja con lomo, que se retiró). Se le quitan fondo y borde: la tarjeta ya
   trae los suyos y dos marcos superpuestos se veían sucios. */
.deck__box:has(.boxart) {
  background: none;
  border: 0;
  border-radius: 8%;
  overflow: visible;
}

.deck__box.is-center:has(.boxart) {
  box-shadow:
    0 26px 54px oklch(0 0 0 / 0.45),
    0 0 42px oklch(0.72 0.132 178 / 0.28);
}

.deck__box .boxart {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

/* ---- En la tarjeta del catálogo ------------------------------------------ */
.lic-card__art:has(.boxart) {
  display: grid;
  place-items: center;
  padding: 1rem;
  background:
    radial-gradient(80% 70% at 50% 40%, oklch(0.72 0.132 178 / 0.08), transparent 70%),
    var(--bg-subtle);
}

.lic-card__art .boxart {
  width: auto;
  height: 100%;
  max-height: 205px;
  aspect-ratio: 1 / 1;
  box-shadow: 0 10px 26px oklch(0.4 0.03 245 / 0.16);
  transition: transform .45s var(--ease-out);
}

.lic-card:hover .lic-card__art .boxart {
  transform: translateY(-4px) scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .lic-card:hover .lic-card__art .boxart { transform: none; }
}