[data-component-id="incmty:nav"] {
  background-color: var(--bg-color);
  position: sticky;
  top: 0;
  z-index: 10;

  & a {
    box-shadow: none !important;
  }

  /* Estilos generales. */
  & ul {
    list-style: none;
    margin-block: 0;
    margin-inline: 0;

    & li {
      & a {
        color: var(--link-text-color);
        text-decoration: none;
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: 14px;
        text-transform: uppercase;

        &::after {
          display: none;
        }

        &:hover {
          text-decoration: underline;
        }

        &.is-active {
          color: var(--link-text-color);
        }
      }
    }
  }

  & .header-cta-block {
    text-align: center;

    & a {
      text-decoration: none;
      padding: 16px 32px !important;
      background-color: var(--button-bg-color);
      color: var(--button-text-color);
      display: inline-block;
      border-radius: 100px;
      font-size: 12px;
      font-style: normal;
      font-weight: 900;
      line-height: 18px;
      letter-spacing: 0.12px;
      transition: all 0.3s ease-in-out;

      &:hover {
        opacity: 1;
        background-color: var(--button-hover-bg-color);
        color: var(--button-hover-text-color);
        border-color: var(--button-hover-bg-color);
      }

      &.link-arrow.right {
        &::after {
          display: none;
        }
      }
    }
  }

  /* Fin de estilos generales */

  & .static-menu {
    background-color: var(--bg-color);
    position: relative;
    z-index: 2;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;

    & .nav-site-logo {
      display: flex;
      align-items: center;

      & a {
        &:hover {
          opacity: 1;
        }

        & img {
          width: auto;
          height: 50px;
        }
      }
    }

    & .nav-image {
      .field--name-field-media-image {
        height: 50px;

        img {
          width: auto;
          max-height: 100%;
        }
      }
    }

    & .contains-nav-menus {
      display: flex;
      align-items: center;

      & .nav-not-collapsed-links {
        padding-right: 24px;
        display: none;

        & .main-menu {
          & .menu {
            display: flex;
            text-align: center;
            flex-wrap: wrap;
            column-gap: 24px;
            max-width: 740px;

            & li {
              display: flex;
              align-items: center;

              & a {
                padding: 0 !important;

                &:hover {
                  color: var(--link-text-color);
                  opacity: 0.75;
                  text-decoration: underline;
                }
              }
            }

            & > * {
              max-width: 150px;
            }

            & details {
              position: relative;
              padding-right: 24px;

              & summary {
                user-select: none;
                cursor: pointer;
                padding: 0;
                list-style: none;
                box-shadow: none;
                height: 100%;
                display: flex;
                align-items: center;
                user-select: none;

                & p {
                  font-size: 12px;
                  font-style: normal;
                  font-weight: 700;
                  line-height: 14px;
                  text-transform: uppercase;
                  position: relative;
                  display: inline-block;

                  &::after {
                    display: block;
                    content: "";
                    position: absolute;
                    width: 24px;
                    height: 24px;
                    top: 50%;
                    right: -27px;
                    transform: translateY(-50%) rotate(0deg);
                    mask-size: 10px 15px;
                    mask-position: center;
                    mask-repeat: no-repeat;
                    mask-image: url(/themes/custom/incmty/images/svg/dropdown.svg);
                    background: var(--link-text-color);
                    transition: all 0.2s ease-in-out;
                  }
                }
              }

              &[open] {
                summary {
                  & p {
                    &::after {
                      transform: translateY(-50%) rotate(180deg);
                    }
                  }
                }
              }

              & .collapsed-links {
                background-color: var(--bg-color);
                position: absolute;
                text-align: left;

                & li {
                  & a {
                    width: 100%;
                    padding: 6px;
                    display: block;
                    transition: all 0.3s ease-in-out;

                    &:hover {
                      background-color: var(--button-bg-color);
                      color: var(--button-text-color);
                      opacity: 1;
                      text-decoration: none;
                    }
                  }
                }
              }

              &[open] {
                & summary {
                  & p {
                    &::after {
                      transform: translateY(-50%) rotate(180deg);
                    }
                  }
                }
              }
            }
          }
        }
      }

      & .nav-languages {
        display: flex;
        align-items: center;
        gap: 4px;

        & li {
          height: 14px;

          & a {
            display: block;
            font-size: 12px;
            font-style: normal;
            font-weight: 900;
            line-height: 14px;

            &.is-active {
              text-decoration: underline;
              opacity: 0.75;
            }
          }

          & + li {
            padding-left: 4px;
            border-left: 1px solid var(--link-text-color);
          }
        }
      }

      & .header-cta-block {
        display: none;
      }

      & .nav-button {
        display: flex;
        align-items: center;
        justify-content: center;

        & #nav-menu-opener {
          position: relative;
          width: 48px;
          height: 48px;
          cursor: pointer;
          appearance: none;
          box-shadow: none;

          &::after {
            display: block;
            content: "";
            position: absolute;
            width: 48px;
            height: 48px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            mask-size: 28px 28px;
            mask-position: center;
            mask-repeat: no-repeat;
            mask-image: url(/themes/custom/incmty/images/svg/menu-open.svg);
            background: var(--link-text-color);
          }
        }
      }

      & * + .nav-button {
        padding-left: 24px;
      }
    }
  }

  & .dynamic-menu-mask {
    background: var(--nav-overlay-color);
    opacity: 0;
  }

  & .dynamic-menu {
    background-color: var(--bg-color);
    border-top: 1px solid var(--divider-color);
    padding: 24px 16px;
    position: absolute;
    left: 0;
    right: 0;
    top: -50px;
    height: auto;
    max-height: 100vh;
    overflow-y: auto;
    transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
    transform: translateX(0%) translateY(-100%);
    z-index: 0;
    opacity: 0;

    & ul {
      list-style: none;
      margin-block: 0;
      margin-inline: 0;

      & li {
        & a {
          color: var(--link-text-color);
          text-decoration: none;
          font-size: 12px;
          font-style: normal;
          font-weight: 700;
          line-height: 14px;
          text-transform: uppercase;

          &:hover {
            text-decoration: underline;
          }

          &.is-active {
            color: var(--link-text-color);
          }
        }
      }
    }

    & .header-cta-block {
      text-align: center;

      & a {
        text-decoration: none;
        padding: 16px 32px;
        background-color: var(--button-bg-color);
        color: var(--button-text-color);
        display: inline-block;
        border-radius: 100px;
        font-size: 12px;
        font-style: normal;
        font-weight: 900;
        line-height: 18px;
        letter-spacing: 0.12px;

        &:hover {
          opacity: 1;
          background-color: var(--button-hover-bg-color);
          color: var(--button-hover-text-color);
          border-color: var(--button-hover-bg-color);
        }
      }
    }

    & .main-menu {
      & ul.menu {
        text-align: center;
        margin-left: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 48px;

        & details {
          & summary {
            user-select: none;
            list-style: none;
            color: var(--link-text-color);
            cursor: pointer;
            box-shadow: none;
            outline: none;
            padding: 0;
            padding: 5px 0;

            & p {
              font-size: 12px;
              font-style: normal;
              font-weight: 700;
              line-height: 14px;
              text-transform: uppercase;
              position: relative;
              display: inline-block;

              &::after {
                display: block;
                content: "";
                position: absolute;
                width: 24px;
                height: 24px;
                top: 50%;
                right: -27px;
                transform: translateY(-50%) rotate(0deg);
                mask-size: 10px 15px;
                mask-position: center;
                mask-repeat: no-repeat;
                mask-image: url(/themes/custom/incmty/images/svg/dropdown.svg);
                background: var(--link-text-color);
                transition: all 0.2s ease-in-out;
              }
            }
          }

          & ul.collapsed-links {
            & li {
              & a {
                transition: all 0.3s ease-in-out;

                &:hover {
                  opacity: 1;
                  background-color: var(--button-bg-color);
                  color: var(--button-text-color);
                  text-decoration: none;
                }
              }
            }
          }

          &[open] {
            summary {
              p {
                &::after {
                  transform: translateY(-50%) rotate(180deg);
                }
              }
            }
          }
        }

        & li {
          & a {
            padding: 5px 0;
            display: block;

            &:hover {
              background: none !important;
            }
          }
        }
      }

      & + * {
        margin-top: 24px;
      }
    }

    &:has(.js-menu-dynamic-col) {
      .main-menu {
        ul.menu {
          > details {
            display: none;
          }

          > li {
            display: none;
          }
        }
      }
    }
  }

  &:has(input[type="checkbox"]:checked) {
    & .static-menu {
      & .contains-nav-menus {
        & .nav-button {
          & #nav-menu-opener {
            &::after {
              mask-image: url(/themes/custom/incmty/images/svg/menu-close.svg);
            }
          }
        }
      }
    }

    & .dynamic-menu {
      transition-delay: 0.1s;
      transform: translateX(0%) translateY(0%);
      opacity: 1;
      transition: all 300ms ease;
      top: 89px;
    }

    & .dynamic-menu-mask {
      background: var(--nav-overlay-color);
      position: fixed;
      left: 0;
      right: 0;
      top: 0px;
      height: 100vh;
      width: 100vw;
      transition: opacity 500ms ease;
      opacity: 1;
    }
  }
}

