@layer utilities {
  .text-center {
    text-align: center;
  }

  .text-end {
    text-align: end;
  }

  .accent {
    position: relative;
    display: inline-block;
    white-space: nowrap;
  }

  .accent::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    bottom: -0.1em;
    width: 110%;
    height: 0.6em;
    background-color: var(--pico-primary);
    mask-image: url("/assets/underline-a4839df7.svg");
    mask-size: 100% 100%;
    mask-repeat: repeat-x;
    -webkit-mask-image: url("/assets/underline-a4839df7.svg");
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: repeat-x;
    z-index: -1;
  }

  .svg-pincelada {
    fill: var(--pico-primary) !important;
  }

  .text-white {
    color: var(--pico-primary-inverse) !important;
  }

  .text-black {
    color: var(--pico-secondary-inverse) !important;
  }

  .flex {
    display: flex;
    flex-direction: column;
  }

  .flex-row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
  }

  .justify-center {
    justify-content: center;
  }

  .align-center {
    align-items: center;
  }

  .unstyled-list {
    padding: 0;
    margin: 0;
    --pico-typography-spacing-vertical: 0 !important;
  }

  .unstyled-list li {
    list-style: none !important;
  }

  .margin-0 {
    margin: 0 !important;
  }

  .hidden {
    display: none !important;
  }
}