/*!
 * Sils Addons — Motor visual de marcos (producto individual). Hoja de estilo.
 *
 * ABSORBIDO, NO REESCRITO. Este fichero es el bloque <style> del snippet de
 * Elementor «Marcos single» (post 187632, v8.5), copiado tal cual. No se toca
 * su interior: geometría, biseles y calibraciones son fruto de un ajuste visual
 * iterativo y cualquier retoque a ojo rompe la paridad.
 *
 * Único cambio respecto al original: la URL absoluta del PNG de reflejo de
 * cristal pasa a la variable --sils-reflejo-cristal, que inyecta PHP desde la
 * carpeta de uploads real del sitio. Así el plugin deja de llevar dominios
 * escritos a mano.
 *
 * Prefijos de variables por sistema de marco:
 *   --mf-*  flotante (Obra Original / Vanguard)
 *   --mg-*  encajado biselado (Minimal)
 *   --mq-*  encajado plano con paredes interiores (Q4attro)
 *   --ma-*  encajado plano + cristal (Artic)
 *
 * @package SilsAddons
 */

/* ═══════════════════════════════════════════════════════════════
   VARIABLES
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* [Sils Addons] Factor de escala del marco. 1 = exactamente como estaba calibrado
     para la galería de la ficha. Cada instancia puede bajarlo (obras pequeñas, móvil)
     y toda la geometría se reduce en proporción, sin tocar ninguna calibración. */
  --sils-marco-escala: 1;

  --mf-grosor: calc(var(--sils-marco-escala, 1) * 3px);
  --mf-gap: calc(var(--sils-marco-escala, 1) * 3px);
  --mf-rebaje: 0.55;
  --mf-marco-canto: calc(var(--sils-marco-escala, 1) * 17px);
  --mf-obra-canto: calc(var(--sils-marco-escala, 1) * 12px);
  --mf-rotacion: 25deg;

  /* Minimal (encajado biselado) */
  --mg-grosor: calc(var(--sils-marco-escala, 1) * 8px);
  --mg-marco-canto: calc(var(--sils-marco-escala, 1) * 16px);
  --mg-pendiente: 0.28;
  --mg-sheen: 0.46;
  --mg-canto-bright: 0.78;
  --mg-canto-sat: 0.95;

  /* Q4attro (encajado plano con paredes interiores) */
  --mq-grosor: calc(var(--sils-marco-escala, 1) * 4.5px);
  --mq-marco-canto: calc(var(--sils-marco-escala, 1) * 16px);
  --mq-canto-bright: 0.78;
  --mq-canto-sat: 0.95;
  --mq-pared-ancho: calc(var(--sils-marco-escala, 1) * 8px);
  --mq-pared-bright: 0.78;
  --mq-pared-ancho-sup: calc(var(--sils-marco-escala, 1) * 4.5px);
  --mq-pared-bright-sup: 0.82;
  --mq-pared-ancho-inf: calc(var(--sils-marco-escala, 1) * 3px);
  --mq-pared-bright-inf: 0.82;

  /* Artic (encajado plano + paspartú PNG con cristal) */
  --ma-grosor: calc(var(--sils-marco-escala, 1) * 6px);
  --ma-marco-canto: calc(var(--sils-marco-escala, 1) * 20px);
  --ma-canto-bright: 0.78;
  --ma-canto-sat: 0.95;
  --ma-pared-ancho: calc(var(--sils-marco-escala, 1) * 17px);
  --ma-pared-bright: 0.78;
  --ma-pared-ancho-sup: calc(var(--sils-marco-escala, 1) * 4.5px);
  --ma-pared-bright-sup: 0.82;
  --ma-pared-ancho-inf: calc(var(--sils-marco-escala, 1) * 4px);
  --ma-pared-bright-inf: 0.82;
}
/* ═══════════════════════════════════════════════════════════════
   [Sils Addons] LAS MEDIDAS SE DECLARAN EN EL PROPIO MARCO, NO EN :root.

   Una variable cuyo valor lleva dentro calc(var(--sils-marco-escala) * 3px) se resuelve
   DONDE SE DECLARA. Declarada en :root se queda congelada con escala 1, y cambiar
   --sils-marco-escala en el marco no haría nada. Por eso las mismas medidas se repiten
   aquí, en el elemento que lleva la escala; las de :root quedan solo de respaldo.
   ═══════════════════════════════════════════════════════════════ */
