/* ════════════════════════════════════════════════════════════════════
   COP · EL FILO DE LUZ  (19/10/2026)
   ────────────────────────────────────────────────────────────────────
   Franco eligió el borde 3 de `arnes/maqueta-bordes.html` para las
   tarjetas de Grupos, Equipos Competitivos y el Pase de batalla: un canto
   de 1,5 px casi invisible con UN destello que recorre el borde.
   *«asegurate que la luz de atrás no se vea tan intensa ni cortada por el
   borde de la sección ya que siempre pasa eso»*.

   ⚠ SIN PSEUDO-ELEMENTOS: el aro es el `border` transparente con dos capas
   de fondo (el relleno en padding-box y el destello en border-box). Así
   la pieza no le roba a nadie el ::before/::after que ya usa.
   ⚠⚠ LA LUZ DE ATRÁS ES CHICA A PROPÓSITO: 16 px de difuminado con −10 px
   de extensión = sobresale como mucho 6 px y sólo hacia abajo. La de la
   maqueta (26/−10, al 55 %) salía 16 px y la cortaba cualquier contenedor
   con `overflow`. Si un carril recorta, se le da `padding-block` de 8 px.
   Uso: class="cop-filo" + --filo-acc (r,g,b) + --filo-fondo + --filo-r.
   ════════════════════════════════════════════════════════════════════ */
@property --filo-ang{ syntax:'<angle>'; inherits:false; initial-value:0deg }

.cop-filo{
  --filo-acc:var(--cop-acento-rgb, 12,149,235);
  --filo-fondo:#0d121c;
  --filo-g:1.5px;
  border:var(--filo-g) solid transparent;
  border-radius:var(--filo-r, 16px);
  background:
    linear-gradient(var(--filo-fondo), var(--filo-fondo)) padding-box,
    conic-gradient(from var(--filo-ang),
      rgba(255,255,255,.08) 0deg, rgba(255,255,255,.08) 250deg,
      rgba(var(--filo-acc), .85) 300deg, #fff 318deg, rgba(var(--filo-acc), .85) 336deg,
      rgba(255,255,255,.08) 360deg) border-box;
  box-shadow:0 6px 16px -10px rgba(var(--filo-acc), .32);
  animation:copFiloGira 6s linear infinite;
  animation-delay:var(--filo-desfase, 0s);
}
@keyframes copFiloGira{ to{ --filo-ang:360deg } }
/* quieto (fuera de pantalla o sin animación) */
.cop-filo--quieto{ animation-play-state:paused }
@media (prefers-reduced-motion: reduce){
  .cop-filo{ animation:none; --filo-ang:200deg }
}