/* ==========================================================================
   01 · HEADER / NAVEGAÇÃO
   Barra fixa: transparente sobre o hero, sólida depois que o scroll começa.
   Mobile (< 64em): logo + botão de menu, menu em tela cheia com links grandes.
   Desktop (>= 64em): logo + identificação técnica + links + CTA verde.
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  color: var(--c-ink);
  border-bottom: var(--bw) solid transparent;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.site-header.is-scrolled {
  background-color: var(--c-paper);
  background-image: var(--tex-paper);
  border-bottom-color: var(--c-ink);
}

.site-header.is-menu-open {
  color: var(--c-paper);
}

/* Barra ------------------------------------------------------------------ */
.site-header__bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  height: var(--header-h);
  transition: height var(--dur-base) var(--ease-out);
}

.site-header.is-scrolled .site-header__bar {
  height: var(--header-h-scrolled);
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.site-header .wordmark {
  --wordmark-size: clamp(1.3rem, 1.05rem + 0.75vw, 1.75rem);
}

/* Identificação técnica (só em telas largas) ----------------------------- */
.site-header__tag {
  display: none;
  padding-left: var(--sp-4);
  border-left: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-fg-soft);
}

@media (min-width: 82em) {
  .site-header__tag {
    display: block;
  }
}

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

@media (min-width: 64em) {
  .site-nav {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, -1rem + 2.4vw, 2rem);
  }
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0rem, -1.5rem + 2.2vw, 1rem);
  padding: 0;
  list-style: none;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.75em 0.3em;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  white-space: nowrap;
}

@media (min-width: 75em) {
  .nav-link,
  .site-nav__cta {
    font-size: var(--fs-xs);
  }
}

.nav-link__br {
  transition: transform var(--dur-base) var(--ease-out);
}

/* O realce verde cresce da esquerda; na seção atual vira um sublinhado grosso. */
.nav-link__text {
  padding: 0.3em 0.2em;
  background-image: linear-gradient(var(--c-acid), var(--c-acid));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 100%;
  transition: background-size var(--dur-base) var(--ease-out);
}

.nav-link.is-current .nav-link__text {
  background-size: 100% 0.32em;
}

@media (hover: hover) {
  .nav-link:hover .nav-link__br:first-child {
    transform: translateX(-4px);
  }

  .nav-link:hover .nav-link__br:last-child {
    transform: translateX(4px);
  }

  .nav-link:hover .nav-link__text {
    background-size: 100% 100%;
  }
}

.nav-link:focus-visible .nav-link__text {
  background-size: 100% 100%;
}

.site-nav__cta.is-current {
  box-shadow: inset 0 0 0 var(--bw) var(--c-ink);
}

/* Botão do menu (mobile) ------------------------------------------------- */
.menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-right: -0.625rem;
  color: inherit;
}

html:not(.js) .menu-toggle {
  display: none;
}

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

.menu-toggle__icon {
  --line: 3px;
  --box: 1.125rem;
  position: relative;
  width: 1.75rem;
  height: var(--box);
}

.menu-toggle__icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--line);
  background: currentColor;
  transition:
    transform var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) linear;
}

.menu-toggle__icon span:nth-child(1) {
  top: 0;
}

.menu-toggle__icon span:nth-child(2) {
  top: calc(50% - var(--line) / 2);
}

.menu-toggle__icon span:nth-child(3) {
  bottom: 0;
}

.is-menu-open .menu-toggle__icon span:nth-child(1) {
  transform: translateY(calc(var(--box) / 2 - var(--line) / 2)) rotate(45deg);
}

.is-menu-open .menu-toggle__icon span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.is-menu-open .menu-toggle__icon span:nth-child(3) {
  transform: translateY(calc(var(--line) / 2 - var(--box) / 2)) rotate(-45deg);
}

/* Menu mobile em tela cheia ---------------------------------------------- */
.mobile-menu {
  --menu-close: 420ms;
  --menu-open: 620ms;
  position: fixed;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + var(--sp-5)) var(--gutter)
    calc(var(--sp-6) + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--c-ink);
  color: var(--c-paper);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path var(--menu-close) var(--ease-in-out),
    visibility 0s linear var(--menu-close);
}

.site-header.is-menu-open .mobile-menu {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition:
    clip-path var(--menu-open) var(--ease-out),
    visibility 0s linear 0s;
}

@media (min-width: 64em) {
  .mobile-menu {
    display: none;
  }
}

.mobile-menu__kicker {
  margin-bottom: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-acid);
}

.mobile-menu__list {
  padding: 0;
  list-style: none;
  border-top: 1px solid rgb(245 245 245 / 0.16);
}

.mobile-menu__item {
  --i: 0;
  border-bottom: 1px solid rgb(245 245 245 / 0.16);
}

.mobile-menu__item:nth-child(2) { --i: 1; }
.mobile-menu__item:nth-child(3) { --i: 2; }
.mobile-menu__item:nth-child(4) { --i: 3; }
.mobile-menu__item:nth-child(5) { --i: 4; }

.mobile-menu__link {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
}

.mobile-menu__num {
  flex: none;
  min-width: 2ch;
  padding-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  color: var(--c-acid);
}

/* Máscara para a entrada de baixo para cima. O respiro no topo protege os acentos. */
.mobile-menu__mask {
  display: block;
  padding-top: 0.08em;
  overflow: hidden;
}

.mobile-menu__label {
  display: flex;
  align-items: flex-start;
  gap: 0.12em;
  font-family: var(--font-display);
  /* Cresce com a largura, mas a altura limita no celular deitado. */
  font-size: clamp(2.35rem, min(13.5vw, 8.5svh), 4.75rem);
  font-weight: 900;
  font-stretch: var(--stretch-tight);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  transform: translateY(110%);
  transition:
    transform var(--menu-close) var(--ease-in-out),
    translate var(--dur-fast) var(--ease-out),
    color var(--dur-fast) linear;
}

.is-menu-open .mobile-menu__label {
  transform: none;
  transition:
    transform var(--menu-open) var(--ease-out) calc(140ms + var(--i) * 50ms),
    translate var(--dur-fast) var(--ease-out),
    color var(--dur-fast) linear;
}

.mobile-menu__link:focus-visible .mobile-menu__label,
.mobile-menu__link.is-current .mobile-menu__label,
.mobile-menu__link:active .mobile-menu__label {
  color: var(--c-acid);
  translate: 0.18em 0;
}

@media (hover: hover) {
  .mobile-menu__link:hover .mobile-menu__label {
    color: var(--c-acid);
    translate: 0.18em 0;
  }
}

.mobile-menu__link:focus-visible {
  outline-color: var(--c-acid);
  outline-offset: 2px;
}

/* Contato: o destino principal ganha verde e seta. */
.mobile-menu__item--cta .mobile-menu__label {
  color: var(--c-acid);
}

.mobile-menu__label .arrow-swap {
  width: 0.42em;
  height: 0.42em;
  margin-top: 0.1em;
}

.mobile-menu__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: auto;
  padding-top: var(--sp-7);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.45;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgb(245 245 245 / 0.62);
  opacity: 0;
  transition: opacity var(--dur-fast) linear;
}

.is-menu-open .mobile-menu__foot {
  opacity: 1;
  transition: opacity var(--dur-slow) linear 420ms;
}

.mobile-menu__foot .stripes {
  --stripes-color: var(--c-acid);
}