body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans','Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'}
:root{--header-h:72px;--header-pad-y:16px;--header-pad-x:20px;--header-gap:8px;--logo-h:72px;--title-min:22px;--title-max:44px;--logo-offset-y:-16px}
header{position:sticky;top:0;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:20px 64px;border-bottom:1px solid rgba(255,255,255,.12);background:linear-gradient(to bottom,rgba(10,12,20,.55),rgba(10,12,20,.35));backdrop-filter:blur(8px)}
#brand{display:flex;align-items:center;gap:12px}
#brand a{display:inline-flex}
#brand img{height:72px;width:auto;object-fit:contain;filter:drop-shadow(0 0 8px rgba(0,224,255,.35))}
#title{justify-self:center;font-weight:800;letter-spacing:.3px;font-size:clamp(28px,4vw,56px);text-align:center;background:linear-gradient(90deg,#00e0ff,#9d4edd);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 18px rgba(0,224,255,.35)}
#actions{justify-self:end;display:flex;gap:8px;align-items:center}
.buttons{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
a.button{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;background:linear-gradient(90deg,#06b6d4,#3b82f6);color:#fff;text-decoration:none;font-weight:700;border-radius:999px;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 0 10px rgba(59,130,246,.35)}
a.button:hover{transform:translateY(-2px);box-shadow:0 0 18px rgba(59,130,246,.55)}
a.button:focus-visible{outline:3px solid rgba(59,130,246,.6);outline-offset:2px}
a.button svg{width:18px;height:18px;display:block}
.button-discord{background:linear-gradient(90deg,#5865f2,#4752c4);box-shadow:0 0 12px rgba(88,101,242,.5)}
.button-tele{background:linear-gradient(90deg,#06b6d4,#3b82f6)}
.btn:focus-visible{outline:3px solid rgba(59,130,246,.6);outline-offset:2px}
input[type=range]:focus-visible{outline:2px solid rgba(59,130,246,.6)}
@media(max-width:600px){#particles-js{display:none}}
.compact{padding:var(--header-pad-y) var(--header-pad-x);gap:var(--header-gap);border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 6px 16px rgba(0,0,0,.18);background:linear-gradient(to bottom,rgba(10,12,20,.45),rgba(10,12,20,.25));backdrop-filter:blur(6px)}
.compact #brand img{height:var(--logo-h)}
.compact #title{font-size:clamp(var(--title-min),3vw,var(--title-max));text-shadow:0 0 12px rgba(0,224,255,.28)}
.compact .buttons a.button{padding:8px 12px;font-size:13px}
.compact #actions .buttons{flex-wrap:nowrap;white-space:nowrap}
.compact a.button svg{width:16px;height:16px}
@media(max-width:600px){.compact #actions .buttons{gap:6px}.compact #actions .button span{display:none}.compact #actions .button{padding:8px}}

/* Asegurar que el header de index tenga exactamente el mismo alto que en tele */
header.compact{align-items: start;box-sizing:border-box;height:var(--header-h);gap:var(--header-gap);padding:var(--header-pad-y) var(--header-pad-x);border-bottom:1px solid rgba(255,255,255,.12);background:linear-gradient(to bottom,rgba(10,12,20,.45),rgba(10,12,20,.25));backdrop-filter:blur(6px)}
header.compact #brand img{height:var(--logo-h)}
header.compact #title{font-size:clamp(var(--title-min),3vw,var(--title-max));line-height:1}
header.compact #actions .buttons{flex-wrap:nowrap}
header.compact #brand{align-self:start;align-items:flex-start;transform:translateY(var(--logo-offset-y))}