.jet-woo-product-gallery__image-item.featured .jet-woo-product-gallery__image,
.sils-marco {
  --mf-grosor: calc(var(--sils-marco-escala, 1) * 3px);
  --mf-gap: calc(var(--sils-marco-escala, 1) * 3px);
  --mf-marco-canto: calc(var(--sils-marco-escala, 1) * 17px);
  --mf-obra-canto: calc(var(--sils-marco-escala, 1) * 12px);
  --mg-grosor: calc(var(--sils-marco-escala, 1) * 8px);
  --mg-marco-canto: calc(var(--sils-marco-escala, 1) * 16px);
  --mq-grosor: calc(var(--sils-marco-escala, 1) * 4.5px);
  --mq-marco-canto: calc(var(--sils-marco-escala, 1) * 16px);
  --mq-pared-ancho: calc(var(--sils-marco-escala, 1) * 8px);
  --mq-pared-ancho-sup: calc(var(--sils-marco-escala, 1) * 4.5px);
  --mq-pared-ancho-inf: calc(var(--sils-marco-escala, 1) * 3px);
  --ma-grosor: calc(var(--sils-marco-escala, 1) * 6px);
  --ma-marco-canto: calc(var(--sils-marco-escala, 1) * 20px);
  --ma-pared-ancho: calc(var(--sils-marco-escala, 1) * 17px);
  --ma-pared-ancho-sup: calc(var(--sils-marco-escala, 1) * 4.5px);
  --ma-pared-ancho-inf: calc(var(--sils-marco-escala, 1) * 4px);
}

/* ═══════════════════════════════════════════════════════════════
   BASE — rotación común al wrapper (no pertenece al marco)
   ═══════════════════════════════════════════════════════════════ */
/* [Sils Addons] Además de la galería de la ficha, cualquier elemento con la clase
   .sils-marco (una obra dentro de una composición, por ejemplo). */
.jet-woo-product-gallery__image-item.featured .jet-woo-product-gallery__image,
.sils-marco {
  position: relative !important;
  display: inline-block;
  transform: perspective(70vw) rotateY(var(--mf-rotacion));
  overflow: visible !important;
  /* [Sils Addons] La sombra proyectada también va en proporción: con medidas fijas se
     veía enorme en pantallas pequeñas y minúscula en grandes. */
  filter: drop-shadow(
    calc(var(--sils-marco-escala, 1) * -20px)
    calc(var(--sils-marco-escala, 1) * 10px)
    calc(var(--sils-marco-escala, 1) * 4px)
    rgba(0,0,0,0.4));
  transition: transform 0.5s ease, filter 0.5s ease;
  opacity: 0;
}
.jet-woo-product-gallery__image-item.featured .jet-woo-product-gallery__image.mf-ready,
.sils-marco.mf-ready {
  opacity: 1;
  transition: opacity 0.4s ease;
}
.jet-woo-product-gallery__image-item.featured .jet-woo-product-gallery__image a,
.sils-marco a {
  filter: none;
}
.jet-woo-product-gallery__image-item.featured .jet-woo-product-gallery__image img.wp-post-image,
.sils-marco img.sils-marco__obra {
  display: block;
  transition: transform 0.4s ease;
  transform-origin: center center;
  image-rendering: -webkit-optimize-contrast;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  transform: translateZ(0);
}

/* Canto de la obra (lienzo) — solo para Original/Vanguard */
.mf-canto-obra {
  position: absolute;
  top: 0;
  left: calc(-1 * var(--mf-obra-canto));
  width: var(--mf-obra-canto);
  height: 100%;
  background-size: cover;
  background-position: left center;
  filter: brightness(0.58) saturate(0.7);
  z-index: 3; pointer-events: none;
  transform: scaleX(-1);
  clip-path: polygon(100% 1.25%, 0 0, 0 100%, 100% 98.75%);
}

/* ═══════════════════════════════════════════════════════════════
   MARCO FLOTANTE — Original / Vanguard
   ═══════════════════════════════════════════════════════════════ */
.mf-frame {
  position: absolute;
  top: calc(-1 * (var(--mf-grosor) + var(--mf-gap)));
  left: calc(-1 * (var(--mf-grosor) + var(--mf-gap)));
  width: calc(100% + 2 * (var(--mf-grosor) + var(--mf-gap)));
  height: calc(100% + 2 * (var(--mf-grosor) + var(--mf-gap)));
  pointer-events: none;
  z-index: 10;
}

