/**
 * 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);
}

/* ── LA PILA DE APILADO, Y POR QUE EL BANNER DE COOKIES VA ENCIMA ───────────
 *
 * Esta hoja declara dos z-index (.nav y .skip-link); los demas viven fuera y
 * se documentan aqui porque es donde se mira cuando algo tapa a algo:
 *
 *   20           .nav          <- aqui, arriba
 *   60           .mobile-menu  <- en el <style> de cada pagina (36 copias)
 *   100          .skip-link    <- aqui, al final; solo visible con foco
 *   2147483646   .cc-veil      <- consent.js:268
 *   2147483647   .cc-banner    <- consent.js:270
 *
 * Con el menu hamburguesa abierto, el banner de consentimiento se pinta ENCIMA
 * del overlay (2147483647 contra 60) pero queda FUERA de la trampa de foco del
 * dialogo, asi que se ve y con el teclado no se puede llegar. Lo levanto la
 * auditoria del 28-10 (§5.4 del parte; el parte de este lote lo cita como
 * §6.3, que es otra cosa --- la divergencia del fondo del overlay).
 *
 * SE DEJA ASI A PROPOSITO. Es el patron modal estandar: un dialogo abierto
 * retiene el foco hasta que se cierra, y Escape --- la convencion universal
 * para cancelar un modal --- lo cierra y da acceso al banner en una tecla.
 * Solo muerde en la primera visita, antes de decidir sobre las cookies.
 *
 * Lo que se descarto: bajar .cc-banner por debajo de 60. El banner usa z-max a
 * proposito para seguir visible sobre cualquier cosa que pinte una pagina, y
 * tocarlo deja la jerarquia incoherente --- y puede esconder otros avisos que
 * dependen de ese mismo techo. Si algun dia hay que resolverlo de verdad, lo
 * correcto no es el z-index: es que la trampa de foco de /nav.js incluya el
 * banner mientras exista, o que el menu no se pueda abrir con el banner en
 * pantalla. Ninguna de las dos entraba en este lote. */

.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;}

/* Contraste de los numerales del menu movil (01, 02, 03...).
 *
 * Esto es apariencia y por la regla de arriba iria en cada pagina, pero vive
 * aqui por el mismo motivo que el reset del subrayado: la declaracion esta
 * copiada 36 veces (35 paginas en su <style> y /contact/form.css para las tres
 * de contacto) y con 4.5:1 de por medio no sirve arreglar una.
 *
 * Estaban en color:var(--muted) con opacity:.55. Sobre el fondo del overlay
 * --- rgba(9,9,11,.97) compuesto sobre --bg #0B0B0D, o sea #09090B --- eso da
 * un #67676C efectivo y 3.54:1: suspende AA de texto normal (4.5:1), y son
 * texto de 10px, asi que no les vale el 3:1 de texto grande.
 *
 *   opacity   efectivo   ratio
 *   .55       #67676C    3.54:1   <- lo que habia
 *   .65       #78787D    4.54:1      justo, sin margen
 *   .72       #84848A    5.36:1   <- esto
 *   .75       #89898F    5.74:1
 *
 * .72 y no .65 para tener margen si --muted o el fondo se mueven, y no .75 ni
 * mas arriba porque el numeral tiene que seguir por debajo de su etiqueta
 * (--fg a 18.58:1): es una referencia, no contenido.
 *
 * Solo opacity. El color se queda en --muted, y las reglas de hover y de
 * enlace activo que suben el numeral a opacity:1 llevan (0,3,1) frente a los
 * (0,2,1) de esta, asi que siguen ganando y el estado activo no se aplana. */
.mobile-menu-links a .num{opacity:.72;}

/* Contraste del pie del menu movil ("Berlin · EMEA"). Misma patologia que los
 * numerales de arriba, mismo componente y las mismas 36 copias: lo detecto la
 * auditoria del overlay completo (§6.2 del parte del 28-10) y se arregla aqui
 * por el mismo motivo --- con 4.5:1 de por medio no sirve arreglar una pagina.
 *
 * Estaba en color:var(--muted) con opacity:.6, y a 10.5px no le vale el 3:1 de
 * texto grande:
 *
 *   opacity   efectivo   sobre #09090B   sobre #0B0B0D
 *   .6        #707075    4.04:1  FAIL    3.99:1  FAIL   <- lo que habia
 *   .65       #78787D    4.53:1          4.54:1            justo, sin margen
 *   .72       #84858A    5.35:1          5.36:1         <- esto
 *
 * Dos fondos porque el overlay diverge en cuatro paginas (§6.3): 32 usan
 * rgba(9,9,11,.97) sobre --bg --- #09090B efectivo --- y 404.html, de/404.html,
 * es/404.html y cv/index.html usan var(--bg) opaco, #0B0B0D. Pasa AA en ambos.
 *
 * .72 y no .65 por la misma razon que el numeral: margen si --muted o el fondo
 * se mueven. Es el mismo valor, y eso es intencionado --- numeral y pie son los
 * dos texto de referencia del mismo componente, al mismo tamano.
 *
 * Solo opacity; el color se queda en --muted. Especificidad (0,1,0), igual que
 * la declaracion de cada pagina, pero esta hoja la cargan todas al FINAL del
 * <head> (comprobado en las 36), asi que gana por orden. */
