/* ============================================================
   nav.css — barra de navegación fija y logo animado.
   ============================================================ */

nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(18px,4vw,44px);
  background:linear-gradient(to bottom,rgba(5,6,13,.82),rgba(5,6,13,0));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
nav.scrolled{border-bottom-color:var(--line-soft);background:rgba(5,6,13,.7)}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:34px;height:34px;border-radius:50%;position:relative;flex:0 0 auto;
  background:
    radial-gradient(circle at 35% 32%, #ffd9a0 0%, var(--orange) 38%, #b23c17 72%, #5c1e0c 100%);
  box-shadow:0 0 18px rgba(232,103,58,.6),inset 0 0 6px rgba(255,220,160,.6);
  animation:spin 26s linear infinite;
}
.logo::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px solid rgba(232,103,58,.4);border-top-color:transparent;border-left-color:transparent;
  animation:spin 12s linear infinite reverse;
}
@keyframes spin{to{transform:rotate(360deg)}}
.brand-name{font-family:var(--serif);font-size:19px;letter-spacing:.2px;color:var(--white)}
.brand-name b{font-weight:400}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--t-70);transition:color .25s}
.nav-links a:hover{color:var(--white)}
.nav-cta{display:flex;gap:12px;align-items:center}