.mf-rebaje {
  position: absolute;
  top: var(--mf-grosor);
  right: var(--mf-grosor);
  bottom: var(--mf-grosor);
  left: var(--mf-grosor);
  z-index: 2; pointer-events: none;
  background: linear-gradient(to right,
    rgba(0,0,0,0.25) 0px,
    rgba(0,0,0, var(--mf-rebaje)) var(--mf-gap),
    rgba(0,0,0, var(--mf-rebaje)) 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.15),
    inset calc(var(--sils-marco-escala, 1) * 4px) calc(var(--sils-marco-escala, 1) * 4px) calc(var(--sils-marco-escala, 1) * 8px) rgba(0,0,0, calc(var(--mf-rebaje) * 0.5));
  clip-path: polygon(
    evenodd,
    0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%,
    var(--mf-gap) var(--mf-gap),
    calc(100% - var(--mf-gap)) var(--mf-gap),
    calc(100% - var(--mf-gap)) calc(100% - var(--mf-gap)),
    var(--mf-gap) calc(100% - var(--mf-gap)),
    var(--mf-gap) var(--mf-gap)
  );
}

.mf-lado {
  position: absolute;
  background-color: var(--mf-tono);
}
.mf-lado--top, .mf-lado--bottom {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.15) 100%),
    var(--mf-textura-h, none);
  background-size: cover, cover;
  background-position: center, center;
}
.mf-lado--left, .mf-lado--right {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.15) 100%),
    var(--mf-textura-v, none);
  background-size: cover, cover;
  background-position: center, center;
}
.mf-lado--top {
  top: 0; left: 0; right: 0; height: var(--mf-grosor);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--mf-grosor)) 100%, var(--mf-grosor) 100%);
}
.mf-lado--right {
  top: 0; right: 0; bottom: 0; width: var(--mf-grosor);
  clip-path: polygon(0 var(--mf-grosor), 100% 0, 100% 100%, 0 calc(100% - var(--mf-grosor)));
}
.mf-lado--bottom {
  bottom: 0; left: 0; right: 0; height: var(--mf-grosor);
  clip-path: polygon(var(--mf-grosor) 0, calc(100% - var(--mf-grosor)) 0, 100% 100%, 0 100%);
}
.mf-lado--left {
  top: 0; left: 0; bottom: 0; width: var(--mf-grosor);
  clip-path: polygon(0 0, 100% var(--mf-grosor), 100% calc(100% - var(--mf-grosor)), 0 100%);
}

.mf-canto-marco {
  position: absolute;
  left: calc(-1 * (var(--mf-grosor) + var(--mf-gap) + var(--mf-marco-canto)));
  top: calc(-1 * (var(--mf-grosor) + var(--mf-gap)));
  width: calc(var(--mf-marco-canto) + 1px);
  height: calc(100% + 2 * (var(--mf-grosor) + var(--mf-gap)));
  z-index: 11; pointer-events: none;
  background-color: var(--mf-tono);
  background-image: var(--mf-textura-v, none);
  background-size: cover;
  background-position: center;
  filter: brightness(var(--mf-canto-bright, 0.58)) saturate(var(--mf-canto-sat, 0.7));
  clip-path: polygon(
    0 calc(var(--mf-marco-canto) * 0.3),
    100% 0,
    100% 100%,
    0 calc(100% - var(--mf-marco-canto) * 0.3)
  );
}
/* ═══════════════════════════════════════════════════════════════
   MARCO ENCAJADO — MINIMAL (Obra Gráfica)
   No flotante: marco directamente alrededor de la lámina, sin gap.
   Biselado en el frontal (claro fuera, oscuro dentro = pendiente).
   Sin canto-obra (las láminas no tienen profundidad de lienzo).
   ═══════════════════════════════════════════════════════════════ */
.mg-frame {
  position: absolute;
  top:    calc(-1 * var(--mg-grosor));
  left:   calc(-1 * var(--mg-grosor));
  right:  calc(-1 * var(--mg-grosor));
  bottom: calc(-1 * var(--mg-grosor));
  pointer-events: none;
  z-index: 10;
}

.mg-lado {
  position: absolute;
  background-color: var(--mg-tono);
}

/* TOP — horizontal: más oscuro */
.mg-lado--top {
  top: 0; left: 0; right: 0; height: var(--mg-grosor);
  background-image: linear-gradient(180deg,
    rgba(255,255,255, var(--mg-sheen)) 0%,
    rgba(255,255,255, calc(var(--mg-sheen) * 0.3)) 5%,
    rgba(255,255,255, 0) 10%,
    rgba(0,0,0, calc(var(--mg-pendiente) * 0.3)) 25%,
    rgba(0,0,0, calc(var(--mg-pendiente) * 0.7)) 60%,
    rgba(0,0,0, var(--mg-pendiente)) 100%
  );
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--mg-grosor)) 100%, var(--mg-grosor) 100%);
}

