/* ==========================================================================
   Navbar fixa + menu mobile em tela cheia
   Monograma à esquerda, links no centro. Sem "Agendar" aqui:
   o agendamento fica só no botão ilustrado do hero.
   ========================================================================== */

.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:20;
  height:var(--nav-h);
  padding:env(safe-area-inset-top,0px) clamp(16px,3.2vw,48px) 0;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  background:linear-gradient(#000 35%,rgba(0,0,0,0));
  transition:opacity .5s ease;
}

/* ---------- monograma ---------- */
.brand{justify-self:start;display:flex;align-items:center;height:100%}
.brand img{height:calc(var(--nav-h) * .8);width:auto;display:block}

/* ---------- links ---------- */
.links{display:flex;gap:clamp(20px,2.6vw,44px)}

.links a,
.cta,
.menu a{
  font-family:var(--f-ui);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:11.5px;
}

.links a{color:var(--ink-soft);padding:8px 0;position:relative;transition:color .25s}
.links a:hover,
.links a[aria-current="page"]{color:var(--ink-hi)}

/* ponto vermelho sob o link ativo */
.links a[aria-current="page"]::before{
  content:"";
  position:absolute;
  left:50%;bottom:-2px;
  width:5px;height:5px;
  margin-left:-.16em;          /* compensa o tracking da última letra */
  background:var(--sharingan);
  transform:translateX(-50%);
}

/* Reservado: botão de CTA na navbar. O Victor pediu para tirar o "Agendar"
   daqui; a regra fica caso volte, mas não há elemento no HTML. */
.cta{
  justify-self:end;
  color:var(--ink-hi);
  border:1px solid color-mix(in srgb,var(--sharingan) 75%,transparent);
  padding:12px 18px 12px calc(18px + .32em);
  transition:background .25s,border-color .25s;
}
.cta:hover{background:var(--sharingan);border-color:var(--sharingan)}

.links a:focus-visible,
.cta:focus-visible,
.brand:focus-visible,
.burger:focus-visible,
.menu a:focus-visible{outline:1px solid var(--ink-hi);outline-offset:6px}

/* ---------- hambúrguer ---------- */
.burger{
  display:none;
  justify-self:end;
  width:44px;height:44px;
  border:0;padding:0;
  background:none;
  cursor:pointer;
  position:relative;
}
.burger i{
  position:absolute;
  left:10px;right:10px;
  height:1.5px;
  background:var(--ink-hi);
  transition:transform .3s,top .3s;
}
.burger i:first-child{top:17px}
.burger i:last-child{top:25px;left:18px}
.burger[aria-expanded="true"] i:first-child{top:21px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{top:21px;left:10px;transform:rotate(-45deg)}

/* ---------- menu em tela cheia ---------- */
.menu{
  position:fixed;
  inset:0;
  z-index:15;
  background:var(--void);
  display:grid;
  align-content:center;
  justify-items:center;
  gap:28px;
  padding-inline:16px;
}
.menu a{font-size:15px;color:var(--ink-hi)}
.menu[hidden]{display:none}

/* ---------- entrada (coreografada pelo hero) ---------- */
.intro .nav{opacity:0}
.play .nav{transition:opacity .6s ease-out .2s}

/* ---------- imersão: some durante a sequência do genjutsu (Sobre) ---------- */
.imersao .nav{opacity:0;pointer-events:none}

/* ---------- responsivo ---------- */
@media (max-width:860px){
  .links,.nav .cta{display:none}
  .burger{display:block}
  .nav{grid-template-columns:1fr auto}
}