.navbar {
    --bulma-navbar-item-color: #000;
    --bulma-navbar-item-img-max-height: 2.5rem;
    --bulma-navbar-item-padding: 2.5em;

    box-shadow: none;
    &.is-fixed-top {
        top: 40px;
        min-height: 100px;
        max-height: 100px;
    }

    .columns.container {
        margin: auto;
    }

    transition: transform 0.3s ease; /* animación suave */
    will-change: transform; /* optimización de render */

    &.hide {
        transform: translateY(-100%); /* se va hacia arriba */
    }

    &.visible {
        transform: translateY(0); /* visible */
    }

    .menu-list {
      margin-bottom: 0;
    }

}

.navbar-item img,
.navbar-item svg {
  --bulma-navbar-item-img-max-height: 3rem;
}

.navbar-brand {
  margin-inline-start: 1em;
  margin-inline-end: 1em;
}

.navbar-start {
  justify-content: end;
  flex: 1;

  .first-level {
    position: relative;
    overflow: hidden;
  }

  .contextual-region {
    position: static;
  }
}

.navbar-end {
  align-items: center;
  padding-inline: 1.3em;
  .button.is-primary {
    --bulma-button-border-width: 2px !important;
    &:hover {
      background: var(--bulma-primary);
      color: #fff;
    }
  }
}

.navbar-item {
  font-size: 1rem;
  gap: 0.15rem;
  white-space: wrap !important;
  border-radius: var(--bulma-radius-large);

  &.has-dropdown {
    position: static;
    padding: 0.5rem 0.75rem;
    align-items: center;
  }

  @media (min-width: 1024px) {
    &.is-link > a {
      color: var(--bulma-link) !important;
      border: 2px solid var(--bulma-link);
      padding-inline: 1.5em;
      border-radius: 2em;
      padding-block: 5px;
    }
  }
}

.navbar-item a,
.navbar-item-link,
a.navbar-link {
  padding-left: 0;
  padding-right: 0;

  &:after {
    background: var(--bulma-link);
    bottom: 5px;
    content: "";
    height: 2px;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s,
      -webkit-transform-origin 0s;
    transition: opacity 0.3s, -webkit-transform 0.3s,
      -webkit-transform-origin 0s;
    transition: transform 0.3s, transform-origin 0s, opacity 0.3s;
    transition: transform 0.3s, transform-origin 0s, opacity 0.3s,
      -webkit-transform 0.3s, -webkit-transform-origin 0s;
    z-index: 10;
  }
  &:hover {
    background: none;
    &:after {
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
      opacity: 1;
    }
  }
}
/* no sé por qué no funciona arriba con after*/
a.navbar-link {
  &:before {
    background: var(--bulma-link);
    bottom: 5px;
    content: "";
    height: 2px;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s,
      -webkit-transform-origin 0s;
    transition: opacity 0.3s, -webkit-transform 0.3s,
      -webkit-transform-origin 0s;
    transition: transform 0.3s, transform-origin 0s, opacity 0.3s;
    transition: transform 0.3s, transform-origin 0s, opacity 0.3s,
      -webkit-transform 0.3s, -webkit-transform-origin 0s;
    z-index: 10;
  }
  &:hover {
    background: none;
    &:before {
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
      opacity: 1;
    }
  }
}

.navbar-item.is-link a.first-level {
  &:hover {
    background: var(--bulma-link);
    color: #fff !important;

    @media (max-width: 1024px) {
      background: transparent !important;
      color: var(--bulma-link) !important;
    }
  }
  &:after {
    content: none !important;
  }
}

.navbar .navbar-start :is(.navbar-item, .navbar-link) {
  font-weight: var(--bulma-weight-normal);

  &.active-trail {
    font-weight: var(--bulma-weight-semibold);
    color: var(--bulma-link);
  }
}

.navbar-dropdown {
  background-color: #fff;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  animation-name: fadeIn;

  @media (min-width: 1024px) {
    padding: 4em;
    min-height: 250px;
  }

  span.active-trail {
    color: var(--bulma-link);
  }

  .navbar-item {
    background: none !important;
    padding-inline-start: 0;
    padding-inline-end: 0;
    display: inline-flex;
    padding-left: 0 !important;
    width: auto;
  }

  @media screen and (min-width: 1024px) {
    .navbar-item,
    .navbar-link {
      padding: 0.5rem 0;
      padding-inline-end: 0 !important;
    }
  }
}

@media (max-width: 1024px) {
  /*   desktop  */
  .navbar .navbar-item .navbar-link {
    padding: 0.4em 0;
    font-size: 1.3rem;
  }
  .navbar-dropdown {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

@media (max-width: 1023px) {
  /* mobile */
  .navbar-menu.is-active {
    padding-top: 2rem;
  }
}

@media screen and (max-width: 1023px) {
  .navbar.is-fixed-top .navbar-menu,
  .navbar.is-fixed-top-touch .navbar-menu {
    padding-top: 0;
    padding-bottom: 1em;
  }

  .menu.navbar-start {
    padding: 1em 2em;

    .navbar-link {
      &:hover {
        background-color: transparent;
      }
    }

    & > .navbar-item {
      margin-bottom: .7em;
      padding: 0;
      border-radius: var(--bulma-radius);

      &:not(.is-primary):hover {
        /* background-color: #f2f2f2; */
      }

      &:has(.menu) {
        position: relative;

        &:after {
          border: 0.15em solid var(--bulma-link);
          border-right: 0;
          border-top: 0;
          content: " ";
          display: block;
          height: 0.8em;
          margin-top: -0.4375em;
          pointer-events: none;
          position: absolute;
          top: 30px;
          transform: rotate(-45deg);
          transform-origin: center;
          transition-duration: var(--bulma-duration);
          transition-property: border-color, transform;
          width: 0.8em;
          right: 0.2em;
        }

        cursor: pointer;

        &.has-dropdown {
          overflow: hidden;
          .navbar-dropdown {
            height: 0;
          }

          .navbar-link {
            /* pointer-events: none; */
            display: inline-block;
          }
        }
      }

      &.expanded {
        .navbar-dropdown {
          height: auto !important;
          padding: 1em;
        }
        &::after {
          transform: rotate(135deg);
        }
      }
    }
  }
}