/* =====================================================================
   Tribfan · Cabecera azul corporativa (parche 39)
   Solo afecta a .site-header.hdr-x (cabecera de la web pública).
   No cambia los desplegables (.menu-panel) ni el resto de estilos.
   ===================================================================== */
.site-header.hdr-x {
  --hx-a: #1e1a5c; --hx-b: #29236f; --hx-c: #362a85;
  background: linear-gradient(100deg, var(--hx-a) 0%, var(--hx-b) 48%, var(--hx-c) 100%);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 0;
  box-shadow: 0 10px 30px -18px rgba(14, 10, 50, .75);
  isolation: isolate;
}
/* capa decorativa recortada (los desplegables siguen saliendo por fuera) */
.hdr-x .hdr-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hdr-x .hdr-fx span { position: absolute; top: -140%; width: 46%; height: 380%; border-radius: 50%; filter: blur(38px); opacity: .34; mix-blend-mode: screen; will-change: transform; }
.hdr-x .hdr-fx .b1 { left: -10%; background: radial-gradient(closest-side, #7C3AED, transparent 70%); animation: hx-drift1 16s ease-in-out infinite alternate; }
.hdr-x .hdr-fx .b2 { left: 34%;  background: radial-gradient(closest-side, #DB2777, transparent 70%); opacity: .2; animation: hx-drift2 19s ease-in-out infinite alternate; }
.hdr-x .hdr-fx .b3 { right: -12%; background: radial-gradient(closest-side, #2563EB, transparent 70%); opacity: .3; animation: hx-drift3 22s ease-in-out infinite alternate; }
/* línea inferior con los colores del logo */
.hdr-x .hdr-fx::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, #F7C95E, #F97316, #DB2777, #7C3AED, #2563EB, #06B6D4, #F7C95E);
  background-size: 200% 100%; opacity: .85; animation: hx-line 12s linear infinite; }
.hdr-x .hdr-fx::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 60%); }
.hdr-x > .wrap { position: relative; z-index: 1; }

@keyframes hx-drift1 { from { transform: translateX(0) } to { transform: translateX(38%) } }
@keyframes hx-drift2 { from { transform: translateX(-25%) } to { transform: translateX(30%) } }
@keyframes hx-drift3 { from { transform: translateX(0) } to { transform: translateX(-40%) } }
@keyframes hx-line { from { background-position: 0 0 } to { background-position: -200% 0 } }

/* marca */
.hdr-x .brand { color: #fff; }

/* enlaces superiores con icono (solo los de la barra, no los del desplegable) */
.hdr-x .nav-links { gap: 4px; }
.hdr-x .nav-links a,
.hdr-x .site-nav > a.hx-login {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255, 255, 255, .86); font-weight: 600; font-size: .92rem;
  padding: 8px 14px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s;
}
.hdr-x .nav-links a:hover,
.hdr-x .site-nav > a.hx-login:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .14); color: #fff; }
.hdr-x .hx-i { flex: none; opacity: .95; transition: transform .2s; }
.hdr-x .nav-links a:hover .hx-i, .hdr-x .hx-login:hover .hx-i { transform: translateY(-1px) scale(1.06); }
.hdr-x .nav-links a:nth-child(1) .hx-i { color: #FBBF24; }
.hdr-x .nav-links a:nth-child(2) .hx-i { color: #F472B6; }
.hdr-x .nav-links a:nth-child(3) .hx-i { color: #C084FC; }
.hdr-x .nav-links a:nth-child(4) .hx-i { color: #67E8F9; }
.hdr-x .hx-login .hx-i { color: #fff; }

/* botón crear cuenta: mismo botón, con borde luminoso sobre el azul */
.hdr-x .site-nav > .btn { white-space: nowrap; box-shadow: 0 6px 18px rgba(219, 39, 119, .28), inset 0 0 0 1px rgba(255, 255, 255, .22); }

/* botones del menú (solo el botón; el panel desplegable no cambia) */
.hdr-x .burger > summary,
.hdr-x .usermenu > summary { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: #fff; }
.hdr-x .burger > summary:hover,
.hdr-x .usermenu > summary:hover { background: rgba(255, 255, 255, .14); box-shadow: none; }
.hdr-x .usermenu > summary .nm, .hdr-x .usermenu > summary .chev { color: #fff; }
.hdr-x .usermenu > summary .chev { width: 14px; height: 14px; opacity: .8; }

/* tabletas y móvil: mismo fondo, más compacto */
@media (max-width: 1100px) { .hdr-x .nav-links { gap: 0; } .hdr-x .nav-links a, .hdr-x .site-nav > a.hx-login { padding: 7px 9px; gap: 6px; font-size: .86rem; } }
@media (max-width: 1000px) and (min-width: 861px) { .hdr-x .nav-links .hx-i { display: none; } }
@media (max-width: 860px) {
  .site-header.hdr-x .wrap { min-height: 60px; gap: 10px; }
  .hdr-x .site-nav > a.hx-login { display: none; }
  .hdr-x .brand img { height: 28px !important; }
  .hdr-x .burger > summary { width: 40px; height: 40px; }
  .hdr-x .hdr-fx span { filter: blur(28px); }
}
@media (max-width: 380px) { .hdr-x .site-nav > .btn.small { padding: 0 11px; font-size: .8rem; } }

@media (prefers-reduced-motion: reduce) { .hdr-x .hdr-fx span, .hdr-x .hdr-fx::after { animation: none !important; } }