:root {
  --border-animation-color: #ff790080; /* naranja con transparencia (~50%) */
  --border-animation-speed: 7s;
  --border-animation-width: 1px;
}

@property --border-animation-angle {
  syntax: "<angle>";
  initial-value: 0turn;
  inherits: false;
}

@keyframes borderRotate {
  to { --border-animation-angle: 1turn; }
}

.border-animation:after {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: calc(var(--border-animation-width) * -1);
  border-radius: inherit;
  border: solid transparent;
  border-width: var(--border-animation-width);
  animation: borderRotate var(--border-animation-speed) linear infinite;
  background: conic-gradient(
    from var(--border-animation-angle),
    transparent 88%,
    var(--border-animation-color),
    var(--border-animation-color) 100%,
    transparent
  ) border-box;
  background-clip: border-box;
  background-origin: border-box;
  mask: radial-gradient(
      farthest-side,
      rgba(0, 0, 0, 0) calc(97% - var(--border-animation-width)),
      rgba(0, 0, 0, 0)
    ) content-box,
    radial-gradient(
      farthest-side,
      rgba(0, 0, 0, 0) calc(2% - var(--border-animation-width)),
      #000
    ) border-box;
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
}