@keyframes moveMessages {
  from {
    opacity: 1;
    left: 0;
  }

  to {
    left: -100%;
    opacity: 0;
  }
}

.messages-list {
  margin-block: 0;
  margin-top: 10px;
  -webkit-box-shadow: 0px 3px 11px -1px #030219;
  box-shadow: 0px 3px 11px -1px #030219;
  display: inline-block;
  position: fixed;
  z-index: 8;
  left: 0;
  transition: left cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
  animation-name: moveMessages;
  animation-delay: 3s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 1;

  & .messages--status.messages {
    margin-block: 0;
    border-color: #122cde;
    background-color: #ffffff;

    & .messages__title {
      color: #030219;
    }

    & .messages__content {
      color: #030219;
    }

    & a {
      color: #122cde;

      &:hover {
        opacity: 1;
      }
    }
  }
}

body {
  &:has(#nav-menu-opener:checked) {
    overflow: hidden;
  }

  &.user-logged-in {
    & header {
      top: 39px;
    }
  }
}

@media screen and (min-width: 768px) {
  #block-incmty-local-tasks {
    background-color: #ffffff;

    & .is-horizontal .tabs--primary {
      padding-block: 0;
      padding-inline: 0;
      margin-block-end: 0;
      padding: 0;

      & a.tabs__link {
        border-radius: 0;
        margin-inline-end: 0;
        padding-inline: 0;
        padding: 16px 32px;
        transition: all 0.3s ease-in-out;
        color: #030219;

        &.is-active,
        &:hover {
          background-color: #030219;
          color: #ffffff;
          opacity: 1;
        }
      }
    }
  }
}