/* RIGHT — vertical: más claro y brillante */
.mg-lado--right {
  top: 0; right: 0; bottom: 0; width: var(--mg-grosor);
  background-image: linear-gradient(270deg,
    rgba(255,255,255, calc(var(--mg-sheen) * 1.2)) 0%,
    rgba(255,255,255, calc(var(--mg-sheen) * 0.5)) 8%,
    rgba(255,255,255, 0) 15%,
    rgba(0,0,0, calc(var(--mg-pendiente) * 0.25)) 35%,
    rgba(0,0,0, calc(var(--mg-pendiente) * 0.5)) 70%,
    rgba(0,0,0, calc(var(--mg-pendiente) * 0.75)) 100%
  );
  clip-path: polygon(0 var(--mg-grosor), 100% 0, 100% 100%, 0 calc(100% - var(--mg-grosor)));
}

/* BOTTOM — horizontal: más oscuro */
.mg-lado--bottom {
  bottom: 0; left: 0; right: 0; height: var(--mg-grosor);
  background-image: linear-gradient(0deg,
    rgba(255,255,255, calc(var(--mg-sheen) * 0.6)) 0%,
    rgba(255,255,255, calc(var(--mg-sheen) * 0.2)) 5%,
    rgba(255,255,255, 0) 10%,
    rgba(0,0,0, calc(var(--mg-pendiente) * 0.4)) 25%,
    rgba(0,0,0, calc(var(--mg-pendiente) * 0.75)) 60%,
    rgba(0,0,0, var(--mg-pendiente)) 100%
  );
  clip-path: polygon(var(--mg-grosor) 0, calc(100% - var(--mg-grosor)) 0, 100% 100%, 0 100%);
}

/* LEFT — vertical: más claro y brillante */
.mg-lado--left {
  top: 0; left: 0; bottom: 0; width: var(--mg-grosor);
  background-image: linear-gradient(90deg,
    rgba(255,255,255, calc(var(--mg-sheen) * 1.2)) 0%,
    rgba(255,255,255, calc(var(--mg-sheen) * 0.5)) 8%,
    rgba(255,255,255, 0) 15%,
    rgba(0,0,0, calc(var(--mg-pendiente) * 0.25)) 35%,
    rgba(0,0,0, calc(var(--mg-pendiente) * 0.5)) 70%,
    rgba(0,0,0, calc(var(--mg-pendiente) * 0.75)) 100%
  );
  clip-path: polygon(0 0, 100% var(--mg-grosor), 100% calc(100% - var(--mg-grosor)), 0 100%);
}

/* Canto lateral del marco encajado */
.mg-canto-marco {
  position: absolute;
  left:   calc(-1 * (var(--mg-marco-canto) + var(--mg-grosor)));
  top:    calc(-1 * var(--mg-grosor));
  height: calc(100% + 2 * var(--mg-grosor));
  width: calc(var(--mg-marco-canto) + 1px);
  z-index: 11;
  pointer-events: none;
  background-color: var(--mg-tono);
  filter: brightness(var(--mg-canto-bright)) saturate(var(--mg-canto-sat));
  clip-path: polygon(
    0 calc(var(--mg-marco-canto) * 0.3),
    100% 0,
    100% 100%,
    0 calc(100% - var(--mg-marco-canto) * 0.3)
  );
}
/* ═══════════════════════════════════════════════════════════════
   MARCO ENCAJADO — Q4ATTRO (Obra Gráfica)
   Frontal plano (sin biselado). Lámina hundida. Tres paredes
   interiores visibles (sup, der, inf). La izq queda oculta por
   el canto exterior izquierdo.
   ═══════════════════════════════════════════════════════════════ */
.mq-frame {
  position: absolute;
  top:    calc(-1 * (var(--mq-grosor) + var(--mq-pared-ancho-sup)));
  left:   calc(-1 * var(--mq-grosor));
  right:  calc(-1 * (var(--mq-grosor) + var(--mq-pared-ancho)));
  bottom: calc(-1 * (var(--mq-grosor) + var(--mq-pared-ancho-inf)));
  pointer-events: none;
  z-index: 10;
}

.mq-lado {
  position: absolute;
  background-color: var(--mq-tono);
}
.mq-lado--top, .mq-lado--bottom {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.10) 100%),
    var(--mq-textura-h, none);
  background-size: cover, cover;
  background-position: center, center;
}
.mq-lado--left, .mq-lado--right {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.10) 100%),
    var(--mq-textura-v, none);
  background-size: cover, cover;
  background-position: center, center;
}
.mq-lado--top {
  top: 0; left: 0; right: 0; height: var(--mq-grosor);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--mq-grosor)) 100%, var(--mq-grosor) 100%);
}
.mq-lado--right {
  top: 0; right: 0; bottom: 0; width: var(--mq-grosor);
  clip-path: polygon(0 var(--mq-grosor), 100% 0, 100% 100%, 0 calc(100% - var(--mq-grosor)));
}
.mq-lado--bottom {
  bottom: 0; left: 0; right: 0; height: var(--mq-grosor);
  clip-path: polygon(var(--mq-grosor) 0, calc(100% - var(--mq-grosor)) 0, 100% 100%, 0 100%);
}
.mq-lado--left {
  top: 0; left: 0; bottom: 0; width: var(--mq-grosor);
  clip-path: polygon(0 0, 100% var(--mq-grosor), 100% calc(100% - var(--mq-grosor)), 0 100%);
}

