*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--layout-header-height, var(--spacing-22));

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

@media (prefers-reduced-motion: no-preference) and (min-width: 64rem) {
  @view-transition {
    navigation: auto;
  }

  /* Customiza a transicao de paginas nativa para ser sutil, fluida e confortável */
  ::view-transition-group(*) {
    animation-duration: 300ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  @keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  ::view-transition-old(root) {
    animation: 120ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
  }

  ::view-transition-new(root) {
    animation: 220ms cubic-bezier(0, 0, 0.2, 1) 60ms both fade-in;
  }
}


body {
  --sb-track-color: #fff;
  --sb-thumb-color: #eee;
  --sb-size: var(--spacing-2);
  margin: 0;
  color: var(--color-text-primary);
  background: var(--color-background-page);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  &::-webkit-scrollbar {
    height: var(--sb-size);
    width: var(--sb-size);
  }

  &::-webkit-scrollbar-track {
    background: var(--sb-track-color);
  }

  &::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: var(--radius-sm);
  }

  @supports not selector(::-webkit-scrollbar) {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    scrollbar-width: thin;
  }
}

a {
  color: inherit;
}

:where([id]) {
  scroll-margin-top: var(--layout-header-height, var(--spacing-22));
}

img,
svg {
  display: block;
  max-width: 100%;
}

.inclua-container {
  width: min(var(--layout-container), calc(100% - (var(--layout-gutter) * 2)));
  margin-inline: auto;
}

.inclua-skip-link {
  position: absolute;
  top: -62.5rem;
  left: -62.5rem;
  width: 1px;
  height: 1px;
  text-align: left;
  overflow: hidden;
  z-index: 9999;

  &:focus,
  &:active {
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    overflow: visible;
    padding: var(--spacing-3) var(--spacing-6);
    background: var(--color-action-primary);
    color: var(--color-action-primary-text);
    font-size: var(--font-size-label);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 var(--spacing-1) var(--spacing-3) rgba(0, 0, 0, 0.15);
  }
}

.is-disabled {
  pointer-events: none;
  opacity: 0.6;
}

h1 {
  font-size: var(--font-size-heading-1);
  line-height: var(--line-height-heading-1);
}

h2 {
  font-size: var(--font-size-heading-2);
  line-height: var(--line-height-heading-2);
}

h3 {
  font-size: var(--font-size-heading-3);
  line-height: var(--line-height-heading-3);
}

h4 {
  font-size: var(--font-size-heading-4);
  line-height: var(--line-height-heading-4);
}

h5 {
  font-size: var(--font-size-heading-5);
  line-height: var(--line-height-heading-5);
}

h6 {
  font-size: var(--font-size-heading-6);
  line-height: var(--line-height-heading-6);
}

/* Centralized Spring Transition Utility */
.inclua-transition-spring {
  transition: transform var(--transition-spring),
              opacity var(--transition-spring),
              max-height var(--transition-spring),
              grid-template-rows var(--transition-spring);
}