/* web/assets/nav.css · cabecera, menú y pie compartidos (portada, páginas en construcción y /tournaments).
   No define estilos globales de la página: solo lo suyo. */
:root{--n-bg:#0A0A0A;--n-line:#2C2C2C;--n-text:#F5F5F5;--n-muted:#BDBDBD;--n-magenta:#E9004C;--n-magenta-text:#FF3180;
  --n-display:'Bricolage Grotesque','Arial Black',system-ui,sans-serif;--n-body:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  }
.site-header,.menu,.site-footer{font-family:var(--n-body);color:var(--n-text)}
/* Bilingüe: cada texto va en dos spans con lang="en" / lang="es"; solo se ve el del idioma activo */
html[lang="es"] [lang="en"], html[lang="en"] [lang="es"]{display:none!important}
body.menu-open{overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.site-header :focus-visible,.menu :focus-visible,.site-footer :focus-visible{outline:3px solid var(--n-magenta-text);outline-offset:3px;border-radius:6px}

/* Cabecera: logo arriba a la izquierda, menú arriba a la derecha */
.site-header{position:sticky;top:0;z-index:40;background:var(--n-bg);padding:calc(10px + env(safe-area-inset-top)) 0 10px}
.home .site-header{position:absolute;left:0;right:0;background:none}
.hdr-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 clamp(16px,3vw,32px)}
.nav-brand{display:block;line-height:0}
body:not(.home) .hdr-inner{max-width:1120px;margin:0 auto;padding:0 20px}   /* alineada con el contenido; en la portada va a sangre */
.nav-brand img{height:clamp(56px,9vw,84px);width:auto;display:block}
.menu-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:1.5px solid rgba(255,255,255,.7);border-radius:999px;
  background:rgba(10,10,10,.35);color:#fff;font:700 13px var(--n-body);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.menu-btn:hover{border-color:#fff}
.menu-btn .bars{display:grid;gap:3px}
.menu-btn .bars i{display:block;width:14px;height:1.5px;background:currentColor;transition:transform .2s}
.menu-btn[aria-expanded="true"] .bars i:first-child{transform:translateY(2.25px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars i:last-child{transform:translateY(-2.25px) rotate(-45deg)}
.menu-btn .when-open{display:none}
.menu-btn[aria-expanded="true"] .when-open{display:inline}
.menu-btn[aria-expanded="true"] .when-closed{display:none}

/* Menú: en móvil ocupa la pantalla; en escritorio es un panel estrecho a la derecha. Tipografía contenida, sin números ni líneas. */
.menu{position:fixed;inset:0;z-index:30;background:var(--n-bg);overflow-y:auto;
  padding:calc(112px + env(safe-area-inset-top)) 0 calc(32px + env(safe-area-inset-bottom))}
.menu[hidden],.menu-backdrop[hidden]{display:none}
.menu-inner{max-width:560px;margin:0 auto;padding:0 clamp(20px,5vw,32px)}
.menu-backdrop{display:none}
.nav-lang{display:inline-flex;border:1px solid #808080;border-radius:999px;overflow:hidden;margin:0 0 20px}
.nav-lang button{min-width:48px;min-height:44px;font:600 13px var(--n-body);letter-spacing:.04em;color:var(--n-muted);background:none;border:0;padding:0 14px;cursor:pointer}
.nav-lang button[aria-pressed="true"]{background:var(--n-magenta);color:#fff}
.menu ul{list-style:none;margin:0;padding:0}
.menu li a{display:flex;align-items:center;gap:8px;padding:12px 0;text-decoration:none;color:var(--n-text);
  font:600 clamp(22px,5.4vw,26px)/1.2 var(--n-display);letter-spacing:-.01em}
.menu li a:hover,.menu li a:focus-visible{color:var(--n-magenta-text)}
.menu li a .ext{font-size:.62em;color:var(--n-muted)}
.menu-cta{display:grid;gap:12px;margin-top:28px;padding-top:28px;border-top:1px solid var(--n-line)}
.menu-cta .nbtn{min-height:52px;font-size:14px;letter-spacing:.04em}
@media(min-width:768px){
  .menu{inset:0 0 0 auto;width:min(400px,100%);border-left:1px solid var(--n-line)}
  .menu-inner{padding:0 28px;max-width:none}
  .menu-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:29;background:rgba(0,0,0,.55)}
}

/* Botones (menú y páginas en construcción) */
.nbtn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 22px;border-radius:12px;text-decoration:none;text-align:center;
  font:800 15px/1.2 var(--n-display);letter-spacing:.05em;text-transform:uppercase;border:2px solid transparent;cursor:pointer}
.nbtn-primary{background:var(--n-magenta);color:#fff}
.nbtn-ghost{border-color:#fff;color:#fff}
.nbtn-white{background:#fff;color:#0A0A0A}
.nbtn:hover{filter:brightness(1.08)}
.nbtn:active{transform:translateY(1px)}

/* Pie */
.site-footer{border-top:1px solid var(--n-line);padding:36px 0 calc(40px + env(safe-area-inset-bottom));color:var(--n-muted);font-size:15px}
.ftr-inner{max-width:1120px;margin:0 auto;padding:0 20px;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.site-footer a{text-decoration:none;color:inherit}
.site-footer a:hover{color:var(--n-text);text-decoration:underline}
@media (prefers-reduced-motion:reduce){.menu-btn .bars i{transition:none}}

/* Páginas con contenido estrecho (como /join): cabecera alineada con el contenido */
body[data-narrow] .hdr-inner{max-width:560px;margin:0 auto;padding:0 20px}
body[data-narrow] .nav-brand img{height:60px}