/* xl - DESKTOP STYLES */ 
@media (min-width: 1120px) {
  /* ============================================================ */
  /* 12. NÍVEL 3+ — ESCONDER (DESKTOP ONLY)                      */
  /* ============================================================ */
    .x-menu > li > .sub-menu > li > .sub-menu {
      display: none;
    }
  
  /* ============================================================ */
  /* 29. MOBILE — MOSTRAR/ESCONDER POR BREAKPOINT                */
  /* ============================================================ */
  .x-menu-mobile {
      display: none !important;
    }
}

/* lg - TABLET LANDSCAPE STYLES */ 
@media (min-width: 1024px) and (max-width: 1119px) {
  /* ============================================================ */
  /* 12. NÍVEL 3+ — ESCONDER (DESKTOP ONLY)                      */
  /* ============================================================ */
    .x-menu > li > .sub-menu > li > .sub-menu {
      display: none;
    }
  
  /* ============================================================ */
  /* 21. RESPONSIVO — até 1200px                                      */
  /* ============================================================ */
    .x-menu-wrapper {
      padding: 32px 40px 16px 40px;
    }
  
  /* ============================================================ */
  /* 29. MOBILE — MOSTRAR/ESCONDER POR BREAKPOINT                */
  /* ============================================================ */
    .x-menu-mobile {
      display: none !important;
    }
}

/* md - TABLET PORTRAIT STYLES */ 
@media (min-width: 768px) and (max-width: 1023px) {
  /* ============================================================ */
  /* 12. NÍVEL 3+ — ESCONDER (DESKTOP ONLY)                      */
  /* ============================================================ */
    .x-menu > li > .sub-menu > li > .sub-menu {
      display: none;
    }
  
  
  /* ============================================================ */
  /* 22. RESPONSIVO — até 1024px                                      */
  /* ============================================================ */
    .x-menu-wrapper {
      padding: 24px 24px 16px 24px;
    }
    .x-menu {
      grid-template-columns: repeat(3, 1fr) !important;
    }
    .x-menu > li {
      padding: 0 0 24px 0;
    }
    .x-menu > li:nth-child(3n) {
      border-right: none;
      padding-right: 0;
    }
    .x-menu > li:nth-child(3n+1) {
      padding-left: 0;
    }
    .x-menu-secondary {
      grid-template-columns: repeat(3, 1fr);
    }
  
  /* ============================================================ */
  /* 29. MOBILE — MOSTRAR/ESCONDER POR BREAKPOINT                */
  /* ============================================================ */
    .x-menu-mobile {
      display: none !important;
    }
}

/* sm - SMARTPHONE LANDSCAPE STYLES */ 
@media (min-width: 480px) and (max-width: 767px) {
  /* ============================================================ */
  /* 23. RESPONSIVO — até 768px                                       */
  /* ============================================================ */
    .x-menu-wrapper {
      padding: 16px;
    }
    .x-menu-close {
      top: 16px;
      right: 16px;
    }
    .x-menu {
      grid-template-columns: repeat(2, 1fr) !important;
    }
    .x-menu > li {
      padding: 0 0 20px 0;
    }
    .x-menu > li:nth-child(2n) {
      border-right: none;
      padding-right: 0;
    }
    .x-menu > li:nth-child(2n+1) {
      padding-left: 0;
    }
    .x-menu-secondary {
      grid-template-columns: repeat(2, 1fr);
    }
    .x-menu-secondary > li:nth-child(2n+1) {
      padding-left: 0;
    }
  
  /* ============================================================ */
  /* 29. MOBILE — MOSTRAR/ESCONDER POR BREAKPOINT                */
  /* ============================================================ */
    .x-menu-desktop {
      display: none !important;
    }
}

/* xs - SMARTPHONE PORTRAIT STYLES */ 
@media (max-width: 479px) {
  /* ============================================================ */
  /* 23. RESPONSIVO — até 768px                                       */
  /* ============================================================ */
    .x-menu-wrapper {
      padding: 16px;
    }
    .x-menu-close {
      top: 16px;
      right: 16px;
    }
    .x-menu {
      grid-template-columns: repeat(2, 1fr) !important;
    }
    .x-menu > li {
      padding: 0 0 20px 0;
    }
    .x-menu > li:nth-child(2n) {
      border-right: none;
      padding-right: 0;
    }
    .x-menu > li:nth-child(2n+1) {
      padding-left: 0;
    }
    .x-menu-secondary {
      grid-template-columns: repeat(2, 1fr);
    }
    .x-menu-secondary > li:nth-child(2n+1) {
      padding-left: 0;
    }
  
  /* ============================================================ */
  /* 29. MOBILE — MOSTRAR/ESCONDER POR BREAKPOINT                */
  /* ============================================================ */
    .x-menu-desktop {
      display: none !important;
    }
}

