/* ============================================================
   CABEÇALHO 2026 — a barra vira uma peça flutuante arredondada
   Pedido do dono (24/09/2026): "essa parte ainda está a do primeiro
   design… dá para ficar muito mais bonita". A barra de ponta a ponta
   sai; o .nav vira uma cápsula de cantos redondos (o mesmo raio dos
   cartões do site), solta do topo:
   - no topo da página, transparente sobre o dourado da capa;
   - rolando, branca com sombra suave (ou tinta, sobre os painéis
     escuros de Equipe/Método/Chamada);
   - seção atual marcada por um fundo dourado suave (sem sublinhado);
   - "Agendar diagnóstico" vira botão em tinta;
   - a barra de progresso da leitura corre por dentro da cápsula
     (assets/cabecalho.js move o #scroll-progress para dentro do .nav).
   O menu do celular desce como um cartão arredondado.

   Os temas continuam vindo do headerTheme (index.html): theme-light,
   theme-dark e theme-gold (sobre a capa). #site-header#site-header
   (id repetido) vence as várias camadas antigas sem !important.
   Carrega por último.
   ============================================================ */

:root {
  --cab-top: 14px;
  --cab-h: 68px;
  --cab-r: 22px;
  --cab-sobra: 18px;           /* quanto a cápsula passa da coluna de texto */
  --cab-tinta: #1A1D24;
  --cab-ouro: #F0BB4A;
  --cab-fio: #E9ECF0;
}
@media (max-width: 1023.98px) {
  :root { --cab-top: 10px; --cab-h: 60px; --cab-r: 20px; --cab-sobra: 12px; }
}

/* ---------- 1. A barra some: o cabeçalho é só o trilho da cápsula ---------- */
#site-header#site-header {
  padding-top: var(--cab-top);
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;        /* as sobras transparentes não bloqueiam cliques */
}
#site-header#site-header .nav,
#site-header#site-header .mobile-menu,
#site-header#site-header .menu-scrim { pointer-events: auto; }

/* ---------- 2. A cápsula ---------- */
#site-header#site-header .nav {
  position: relative;
  height: var(--cab-h);
  min-height: 0;
  margin-inline: calc(var(--cab-sobra) * -1);
  padding: 0 10px 0 var(--cab-sobra);
  border: 1px solid transparent;
  border-radius: var(--cab-r);
  background-color: transparent;
  overflow: hidden;            /* a barra de progresso respeita os cantos */
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}
/* rolando: branca… */
#site-header#site-header.scrolled.theme-light .nav {
  background-color: rgba(255, 255, 255, 0.94);
  border-color: var(--cab-fio);
  box-shadow:
    0 14px 36px -22px rgba(26, 29, 36, 0.45),
    0 1px 2px rgba(26, 29, 36, 0.04);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
/* …ou em tinta sobre os painéis escuros */
#site-header#site-header.scrolled.theme-dark .nav {
  background-color: rgba(21, 24, 30, 0.92);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
/* dentro da cápsula branca o "&" dourado da logo volta a aparecer */
#site-header#site-header.scrolled.theme-gold .brand-logo-light { filter: none; opacity: 1; }

/* logo um pouco menor dentro da cápsula */
#site-header#site-header .brand-logo { height: 54px; }
@media (max-width: 1023.98px) {
  #site-header#site-header .brand-logo { height: 46px; }
}

/* ---------- 3. Os links ---------- */
@media (min-width: 1024px) {
  #site-header#site-header .nav-list { gap: 2px; }
}
#site-header#site-header .nav-list a {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background-color 0.2s ease, color 0.2s ease;
}
#site-header#site-header .nav-list a::after { display: none; }
#site-header#site-header .nav-list a:hover { background-color: rgba(26, 29, 36, 0.06); }
#site-header#site-header.theme-dark .nav-list a:hover { background-color: rgba(255, 255, 255, 0.08); color: #FFFFFF; }
/* a seção em que o leitor está */
#site-header#site-header .nav-list a[aria-current="page"] {
  background-color: rgba(240, 187, 74, 0.24);
  color: var(--cab-tinta);
}
#site-header#site-header.theme-dark .nav-list a[aria-current="page"] {
  background-color: rgba(240, 187, 74, 0.16);
  color: var(--cab-ouro);
}
#site-header#site-header.theme-gold:not(.scrolled) .nav-list a[aria-current="page"] {
  background-color: rgba(26, 29, 36, 0.08);
}
#site-header#site-header .nav a:focus-visible,
#site-header#site-header .nav button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -3px;
}

/* ---------- 4. O botão de agendar ---------- */
#site-header#site-header .nav-cta {
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 14px;
  background-color: var(--cab-tinta);
  color: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: none;
  animation: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
#site-header#site-header .nav-cta:hover { background-color: #000000; color: var(--cab-ouro); }
#site-header#site-header.theme-dark .nav-cta { background-color: var(--cab-ouro); color: var(--cab-tinta); }
#site-header#site-header.theme-dark .nav-cta:hover { background-color: #F5CB6E; color: var(--cab-tinta); }

/* ---------- 5. A barra de progresso, por dentro da cápsula ---------- */
#site-header#site-header .nav > .scroll-progress {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 1;
  background-color: var(--cab-ouro);
  transition: opacity 0.35s ease;
}
#site-header#site-header:not(.scrolled) .nav > .scroll-progress { opacity: 0; }

/* ---------- 6. Celular: botão do menu e o menu como cartão ---------- */
#site-header#site-header .menu-toggle {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}
#site-header#site-header.scrolled.theme-light .menu-toggle { background-color: rgba(26, 29, 36, 0.05); }
#site-header#site-header.scrolled.theme-dark .menu-toggle { background-color: rgba(255, 255, 255, 0.08); }

@media (max-width: 1023.98px) {
  /* menu aberto: a cápsula fica sólida, mesmo no topo da capa */
  body.menu-is-open #site-header#site-header.theme-light .nav {
    background-color: #FFFFFF;
    border-color: var(--cab-fio);
    box-shadow: 0 14px 36px -22px rgba(26, 29, 36, 0.45);
  }
  body.menu-is-open #site-header#site-header.theme-dark .nav {
    background-color: #15181E;
    border-color: rgba(255, 255, 255, 0.08);
  }
  body.menu-is-open #site-header#site-header.theme-gold .brand-logo-light { filter: none; opacity: 1; }

  #site-header#site-header .mobile-menu {
    top: calc(var(--header-h, 70px) + 8px);
    left: 12px;
    right: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding-inline: 22px;
    box-shadow: 0 30px 60px -24px rgba(15, 17, 22, 0.5);
  }
  #site-header#site-header.theme-light .mobile-menu { border-color: var(--cab-fio); }
  #site-header#site-header .mobile-menu.open {
    max-height: calc(100vh - var(--header-h, 70px) - 20px);
    max-height: calc(100dvh - var(--header-h, 70px) - 20px);
  }
  #mobile-menu .btn.mm-cta { border-radius: 14px; }
}