/* Division [Desktop]: línea de 1px a 50% de opacidad, se dibuja desde el centro al aparecer. */
.xg-divider {
  display: block;
  height: 80px;
  padding-inline: var(--xg-space-6);
  max-width: var(--xg-page-max);
  margin-inline: auto;
}

.xg-divider__line {
  position: relative;
  top: 39.5px;
  height: 1px;
  background: var(--xg-outline-variant);
  opacity: 0.5;
  transform: scaleX(1);
}

/* Destello que recorre la línea una vez al revelarse */
.xg-divider__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--xg-primary), transparent);
  background-size: 30% 100%;
  background-repeat: no-repeat;
  background-position: -40% 0;
  opacity: 0;
}

.xg-js .xg-divider__line {
  transform: scaleX(0);
  transition: transform 1.2s var(--xg-ease-out);
}

.xg-js .xg-divider.is-visible .xg-divider__line {
  transform: scaleX(1);
}

.xg-divider.is-visible .xg-divider__line::after {
  animation: xg-divider-sweep 1.8s var(--xg-ease-in-out) 600ms 1 both;
}

@keyframes xg-divider-sweep {
  0% { opacity: 0; background-position: -40% 0; }
  20% { opacity: 1; }
  100% { opacity: 0; background-position: 140% 0; }
}

@media (max-width: 767px) {
  .xg-divider {
    height: 48px;
    padding-inline: var(--xg-gutter);
  }

  .xg-divider__line {
    top: 23.5px;
  }
}