/* RETINA DISPLAY STYLES */ 
/* ============================================================
   CSS Menu Header
   ============================================================
   INDICE
   ------
   0.  Acoes do header - icones e pesquisa
   1.  Overlay do menu
   2.  Gaveta do menu
   3.  Toggle e botao fechar
   4.  Acessos rapidos (ACF)
   5.  Menu principal paineis
   6.  Menu principal linhas e estados
   7.  Responsivo
   ============================================================ */

/* ============================================================ */
/* 0. ACOES DO HEADER ICONES E PESQUISA                         */
/* ============================================================ */

.x-search-btn,
.x-search-btn a,
.x-search-btn button {
  background: transparent;
  background-color: transparent;
  box-shadow: none;
}

.x-search-btn:hover,
.x-search-btn:hover a,
.x-search-btn:hover button {
  background: transparent;
  background-color: transparent;
  box-shadow: none;
}

.x-search-btn:hover,
.x-search-btn:hover svg {
  color: var(--status-hover);
  fill: var(--status-hover);
  stroke: var(--status-hover);
}


/* ============================================================ */
/* 1. OVERLAY DO MENU                                           */
/* ============================================================ */

.x-menu-overlay {
  --x-menu-popup-bg: var(--background-palette-primary);
  --x-menu-popup-text: var(--text-secondary);
  --x-menu-popup-surface: var(--background-neutral-primary);
  --x-menu-popup-ink: var(--text-primary);
  --x-menu-popup-line: rgba(255, 255, 255, 0.7);

  position: fixed;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  z-index: 9999;
  overflow: hidden;
  background: var(--background-popups) !important;
  color: var(--x-menu-popup-text);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.x-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}


/* ============================================================ */
/* 2. GAVETA DO MENU                                            */
/* ============================================================ */

.x-menu-shell {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  height: 100%;
  height: 100dvh;
  min-height: 100%;
  margin-left: auto;
  padding: 40px;
  background: var(--x-menu-popup-bg);
  color: var(--x-menu-popup-text);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: scroll;
}

.x-menu-overlay.active .x-menu-shell {
  transform: translateX(0);
}


/* ============================================================ */
/* 3. TOGGLE E BOTAO FECHAR                                     */
/* ============================================================ */

.x-menu-toggle,
.x-menu-toggle:hover {
  background: transparent;
  background-color: transparent;
  box-shadow: none;
}

.x-menu-toggle svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
  margin: 5px 0;
}

.x-menu-toggle:hover svg,
.x-menu-toggle:hover svg path {
  fill: var(--status-hover);
  color: var(--status-hover);
}

.x-menu-close {
  position: absolute;
  top: 40px;
  right: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: var(--x-menu-popup-surface) !important;
  color: var(--x-menu-popup-ink) !important;
  cursor: pointer;
  transition: background-color 0.2s ease, border-radius 0.2s ease;
}

.x-menu-close svg {
  width: 20px;
  height: 20px;
  color: currentColor !important;
  fill: currentColor !important;
}

.x-menu-close svg path {
  color: currentColor !important;
  fill: currentColor !important;
}

.x-menu-close:hover,
.x-menu-close:focus-visible {
  background: var(--status-hover) !important;
  border-radius: 8px;
}


/* ============================================================ */
/* 4. ACESSOS RAPIDOS (ACF)                                     */
/* ============================================================ */

.x-menu-quick {
  width: 100%;
  margin: 112px 0 64px;
  padding-right: 0;
}

.x-menu-quick-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

.x-menu-quick-item {
  padding: 0;
  margin: 0;
  list-style: none;
}

.x-menu-quick-item:not(:last-child) {
  border-bottom: 1px solid var(--x-menu-popup-line);
}

.x-menu-quick-link {
  display: block;
  width: 100%;
  padding: 12px 0;
  color: inherit;
  font-family: var(--bde-heading-font-family);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.x-menu-quick-link:hover,
.x-menu-quick-link:focus-visible,
.x-menu-quick-item.is-current .x-menu-quick-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
}


/* ============================================================ */
/* 5. MENU PRINCIPAL PAINEIS                                    */
/* ============================================================ */

.x-menu-main-wrapper {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 360px;
  overflow: hidden;
}

