/* ============================================================================
   MENU TALLER — la barra de navegacion del sitio, IDENTICA en todas las
   paginas. Es el CSS del menu de la portada, extraido a un fichero compartido
   para que no vuelva a divergir entre familias de pagina.

   Los selectores van anclados a .nav (p.ej. ".nav .nav-links a" en vez de
   ".nav-links a") porque varias paginas conservan su CSS de menu antiguo con
   los MISMOS nombres de clase, y reglas como ".nav-links > li > a" ganaban
   por especificidad al menu compartido.

   Necesita el filtro SVG #rough-nav (la banda rasgada del fondo). Si falta,
   Chrome no dibuja el pseudo-elemento y la barra se queda sin fondo.
   ========================================================================= */

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:50;background:transparent;border:none;box-shadow:none}
/* banda oscura irregular/rasgada detrás del menú (el texto queda nítido) */
.nav::before{content:'';position:absolute;left:-3%;right:-3%;top:-10px;bottom:-16px;z-index:-1;
  background:linear-gradient(180deg, rgba(58,38,22,.68), rgba(40,26,15,.76));
  filter:url(#rough-nav);
  box-shadow:0 7px 18px rgba(0,0,0,.34)}
.nav .nav-in{display:flex;align-items:center;gap:1rem;max-width:1160px;margin:0 auto;padding:.6rem 1.25rem}
.nav .brand{display:flex;align-items:center;gap:.55rem;color:#f6ecd8;font-family:var(--font-poster);font-weight:700;font-size:1.3rem}
.nav .brand .logo{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.nav .brand span{color:var(--yellow)}
.nav .nav-links{list-style:none;display:flex;align-items:center;gap:.3rem;margin:0 auto}
.nav .nav-links a, .nav .nav-dd-btn{font-family:var(--font);font-weight:700;font-size:.95rem;color:#efe2c9;padding:.45rem .8rem;border-radius:8px;background:none;border:none;cursor:pointer;transition:.15s;position:relative}
.nav .nav-links a:hover, .nav .nav-dd-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav .nav-links a.active{color:var(--yellow)}
.nav .nav-links a.active::after{content:'';position:absolute;left:.6rem;right:.6rem;bottom:2px;height:3px;background:var(--yellow);border-radius:3px;transform:rotate(-1deg)}
.nav .nav-dd{position:relative}
.nav .nav-dd-menu{position:absolute;top:calc(100% + .4rem);left:0;min-width:250px;background:var(--paper) url("kraft-paper.png") center/300px;
  border-radius:10px;box-shadow:0 14px 30px rgba(0,0,0,.4);padding:.5rem;opacity:0;visibility:hidden;transform:translateY(6px);transition:.15s;z-index:60}
.nav .nav-dd:hover .nav-dd-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav .nav-dd-menu a{display:flex;align-items:center;gap:.55rem;color:var(--ink);padding:.5rem .65rem;border-radius:7px;font-weight:700;font-size:.88rem}
.nav .nav-dd-menu a:hover{background:rgba(120,85,45,.12)}
.nav .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.nav .nav-sec{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);padding:.45rem .65rem .2rem}
.nav .nav-div{height:1px;background:var(--line);margin:.35rem .3rem}
.nav .nav-enter{font-family:var(--font-poster);font-weight:700;background:var(--yellow);color:#4a3410;padding:.45rem 1.2rem;border-radius:10px;font-size:1.05rem;
  box-shadow:0 4px 0 var(--yellow-d);transition:.1s}
.nav .nav-enter:hover{transform:translateY(1px);box-shadow:0 3px 0 var(--yellow-d)}
.nav .mtoggle{display:none;background:rgba(255,255,255,.1);border:none;color:#f6ecd8;font-size:1.3rem;width:44px;height:44px;border-radius:10px;cursor:pointer}
.nav .steam-lang{display:inline-flex;background:rgba(255,255,255,.1);border-radius:100px;padding:3px;gap:2px}
.nav .steam-lang-btn{border:none;background:none;font-weight:800;font-size:.78rem;padding:.28rem .6rem;border-radius:100px;cursor:pointer;color:#e6d7bb;font-family:var(--font)}
.nav .steam-lang-btn.on{background:var(--yellow);color:#4a3410}
/* selector idioma integrado en la barra (gana al CSS que inyecta i18n) */
.nav-in .steam-lang{background:rgba(255,255,255,.1)!important;border:none!important;border-radius:100px!important;padding:3px!important;flex-shrink:0}
.nav-in .steam-lang-btn{color:#e6d7bb!important;font-family:var(--font)!important;font-size:.78rem!important;font-weight:800!important;padding:.28rem .6rem!important}
.nav-in .steam-lang-btn.on{background:var(--yellow)!important;color:#4a3410!important}
.mobile-menu{display:none;flex-direction:column;background:#3f2a1a;padding:.5rem 1.1rem 1rem}
.mobile-menu.open{display:flex}
.mobile-menu a{color:#efe2c9;padding:.65rem .3rem;font-weight:700;border-bottom:1px solid rgba(255,255,255,.08)}


/* el menu movil no cuelga de .nav, se asegura con !important */
.mobile-menu{background:#3f2a1a!important;border-radius:0!important;box-shadow:none!important}
.mobile-menu a{color:#efe2c9!important;border-bottom:1px solid rgba(255,255,255,.08)!important}

/* Con seis entradas el menu ya no cabe como con dos: los items se encogian y
   "Sesiones de aula" partia en dos lineas. Se impide el corte de linea y se
   pasa antes al menu hamburguesa (1080px en vez de 960px). */
.nav .nav-links > li{flex:0 0 auto}
.nav .nav-links > li > a,
.nav .nav-links > li > .nav-dd-btn{white-space:nowrap;padding:.45rem .6rem}

@media(max-width:1080px){
  .nav .nav-links{display:none}
  .nav .mtoggle{display:grid;place-items:center}
}

/* ============================================================================
   NORMALIZACION DE ALTURA
   Varias paginas conservan reglas propias que agrandaban los items del menu:
   la barra medía 94px en unas y 74px en otras. Se fija aqui el alto de los
   items de primer nivel. Se acota a los HIJOS DIRECTOS para no tocar los
   enlaces del desplegable, que deben seguir siendo filas completas (flex).
   ========================================================================= */
.nav .nav-links{align-items:center}
.nav .nav-links > li{display:flex;align-items:center;line-height:1;margin:0;padding:0;list-style:none}
.nav .nav-links > li > a,
.nav .nav-links > li > .nav-dd-btn{
  display:inline-flex;align-items:center;line-height:1.2;
  height:auto;min-height:0;margin:0;
}