/* =========================
   NAV — layout L | C | R + hover con “fill sweep” y letras invertidas
   ========================= */

.site-nav{
  position: sticky;
  top: 0;
  inset-inline: 0;
  z-index: 1000;
  background: transparent;
  --ink: #111;
  --ink-contrast: #fff;
}

html.dark .site-nav{
  --ink: #fff;
  --ink-contrast: #000;
}

.site-nav .nav-inner{
  width: 100%;
  padding: 10px clamp(16px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* izquierda | centro | derecha */
  align-items: center;
  gap: 16px;
}

/* IZQUIERDA: brand */
.site-nav .brand{
  justify-self: start;
  font-weight: 700; /* antes 800 */
  letter-spacing: -0.02em;
  font-size: clamp(16px, 2.2vw, 18px);
  text-decoration: none;
  color: var(--ink);
  line-height: 1;
  padding: 6px 2px;
  position: relative;
}

/* CENTRO: menú */
.site-nav .primary{
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 32px);
}

/* DERECHA: controles */
.site-nav .nav-aux{
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Enlaces/botones con fill-sweep */
.site-nav a,
.site-nav .theme-btn,
.site-nav .lang-btn{
  position: relative;
  display: inline-block;
  padding: 6px 2px;
  line-height: 1;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  font: inherit;
  font-weight: 600; /* antes 700 */
  cursor: pointer;
  z-index: 0;
  transition: color 0.25s ease;
}

.site-nav a::after,
.site-nav .theme-btn::after,
.site-nav .lang-btn::after{
  content:"";
  position:absolute;
  top:0; left:0;
  width:0; height:100%;
  background-color: var(--ink);
  z-index:-1;
  transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: width;
}

.site-nav a:hover::after,
.site-nav .theme-btn:hover::after,
.site-nav .lang-btn:hover::after{
  width:100%;
}
.site-nav a:hover,
.site-nav .theme-btn:hover,
.site-nav .lang-btn:hover{
  color: var(--ink-contrast);
}

/* Estado activo opcional (no aplicado por defecto) */
.site-nav .primary a.is-active::after{ width:100%; }
.site-nav .primary a.is-active{ color: var(--ink-contrast); }

/* Botones */
.site-nav .theme-btn,
.site-nav .lang-btn{
  appearance: none;
}

@media (max-width: 860px){
  .site-nav .primary{ gap: 16px; }
}