/* ============================================================
   TuCelebración · tc-stickers.css  (v2.0)
   ------------------------------------------------------------
   Capa decorativa de stickers. El dibujo llega desde
   tc-sticker-library.js como SVG inline; acá se resuelven
   posición, tamaño, color y el flotado sutil.

   Los SVG usan `stroke="currentColor"`, así que basta con fijar
   `color` en el contenedor para que toda la decoración se
   reencuadre sola cuando el usuario cambia de template.
   ============================================================ */

.jcl-stk{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  /* Por encima del contenido pero por debajo de los efectos: los
     stickers son papelería, las partículas son luz. */
  z-index:6;
  border-radius:inherit;
  color: var(--tc-primary, #d4af37);
}

.jcl-stk-piece{
  position:absolute;
  opacity:.55;
  transform: rotate(var(--stk-rot, 0deg)) scale(var(--stk-scale, 1));
  transform-origin:center;
  animation: jclStkFloat 9s ease-in-out infinite;
  animation-delay: var(--stk-delay, 0s);
}

.jcl-stk-piece svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
  /* Astra/Elementor aplican `fill: currentColor` a algunos SVG del front.
     Estos stickers son ilustraciones de línea: blindamos su geometría sin
     tocar los iconos del resto de la invitación. */
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.6 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
}

.jcl-stk-piece svg path,
.jcl-stk-piece svg circle,
.jcl-stk-piece svg ellipse,
.jcl-stk-piece svg rect,
.jcl-stk-piece svg polygon,
.jcl-stk-piece svg polyline,
.jcl-stk-piece svg line{
  fill:none !important;
  stroke:currentColor !important;
}

/* Excepciones intencionales de la biblioteca (ojos y pequeños detalles). */
.jcl-stk-piece svg [fill="currentColor"]{
  fill:currentColor !important;
}
.jcl-stk-piece svg [stroke="none"]{
  stroke:none !important;
}

/* Flotado: apenas 6px, lo justo para que la decoración respire
   sin competir con el contenido. */
@keyframes jclStkFloat{
  0%,100% { transform: rotate(var(--stk-rot, 0deg)) scale(var(--stk-scale, 1)) translateY(0); }
  50%     { transform: rotate(var(--stk-rot, 0deg)) scale(var(--stk-scale, 1)) translateY(-6px); }
}


/* ============================================================
   POSICIONES
   Los tamaños van en `clamp()` para que un sticker no devore la
   tarjeta en un móvil de 320px ni se pierda en la vista completa.
   ============================================================ */

.jcl-stk-piece[data-pos="tl"],
.jcl-stk-piece[data-pos="tr"],
.jcl-stk-piece[data-pos="bl"],
.jcl-stk-piece[data-pos="br"]{
  width: clamp(64px, 24%, 118px);
}

.jcl-stk-piece[data-pos="tl"]{ top:10px; left:8px; }
.jcl-stk-piece[data-pos="tr"]{ top:10px; right:8px; }
.jcl-stk-piece[data-pos="bl"]{ bottom:14px; left:8px; }
.jcl-stk-piece[data-pos="br"]{ bottom:14px; right:8px; }

.jcl-stk-piece[data-pos="t"],
.jcl-stk-piece[data-pos="b"]{
  left:50%;
  width: clamp(180px, 74%, 320px);
  margin-left:0;
  transform: translateX(-50%) rotate(var(--stk-rot, 0deg)) scale(var(--stk-scale, 1));
}
.jcl-stk-piece[data-pos="t"]{ top:12px; }
.jcl-stk-piece[data-pos="b"]{ bottom:16px; }

/* El flotado de las piezas centradas necesita conservar el
   translateX(-50%) que las centra. */
.jcl-stk-piece[data-pos="t"],
.jcl-stk-piece[data-pos="b"]{
  animation-name: jclStkFloatCenter;
}
@keyframes jclStkFloatCenter{
  0%,100% { transform: translateX(-50%) rotate(var(--stk-rot, 0deg)) scale(var(--stk-scale, 1)) translateY(0); }
  50%     { transform: translateX(-50%) rotate(var(--stk-rot, 0deg)) scale(var(--stk-scale, 1)) translateY(-6px); }
}