/* Paredes interiores */
.mq-pared-int--sup {
  position: absolute;
  top: calc(-1 * var(--mq-pared-ancho-sup));
  left: 0;
  right: calc(-1 * var(--mq-pared-ancho));
  height: var(--mq-pared-ancho-sup);
  z-index: 3;
  pointer-events: none;
  background-color: var(--mq-tono);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.10) 100%),
    var(--mq-textura-h, none);
  background-size: cover, cover;
  background-position: center, center;
  filter: brightness(var(--mq-pared-bright-sup)) saturate(var(--mq-canto-sat));
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - var(--mq-pared-ancho)) 100%,
    0 100%
  );
}

.mq-pared-int--der {
  position: absolute;
  top: calc(-1 * var(--mq-pared-ancho-sup));
  right: calc(-1 * var(--mq-pared-ancho));
  bottom: calc(-1 * var(--mq-pared-ancho-inf));
  width: var(--mq-pared-ancho);
  z-index: 3;
  pointer-events: none;
  background-color: var(--mq-tono);
  background-image:
    linear-gradient(270deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.12) 100%),
    var(--mq-textura-v, none);
  background-size: cover, cover;
  background-position: center, center;
  filter: brightness(var(--mq-pared-bright)) saturate(var(--mq-canto-sat));
  clip-path: polygon(
    0 var(--mq-pared-ancho-sup),
    100% 0,
    100% 100%,
    0 calc(100% - var(--mq-pared-ancho-inf))
  );
}

.mq-pared-int--inf {
  position: absolute;
  bottom: calc(-1 * var(--mq-pared-ancho-inf));
  left: 0;
  right: calc(-1 * var(--mq-pared-ancho));
  height: var(--mq-pared-ancho-inf);
  z-index: 3;
  pointer-events: none;
  background-color: var(--mq-tono);
  background-image:
    linear-gradient(0deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.10) 100%),
    var(--mq-textura-h, none);
  background-size: cover, cover;
  background-position: center, center;
  filter: brightness(var(--mq-pared-bright-inf)) saturate(var(--mq-canto-sat));
  clip-path: polygon(
    0 0,
    calc(100% - var(--mq-pared-ancho)) 0,
    100% 100%,
    0 100%
  );
}

.mq-canto-marco {
  position: absolute;
  left:   calc(-1 * (var(--mq-marco-canto) + var(--mq-grosor)));
  top:    calc(-1 * (var(--mq-grosor) + var(--mq-pared-ancho-sup)));
  height: calc(100% + var(--mq-grosor) * 2 + var(--mq-pared-ancho-sup) + var(--mq-pared-ancho-inf));
  width: calc(var(--mq-marco-canto) + 1px);
	z-index: 11; pointer-events: none;
  background-color: var(--mq-tono);
  background-image: var(--mq-textura-v, none);
  background-size: cover;
  background-position: center;
  filter: brightness(var(--mq-canto-bright)) saturate(var(--mq-canto-sat));
  clip-path: polygon(
    0 calc(var(--mq-marco-canto) * 0.3),
    100% 0,
    100% 100%,
    0 calc(100% - var(--mq-marco-canto) * 0.3)
  );
}
/* ═══════════════════════════════════════════════════════════════
   MARCO ENCAJADO — ARTIC (Obra Gráfica)
   Igual que Q4attro pero con dimensiones mayores. El paspartú
   con reflejo de cristal se aplica como PNG aparte (#capa-paspartu).
   ═══════════════════════════════════════════════════════════════ */
.ma-frame {
  position: absolute;
  top:    calc(-1 * (var(--ma-grosor) + var(--ma-pared-ancho-sup)));
  left:   calc(-1 * var(--ma-grosor));
  right:  calc(-1 * (var(--ma-grosor) + var(--ma-pared-ancho)));
  bottom: calc(-1 * (var(--ma-grosor) + var(--ma-pared-ancho-inf)));
  pointer-events: none;
  z-index: 10;
}

