/* Momentia — miniaturas de los diseños de invitación (editor y página de inicio) */
/* Miniaturas del pack de diseños (editor de invitación) */
.skin-mini { --kf1: #ff9fb7; --kf2: #ffd57e; --kf3: #8fd3ff; --kf4: #c3a6ff; --kf5: #8ee3c0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 168px; padding: 14px 8px 10px; border-radius: 10px;
  overflow: hidden; background: linear-gradient(165deg, var(--g1), var(--g2)); color: var(--fg); container-type: inline-size; pointer-events: none; }
.skin-mini__deco { position: absolute; inset: 0; z-index: 0; }
.skin-mini > *:not(.skin-mini__deco) { position: relative; z-index: 1; }
.skin-mini .ev-orn { display: block; color: var(--orn); position: absolute; }
.skin-mini .ev-orn svg { width: 100%; height: auto; display: block; }
.skin-mini__top .ev-orn { position: static; }
.skin-mini__photo { width: 44px; height: 54px; background: color-mix(in srgb, var(--fg) 14%, transparent); box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 3px var(--line); }
.skin-mini__photo--arch { border-radius: 99px 99px 5px 5px; }
.skin-mini__photo--circle { width: 48px; height: 48px; border-radius: 50%; }
.skin-mini__photo--rect { border-radius: 5px; }
.skin-mini__title { font-family: var(--title-font); font-weight: var(--title-weight); letter-spacing: var(--title-track); text-transform: var(--title-case); font-size: 22px; line-height: 1.1; margin-top: 4px; }
.skin-mini__mid .ev-rule { display: flex; gap: 4px; color: var(--orn); align-items: center; }
.skin-mini__mid .ev-rule i { width: 16px; height: 1px; background: currentColor; opacity: .6; }
.skin-mini__mid .ev-rule svg { width: 6px; }
.skin-mini__mid .ev-orn { position: static; width: 70px; }
.skin-mini__btn { margin-top: auto; width: 54px; height: 10px; border-radius: 99px; background: var(--accent); }
.skin-mini .ev-arch { position: absolute; left: 50%; translate: -50% 0; top: 6px; bottom: 0; width: 86%; border: 1px solid color-mix(in srgb, var(--orn) 55%, transparent); border-bottom: 0; border-radius: 999px 999px 0 0; }
.skin-mini .skin-frame { position: absolute; inset: 6px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 4px; }
.skin-mini .ev-orn--tl { top: -6px; left: -8px; width: 46%; } .skin-mini .ev-orn--br { bottom: -8px; right: -8px; width: 46%; rotate: 180deg; }
.skin-mini .ev-orn--spray-r { top: 4px; right: -6px; width: 60%; } .skin-mini .ev-orn--spray-l { bottom: 4px; left: -6px; width: 50%; rotate: 180deg; }
.skin-mini .skin-bfly { top: 4px; right: -4px; width: 52%; } .skin-mini .skin-moon { top: 4px; right: 2px; width: 40%; }
.skin-mini .skin-disco { top: 0; right: 4px; width: 38%; } .skin-mini .skin-trop { bottom: -4px; width: 52%; }
.skin-mini .skin-trop--l { left: -8px; } .skin-mini .skin-trop--r { right: -8px; transform: scaleX(-1); }
.skin-mini .skin-spark { width: 9px; } .skin-mini .skin-spark .o-leaf { fill: currentColor; stroke: none; }
.skin-mini .skin-spark--a { top: 14%; left: 10%; } .skin-mini .skin-spark--b { top: 20%; right: 12%; } .skin-mini .skin-spark--c { bottom: 26%; left: 14%; } .skin-mini .skin-spark--d { bottom: 18%; right: 10%; }
.skin-mini .skin-grad { width: 34px; }
.skin-mini .ev-orn--cross { width: 12px; } .skin-mini .ev-orn--cloud { width: 40px; } .skin-mini .ev-orn--confetti { right: 2px; bottom: 6px; width: 50%; }
.skin-mini .skin-conf-l { left: 2px; top: 6px; }
.skin-mini .ev-glow { position: absolute; border-radius: 50%; filter: blur(14px); width: 70%; aspect-ratio: 1; }
.skin-mini .ev-glow--a { right: -10%; top: -20%; background: rgb(var(--accent-rgb) / .55); } .skin-mini .ev-glow--b { left: -10%; bottom: -20%; background: rgb(109 92 255 / .45); }
.skin-mini .skin-glow, .skin-mini .ev-grain, .skin-mini .ev-stars { display: none; }
.skin-mini .o-line { fill: none; stroke: currentColor; stroke-width: 1.3; } .skin-mini .o-leaf { fill: var(--orn-leaf); stroke: currentColor; stroke-width: 1.2; }
.skin-mini .o-vein { fill: none; stroke: currentColor; stroke-width: .7; opacity: .55; } .skin-mini .o-fruit, .skin-mini .o-center, .skin-mini .o-dot { fill: currentColor; }
