@import url("../../.design-os/generated/design-system.css?v=2026110301");
@import url("../../.design-os/generated/viento-legacy.css?v=2026110301");

.hero {
  scroll-behavior: smooth;
}

.hslide img {
  display: block;
}

.dot-h,
.dot-h.on {
  display: inline-grid;
  place-items: center;
  width: var(--primitive-size-touch);
  height: var(--primitive-size-touch);
  padding: var(--primitive-space-zero);
  border: none;
  border-radius: var(--primitive-radius-round);
  background: var(--semantic-color-transparent);
  cursor: pointer;
  appearance: none;
}

.dot-h::before {
  width: var(--primitive-space-2);
  height: var(--primitive-space-2);
  border-radius: var(--primitive-radius-round);
  background: var(--semantic-color-border);
  content: "";
  transition: width var(--primitive-motion-normal), background-color var(--primitive-motion-normal);
}

.dot-h.on::before {
  width: var(--primitive-space-6);
  background: var(--semantic-color-brand);
}

.dot-h:focus-visible {
  outline-color: var(--semantic-color-accent);
  outline-style: solid;
  outline-width: var(--primitive-size-border);
  outline-offset: var(--primitive-space-1);
}

@media (prefers-reduced-motion: reduce) {
  .hero {
    scroll-behavior: auto;
  }

  .dot-h::before {
    transition: none;
  }
}