.ma-lado {
  position: absolute;
  background-color: var(--ma-tono);
}
.ma-lado--top, .ma-lado--bottom {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.10) 100%),
    var(--ma-textura-h, none);
  background-size: cover, cover;
  background-position: center, center;
}
.ma-lado--left, .ma-lado--right {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.10) 100%),
    var(--ma-textura-v, none);
  background-size: cover, cover;
  background-position: center, center;
}
.ma-lado--top {
  top: 0; left: 0; right: 0; height: var(--ma-grosor);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--ma-grosor)) 100%, var(--ma-grosor) 100%);
}
.ma-lado--right {
  top: 0; right: 0; bottom: 0; width: var(--ma-grosor);
  clip-path: polygon(0 var(--ma-grosor), 100% 0, 100% 100%, 0 calc(100% - var(--ma-grosor)));
}
.ma-lado--bottom {
  bottom: 0; left: 0; right: 0; height: var(--ma-grosor);
  clip-path: polygon(var(--ma-grosor) 0, calc(100% - var(--ma-grosor)) 0, 100% 100%, 0 100%);
}
.ma-lado--left {
  top: 0; left: 0; bottom: 0; width: var(--ma-grosor);
  clip-path: polygon(0 0, 100% var(--ma-grosor), 100% calc(100% - var(--ma-grosor)), 0 100%);
}

/* Paredes interiores */
.ma-pared-int--sup {
  position: absolute;
  top: calc(-1 * var(--ma-pared-ancho-sup));
  left: 0;
  right: calc(-1 * var(--ma-pared-ancho));
  height: var(--ma-pared-ancho-sup);
  z-index: 3;
  pointer-events: none;
  background-color: var(--ma-tono);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.10) 100%),
    var(--ma-textura-h, none);
  background-size: cover, cover;
  background-position: center, center;
  filter: brightness(var(--ma-pared-bright-sup)) saturate(var(--ma-canto-sat));
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - var(--ma-pared-ancho)) 100%,
    0 100%
  );
}

.ma-pared-int--der {
  position: absolute;
  top: calc(-1 * var(--ma-pared-ancho-sup));
  right: calc(-1 * var(--ma-pared-ancho));
  bottom: calc(-1 * var(--ma-pared-ancho-inf));
  width: var(--ma-pared-ancho);
  z-index: 3;
  pointer-events: none;
  background-color: var(--ma-tono);
  background-image:
    linear-gradient(270deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.12) 100%),
    var(--ma-textura-v, none);
  background-size: cover, cover;
  background-position: center, center;
  filter: brightness(var(--ma-pared-bright)) saturate(var(--ma-canto-sat));
  clip-path: polygon(
    0 var(--ma-pared-ancho-sup),
    100% 0,
    100% 100%,
    0 calc(100% - var(--ma-pared-ancho-inf))
  );
}

.ma-pared-int--inf {
  position: absolute;
  bottom: calc(-1 * var(--ma-pared-ancho-inf));
  left: 0;
  right: calc(-1 * var(--ma-pared-ancho));
  height: var(--ma-pared-ancho-inf);
  z-index: 3;
  pointer-events: none;
  background-color: var(--ma-tono);
  background-image:
    linear-gradient(0deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.10) 100%),
    var(--ma-textura-h, none);
  background-size: cover, cover;
  background-position: center, center;
  filter: brightness(var(--ma-pared-bright-inf)) saturate(var(--ma-canto-sat));
  clip-path: polygon(
    0 0,
    calc(100% - var(--ma-pared-ancho)) 0,
    100% 100%,
    0 100%
  );
}

.ma-canto-marco {
  position: absolute;
left:   calc(-1 * (var(--ma-marco-canto) + var(--ma-grosor)));
  top:    calc(-1 * (var(--ma-grosor) + var(--ma-pared-ancho-sup)));
  height: calc(100% + var(--ma-grosor) * 2 + var(--ma-pared-ancho-sup) + var(--ma-pared-ancho-inf));
  width: calc(var(--ma-marco-canto) + 1px);
  z-index: 11; pointer-events: none;
  background-color: var(--ma-tono);
  background-image: var(--ma-textura-v, none);
  background-size: cover;
  background-position: center;
  filter: brightness(var(--ma-canto-bright)) saturate(var(--ma-canto-sat));
  clip-path: polygon(
    0 calc(var(--ma-marco-canto) * 0.3),
    100% 0,
    100% 100%,
    0 calc(100% - var(--ma-marco-canto) * 0.3)
  );
}

/* Reflejo de cristal — AHORA como imagen PNG superpuesta.
   Cubre la zona de la obra+paspartú (entre las paredes interiores
   visibles), por encima de obra/paspartú pero detrás del marco. */