.mobile-menu-foot{opacity:.72;}

/* ── SALTAR AL CONTENIDO (WCAG 2.4.1) ──────────────────────────────────────
 * Primer hijo del <body> en las 37 paginas servidas, apuntando a
 * <main id="main" tabindex="-1">. Fuera de pantalla hasta que recibe foco con
 * el teclado; entonces aparece arriba a la izquierda, por encima de la barra
 * (20) y del menu movil (60), y por debajo del banner de cookies, que vive
 * abajo y no se solapa. El tabindex="-1" de <main> es para que el foco entre
 * de verdad en el contenido al activarlo (y el siguiente Tab siga desde ahi);
 * ese foco programatico no dibuja contorno. Vive aqui porque es la unica hoja
 * que cargan todas las paginas. */
.skip-link{
  position:fixed;left:16px;top:-120px;z-index:100;
  padding:12px 18px;border-radius:999px;
  background:var(--accent,#10B981);color:#09090B;
  font-family:var(--sans,system-ui,sans-serif);font-size:14px;font-weight:600;line-height:1.2;
  text-decoration:none;
}
.skip-link:focus{top:16px;outline:2px solid var(--fg,#FFFFFF);outline-offset:2px;}
main[tabindex="-1"]:focus{outline:none;}

/* ── HOVER Y FOCO DE LOS ENLACES DE LA BARRA ────────────────────────────────
 *
 * Dos cosas que faltaban, y las dos viven aqui por el motivo de siempre: la
 * declaracion esta repetida en el <style> de cada pagina y arreglar una deja
 * las otras treinta y siete como estaban.
 *
 * 1. SUBRAYADO EN HOVER. Hasta ahora el hover solo cambiaba el color
 *    (.nav-links a:hover{color:var(--accent)} en cada pagina), y el subrayado
 *    solo lo llevaba el enlace activo. Un cambio de color sin mas no es una
 *    affordance suficiente: es la unica senal, y no la ve quien no distingue
 *    ese verde del gris. El subrayado usa los mismos 4px de offset que el
 *    enlace activo, asi que pasar el raton por encima ensena exactamente la
 *    marca que lleva la pagina en la que ya estas.
 *
 *    El grosor va declarado en las DOS reglas, hover y aria-current, y no solo
 *    en hover. Si se declara solo ahi, el subrayado del enlace activo (grosor
 *    por defecto del navegador, que depende de la fuente) cambia de grosor al
 *    pasar el raton por encima. Mismo valor en ambas = no parpadea.
 *
 *    Que NO lo lleva, y por que:
 *      - El selector es `.nav-links > a`, hijo directo. .lang-switch vive
 *        dentro de .nav-links, y un descendiente `.nav-links a` le llegaria
 *        igual que le llego a la regla de aria-current: el chip EN saldria
 *        subrayado dentro de su pastilla. Es el mismo bug que ya documenta la
 *        regla de .lang-switch de mas arriba; aqui se evita por estructura.
 *      - .nav-cta y .mm-cta quedan fuera a mano: son botones con relleno y
 *        borde, y un subrayado dentro de una pastilla se lee como un error.
 *        Su hover ya lo resuelve el fondo.
 *      - La marca tampoco. Es un wordmark, no un enlace de sitio.
 *
 * 2. :focus-visible. No habia NINGUNA regla de foco para la barra en las 38
 *    paginas: quien navega con teclado dependia del contorno por defecto del
 *    navegador, que sobre este fondo casi no se ve y cambia segun el motor.
 *    El anillo va a todo lo enfocable de la barra y del overlay --- marca,
 *    enlaces, chips de idioma, CTA, hamburguesa y boton de cerrar --- porque
 *    un foco que se ve en cuatro de seis paradas del tabulador es peor que
 *    ninguno: entrena a perder el cursor justo donde no aparece.
 *
 *    2px de contorno y 2px de separacion. La separacion es 2 y no los 3 del
 *    resto del sitio porque la fila de la barra es estrecha (60px de alto, y
 *    los enlaces van a 16px de gap en el corte de 1000px): con 3px los
 *    anillos de dos enlaces contiguos llegan a tocarse.
 *
 *    outline y no border ni box-shadow: no ocupa sitio, asi que ninguna de
 *    las dos cosas que esta hoja protege --- donde se dibuja la barra y
 *    cuanto mide --- se mueve cuando algo recibe el foco. */

.nav-links > a:not(.nav-cta):hover,
.mobile-menu-links a:hover{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
}

/* Mismo grosor que el hover; ver el punto 1 de arriba. */
.nav-links a[aria-current="page"],
.mobile-menu-links a[aria-current="page"]{
  text-decoration-thickness:1px;
}

.nav a:focus-visible,
.nav button:focus-visible,
.mobile-menu a:focus-visible,
.mobile-menu button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}