/* Enlace de texto con subrayado que se dibuja y flecha diagonal. */
.link-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 12px;
  padding: 12px 0 8px;
  font: var(--w-semibold) 11px/1 var(--font-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 0 calc(22px * var(--li, 0)) rgb(var(--ember) / calc(0.5 * var(--li, 0)));
  transition: color 0.4s var(--ease-out);
}
.link-arrow::before,
.link-arrow::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
}
.link-arrow::before { background: rgb(238 227 211 / 0.4); }
.link-arrow::after {
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: var(--hx, 0px) 50%;
  transition: transform 0.6s var(--ease-out);
}
.link-arrow__arrow {
  display: inline-block;
  transition: transform 0.5s var(--ease-out);
}

.link-arrow:focus-visible { color: #fff; }
.link-arrow:focus-visible::after { transform: scaleX(1); }
.link-arrow:focus-visible .link-arrow__arrow { transform: translate(3px, -3px); }

@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover { color: #fff; }
  .link-arrow:hover::after { transform: scaleX(1); }
  .link-arrow:hover .link-arrow__arrow { transform: translate(3px, -3px); }
}