.ma-cristal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
  /* Reflejo por imagen */
  background-image: var(--sils-reflejo-cristal);
  /* [Sils Addons] La URL la inyecta PHP al encolar (wp_add_inline_style) a partir
     de la carpeta de uploads real. Antes era una URL absoluta escrita a mano. */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  /* Modo de fusión del reflejo. Opciones:
     · screen     -> suma luz, look de cristal real (recomendado)
     · normal     -> visible también sobre paspartú blanco
     · difference -> comportamiento antiguo */
  mix-blend-mode: screen;
}

/* ══════════════════════════════════════════════════════════════
   REVERTIR — reflejo antiguo por bandas CSS.
   Para volver al sistema anterior:
     1) borra el background-image / background-* de .ma-cristal
     2) pon en .ma-cristal:  mix-blend-mode: difference;
     3) descomenta este bloque
     4) en el JS, descomenta la inyección de los 3 __haz (marca REVERTIR)
   ══════════════════════════════════════════════════════════════
.ma-cristal__haz-1 {
  position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    transparent -13%,
    rgba(255,255,255, 0.27) 0%,
    transparent 13%
  );
}
.ma-cristal__haz-2 {
  position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    transparent 79%,
    rgba(255,255,255, 0.14) 89%,
    transparent 99%
  );
}
.ma-cristal__haz-3 {
  position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    transparent 93%,
    rgba(255,255,255, 0.33) 100%,
    transparent 107%
  );
}
   ══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   LIENZO — textura de lino para "Soporte de impresión" = Lienzo.
   Mosaico tileable incrustado (128px). Fusión overlay: modula la
   luz de la obra (oscurece valles, aclara crestas del tejido).
   Config del editor: trama fina p3 · intensidad 12% · grano 0% ·
   suavizado 0 · overlay · opacidad 100%.
   REVERTIR: quita la llamada aplicarLienzo() de refreshAll().
   ═══════════════════════════════════════════════════════════════ */
.ma-lienzo {
  position: absolute; inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAAAAAAcD2kOAAADB0lEQVR4nO2ayY6DMAxANVUV//Z8M5zwaQ40wXjJHmAolYWcQFH74r4Eys+vm8GHAzPo3kgemuxs8uRvB1gYy7oF0gNbk+bssF28Z5xAjWWGZdZ2zbhtQ09o0nwCnHE9z3oqkr/BwRqOxfrRfJMeEMlB9gM6QHC4nRPQObgyag68K2rOmaIG/HeoGfZM1Gbko56RoSYj+NY5i+iDmozgjVEzFwXUOZwrULMfiILaQpFCzTsNabQLZNtSyIy/llsCMfFygWTJxHK+IpBy1Dr/A1BHSv1B3Q91wirjUFcI5EE9ALVsxlHLiSy+YOs2LcqJTCzYLj4t6qjtafFBfRjqqwmkLGyBNKJuiuAigTpe1SrVPutqrao7XJiLS5gyV6cqOVHVtqu/rarDPRArnJ3LITD6N4GA86gZMRIm1V6uZsSkqw+u6jxXP1WdrGqcTnK1AxV13NKU3pCqzqHafLupoqrLDqNVTbCfWNUBhay9/AvzhZBnuX0TFfcRbPxpOkDftC/MfT8/xnMOArFcfVz0EogdT1WrVS0Rjavq3QdRBSu3Kk8rpycneS/UF6xqPOQS5jpXi8NRRy7kPeF9nrWu1v2s5fZ6G7d+uLmrj6lqUy9woaoe6uq9nw909d7PNK/5wyt7XR3DLhZ7GYGBpweIAS/NcT8t7qPqdyz5Q/DDfsj8Wz799BvfeloscnVkvmtxdRigL3R1y+0mxtbuT99uqo7I7SkLdXdXq5yPcLU6J8JwV8tdOajbXS2nyKNcbV/CsG/83a6OLNhaXO0eV99iXV2NutHVSc6KqyWNClcnOcMQV2OPm6hFrrb8PNzVYloscjX93zbycEL8gPqHE8INf+vhhPgB0YcTVFdnFmepq8XbuatfiTWmD6fnwHLfBPLeT4O9KOqKoPAjuRKvEevqyBCE5JU2TyoH0S+GJqB2rhPq/BGhP5AJcHoVu7dT3PtvXLWqT0Sd+SAZPUbyHPggGT1G8jzV1bJJ+ptcDXFXk12dXc3Gos3VZ1V1Luq2CC9Xh/px9b909R+4mhpBH5dB6QAAAABJRU5ErkJggg==");
  background-repeat: repeat;
  mix-blend-mode: overlay;
}

/* ═══════════════════════════════════════════════════════════════
   PASPARTÚ
   ═══════════════════════════════════════════════════════════════ */
