/* =============================================================================
   NAVEC LABS — CHROME DO SITE
   Cabeçalho, navegação, menu mobile, botão flutuante, rodapé, progresso.
   Depende de tokens.css, base.css e components.css.
   ========================================================================== */

/* ==========================================================================
   Barra de progresso de leitura
   scaleX, não width — não força reflow a cada scroll.
   ========================================================================== */
.read-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  z-index: var(--z-progress);
  background-image: var(--grad-signature);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
  pointer-events: none;
}

/* ==========================================================================
   Cabeçalho
   ========================================================================== */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  padding-block: var(--space-xs);
  padding-inline: var(--gutter);
  padding-block-start: calc(var(--space-xs) + var(--safe-t));
  padding-inline-start: calc(var(--gutter) + var(--safe-l));
  padding-inline-end: calc(var(--gutter) + var(--safe-r));
  background-color: transparent;
  transition:
    background-color var(--dur) var(--ease),
    padding var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);

  /* O cabeçalho flutua sobre seções escuras, mas não pode PINTAR fundo (ele é
     transparente no topo). Então recebe só os tokens de texto e traço do
     contexto escuro — sem .section--dark, que também pintaria o fundo.
     Sem isto, o botão fantasma "Diagnóstico gratuito" ficava com a borda
     cinza-claro do tema claro, praticamente invisível sobre o preto. */
  color: var(--neutral-0);
  --text-strong: var(--neutral-0);
  --text-muted: var(--dark-100);
  --accent: var(--navec-pink);
  --border: color-mix(in srgb, var(--neutral-0) 18%, transparent);
  --border-strong: color-mix(in srgb, var(--neutral-0) 38%, transparent);
  --focus-ring: var(--navec-hot);
  --focus-ring-halo: color-mix(in srgb, var(--navec-hot) 30%, transparent);
}

.site-header.is-condensed {
  padding-block: var(--space-3xs);
  padding-block-start: calc(var(--space-3xs) + var(--safe-t));
  background-color: color-mix(in srgb, var(--navec-void) 88%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--neutral-0) 10%, transparent);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  width: min(100%, var(--container-wide));
  margin-inline: auto;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);   /* o logo é um controle: alvo de 44px */
  flex: none;
  line-height: 0;
}

.site-header__logo img {
  height: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  width: auto;
}

/* --- Navegação de desktop -------------------------------------------------- */
.site-nav { display: none; }

@media (min-width: 60rem) {
  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-s);
  }
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  min-height: var(--tap-min);
  padding-inline: var(--space-2xs);
  font-size: var(--step--1);
  font-weight: 600;
  color: color-mix(in srgb, var(--neutral-0) 82%, transparent);
  text-decoration: none;
  border-radius: var(--radius-s);
}

.site-nav__link:hover,
.site-nav__link[aria-current='page'] { color: var(--navec-pink); }

.site-nav__link[aria-current='page'] { font-weight: 700; }

/* --- Submenu de serviços --------------------------------------------------- */
.site-nav__group { position: relative; }

.site-nav__panel {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  min-width: 17rem;
  margin-block-start: var(--space-3xs);
  padding: var(--space-3xs);
  background-color: var(--navec-ink);
  border: var(--hairline) solid color-mix(in srgb, var(--neutral-0) 12%, transparent);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-l);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
}

.site-nav__group:hover .site-nav__panel,
.site-nav__group:focus-within .site-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav__panel a {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--tap-min);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-s);
  font-size: var(--step--1);
  font-weight: 600;
  color: color-mix(in srgb, var(--neutral-0) 84%, transparent);
  text-decoration: none;
}

.site-nav__panel a:hover {
  background-color: color-mix(in srgb, var(--neutral-0) 7%, transparent);
  color: var(--navec-pink);
}

.site-nav__panel .icon { color: var(--navec-pink); }

/* --- Botão do menu mobile -------------------------------------------------- */
.menu-toggle {
  display: inline-grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-s);
  color: var(--neutral-0);
  cursor: pointer;
}