@media screen and (min-width: 976px) {
  body {
    &.user-logged-in {
      & header {
        top: 68px;
      }
    }
  }
}

@media screen and (min-width: 1028px) {
  body {
    &.user-logged-in {
      & header {
        top: 53px;
      }
    }
  }
}

@media screen and (min-width: 1024px) {
  [data-component-id="incmty:nav"] {
    & .static-menu {
      padding: 24px 16px;
    }
  }
}

@media screen and (min-width: 1280px) {
  [data-component-id="incmty:nav"] {
    & .static-menu {
      padding: 24px 96px;
    }

    &.not_collapsed {
      & .static-menu {
        & .contains-nav-menus {
          gap: 24px;

          & .nav-not-collapsed-links {
            display: block;
          }

          & .header-cta-block {
            display: block;
          }

          & .nav-button {
            display: none;
          }
        }
      }

      & .dynamic-menu {
        display: none;
      }

      &::before {
        display: none;
      }
    }

    & .dynamic-menu {
      & .main-menu {
        & ul.menu {
          grid-template-columns: repeat(4, 1fr);
        }
      }
    }
  }
}

header.header-nav-block .contains-nav-menus .header-cta-block a.btn {
  background-color: var(--button-bg-color);
}

header.header-nav-block .contains-nav-menus .header-cta-block a.btn:hover {
  opacity: 1;
  background-color: var(--button-hover-bg-color);
  color: var(--button-hover-text-color);
  border-color: var(--button-hover-bg-color);
}

header.header-nav-block .contains-nav-menus a.btn {
  background: none;
  border: none;
}

header.header-nav-block .contains-nav-menus .collapsed-links a {
  border-radius: 0;
}

[data-component-id="incmty:nav"]
  .dynamic-menu
  .main-menu
  ul.menu
  li
  a.btn:not(:hover) {
  background: none;
}

[data-component-id="incmty:nav"] .dynamic-menu .main-menu ul.menu li a.btn {
  border-radius: 0;
  border: none;
}