/* ============================================================
   BTT 2026 — HEADER Y NAVEGACIÓN
   Fondo bordó oscuro #201719 · letras doradas · hover y sección
   activa en rojo carmesí #A71D21 (extraído del logo oficial).
   Escritorio: enlaces principales + desplegable "Más" + botón.
   Mobile: menú deslizable con TODOS los enlaces (orden m1–m13).
   ============================================================ */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(32, 23, 25, .96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--dorado);
  transition: background var(--transicion);
}
.site-header.scrolled { background: #201719; }

.header-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 1.25rem;
}

/* ---------- Logo oficial (transparente) ---------- */
.brand { display: flex; align-items: center; gap: .8rem; }
.brand:hover { color: var(--dorado-claro); }

.brand-logo-img {
  height: 54px;
  width: auto;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
  /* logo transparente: sin fondo ni marco, se integra al header */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}

/* Respaldo si la imagen no carga: letras "BTT" doradas */
.brand-logo {
  font-family: var(--fuente-logo);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--dorado);
  border: 2px solid var(--dorado);
  width: 48px; height: 48px;
  display: none; align-items: center; justify-content: center;
  border-radius: 6px;
  flex-shrink: 0;
}

.brand-texto { display: flex; flex-direction: column; line-height: 1.2; }
.brand-nombre {
  font-family: var(--fuente-logo);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--marfil);          /* blanco */
}
.brand-edicion {
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 250, 245, .85);  /* blanco suave */
}

/* ---------- Navegación ---------- */
.main-nav ul {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.main-nav a,
.nav-mas summary {
  color: var(--dorado);                    /* letras doradas */
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .5rem .75rem;
  border-radius: 8px;
  transition: background var(--transicion), color var(--transicion);
}
.main-nav a {
  display: inline-block;
  position: relative;
}
/* Hover / selección (scroll spy): rojo carmesí */
.main-nav a:hover,
.main-nav a.activo,
.nav-mas summary:hover,
.nav-mas[open] summary {
  background: #A71D21;
  color: var(--marfil);
}

/* Enlaces exclusivos del menú mobile: ocultos en escritorio */
.solo-mobile { display: none; }

/* Botón Inscripción: dorado con texto oscuro */
.nav-cta {
  background: var(--dorado) !important;
  color: #201719 !important;
  font-weight: 700 !important;
  margin-left: .5rem;
}
.nav-cta:hover {
  background: var(--dorado-claro) !important;
  color: #201719 !important;
}

/* ---------- Desplegable "Más" (escritorio) ---------- */
.nav-mas { position: relative; }
.nav-mas summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  user-select: none;
}
.nav-mas summary::-webkit-details-marker { display: none; }
.nav-mas .chevron { transition: transform var(--transicion); }
.nav-mas[open] .chevron { transform: rotate(180deg); }

.submenu {
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
  min-width: 230px;
  background: #2A2023;
  border: 1px solid var(--dorado-linea);
  border-top: 3px solid var(--dorado);
  border-radius: var(--radio);
  padding: .45rem;
  box-shadow: var(--sombra);
  z-index: 1200;
}
.submenu li { margin: 0; }
.submenu a {
  display: block;
  width: 100%;
  padding: .6rem .85rem;
  border-radius: 6px;
  font-size: .8rem;
}
.submenu a:hover { background: #A71D21; color: var(--marfil); }

/* ---------- Botón hamburguesa (mobile) ---------- */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 44px; height: 44px;
  position: relative;
  z-index: 1102;
}
.nav-toggle span {
  display: block;
  width: 26px; height: 2px;
  background: var(--dorado);
  margin: 5px auto;
  transition: all .3s ease;
  border-radius: 2px;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Responsive: menú deslizable COMPLETO ---------- */
@media (max-width: 1120px) {
  .nav-toggle { display: block; }

  .main-nav {
    position: fixed;
    top: 0; right: -100%;
    width: min(84vw, 340px);
    height: 100vh;
    height: 100dvh;
    background: #201719;
    border-left: 2px solid var(--dorado);
    padding: 5.2rem 1.4rem 2rem;
    overflow-y: auto;
    transition: right .35s ease;
    z-index: 1100;
  }
  .main-nav.abierto { right: 0; }

  .main-nav ul { flex-direction: column; align-items: stretch; gap: .15rem; }
  .main-nav li { border-bottom: 1px solid rgba(200, 166, 106, .18); }
  .main-nav a, .nav-mas summary { display: block; padding: .85rem .6rem; font-size: .85rem; }

  /* Orden canónico de las secciones dentro del menú */
  .main-nav li.m1 { order: 1; }  .main-nav li.m2 { order: 2; }
  .main-nav li.m3 { order: 3; }  .main-nav li.m4 { order: 4; }
  .main-nav li.m5 { order: 5; }  .main-nav li.m6 { order: 6; }
  .main-nav li.m7 { order: 7; }  .main-nav li.m8 { order: 8; }
  .main-nav li.m9 { order: 9; }  .main-nav li.m10 { order: 10; }
  .main-nav li.m11 { order: 11; } .main-nav li.m12 { order: 12; }
  .main-nav li.m13 { order: 13; }

  /* El desplegable "Más" no va: se muestran todos los enlaces directos */
  .nav-mas { display: none; }
  /* Mostrar los enlaces exclusivos de mobile */
  .solo-mobile { display: list-item; }

  .nav-cta {
    text-align: center;
    margin: 1rem 0 0 !important;
    border-bottom: none !important;
  }

  body.nav-abierto { overflow: hidden; }
  .nav-overlay {
    position: fixed; inset: 0;
    background: rgba(22, 15, 17, .55);
    /* DEBAJO del header (z-index: 1000): si fuera mayor, taparía el menú */
    z-index: 990;
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
  }
  .nav-overlay.visible { opacity: 1; pointer-events: auto; }
}

@media (max-width: 480px) {
  .brand-texto { display: none; }
  .brand-logo-img { height: 44px; }
  .header-inner { padding: .5rem .9rem; }
}