/* ══════════════════════════════════════════════════════════════════
   COP · LAS INSIGNIAS (26/09/2026) · el dibujo lo arma cop-insignia.js
   ⚠ EL MARCO ES `.cop-esquinas-capa` (cop-borde.css): acá sólo se le
   pasan las perillas. Sin caja de fondo (regla 1): la luz del nivel va
   detrás del dibujo, no pintando la tarjeta.
   ══════════════════════════════════════════════════════════════════ */
.ins{--borde-radio:14px;--borde-grosor:1.4px;--esq-alcance:55% 45%;--esq-tenue:.1;
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.22rem;
  min-width:0;padding:var(--gap-lg, 1rem) var(--gap-md, .7rem) var(--gap-md, .7rem);box-sizing:border-box}
.ins-nivel{position:absolute;top:.45rem;right:.6rem;font:400 .78rem/1 Anton,Inter,sans-serif;letter-spacing:.5px;
  color:rgb(var(--ins-rgb));opacity:.9}
.ins-arte{position:relative;width:84px;height:84px;display:grid;place-items:center;margin-bottom:.2rem}
/* la luz del nivel, detrás: celeste, violeta o los dos */
.ins-arte::before{content:"";position:absolute;inset:-14px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(var(--ins-rgb),.42), rgba(var(--ins-rgb2),.16) 55%, transparent 75%);
  animation:ins-late 3.6s ease-in-out infinite}
.ins-svg{position:relative;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.ins-tit{font-size:var(--fs-sm, .8rem);font-weight:800;line-height:1.15;color:var(--text,#f4f6fb)}
.ins-desc{font-style:normal;font-size:var(--fs-xs, .72rem);line-height:1.25;color:var(--text-dim,#9aa3b5)}
.ins-pie{font:700 .64rem Inter,sans-serif;letter-spacing:.6px;color:rgb(var(--ins-rgb));margin-top:.1rem}
.ins-prog{width:66%;height:3px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:.25rem}
.ins-prog i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg, rgb(12,149,235), rgb(157,43,255))}
/* el nivel III: el marco de las dos esquinas en los dos colores */
.ins--n3:not(.ins--bloq)::before{background:
  radial-gradient(55% 45% at 0% 0%, rgb(12,149,235) 0 10%, rgba(12,149,235,0) 62%) border-box,
  radial-gradient(55% 45% at 100% 100%, rgb(157,43,255) 0 10%, rgba(157,43,255,0) 62%) border-box,
  linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1)) border-box}
.ins--n3:not(.ins--bloq) .ins-nivel{background:linear-gradient(90deg, rgb(12,149,235), rgb(157,43,255));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── LAS ANIMACIONES, una por tema ─────────────────────────────── */
@keyframes ins-late{0%,100%{opacity:.75;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@keyframes ins-brillo{0%,55%{transform:translateX(0) skewX(-18deg)}80%,100%{transform:translateX(90px) skewX(-18deg)}}
@keyframes ins-haz{0%,100%{opacity:.35}45%{opacity:.7}55%{opacity:.5}}
@keyframes ins-flash{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes ins-giro{to{transform:rotate(360deg)}}
@keyframes ins-bote{0%,100%{transform:translateY(0)}45%{transform:translateY(-7px)}55%{transform:translateY(-7px)}}
@keyframes ins-sombra{0%,100%{transform:scaleX(1);opacity:.45}50%{transform:scaleX(.72);opacity:.25}}
@keyframes ins-foco{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.ins .ins-brillo{animation:ins-brillo 3.4s cubic-bezier(.4,0,.2,1) calc(.6s + var(--i,0) * .15s) infinite}
.ins .ins-haz{animation:ins-haz 2.6s ease-in-out infinite}
.ins .ins-haz--2{animation-delay:1.1s}
.ins .ins-flash{animation:ins-flash 1.4s steps(2) infinite}
.ins .ins-giro{transform-box:view-box;transform-origin:40px 40px;animation:ins-giro 14s linear infinite}
.ins .ins-bote{animation:ins-bote 1.6s cubic-bezier(.45,0,.55,1) infinite}
.ins .ins-sombra{transform-box:fill-box;transform-origin:center;animation:ins-sombra 1.6s cubic-bezier(.45,0,.55,1) infinite}
.ins .ins-foco{transform-box:view-box;transform-origin:40px 2px;animation:ins-foco 4.5s ease-in-out infinite}

/* bloqueada: el mismo dibujo, apagado y quieto */
.ins--bloq .ins-svg{filter:grayscale(1) brightness(.6) drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.ins--bloq .ins-arte::before{opacity:.15;animation:none}
.ins--bloq *{animation:none !important}
.ins--bloq .ins-tit{color:var(--text-dim,#9aa3b5)}
.ins--bloq .ins-nivel{color:var(--text-faint,#5a6275)}

@media (prefers-reduced-motion: reduce){ .ins *, .ins-arte::before{animation:none !important} }