/* =============================================================================
   Cloudyn — A NAVBAR
   A barra do topo e o botão de Login magnético.

   Este arquivo é uma FATIA do antigo assets/css/loader.css, que guardava o site
   inteiro em 1511 linhas. A ordem de carga importa (ver o bloco de <link> no
   HTML): a cascata é a mesma de antes, arquivo a arquivo, na mesma sequência.
   ============================================================================= */

/* ============================== NAVBAR ================================= */
/* o "fundo do fundo" branco fica limpo quando a tela recua no card */
body.revealed .site .word { opacity: 0; }

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 48px;
  padding: 0 clamp(16px, 2.6vw, 34px) 0 clamp(8px, 1.2vw, 14px);  /* logo mais "na parede" */
  /* SÓ o blur/desfoque do que passa atrás — sem tinta, sem borda, sem sombra */
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  color: var(--white);
  transform: translateY(-110%);   /* escondida acima até descer */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  user-select: none;
}
.nav.is-in { transform: translateY(0); }      /* desce a barra */

/* sobre o rodapé claro do fecho, a barra vira tinta escura. Sem isto ela some
   inteira — osso sobre osso. Ver `nav-escura` em assets/js/loader.js. */
body.nav-escura .nav { color: var(--black); }
body.nav-escura .nav__burger span { background: rgb(var(--ink-rgb) / 0.72); }
body.nav-escura .nav__burger:hover span { background: var(--black); }
body.nav-escura .nav__lang-btn { color: rgb(var(--ink-rgb) / 0.78); }
body.nav-escura .nav__lang-btn:hover { color: var(--black); background: rgb(var(--ink-rgb) / 0.06); }
/* a logo é osso: sobre claro ela precisa inverter, como a do rodapé */
body.nav-escura .nav__logo { filter: invert(1) brightness(0.25); }
body.revealed .nav { pointer-events: auto; }

.nav__group { display: flex; align-items: center; }
.nav__group--left  { gap: clamp(0.4rem, 1.4vw, 1rem); }
.nav__group--right { gap: clamp(0.3rem, 1vw, 0.7rem); }

.nav a, .nav button { color: inherit; text-decoration: none; }

