/**
 * Contrato de posicion de la barra de navegacion.
 *
 * Vive aparte y lo cargan TODAS las paginas con barra, al final del <head>,
 * despues del <style> de la pagina: lo que se declara aqui gana. El motivo es
 * el bug que lo trajo. La barra estaba copiada unas treinta y siete veces en
 * los <style> de cada pagina, cada copia derivo por su lado, y la altura de la
 * barra acabo dependiendo de en que pagina estabas. Las reglas que deciden
 * donde se dibuja la barra y cuanto mide ahora estan solo aqui.
 *
 * Lo que NO vive aqui, y sigue en cada pagina: color de fondo, desenfoque,
 * tipografia, y el menu movil desplegable. Eso es apariencia, no posicion.
 *
 * La estructura tambien es una sola desde la unificacion: marca
 * "Jorge Aguilar" a la izquierda enlazando a la raiz de su idioma, los cinco
 * enlaces de sitio en .nav-links, y la misma hamburguesa en todas las
 * paginas. Ya no hay variante con flecha de volver; la vuelta atras es el
 * boton del navegador y la marca.
 *
 * La derecha de la fila son dos piezas y solo dos: selector de idioma y CTA
 * de contacto. Llevo un boton de descarga del CV y se quito: la publicacion
 * sirve su propia barra y nunca lo tuvo, asi que al cruzar a /motion/ la
 * barra cambiaba de contenido, y su etiqueta media distinto en cada idioma
 * ("Download CV" / "Lebenslauf" / "Curriculum"), asi que sumada al CTA hacia
 * que este extremo creciera y se encogiera al cambiar de idioma. El CV se
 * descarga desde /about/#cv. Si vuelve aqui, vuelven las dos cosas.
 *
 * Regla para quien edite esto: si una pagina necesita cambiar la altura o la
 * posicion de su barra, el cambio va aqui, no en la pagina. Un override por
 * pagina es exactamente lo que estamos arreglando.
 */

/* --nav-x es el margen lateral; cada pagina puede fijarlo, pero el relleno
   vertical (20px) no se negocia: es lo que hace que la barra mida 85px en
   todas partes. */
.nav{
  position:sticky;top:0;z-index:20;
  padding:20px var(--nav-x,32px);
  border-bottom:1px solid var(--border);
}

.nav-inner{
  max-width:1320px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}

/* La altura de la barra no puede depender del largo de sus propias etiquetas.
   Sin esto, "Jorge Aguilar" parte en dos lineas cuando la fila va justa y la
   barra crece 3px en esa pagina y solo en esa. */
.nav-brand{white-space:nowrap;}

/* Holgura de la fila antes del corte a hamburguesa. Entre 900 y 1000px los
   cinco enlaces, el selector de idioma y el CTA caben, pero con el gap de 28px
   van justos, y en DE/ES el CTA es mas ancho ("Kontakt aufnehmen"). El corte
   estaba en 1000px porque tambien era donde la etiqueta del CV pasaba de
   "Download CV" a "CV"; ese boton ya no existe, pero el gap reducido sigue
   siendo lo que evita que la fila se parta. */
@media (max-width:1000px){
  .nav-links{gap:16px;}
}

/* Barra compacta + hamburguesa. El corte esta en 900px y no en 800px porque
   entre 800 y 870 la fila no cabia: en DE el CTA "Kontakt aufnehmen" y el
   selector de idioma se salian del borde derecho, y como el body recorta el
   desbordamiento el CTA aparecia cortado en vez de con scroll. Eso se midio
   con el boton del CV todavia en la fila, asi que hoy sobra sitio; el corte
   se queda donde esta igualmente, porque no es solo suyo: tiene que moverse
   junto con el de .nav-toggle/.nav-links en cada pagina, el de .mobile-menu
   (min-width:901px) y el guardia de resize del script del menu. Padding
   compacto, hamburguesa y overlay van siempre a la par, y bajarlo es tocar
   las 38 paginas. A partir de 901px la fila cabe en los tres idiomas. */
@media (max-width:900px){
  .nav{padding:14px var(--nav-x-sm,20px);}
}

/* Auto-ocultar al bajar. El estado lo pone /nav.js; aqui solo la transicion.
   transform y no top, para no recalcular layout en cada fotograma. */
.nav{transition:transform .2s ease;will-change:transform;}
.nav.nav-hidden{transform:translateY(-100%);}
@media (prefers-reduced-motion:reduce){
  .nav{transition:none;}
}

/* Subrayado del enlace activo. Esto es apariencia y por regla general iria en
   cada pagina, pero vive aqui a proposito: ninguna pagina ponia
   text-decoration en sus enlaces de barra, asi que el subrayado que se veia en
   los cinco no lo pintaba nadie, lo pintaba el navegador (el estilo de UA de
   <a href>). Con el reset en una pagina sola el bug sigue en las otras 37, y
   esta hoja la cargan todas al final del <head>: es el unico sitio donde se
   apaga una vez.

   El reset va sobre .nav y .mobile-menu completos, no sobre .nav-links, porque
   la marca y el CTA tambien son enlaces y tambien lo llevaban. */
.nav a,
.mobile-menu a{text-decoration:none;}

/* Y se devuelve solo al enlace de la pagina en que estas. El marcador es
   aria-current y no .is-active porque es el que ya lee el lector de pantalla;
   que lo visible y lo anunciado salgan del mismo atributo evita que uno derive
   del otro. La misma regla sirve para la fila de escritorio y para el menu
   movil. */
.nav-links a[aria-current="page"],
.mobile-menu-links a[aria-current="page"]{
  text-decoration:underline;
  text-underline-offset:4px;
}

/* El selector de idioma queda fuera. Su chip activo tambien lleva
   aria-current="page", y .lang-switch va dentro de .nav-links, asi que la regla
   de arriba lo alcanzaba y le ganaba por especificidad al text-decoration:none
   de la pagina: el chip EN salia subrayado dentro de su pastilla. Es un control
   segmentado, no un enlace de sitio; lo activo ya se marca con el fondo de
   acento. Misma especificidad que la regla de arriba (0,2,1) y declarado
   despues, asi que gana por orden. */
.lang-switch a[aria-current="page"]{text-decoration:none;}