/* ============================================================
   MARCO FINO — la única pieza que no es SVG.
   Un marco tiene que seguir el alto real de la tarjeta; estirar
   un SVG lo deformaría, así que se dibuja con bordes.
   ============================================================ */
.jcl-stk-piece[data-piece="thin-frame"]{
  position:absolute;
  inset:12px;
  width:auto;
  opacity:.42;
  border:1px solid currentColor;
  border-radius:calc(var(--tc-r-lg, 24px) - 6px);
  animation:none;
  transform:none;
}
.jcl-stk-piece[data-piece="thin-frame"]::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid currentColor;
  border-radius:calc(var(--tc-r-lg, 24px) - 10px);
  opacity:.55;
}
/* Marcas de esquina: cuatro escuadras cortas que le dan oficio
   de papelería impresa al marco. */
.jcl-stk-piece[data-piece="thin-frame"]::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:inherit;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 18px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 0 / 2px 18px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 18px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 2px 18px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 18px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 2px 18px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 18px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 2px 18px no-repeat;
}


/* ============================================================
   AJUSTES POR PIEZA
   Algunas composiciones piden más presencia y otras menos, para
   que ninguna tape el texto.
   ============================================================ */
.jcl-stk-piece[data-piece="floral-arc"],
.jcl-stk-piece[data-piece="string-lights"]{ opacity:.62; }

.jcl-stk-piece[data-piece="flourish"]{ opacity:.5; width: clamp(150px, 58%, 260px); }

.jcl-stk-piece[data-piece="deco-corner"]{ opacity:.4; width: clamp(56px, 20%, 96px); }

.jcl-stk-piece[data-piece="constellation"]{ opacity:.6; }

.jcl-stk-piece[data-piece="tiara"]{ width: clamp(120px, 46%, 200px); }

.jcl-stk-piece[data-piece="laurel-left"],
.jcl-stk-piece[data-piece="laurel-right"]{
  width: clamp(52px, 19%, 92px);
  bottom:18px;
  opacity:.48;
}

/* Sobre fondos claros el trazo dorado pierde definición: se le da
   un punto más de opacidad y se saca la sombra, que sobre crema
   se ve sucia. */
.tc-theme-light .jcl-stk-piece,
.tc-template-marfil_nocturno .jcl-stk-piece,
.tc-template-perla_rose .jcl-stk-piece,
.tc-template-jardin_luz .jcl-stk-piece,
.tc-template-aurora_pastel .jcl-stk-piece,
.tc-template-cielo_de_nacar .jcl-stk-piece{
  opacity:.66;
}
.tc-theme-light .jcl-stk-piece svg,
.tc-template-marfil_nocturno .jcl-stk-piece svg,
.tc-template-perla_rose .jcl-stk-piece svg,
.tc-template-jardin_luz .jcl-stk-piece svg,
.tc-template-aurora_pastel .jcl-stk-piece svg,
.tc-template-cielo_de_nacar .jcl-stk-piece svg{
  filter:none;
}


/* ============================================================
   LEGIBILIDAD
   La decoración pasa por delante del texto, así que no puede
   competir con él: nunca opaca del todo y jamás intercepta un
   clic. Estos dos límites son los que permiten subirla de capa
   sin arruinar la lectura.
   ============================================================ */
.jcl-stk,
.jcl-stk-piece{
  pointer-events:none;
  user-select:none;
}


@media (prefers-reduced-motion: reduce){
  .jcl-stk-piece{ animation:none !important; }
}

/* En pantallas muy angostas las piezas de esquina compiten con el
   texto: se achican y se separan del borde. */
@media (max-width:360px){
  .jcl-stk-piece[data-pos="tl"],
  .jcl-stk-piece[data-pos="tr"],
  .jcl-stk-piece[data-pos="bl"],
  .jcl-stk-piece[data-pos="br"]{
    width:58px;
    opacity:.42;
  }
}