/* três traços IGUAIS — abre o menu do site */
.nav__burger {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: 30px; height: 30px; flex: none;
  padding: 0; border: 0; background: none;
  margin-right: clamp(0.2rem, 0.8vw, 0.6rem);
}
.nav__burger span {
  display: block; width: 20px; height: 2px; flex: none; border-radius: 1px;
  background: rgba(241, 235, 221, 0.8);
  transition: transform 0.35s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.25s ease, background 0.2s ease;
}
.nav__burger:hover span { background: var(--white); }
/* aberto: vira um X */
.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__brand {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--brand-font);
  font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1;
  margin-right: clamp(0.5rem, 1.4vw, 1.1rem);
}
/* nome da marca centralizado na navbar (a logo continua à esquerda) */
.nav__name {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
/* logo da marca — sempre visível, à esquerda, e na cor dela mesma */
.nav__logo {
  width: 1.5em; height: 1.5em; flex: none;
  object-fit: contain; vertical-align: middle;
  -webkit-user-drag: none; user-select: none;
}

/* idioma — ícone de traduzir (não é globo) */
.nav__lang { position: relative; display: flex; }
.nav__lang-btn {
  display: inline-flex; align-items: center; gap: 0.34rem;
  padding: 0.38rem 0.5rem; border: 0; background: none; border-radius: 8px;
  color: rgba(255, 255, 255, 0.78);
  font: inherit; font-size: 0.8rem; font-weight: 500;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav__lang-btn:hover { color: var(--white); background: rgba(255, 255, 255, 0.05); }
.nav__lang-btn svg { width: 15px; height: 15px; }
/* idioma atual ao lado do ícone (ex.: EN / PT / JA) */
.nav__lang-cur { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; }

.nav__lang-menu {
  position: absolute; top: calc(100% + 0.4rem); right: 0;
  min-width: 186px; max-height: 320px; overflow-y: auto;
  padding: 0.3rem 1rem 0.3rem 0.3rem;   /* espaço à direita p/ o retângulo da barra */
  background: rgba(24, 20, 14, 0.95);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  overscroll-behavior: contain;
}
.nav__lang.is-open .nav__lang-menu { opacity: 1; visibility: visible; transform: none; }
/* a busca fica grudada no alto: rolando a lista, ela não sai de cena */
.nav__lang-find {
  position: sticky; top: -0.3rem; z-index: 2;
  display: flex; align-items: center; gap: 0.45rem;
  margin: -0.3rem -1rem 0.3rem -0.3rem;
  padding: 0.55rem 0.7rem;
  background: rgba(24, 20, 14, 0.98);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.nav__lang-find svg { width: 14px; height: 14px; flex: none; color: rgba(255, 255, 255, 0.38); }
.nav__lang-find input {
  width: 100%; border: 0; background: none; outline: none;
  color: var(--white); font: inherit; font-size: 0.82rem;
}
.nav__lang-find input::placeholder { color: rgba(255, 255, 255, 0.34); }

.nav__lang-menu button {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem;
  width: 100%; text-align: left;
  padding: 0.46rem 0.6rem; border: 0; border-radius: 8px;
  background: none; color: rgba(255, 255, 255, 0.58);
  font: inherit; font-size: 0.82rem; font-weight: 500;
  transition: background 0.16s ease, color 0.16s ease;
}
.nav__lang-menu button:hover { background: rgba(255, 255, 255, 0.06); color: var(--white); }
.nav__lang-menu button.is-current { color: var(--accent); }
/* o código desempata nomes parecidos e dá um segundo ponto de leitura */
.nav__lang-code {
  flex: none; text-transform: uppercase;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.26);
}
.nav__lang-menu button:hover .nav__lang-code { color: rgba(255, 255, 255, 0.45); }
.nav__lang-menu button.is-current .nav__lang-code { color: rgba(255, 176, 46, 0.6); }

/* barra do dropdown: o MESMO retângulo âmbar das páginas — só que menor.
   Sem trilho, sem setas, sem canto arredondado. (vence o reset global)        */
.nav__lang-menu { scrollbar-width: none; -ms-overflow-style: none; }
.nav__lang-menu::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* trilho/retângulo próprios (overlay), montados pelo JS do menu.
   Fica FORA da caixa que rola, senão desceria junto com a lista.

   ELE COMEÇA DEPOIS DA BUSCA, e não no alto do menu. O campo de busca fica
   grudado no topo e não rola — barra de rolagem passando ao lado dele diz que
   ele rola. Pior: no início da lista o retângulo âmbar encostava na quina
   arredondada do menu, e ficava a coisa mais gritante da tela sem ter o que
   dizer. `--recuo-da-busca` é a altura do cabeçalho grudado, medida pelo JS a
   cada sincronia (ela muda com o zoom da página e com a fonte do sistema).    */
.nav__lang-rail {
  position: absolute;
  top: calc(100% + 0.4rem + 8px + var(--recuo-da-busca, 0px));
  right: 4px; width: 10px;
  z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity 0.25s ease;
  /* O TRILHO EXISTE, E TEM BORDA.

     Ele era um retângulo âmbar solto no ar: sem calha atrás, o olho não tinha
     como saber onde a barra começa nem quanto falta — o pedaço de cor sozinho
     diz a posição, não a proporção. A calha é o resto do caminho.

     1px de osso a 10% é o mesmo fio que separa o cartão do fundo em todo o
     site; aqui ele fecha a forma sem virar mais um elemento. */
  border: 1px solid rgb(var(--bone-rgb) / 0.1);
  border-radius: 999px;
  background: rgb(var(--bone-rgb) / 0.05);
}
.nav__lang.is-open .nav__lang-rail.is-on { opacity: 1; }
.nav__lang-thumb {
  position: absolute; top: 0; left: 0; right: 0;
  height: 34px;
  background: var(--accent);          /* mesma cor da barra das páginas */
  /* a borda escura separa o âmbar da calha: sem ela, as duas peças encostam e
     viram uma mancha só quando o polegar está no alto ou no pé do curso */
  border: 1px solid rgb(var(--ink-rgb) / 0.5);
  border-radius: 999px;
  will-change: transform;
}

/* CTA monocromático (botão Login — magnético) */
.nav__cta {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 0.7rem;
  padding: 0.42rem 1.1rem; border-radius: 9px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 0.81rem; font-weight: 600;   /* 700 nao existe na General Sans */
  white-space: nowrap;
  will-change: transform;
  transition: filter 0.2s ease;
}
/* garante o texto escuro no botão Login (vence o '.nav a' herdado) */
.nav .nav__cta { color: var(--accent-ink); }
.nav__cta:hover { filter: brightness(1.08); }