/* El Catalejo — navegación y pie de página unificados (compartido por todas las páginas navegables) */

/* ===== Barra de navegación ===== */
.site-nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 0; border-bottom:1px solid var(--line); margin-bottom:4px;
  position:sticky; top:0; z-index:100; background:var(--paper);
}
.nav-brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.nav-mark{ display:block; border-radius:5px; flex:0 0 auto; }
.nav-wordmark{
  font-family:"Fraunces",serif; font-weight:500; font-size:20px;
  letter-spacing:-0.02em; color:var(--ink); line-height:1;
}

.nav-panel{ display:flex; align-items:center; gap:28px; }
.nav-links{ display:flex; gap:24px; align-items:center; }
.nav-links a{
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft); text-decoration:none;
  position:relative; padding-bottom:3px; transition:color .2s ease;
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a.is-active{ color:var(--ink); }
.nav-links a.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px;
  height:1.5px; background:var(--accent);
}

.nav-toggles{ display:flex; align-items:center; gap:10px; }

/* segmented toggle (idioma / tema) — definido aquí para las páginas que no lo traen inline */
.site-nav .seg{ display:inline-flex; border:1px solid var(--line); border-radius:2px; overflow:hidden; }
.site-nav .seg button{
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; background:transparent; color:var(--ink-soft);
  border:none; padding:7px 11px; cursor:pointer; transition:all .2s ease;
}
.site-nav .seg button.active{ background:var(--ink); color:var(--paper); }
.site-nav .seg button:not(.active):hover{ color:var(--ink); }

/* hamburguesa — oculta en escritorio */
.nav-toggle{
  display:none; background:transparent; border:1px solid var(--line);
  border-radius:2px; width:38px; height:34px; cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.nav-burger, .nav-burger::before, .nav-burger::after{
  display:block; width:16px; height:1.5px; background:var(--ink);
  transition:transform .25s ease, opacity .25s ease;
}
.nav-burger{ position:relative; }
.nav-burger::before, .nav-burger::after{ content:""; position:absolute; left:0; }
.nav-burger::before{ top:-5px; }
.nav-burger::after{ top:5px; }
.site-nav.open .nav-burger{ background:transparent; }
.site-nav.open .nav-burger::before{ transform:translateY(5px) rotate(45deg); }
.site-nav.open .nav-burger::after{  transform:translateY(-5px) rotate(-45deg); }

/* ===== Pie de página ===== */
.site-footer{
  border-top:1px solid var(--line); margin-top:60px; padding-top:30px; padding-bottom:40px;
  font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-soft);
  letter-spacing:.06em; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
}
.site-footer .foot-links{ display:flex; gap:20px; flex-wrap:wrap; }
.site-footer a{ color:var(--ink-soft); text-decoration:none; }
.site-footer a:hover{ color:var(--ink); }

/* ===== Móvil ===== */
@media (max-width:640px){
  .site-nav{ flex-wrap:wrap; padding:14px 0; }
  .nav-toggle{ display:inline-flex; }
  .nav-panel{
    display:none; flex-basis:100%; width:100%;
    flex-direction:column; align-items:stretch; gap:18px;
    padding:18px 2px 6px;
  }
  .site-nav.open .nav-panel{ display:flex; }
  .nav-links{ flex-direction:column; gap:16px; align-items:flex-start; }
  .nav-links a{ font-size:12px; padding-bottom:2px; }
  .nav-links a.is-active::after{ bottom:-2px; right:auto; width:1.6em; }
  .nav-toggles{ gap:12px; }
  .site-footer{ flex-direction:column; gap:16px; }
}