.nav-grupo { position: relative; display: inline-flex; align-items: center; gap: 5px }
.nav-grupo > a { padding: 12px 0 }
.nav-seta {
  border: 0; background: none; color: inherit; font: inherit; line-height: 1;
  min-width: 26px; padding: 12px 4px; cursor: pointer;
  opacity: .7; transition: transform .25s, opacity .25s;
}
.nav-grupo[data-aberto="1"] .nav-seta { transform: rotate(180deg); opacity: 1 }
.nav-sub {
  position: absolute; top: 100%; left: 50%; translate: -50% 6px;
  min-width: 212px; margin-top: 14px; padding: 8px;
  border: 1px solid #ffffff2e; border-radius: 16px;
  background: #1d1d1be6; backdrop-filter: blur(24px) saturate(135%);
  box-shadow: 0 18px 44px #00000059;
  display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transition: opacity .2s, translate .2s, visibility .2s;
}
.nav-sub:before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px }
.nav-grupo[data-aberto="1"] .nav-sub { opacity: 1; visibility: visible; translate: -50% 0 }
.nav-sub a { padding: 9px 12px; border-radius: 10px; font-size: 13.5px; white-space: nowrap; color: #f3efe8 }
.nav-sub a:hover, .nav-sub a:focus-visible { background: #ffffff14; color: var(--amber) }
[data-area] { display: none }
@media (max-width: 820px) {
  .nav-grupo { display: block }
  .nav-sub {
    position: static; translate: none; opacity: 1; visibility: visible;
    margin: 6px 0 2px; padding: 0 0 0 14px;
    border: 0; border-left: 1px solid #ffffff2b;
    background: none; backdrop-filter: none; box-shadow: none; border-radius: 0;
  }
  .nav-sub a { font-size: 16px; padding: 7px 0 }
  .nav-seta { display: none }
}