/* ==========================================================================
   Header fixo · Figma 1:517 (pílula 1206 × 69)
   ≥1280: igual ao Figma · 1024–1279: sem o bloco de data
   ≤1023: logo + CTA + menu; painel com links, data e CTA (wireframe 42:136, proposta aprovada)
   ========================================================================== */

.cn-header {
  position: fixed; z-index: var(--z-header);
  transition: translate .45s var(--ease-out);
  top: var(--header-top); left: 0; right: 0;
  width: calc(100% - 2 * var(--gutter)); max-width: var(--header-w); /* separado em width + max-width para poder animar até 100% */
  margin-inline: auto;
  pointer-events: none; /* só a pílula recebe clique */
}

.cn-header__pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--space-16);
  min-height: var(--header-h);
  padding: var(--space-12) var(--space-12) var(--space-12) var(--space-20);
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-header);
}
/* Ao rolar: vidro fosco suave (ajuste em --header-glass-*) */
.cn-header.is-scrolled .cn-header__pill {
  box-shadow: var(--shadow-header-scrolled);
  background: color-mix(in srgb, var(--white) var(--header-glass-alpha), transparent);
  border-color: color-mix(in srgb, var(--white) 60%, transparent);
  -webkit-backdrop-filter: blur(var(--header-glass-blur)) saturate(160%);
          backdrop-filter: blur(var(--header-glass-blur)) saturate(160%);
}
/* Compacta ao rolar: sobe para 12px do topo e a pílula baixa um pouco (padding 12 → 10) */
.cn-header.is-scrolled { translate: 0 calc(var(--header-top-compact) - var(--header-top)); }
.cn-header__pill { transition: box-shadow var(--dur-slow) var(--ease-out), background-color var(--dur-slow) var(--ease-out), border-color var(--dur-slow), min-height .45s var(--ease-out), padding .45s var(--ease-out); }
.cn-header.is-scrolled .cn-header__pill { min-height: var(--header-h-compact); padding-block: var(--space-10); }
@media (prefers-reduced-motion: reduce) { .cn-header, .cn-header__pill { transition: none; } }

/* menu mobile aberto: volta ao branco sólido para a lista ficar legível */
.cn-header.is-open .cn-header__pill { background: var(--white); }

/* Entrada no load (só CSS: não depende do GSAP e não pisca) */
@media (prefers-reduced-motion: no-preference) {
  .cn-header__pill { animation: cn-header-in .9s var(--ease-out) .1s both; }
}
@keyframes cn-header-in {
  from { transform: translateY(calc(-100% - var(--header-top))); }
}

/* ---------- Logo (1:518: caixa 120 × 38; a marca visível tem ~103 × 17) ---------- */
.cn-header__logo {
  flex: none; display: grid; place-items: center;
  width: 120px; height: 38px; border-radius: 10px;
}
.cn-header__logo img { width: 103px; height: auto; }

/* ---------- Menu: links + data (no desktop fica em linha) ---------- */
.cn-header__menu { flex: 1; display: flex; align-items: center; min-width: 0; }
.cn-header__nav { margin-inline: auto; }

.cn-header__links { position: relative; isolation: isolate; display: flex; gap: var(--space-4); }
.cn-header__link {
  position: relative; display: block;
  padding: var(--space-10) 13px;
  border-radius: var(--radius-pill);
  font: var(--fw-regular) var(--fs-nav)/var(--lh-nav) var(--font-sans);
  color: var(--text-strong);
  white-space: nowrap;
  transition: color var(--dur-base);
}
.cn-header__link:hover, .cn-header__link[aria-current="true"] { color: var(--purple-775); }
/* Sem JS (ou antes do indicador existir), o ativo pinta o próprio fundo */
.cn-header:not(.has-indicator) .cn-header__link[aria-current="true"] { background: var(--lilac-100); }

/* Pílula do link ativo, deslizando entre os links (js/modules/header.js) */
.cn-header__indicator {
  position: absolute; z-index: -1; top: 0; left: 0; height: 100%;
  width: var(--ind-w, 0px); translate: var(--ind-x, 0px) 0;
  background: var(--lilac-100); border-radius: var(--radius-pill);
  opacity: 0;
  transition: translate .45s var(--ease-out), width .45s var(--ease-out), opacity var(--dur-base);
}
.cn-header__indicator.is-visible { opacity: 1; }
.cn-header__indicator.no-anim { transition: opacity var(--dur-base); }

