/* ============================================================
   MIRADOR DEL ARIARI — nav.css
   ============================================================ */

/* ── LOADER ── */
.loader {
  position:fixed; inset:0; z-index:9000;
  background:var(--noche);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:28px;
  transition:opacity .7s .2s, visibility .7s .2s;
}
.loader.out { opacity:0; visibility:hidden; }

.loader-word {
  font-family:var(--serif);
  font-size:clamp(28px,4vw,44px);
  color:var(--marfil);
  letter-spacing:1px;
  overflow:hidden;
}
.loader-word span {
  display:inline-block;
  transform:translateY(110%);
  animation:ldrUp .6s cubic-bezier(.16,1,.3,1) forwards;
}
.loader-word span:nth-child(1) { animation-delay:.05s; }
.loader-word span:nth-child(2) { animation-delay:.12s; }
.loader-word span:nth-child(3) { animation-delay:.19s; }
.loader-word span:nth-child(4) { animation-delay:.26s; }
.loader-word span:nth-child(5) { animation-delay:.33s; }
.loader-word span:nth-child(6) { animation-delay:.40s; }
.loader-word span:nth-child(7) { animation-delay:.47s; }
.loader-word span:nth-child(8) { animation-delay:.54s; }

@keyframes ldrUp {
  to { transform:translateY(0); }
}

.loader-line {
  width:180px; height:1px;
  background:var(--borde);
  position:relative; overflow:hidden;
}
.loader-line::after {
  content:''; position:absolute;
  inset:0;
  background:linear-gradient(to right, var(--cobre), var(--cobre2));
  transform:translateX(-100%);
  animation:ldrBar 1.1s .3s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes ldrBar { to{ transform:translateX(0); } }

/* ── CURSOR ── */
.cur-dot {
  position:fixed; z-index:9500; pointer-events:none;
  width:7px; height:7px;
  background:var(--cobre);
  border-radius:50%;
  transform:translate(-50%,-50%);
  transition:width .18s, height .18s, background .18s;
  mix-blend-mode:normal;
}
.cur-ring {
  position:fixed; z-index:9499; pointer-events:none;
  width:40px; height:40px;
  border:1px solid rgba(184,115,51,.35);
  border-radius:50%;
  transform:translate(-50%,-50%);
  transition:border-color .3s, width .3s, height .3s;
}

/* ── NAV ── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:28px 64px;
  transition:padding .5s cubic-bezier(.16,1,.3,1),
             background .5s, border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.stuck {
  padding:14px 64px;
  background:rgba(7,12,20,.94);
  backdrop-filter:blur(28px) saturate(1.6);
  border-bottom-color:var(--borde);
}

/* Logo */
.nav-logo {
  display:flex; flex-direction:column; gap:2px; line-height:1;
}
.nav-logo-name {
  font-family:var(--serif);
  font-size:19px; color:var(--marfil);
  letter-spacing:.3px;
}
.nav-logo-sub {
  font-family:var(--sans);
  font-size:9px; font-weight:500;
  letter-spacing:4px; text-transform:uppercase;
  color:var(--cobre2);
}

/* Links */
.nav-links {
  display:flex; align-items:center; gap:32px;
}
.nav-links a {
  font-family:var(--sans); font-size:11px;
  font-weight:500; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--pizarra);
  transition:color .3s; position:relative;
}
.nav-links a::after {
  content:''; position:absolute;
  bottom:-3px; left:0; right:0; height:1px;
  background:var(--cobre);
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.nav-links a:hover, .nav-links a.active { color:var(--marfil); }
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); }

.nav-cta {
  font-family:var(--sans); font-size:10px;
  font-weight:600; letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--noche); background:var(--cobre);
  padding:10px 22px;
  transition:background .3s, box-shadow .3s;
}
.nav-cta:hover {
  background:var(--cobre2);
  box-shadow:0 4px 24px rgba(184,115,51,.5);
}

/* Hamburger */
.nav-ham {
  display:none; flex-direction:column;
  gap:6px; padding:4px; background:none; border:none;
}
.nav-ham span {
  display:block; width:24px; height:1px;
  background:var(--marfil);
  transition:all .35s cubic-bezier(.16,1,.3,1);
  transform-origin:center;
}
.nav-ham.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-ham.open span:nth-child(2) { opacity:0; transform:translateX(10px); }
.nav-ham.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* Mobile panel */
.nav-panel {
  position:fixed; inset:0; z-index:490;
  background:var(--noche2);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:0;
  transform:translateY(-100%);
  transition:transform .55s cubic-bezier(.16,1,.3,1);
  overflow:hidden;
}
.nav-panel.open { transform:translateY(0); }

/* Diagonal split line */
.nav-panel::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg, transparent 50%, rgba(184,115,51,.04) 50%);
  pointer-events:none;
}

.nav-panel a {
  font-family:var(--serif);
  font-size:clamp(36px,7vw,60px);
  font-weight:400; color:var(--marfil2);
  padding:12px 0; width:100%;
  text-align:center;
  border-bottom:1px solid var(--borde);
  transition:color .3s, padding-left .3s;
  position:relative; overflow:hidden;
}
.nav-panel a:first-child { border-top:1px solid var(--borde); }
.nav-panel a:hover { color:var(--cobre2); padding-left:16px; }
.nav-panel-footer {
  margin-top:36px;
  font-size:12px; color:var(--pizarra);
  letter-spacing:2px; text-transform:uppercase;
}

/* Responsive nav */
@media(max-width:1024px) {
  .nav { padding:20px 36px; }
  .nav.stuck { padding:12px 36px; }
  .nav-links, .nav-cta { display:none; }
  .nav-ham { display:flex; }
}
@media(max-width:640px) {
  .nav { padding:16px 20px; }
  .nav.stuck { padding:10px 20px; }
}