/* borde-gradiente — un borde con un punto de luz que gira alrededor de la pieza.
   Portado del `hover-border-gradient` / `glowing-effect` de la cantera.

   Sirve para señalar UNA cosa: el plan recomendado, el botón principal, la
   tarjeta destacada. Es un subrayado, no una decoración. */
[data-lui~="bordelux"]{
  --lui-grosor:1px;
  --lui-vel:4s;
  --lui-brillo:var(--lui-acento,#c8a24a);
  position:relative;
  border-radius:14px;
  isolation:isolate;
  /* ⚠ OBLIGATORIO. La capa que gira mide el 180% del ancho y se sale por los dos
     lados; sin recortarla aquí extiende el scroll horizontal de TODA la página
     (y el culpable no se ve en pantalla, así que se busca durante media hora en
     el sitio equivocado). Recortar es además lo que se quiere: el brillo sólo
     debe verse en el canto. */
  overflow:hidden;
}

/* El borde se hace con un cónico girando, recortado a `--lui-grosor` restando
   dos máscaras. No se puede animar `background-image` (no interpola), así que
   lo que gira es el elemento entero mediante @property... y como @property no
   está en todas partes, se gira la CAPA con transform, que sí es universal. */
[data-lui~="bordelux"]::before{
  content:"";position:absolute;
  /* Más grande que la caja y cuadrado: al girar, un rectángulo dejaría
     esquinas sin cubrir. */
  top:50%;left:50%;
  width:180%;aspect-ratio:1;
  translate:-50% -50%;
  z-index:-1;
  background:conic-gradient(from 0deg,transparent 0turn,var(--lui-brillo) .12turn,transparent .28turn);
  animation:lui-borde-gira var(--lui-vel) linear infinite;
  opacity:0;transition:opacity .3s;
}

/* Tapa interior: deja ver el cónico sólo en el canto. */
[data-lui~="bordelux"]::after{
  content:"";position:absolute;
  inset:var(--lui-grosor);
  border-radius:inherit;
  background:var(--lui-superficie,#fff);
  z-index:-1;
}

[data-lui~="bordelux"]:hover::before,
[data-lui~="bordelux"]:focus-within::before,
[data-lui~="bordelux"][data-lui-siempre]::before{opacity:1}

@keyframes lui-borde-gira{
  to{rotate:1turn}
}

/* Variante oscura: la tapa interior toma el color del fondo de la sección. */
[data-lui~="bordelux"][data-lui-tono="oscuro"]::after{background:var(--lui-fondo,#111)}

@media (prefers-reduced-motion:reduce){
  /* Se queda un canto fijo del color de acento: sigue señalando, sin girar. */
  [data-lui~="bordelux"]::before{animation:none;background:var(--lui-brillo);opacity:1}
}