/* ---------- Data e local (1:534) ---------- */
.cn-header__date {
  flex: none; display: flex; align-items: center; gap: var(--space-10);
  margin-left: var(--space-16); /* mesmo respiro dos dois lados dos links (Figma: space-between) */
}
.cn-header__date .cn-tile--round { color: var(--purple-850); } /* ícone #430a91 no Figma */
.cn-header__date-text { display: flex; flex-direction: column; gap: 1px; }
.cn-header__date-text strong { font: var(--fw-semibold) var(--fs-small)/20px var(--font-sans); color: var(--text-strong); }
.cn-header__date-text span { font: var(--fw-regular) var(--fs-small)/17px var(--font-sans); color: var(--text-muted); }

.cn-header__cta { flex: none; }
.cn-header__cta-full, .cn-header__toggle { display: none; }

/* ---------- 1024–1279: sem o bloco de data ---------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .cn-header__date { display: none; }
}

/* ---------- ≤1023: barra compacta + painel ---------- */
@media (max-width: 1023px) {
  .cn-header__pill {
    flex-wrap: wrap; gap: 6px;
    padding: var(--space-8) var(--space-12) var(--space-8) var(--space-20); /* respiro maior nas laterais */
  }
  /* no mobile a barra já é compacta (62): ao rolar só entra o vidro */
  .cn-header.is-scrolled .cn-header__pill { min-height: var(--header-h); padding-block: var(--space-8); }
  .cn-header__logo { width: auto; height: 44px; margin-right: auto; }
  /* logo encostado à esquerda; base 0 = ocupa só o que sobra ao lado do CTA e do menu (nunca quebra a linha) */
  .cn-header__logo { min-width: 0; flex: 1 1 0; display: flex; justify-content: flex-start; }
  .cn-header__logo img { width: 124px; max-width: 100%; } /* até 124px; menor se o espaço não der */
  @media (max-width: 374px) { .cn-header__pill { padding-inline: var(--space-16) var(--space-10); } } /* 360: respiro um pouco menor */

  /* CTA da barra: 44px de altura (área de toque mínima), texto 13px, seta 30px.
     O logo se ajusta ao que sobra (clamp abaixo) para tudo caber numa linha em 360. */
  .cn-header__cta { order: 1; flex: none; min-height: 44px; gap: 6px; padding: 0 6px 0 var(--space-12); font-size: 13px; letter-spacing: .01em; }
  .cn-header__cta .cn-btn__arrow { width: 28px; height: 28px; }
  .cn-header__cta .cn-btn__arrow svg { width: 14px; height: 14px; }

  .cn-header__toggle {
    order: 2; display: grid; place-items: center; flex: none;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--lilac-100); color: var(--purple-900);
  }
  .cn-header__toggle svg { width: 24px; height: 24px; }
  .cn-header__icon-close, .cn-header.is-open .cn-header__icon-open { display: none; }
  .cn-header.is-open .cn-header__icon-close { display: block; }

  /* Painel: ocupa a linha inteira abaixo da barra */
  .cn-header__menu {
    order: 3; flex: 0 0 100%;
    display: none; flex-direction: column; align-items: stretch;
    overflow: hidden;
  }
  .cn-header.is-open .cn-header__menu { display: flex; }
  .no-js .cn-header__menu { display: flex; } /* sem JS o menu fica sempre aberto */
  .no-js .cn-header__toggle { display: none; }

  .cn-header__nav { margin: var(--space-8) 0 0; border-top: 1px solid var(--gray-200); padding-top: var(--space-8); }
  .cn-header__links { flex-direction: column; gap: 0; }
  .cn-header__links li + li { border-top: 1px solid var(--gray-200); }
  .cn-header__link {
    display: flex; align-items: center; min-height: 52px;
    padding: var(--space-12); border-radius: var(--radius-sm);
    font-size: var(--fs-body-l);
  }
  .cn-header__indicator { display: none; }
  .cn-header .cn-header__link[aria-current="true"] { background: var(--lilac-100); }

  .cn-header__date { margin: var(--space-16) var(--space-12) 0; }
  .cn-header__cta-full { display: flex; width: 100%; margin: var(--space-16) 0 var(--space-4); }

  /* Max. altura do painel: rola por dentro em telas baixas */
  .cn-header.is-open .cn-header__pill { max-height: calc(100dvh - 2 * var(--header-top)); overflow-y: auto; }
}

/* Página travada com o menu aberto (sem Lenis) */
html.cn-scroll-lock { overflow: hidden; }