/* [Sils Addons] La capa del paspartú se llama #capa-paspartu en la galería de la ficha
   y .capa-paspartu en cualquier otra obra (las tarjetas de una composición, por ejemplo):
   el motor no puede repetir un id. Los estilos valen para las dos formas; antes solo
   existían para el id y en las tarjetas el paspartú no se pintaba: se veía un hueco. */
#capa-paspartu,
.capa-paspartu {
  position: absolute; inset: 0;
  z-index: 3; pointer-events: none;
  container: sils-paspartu / size;
  opacity: 0; transition: opacity 0.3s ease;
}
#capa-paspartu.paspartu-activo,
.capa-paspartu.paspartu-activo { opacity: 1; }
/* El PNG va en una capa interior; su color lo pone el motor en --sils-paspartu. */
#capa-paspartu::before,
.capa-paspartu::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--sils-paspartu, none) center / 100% 100% no-repeat;
}
/* Caja apaisada: el PNG (dibujado en vertical) gira y toma las medidas cruzadas.
   Lo decide la propia caja en cada fotograma. Antes lo decidía el motor una vez, al
   final del cambio de medida: al pasar de horizontal a vertical, el paspartú girado se
   salía de la obra durante la animación y luego volvía a su sitio de golpe. */
@container sils-paspartu (orientation: landscape) {
  #capa-paspartu::before,
  .capa-paspartu::before {
    inset: auto;
    top: 50%;
    left: 50%;
    width: 100cqh;
    height: 100cqw;
    transform: translate(-50%, -50%) rotate(-90deg);
  }
}
.jet-woo-product-gallery__image-item.featured
.jet-woo-product-gallery__image:has(#capa-paspartu.paspartu-activo)
img.wp-post-image,
.sils-marco:has(#capa-paspartu.paspartu-activo) img.sils-marco__obra,
.sils-marco:has(.capa-paspartu.paspartu-activo) img.sils-marco__obra { transform: scale(0.73); }

/* ═══════════════════════════════════════════════════════════════
   OBRA GRÁFICA — lámina plana hasta que hay marco
   [Sils Addons] Vale la clase del tema (product-tag-456) y la que pone el plugin
   (sils-grafica), porque la del tema no llega cuando hay sesión iniciada.
   ═══════════════════════════════════════════════════════════════ */
body.product-tag-456 .jet-woo-product-gallery__image-item.featured .jet-woo-product-gallery__image,
body.sils-grafica .jet-woo-product-gallery__image-item.featured .jet-woo-product-gallery__image,
body.product-tag-456 .sils-marco,
body.sils-grafica .sils-marco {
  transform: none; transition: transform 0.35s ease;
}
body.product-tag-456 .jet-woo-product-gallery__image-item.featured .jet-woo-product-gallery__image.obra-grafica-rotated,
body.sils-grafica .jet-woo-product-gallery__image-item.featured .jet-woo-product-gallery__image.obra-grafica-rotated,
body.product-tag-456 .sils-marco.obra-grafica-rotated,
body.sils-grafica .sils-marco.obra-grafica-rotated {
  transform: perspective(70vw) rotateY(var(--mf-rotacion));
}
@media (max-width: 767px) {
  body.product-tag-456 .jet-woo-product-gallery__image-item.featured .jet-woo-product-gallery__image.obra-grafica-rotated,
  body.sils-grafica .jet-woo-product-gallery__image-item.featured .jet-woo-product-gallery__image.obra-grafica-rotated,
  body.product-tag-456 .sils-marco.obra-grafica-rotated,
  body.sils-grafica .sils-marco.obra-grafica-rotated {
    transform: perspective(200vw) rotateY(15deg) !important;
  }
}

body.product-tag-456 .mf-canto-obra,
body.sils-grafica .mf-canto-obra { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   CANTIDAD
   ═══════════════════════════════════════════════════════════════ */
.qty-wrapper { display: inline-flex; align-items: stretch; border: 1px solid #ddd; overflow: hidden; height: 40px; }
.qty-btn { width: 30px; border: none !important; background: #fff !important; color: #333 !important; font-size: var(--sils-txt-l, 20px); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; flex-shrink: 0; padding: 0; line-height: 1; margin-inline-start: 0 !important; }
.qty-btn:hover { background: #e8e8e8 !important; }
.qty-btn:disabled { opacity: 0.35; cursor: default; }
input.qty { width: 52px !important; border: none !important; border-left: 1px solid #ddd !important; border-right: 1px solid #ddd !important; text-align: center !important; font-size: var(--sils-txt-xs, 15px) !important; font-weight: 500 !important; -moz-appearance: textfield !important; padding: 0 !important; box-shadow: none !important; height: 100% !important; }
input.qty::-webkit-outer-spin-button, input.qty::-webkit-inner-spin-button { -webkit-appearance: none; }