/* tarjeta-spotlight — halo que sigue al cursor + canto de luz en el borde.
   Personalizar con --lui-acento (y --lui-tono por tarjeta si quieres que el
   color signifique algo: disponible, agotado, destacado…). */
[data-lui~="spotlight"]{
  position:relative;
  --lui-tono:var(--lui-acento,#c8a24a);
  --lui-radio:320px;
}

/* Halo interior. La `background` va dos veces a propósito: la primera es el
   fallback para navegadores sin color-mix, la segunda gana donde se soporta. */
[data-lui~="spotlight"]::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:0;opacity:0;transition:opacity .28s ease;
  background:radial-gradient(var(--lui-radio) circle at var(--lui-mx,50%) var(--lui-my,0%),
             rgba(200,162,74,.13),transparent 68%);
  background:radial-gradient(var(--lui-radio) circle at var(--lui-mx,50%) var(--lui-my,0%),
             color-mix(in srgb,var(--lui-tono) 13%,transparent),transparent 68%);
}

/* Borde iluminado: el mismo gradiente recortado a 1px restando dos máscaras. */
[data-lui~="spotlight"]::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:1;padding:1px;opacity:0;transition:opacity .28s ease;
  background:radial-gradient(240px circle at var(--lui-mx,50%) var(--lui-my,0%),
             rgba(200,162,74,.55),transparent 60%);
  background:radial-gradient(240px circle at var(--lui-mx,50%) var(--lui-my,0%),
             color-mix(in srgb,var(--lui-tono) 55%,transparent),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}

[data-lui~="spotlight"]:hover::before,
[data-lui~="spotlight"]:hover::after{opacity:1}

/* El contenido debe quedar por encima de los dos pseudoelementos. */
[data-lui~="spotlight"] > *{position:relative;z-index:2}

@media (prefers-reduced-motion:reduce){
  [data-lui~="spotlight"]::before,[data-lui~="spotlight"]::after{transition:none}
}