/* Marcos animados de las tarjetas Silver y Gold en Freelancers + (membership/list_plans.html).
   Los dos planes comparten la misma animación, cada uno en su metal:
   - borde de 4px con un degradado cónico que gira (--marco-angulo, vía @property);
   - halo exterior que respira;
   - destello diagonal que cruza la tarjeta por detrás del texto (z-index:-1
     dentro del isolate), para no restarle lectura.
   Sin @property el borde queda metálico y quieto. Con movimiento reducido no anima.
   Sin overflow:hidden: la cinta "Más beneficios" de Gold asoma por arriba. */

@property --marco-angulo{syntax:'<angle>';inherits:false;initial-value:0deg;}

.planes-card--silver,.planes-card--gold{
  isolation:isolate;border:4px solid transparent;
  animation:planes-marco-giro 5s linear infinite;
}
.planes-card--silver::after,.planes-card--gold::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background-size:250% 100%;background-repeat:no-repeat;background-position:160% 0;
  animation:planes-marco-destello 5.5s ease-in-out infinite;
}

/* ---------- Silver ---------- */
.planes-card--silver{
  background:
    linear-gradient(180deg,#fdfeff 0%,#f1f4f8 46%,#fbfcfe 100%) padding-box,
    conic-gradient(from var(--marco-angulo),#8e9bb0,#ffffff 8%,#c3cddb 16%,#f2f5f9 24%,#7d8aa0 34%,#ffffff 44%,#b4bfce 54%,#ffffff 62%,#8592a8 72%,#e9eef4 82%,#ffffff 90%,#8e9bb0) border-box;
  box-shadow:0 0 0 1px rgba(125,138,160,.55),0 0 18px rgba(176,190,210,.55),0 12px 32px -14px rgba(71,85,105,.4);
  animation:planes-marco-giro 5s linear infinite,planes-plata-halo 2.8s ease-in-out infinite alternate;
}
.planes-card--silver::after{
  background-image:linear-gradient(105deg,transparent 36%,rgba(196,208,224,.55) 46%,rgba(255,255,255,.9) 50%,rgba(196,208,224,.55) 54%,transparent 64%);
}
.planes-card--silver .planes-card__icono{background:linear-gradient(135deg,#f4f6f9,#c4cbd5);color:#475569;
  box-shadow:inset 0 1px 0 #fff,0 4px 10px -4px rgba(71,85,105,.45);}
.planes-card--silver .planes-card__chip{background:linear-gradient(135deg,#eef1f5,#cfd5de);color:#3f4b5e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);}
.planes-card--silver .planes-card__nombre{
  color:#334155;background:linear-gradient(100deg,#3b4658,#8a95a6 45%,#3b4658);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* ---------- Gold ---------- */
.planes-card--gold{
  background:
    linear-gradient(180deg,#fffbeb 0%,#fef3c7 42%,#fffdf5 100%) padding-box,
    conic-gradient(from var(--marco-angulo),#b07800,#fff4c2 8%,#e8a800 16%,#fffbe8 24%,#a36a00 34%,#ffe27a 44%,#d99400 54%,#fff6d1 62%,#9c6400 72%,#f5c94a 82%,#fffbe8 90%,#b07800) border-box;
  box-shadow:0 0 0 1px rgba(176,120,0,.5),0 0 18px rgba(245,190,60,.45),0 12px 32px -14px rgba(146,98,0,.4);
  animation:planes-marco-giro 5s linear infinite,planes-oro-halo 2.8s ease-in-out infinite alternate;
}
.planes-card--gold::after{
  background-image:linear-gradient(105deg,transparent 36%,rgba(255,226,140,.55) 46%,rgba(255,252,236,.95) 50%,rgba(255,226,140,.55) 54%,transparent 64%);
}
.planes-card--gold .planes-card__icono{background:linear-gradient(135deg,#fff3c4,#f2c14e);color:#8a5a00;
  box-shadow:inset 0 1px 0 #fffbe8,0 4px 10px -4px rgba(146,98,0,.5);}
.planes-card--gold .planes-card__chip{background:linear-gradient(135deg,#fff4cc,#f5d27a);color:#7a4f00;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);}
.planes-card--gold .planes-card__nombre{
  color:#8a5a00;background:linear-gradient(100deg,#7a4f00,#d99400 45%,#7a4f00);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* ---------- Animaciones ---------- */
@keyframes planes-marco-giro{to{--marco-angulo:360deg;}}
@keyframes planes-plata-halo{
  from{box-shadow:0 0 0 1px rgba(125,138,160,.55),0 0 18px rgba(176,190,210,.55),0 12px 32px -14px rgba(71,85,105,.4);}
  to{box-shadow:0 0 0 2px rgba(214,222,233,.95),0 0 34px 6px rgba(178,193,214,.9),0 16px 36px -14px rgba(71,85,105,.5);}
}
@keyframes planes-oro-halo{
  from{box-shadow:0 0 0 1px rgba(176,120,0,.5),0 0 18px rgba(245,190,60,.45),0 12px 32px -14px rgba(146,98,0,.4);}
  to{box-shadow:0 0 0 2px rgba(255,228,140,.95),0 0 34px 6px rgba(245,190,60,.75),0 16px 36px -14px rgba(146,98,0,.5);}
}
@keyframes planes-marco-destello{
  0%,55%{background-position:160% 0;}
  85%,100%{background-position:-60% 0;}
}

@media (prefers-reduced-motion:reduce){
  .planes-card--silver,.planes-card--gold,.planes-card--silver::after,.planes-card--gold::after{animation:none;}
  .planes-card--silver::after,.planes-card--gold::after{display:none;}
}