/* DJ Richard Mix — página pública: capa de marca (v1). Colores, tipografías locales, logo y latido. */
@font-face{font-family:'Space Grotesk';font-weight:400;font-style:normal;font-display:swap;src:url(/f/space-grotesk-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:500;font-style:normal;font-display:swap;src:url(/f/space-grotesk-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:700;font-style:normal;font-display:swap;src:url(/f/space-grotesk-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Audiowide';font-weight:400;font-style:normal;font-display:swap;src:url(/f/audiowide-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Yellowtail';font-weight:400;font-style:normal;font-display:swap;src:url(/f/yellowtail-latin-400-normal.woff2) format('woff2')}
:root{--bg:#07021f;--fg:#f4f1ff;--mut:#a79fd6;--p:#6c2bff;--b:#19e3ff;--c:#19e3ff;--r:#ff2bd6;--card:#120a3acc;--f-tit:'Audiowide','Space Grotesk',system-ui,sans-serif;--f-txt:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html{background:#07021f}
body{font-family:var(--f-txt);-webkit-font-smoothing:antialiased;background:radial-gradient(900px 540px at 50% -8%,#1f0c66 0,#12063d 40%,#07021f 76%) fixed}
::selection{background:#6c2bff88;color:#fff}

/* escena: tres brillos suaves (en lugar de láseres con blur) */
#escena .glow{position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
.g1{width:62vmax;height:62vmax;left:-22vmax;top:-28vmax;background:radial-gradient(circle,rgba(108,43,255,.34),transparent 62%)}
.g2{width:56vmax;height:56vmax;right:-24vmax;bottom:-26vmax;background:radial-gradient(circle,rgba(255,43,214,.20),transparent 62%)}
.g3{width:42vmax;height:42vmax;right:6vmax;top:-20vmax;background:radial-gradient(circle,rgba(25,227,255,.15),transparent 62%)}
#eqf{opacity:.5}

/* logo de marca + latido */
.logo-wrap{flex:0 0 auto;display:flex;justify-content:center;height:clamp(84px,19dvh,200px);margin:0 auto}
.logo-wrap .rm-logo{display:block;height:100%;width:auto;aspect-ratio:740/1000}
.logo-wrap .rm-logo svg{display:block;height:100%;width:auto;overflow:visible}
#ecg{display:block;flex:0 0 auto;width:100%;max-width:480px;height:58px;margin:0 auto}
@media(max-height:700px){#ecg{height:44px}.logo-wrap{height:clamp(64px,16dvh,200px)}}
@media(max-height:560px){#ecg{height:34px}.logo-wrap{height:clamp(50px,13dvh,200px)}}

/* tipografías y detalles de marca */
.dj{font-family:var(--f-tit);letter-spacing:.06em;background:linear-gradient(90deg,#c9f9ff,var(--c) 40%,#d27bff 75%,var(--r));-webkit-background-clip:text;background-clip:text;color:transparent}
.onair{font-family:var(--f-tit);font-weight:400;letter-spacing:.24em;background:#0a0428}
.vivo .onair{background:linear-gradient(120deg,#2a0630,#13093f);border-color:var(--r)}
.stat{border-color:#6c2bff66;box-shadow:0 0 24px #6c2bff22}
.stat b{font-family:var(--f-txt);font-weight:700;background:linear-gradient(180deg,#e9fdff,#19e3ff 55%,#9b6bff);-webkit-background-clip:text;background-clip:text}
.sub,.msg,.mut{color:var(--mut)}
.chat{border-color:#6c2bff66;box-shadow:0 0 34px #6c2bff2a;background:linear-gradient(180deg,rgba(24,14,78,.72),rgba(14,7,52,.78))}
.chat-h b{font-family:var(--f-tit);font-weight:400;letter-spacing:.08em}
.btn{background:linear-gradient(90deg,#19e3ff,#8fa2ff 50%,#ff7be9);color:#07021f;transition:transform .15s,box-shadow .2s,filter .2s}
.btn:hover:not(:disabled){box-shadow:0 0 22px #19e3ff55,0 0 38px #ff2bd633;filter:brightness(1.06)}
.btn.sec{background:transparent;color:var(--fg)}
.btn.mal{background:linear-gradient(90deg,#ff4d6d,#ff2bd6);color:#fff}
.btn:active:not(:disabled){transform:scale(.97)}
.env{background:linear-gradient(135deg,#19e3ff,#ff2bd6);color:#07021f}
.acc a,.acc button.s,button.s{transition:background .2s,box-shadow .2s,transform .15s}
.acc a:hover,.acc button.s:hover,button.s:hover{box-shadow:0 0 16px #19e3ff44}
.modal h2{font-family:var(--f-tit);font-weight:400;letter-spacing:.06em}
.modal{background:linear-gradient(180deg,#150b49,#0d0630);border-color:#19e3ff66;box-shadow:0 20px 70px #000b,0 0 40px #6c2bff33}
input:focus,textarea:focus{outline:2px solid #19e3ff}
.chat-f input:focus{outline:2px solid #19e3ff;box-shadow:0 0 0 4px #19e3ff22}
.play{box-shadow:0 0 36px #6c2bff88,0 0 80px #19e3ff33}
.sonando .play{box-shadow:0 0 40px #ff2bd699,0 0 90px #6c2bff55}
.vivo .onair i{background:var(--r)}

/* entrada: fx-pub.js la controla; si el script falla, a los 2,4 s todo se ve */
html.pre #logoWrap,html.pre #ecg,html.pre .player,html.pre .vol,html.pre .stats,html.pre .acc,html.pre #c2 .chat,html.pre .aviso{opacity:0;animation:preSeguro 0s 2.4s forwards}
@keyframes preSeguro{to{opacity:1}}
@media print{html.pre *{opacity:1!important;animation:none!important}}
@media (prefers-reduced-motion:reduce){html.pre #logoWrap,html.pre #ecg,html.pre .player,html.pre .vol,html.pre .stats,html.pre .acc,html.pre #c2 .chat,html.pre .aviso{opacity:1;animation:none}}