@media (min-width: 60rem) { .menu-toggle { display: none; } }

.menu-toggle .icon { width: 1.5rem; height: 1.5rem; }
.menu-toggle[aria-expanded='true'] .icon-abrir { display: none; }
.menu-toggle:not([aria-expanded='true']) .icon-fechar { display: none; }

/* ==========================================================================
   Painel do menu mobile
   ========================================================================== */
.menu-panel {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: calc(var(--header-h) + var(--safe-t)) var(--gutter) calc(var(--space-l) + var(--safe-b));
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: color-mix(in srgb, var(--navec-void) 97%, transparent);
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(-1rem);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.menu-panel.is-open { opacity: 1; transform: none; }

.menu-panel__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: 3.25rem;
  padding-block: var(--space-2xs);
  border-block-end: var(--hairline) solid color-mix(in srgb, var(--neutral-0) 10%, transparent);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 800;
  color: var(--neutral-0);
  text-decoration: none;
}

.menu-panel__link:hover { color: var(--navec-pink); }
.menu-panel__link .icon { color: var(--navec-pink); }

.menu-panel__cta { margin-block-start: auto; display: grid; gap: var(--tap-gap); }

/* Trava a rolagem do corpo com o menu aberto, sem perder a posição */
html.is-menu-open,
html.is-menu-open body {
  overflow: hidden;
}

html.is-menu-open body {
  position: fixed;
  inset-inline: 0;
  width: 100%;
}

/* ==========================================================================
   Botão flutuante — UM só, o da NAgenda
   ========================================================================== */
.float-cta {
  position: fixed;
  inset-block-end: calc(var(--space-s) + var(--safe-b));
  inset-inline-end: calc(var(--space-s) + var(--safe-r));
  z-index: var(--z-float);
}

.float-cta .btn { box-shadow: var(--shadow-l), var(--shadow-accent); }

/* Em telefone, o rótulo some e fica só o ícone — sem comer área útil */
@media (max-width: 47.99rem) {
  .float-cta .btn { width: 3.25rem; height: 3.25rem; padding: 0; }
  .float-cta .btn span:not(.visually-hidden) { display: none; }
  .float-cta .btn .icon { width: 1.5rem; height: 1.5rem; }
}

/* Some enquanto o menu está aberto */
html.is-menu-open .float-cta { display: none; }

/* ==========================================================================
   Rodapé
   ========================================================================== */
.site-footer {
  padding-block: var(--space-2xl) var(--space-l);
  padding-block-end: calc(var(--space-l) + var(--safe-b));
  background-color: var(--surface);
  color: var(--text);
  border-block-start: var(--hairline) solid var(--border);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.site-footer__brand { grid-column: 1 / -1; max-width: 24rem; }

@media (min-width: 60rem) {
  .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .site-footer__brand { grid-column: auto; }
}

.site-footer h2,
.site-footer h3 {
  font-family: var(--font-text);
  font-size: var(--step--2);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--accent);
  margin-block-end: var(--space-xs);
}

.site-footer__links { display: grid; gap: var(--space-3xs); }

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--step--1);
  color: var(--text-muted);
  text-decoration: none;
}

.site-footer__links a:hover { color: var(--text-strong); }

.site-footer__social { display: flex; flex-wrap: wrap; gap: var(--tap-gap); }

.site-footer__bottom {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-s);
  border-block-start: var(--hairline) solid var(--border);
  font-size: var(--step--2);
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: space-between;
}

/* ==========================================================================
   Transição de página — View Transitions onde houver suporte
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: navec-vt-out 140ms var(--ease) both; }
  ::view-transition-new(root) { animation: navec-vt-in 220ms var(--ease) both; }
}

@keyframes navec-vt-out { to { opacity: 0; } }
@keyframes navec-vt-in { from { opacity: 0; transform: translateY(6px); } }

/* ==========================================================================
   Espaço reservado para o cabeçalho fixo no topo de cada página
   ========================================================================== */
.page-top { padding-block-start: calc(var(--header-h) + var(--safe-t)); }