.x-menu-panel {
  position: absolute;
  inset: 0;
  padding-top: 0;
  overflow-y: auto;
  background: var(--x-menu-popup-bg);
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.x-menu-panel.active {
  transform: translateX(0);
}

.x-menu-panel.slide-out {
  transform: translateX(-100%);
}

.x-menu-main {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.x-menu-panel[data-level="0"] .x-menu-main {
  border-top: 1px solid var(--x-menu-popup-line);
}

.x-menu-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--x-menu-popup-line);
  background: transparent;
  color: inherit;
  font-family: var(--bde-heading-font-family);
  font-size: var(--bde-h6-font-size);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  cursor: pointer;
}

.x-menu-back-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.x-menu-back:hover,
.x-menu-back:focus-visible {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}


  border-top: 1px solid var(--x-menu-popup-line);
}

.x-menu-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--x-menu-popup-line);
  background: transparent;
  color: inherit;
  font-family: var(--bde-heading-font-family);
  font-size: var(--bde-h6-font-size);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  cursor: pointer;
}

.x-menu-back-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.x-menu-back:hover,
.x-menu-back:focus-visible {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}


/* ============================================================ */
/* 6. MENU PRINCIPAL LINHAS E ESTADOS                           */
/* ============================================================ */

.x-menu-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 62px;
  border-bottom: 1px solid var(--x-menu-popup-line);
}

.x-menu-row:last-child {
  border-bottom: 0;
}

.x-menu-row-link {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding: 16px 0;
  color: inherit;
  font-family: var(--bde-heading-font-family);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.x-menu-drill-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 40px;
  width: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.x-menu-chevron {
  width: 24px;
  height: 24px;
  color: currentColor;
  fill: currentColor;
  transition: color 0.2s ease, fill 0.2s ease;
}

.x-menu-row-link:hover,
.x-menu-row-link:focus-visible {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.x-menu-drill-btn:hover .x-menu-chevron,
.x-menu-drill-btn:focus-visible .x-menu-chevron,
.x-menu-drill-btn:hover .x-menu-chevron path,
.x-menu-drill-btn:focus-visible .x-menu-chevron path {
  color: var(--status-hover);
  fill: var(--status-hover);
}

.x-menu-row.current-menu-item .x-menu-row-link,
.x-menu-row.current_page_item .x-menu-row-link,
.x-menu-row.current-menu-ancestor .x-menu-row-link,
.x-menu-row.current-menu-parent .x-menu-row-link,
.x-menu-row.current_page_ancestor .x-menu-row-link,
.x-menu-row.current_page_parent .x-menu-row-link,
.x-menu-row.is-selected .x-menu-row-link,
.x-menu-row.is-selected-ancestor .x-menu-row-link,
.x-menu-row-link[aria-current="page"] {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}


/* ============================================================ */
/* 7. RESPONSIVO                                                */
/* ============================================================ */

@media (max-width: 599px) {
  .x-menu-shell {
    padding: 40px;
  }

  .x-menu-close {
    top: 40px;
    right: 40px;
    width: 48px;
    height: 48px;
  }

  .x-menu-close svg {
    width: 20px;
    height: 20px;
  }

  .x-menu-quick {
    margin: 96px 0 64px;
    padding-right: 0;
  }

  .x-menu-quick-link {
    padding: 12px 0;
    font-size: 40px;
    line-height: 1.5;
  }

  .x-menu-quick-link:hover,
  .x-menu-quick-link:focus-visible,
  .x-menu-quick-item.is-current .x-menu-quick-link {
    text-decoration-thickness: 4px;
    text-underline-offset: 6px;
  }

  .x-menu-main-wrapper {
    min-height: 300px;
  }

  .x-menu-row {
    min-height: 64px;
  }

  .x-menu-row-link {
    padding: 14px 0;
    font-size: 24px;
    line-height: 1.35;
  }

  .x-menu-drill-btn {
    flex-basis: 56px;
    width: 56px;
  }

  .x-menu-chevron {
    width: 28px;
    height: 28px;
  }

  .x-menu-back {
    height: 40px;
    font-size: var(--bde-h6-font-size);
  }
}

@media (max-width: 520px) {
  .x-menu-shell {
    padding: 24px;
  }

  .x-menu-close {
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
  }

  .x-menu-close svg {
    width: 20px;
    height: 20px;
  }

  .x-menu-quick {
    margin-top: 72px;
    margin-bottom: 64px;
  }

  .x-menu-quick-link {
    font-size: 34px;
  }

  .x-menu-row-link {
    font-size: 20px;
  }
}