/* ==========================================================================
   Brewhaus Sports Bar — Header (versión 1), compartido por todas las páginas.
   Se carga después de la hoja de estilos de cada página.
   ========================================================================== */

:root{
  --hdr-fondo:#f5f3ed;
  --hdr-azul:#0a2972;
  --hdr-profundo:#071b49;
  --hdr-ambar:#ed9b33;
  --hdr-grafito:#252a34;
  --hdr-borde:rgba(10,41,114,.16);
  --hdr-font:"Poppins",system-ui,"Segoe UI",sans-serif;
  --hdr-altura:94px;
}

.header{position:sticky;top:0;z-index:50;background:var(--hdr-fondo);box-shadow:0 1px 0 var(--hdr-borde);font-family:var(--hdr-font)}
.header :focus-visible{outline:3px solid var(--hdr-azul);outline-offset:2px}
.header__container{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--hdr-altura)}
.header__logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.header__insignia{width:66px;height:66px}
.header__logotipo{width:170px;height:auto}
.header__actions{display:flex;align-items:center;gap:24px}
.header__buttons{display:flex;gap:10px}

/* Botones píldora del header */
.header .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:108px;min-height:0;padding:7px 16px;border:2px solid transparent;border-radius:999px;font-family:var(--hdr-font);font-size:15px;line-height:1.3;font-weight:600;letter-spacing:.02em;text-transform:none;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,transform .2s}
.header .btn:hover{transform:none}
.header .btn:active{transform:translateY(1px)}
.header .btn--azul{background:var(--hdr-azul);border-color:var(--hdr-azul);color:var(--hdr-fondo)}
.header .btn--azul:hover{background:var(--hdr-ambar);border-color:var(--hdr-ambar);color:var(--hdr-profundo)}
.header .btn--contorno{background:transparent;border-color:var(--hdr-ambar);color:var(--hdr-azul)}
.header .btn--contorno:hover{background:var(--hdr-ambar);color:var(--hdr-profundo)}

/* Selector de idioma EN | ES */
.lang-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border:2px solid var(--hdr-ambar);border-radius:999px;text-decoration:none;flex-shrink:0;transition:border-color .2s}
.lang-switch__opt{display:grid;place-items:center;min-width:34px;height:30px;padding:0 8px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--hdr-azul);transition:background-color .2s,color .2s}
html[lang^="en"] .lang-switch__opt[data-lang="en"],html[lang^="es"] .lang-switch__opt[data-lang="es"]{background:var(--hdr-azul);color:var(--hdr-fondo)}
.lang-switch:hover{border-color:var(--hdr-azul)}
html[lang^="en"] .lang-switch:hover .lang-switch__opt[data-lang="es"],html[lang^="es"] .lang-switch:hover .lang-switch__opt[data-lang="en"]{background:var(--hdr-ambar);color:var(--hdr-profundo)}

/* Botón hamburguesa */
.nav-button{display:grid;place-items:center;width:59px;height:59px;padding:0;border:0;border-radius:50%;background:var(--hdr-ambar);cursor:pointer;flex-shrink:0;transition:background-color .2s}
.nav-button:hover{background:var(--hdr-azul)}
.nav-button__bars{position:relative;width:24px;height:3px;border-radius:2px;background:var(--hdr-profundo);transition:background-color .2s}
.nav-button__bars::before,.nav-button__bars::after{content:"";position:absolute;left:0;width:24px;height:3px;border-radius:2px;background:var(--hdr-profundo);transition:transform .25s,top .25s,background-color .2s}
.nav-button__bars::before{top:-8px}
.nav-button__bars::after{top:8px}
.nav-button:hover .nav-button__bars,.nav-button:hover .nav-button__bars::before,.nav-button:hover .nav-button__bars::after{background:var(--hdr-fondo)}
.nav-button[aria-expanded="true"] .nav-button__bars{background:transparent!important}
.nav-button[aria-expanded="true"] .nav-button__bars::before{top:0;transform:rotate(45deg)}
.nav-button[aria-expanded="true"] .nav-button__bars::after{top:0;transform:rotate(-45deg)}

/* Menú desplegable */
.nav{position:absolute;left:0;right:0;top:100%;background:var(--hdr-fondo);border-top:1px solid var(--hdr-borde);box-shadow:0 18px 30px rgba(7,27,73,.14);max-height:calc(100vh - var(--hdr-altura));overflow-y:auto}
.nav[hidden]{display:none}
.nav__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-block:32px 48px}
.nav__title{margin:0 0 12px;font-size:20px;line-height:1.4;font-weight:700;color:var(--hdr-azul)}
.nav__links{margin:0;padding:0;list-style:none}
.nav__links li+li{margin-top:8px}
.nav__links a{font-size:15px;text-decoration:none;color:var(--hdr-grafito)}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--hdr-azul);text-decoration:underline}
.nav__links a[aria-current="page"]{font-weight:600}

@media (max-width:1100px){
  .header__logotipo{display:none}
}
@media (max-width:960px){
  .nav__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  :root{--hdr-altura:130px}
  .header__container{flex-wrap:wrap;min-height:auto;padding-block:12px}
  .header__insignia{width:54px;height:54px}
  .header__logotipo{display:block;width:140px}
  .header__actions{display:contents}
  .header__buttons{order:3;width:100%;gap:6px}
  .header .header__buttons .btn{flex:1;min-width:0;padding:6px 4px;font-size:13px}
  .nav-button{width:48px;height:48px}
  .lang-switch{margin-left:auto}
  .lang-switch__opt{min-width:30px;height:28px;padding:0 6px;font-size:12px}
}
@media (max-width:420px){
  .header__logotipo{width:116px}
}