/* Menu com dropdown (08/10/2026, análise B21). Os links ficam escritos no HTML dentro de
   <details>: abre no clique, no toque e no teclado mesmo sem JavaScript. O menu-dd.js só
   fecha com Esc, com clique fora e deixa um aberto por vez. No celular vira sanfona. */
.nav-dd { position: relative; }
.nav-dd > summary {
  list-style: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  color: var(--ink-soft);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color 180ms ease, color 180ms ease;
}
.nav-dd > summary::-webkit-details-marker { display: none; }
.nav-dd > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg);
  transition: transform 180ms ease;
}
.nav-dd[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.nav-dd > summary:hover,
.nav-dd[open] > summary,
.nav-dd.is-current > summary { background: var(--surface); color: var(--ink); }
.nav-dd > summary:focus-visible { outline: 2px solid var(--accent, #3154f5); outline-offset: 2px; }
.nav-dd__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  display: grid;
  min-width: 230px;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface, #fff);
  padding: 8px;
  box-shadow: 0 24px 60px -30px rgba(12, 15, 20, 0.45);
}
.nav-dd__panel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.nav-dd__panel a:hover,
.nav-dd__panel a:focus-visible,
.nav-dd__panel a[aria-current="page"] { background: var(--bg, #f4f6fb); color: var(--accent-dark, #203bc5); }

/* Celular: sanfona dentro do menu */
.mob-dd { border-bottom: 1px solid var(--line); }
.mob-dd > summary {
  list-style: none;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 2px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 750;
  cursor: pointer;
}
.mob-dd > summary::-webkit-details-marker { display: none; }
.mob-dd > summary::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 180ms ease;
}
.mob-dd[open] > summary::after { transform: rotate(-135deg); }
.mob-dd > div { display: grid; padding: 0 0 10px 14px; }
.mob-dd > div a {
  min-height: 48px;
  display: flex;
  align-items: center;
  color: var(--ink-soft, #3e4654);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
.mob-dd > div a[aria-current="page"] { color: var(--accent-dark, #203bc5); }

@media (prefers-reduced-motion: reduce) {
  .nav-dd > summary::after, .mob-dd > summary::after { transition: none; }
}

/* O site-v2.css transforma todo <details> em cartão (body.dp-v2 details, com !important):
   no menu ele não vale. */
body .nav-dd, body .mob-dd, body.dp-v2 .nav-dd, body.dp-v2 .mob-dd {
  border-color: transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.dp-v2 .mob-dd { border-bottom: 1px solid var(--line) !important; }
body.dp-v2 .nav-dd > summary { color: var(--ink-soft) !important; }
body.dp-v2 .nav-dd[open] > summary, body.dp-v2 .nav-dd.is-current > summary, body.dp-v2 .nav-dd > summary:hover { color: var(--ink) !important; }

/* 08/10/2026 (print do Diogo em 390 px): "Serviços" no menu do celular igual aos outros itens
   (tamanho, peso, cor, espaçamento e linha), em qualquer página. A home usa itens de 24px e as
   outras de 18px; nos artigos a regra do FAQ (summary com "+") pegava o menu. */
.mobile-nav > .mob-dd {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.mobile-nav > .mob-dd > summary {
  position: static !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  padding: 14px 2px !important;
  color: var(--ink) !important;
  font-size: 18px !important;
  font-weight: 750 !important;
  line-height: inherit !important;
  letter-spacing: inherit;
}
body:not(.dp-v2) .mobile-nav > .mob-dd > summary {
  min-height: 0 !important;
  padding: 18px 2px !important;
  font-size: 24px !important;
  letter-spacing: -0.03em;
}
.mobile-nav > .mob-dd > summary::after {
  position: static !important;
  display: block !important;
  flex: none;
  content: "" !important;
  width: 9px !important;
  height: 9px !important;
  margin: 0 6px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  border-radius: 0 !important;
  background: none !important;
  color: inherit !important;
  font-size: 0 !important;
  transform: translateY(-25%) rotate(45deg) !important;
}
.mobile-nav > .mob-dd[open] > summary::after { transform: translateY(25%) rotate(-135deg) !important; }
/* Itens de dentro: recuados e um pouco menores que os principais */
.mobile-nav > .mob-dd > div { display: grid; padding: 0 0 10px 18px !important; }
.mobile-nav > .mob-dd > div a {
  min-height: 48px;
  display: flex;
  align-items: center;
  border: 0 !important;
  padding: 0 !important;
  color: var(--ink-soft, #3e4654);
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: inherit;
  letter-spacing: inherit;
  text-decoration: none;
}
body:not(.dp-v2) .mobile-nav > .mob-dd > div a { font-size: 19px !important; letter-spacing: -0.02em; }
.mobile-nav > .mob-dd > div a[aria-current="page"] { color: var(--accent-dark, #203bc5); }

/* Mesmo motivo no computador: nos artigos do blog a regra do FAQ (summary com "+") deixava o
   "Serviços" maior e com um quadrado no lugar da setinha. */
.nav-dd > summary {
  position: static !important;
  min-height: 44px !important;
  display: inline-flex !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: inherit !important;
}
.nav-dd > summary::after {
  position: static !important;
  display: block !important;
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  margin: -3px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-right: 1.8px solid currentColor !important;
  border-bottom: 1.8px solid currentColor !important;
  border-radius: 0 !important;
  background: none !important;
  color: inherit !important;
  font-size: 0 !important;
  transform: rotate(45deg) !important;
}
.nav-dd[open] > summary::after { transform: rotate(-135deg) !important; margin-top: 3px !important; }
.nav-dd { margin: 0 !important; padding: 0 !important; }