/* ================= Chateanos IRC Network — Estilos públicos ================= */
:root{
  --bg-0:#06060c; --bg-1:#0b0b16; --panel:#101020; --line: rgba(255,255,255,.08);
  --txt:#e9e9f5; --txt-dim:#a3a1c2;
  --neon-a:#00f0ff; --neon-b:#ff2ec4; --neon-c:#a742ff; --neon-d:#39ff8a;
  --radius-sm:8px; --radius:14px; --radius-lg:20px;
  --ease:cubic-bezier(.22,.9,.32,1.1);
  --sp-1:8px; --sp-2:14px; --sp-3:22px; --sp-4:34px; --sp-5:54px;
  --shadow-sm:0 4px 16px rgba(0,0,0,.28);
  --shadow-md:0 14px 40px rgba(0,0,0,.4);
  --shadow-glow:0 10px 30px rgba(0,240,255,.14);
  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, 'Courier New', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
body{ background:var(--bg-0); color:var(--txt); font-family:'Rajdhani',sans-serif; font-size:16px; line-height:1.6; overflow-x:hidden; position:relative; -webkit-font-smoothing:antialiased;}
h1,h2,h3,.brand,.mono{font-family:'Chakra Petch',sans-serif;}
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--neon-a); outline-offset:3px; border-radius:4px; }
::selection{ background:rgba(0,240,255,.28); color:#fff; }

.bg-glow{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%, rgba(0,240,255,.16), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(255,46,196,.14), transparent 42%),
    radial-gradient(circle at 50% 85%, rgba(167,66,255,.16), transparent 45%),
    var(--bg-0);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift{ 0%{filter:hue-rotate(0deg);} 100%{filter:hue-rotate(35deg);} }
.bg-grid{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.35;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at 50% 0%, black 10%, transparent 70%);
}
.rgb-bar{ height:3px; width:100%; background:linear-gradient(90deg,var(--neon-a),var(--neon-b),var(--neon-c),var(--neon-d),var(--neon-a)); background-size:300% 100%; animation:slideRGB 6s linear infinite; }
@keyframes slideRGB{ 0%{background-position:0% 0;} 100%{background-position:300% 0;} }

header{ position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:rgba(6,6,12,.72); border-bottom:1px solid var(--line);}
.nav-wrap{ max-width:1280px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px;}
.brand{ font-weight:700; font-size:22px; letter-spacing:.5px; display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--txt);}
.brand .dot{ width:10px;height:10px;border-radius:50%; background:var(--neon-d); box-shadow:0 0 10px var(--neon-d), 0 0 22px var(--neon-d); animation:pulse 1.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.5; transform:scale(.8);}}
.brand span{ background:linear-gradient(90deg,var(--neon-a),var(--neon-c),var(--neon-b)); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% auto; animation:textshift 4s linear infinite;}
@keyframes textshift{0%{background-position:0% center;}100%{background-position:200% center;}}
nav ul{ list-style:none; display:flex; gap:26px; }
nav a{ color:var(--txt-dim); text-decoration:none; font-weight:600; font-size:14px; letter-spacing:.4px; text-transform:uppercase; position:relative; transition:color .2s var(--ease);}
nav a:hover{ color:var(--neon-a); }
nav a::after{ content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:linear-gradient(90deg,var(--neon-a),var(--neon-b)); transition:width .25s var(--ease);}
nav a:hover::after{ width:100%; }
.header-actions{ display:flex; gap:12px; align-items:center; }

.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; background:transparent; border:1px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; }
.nav-toggle span{ display:block; width:16px; height:2px; margin:0 auto; background:var(--txt); transition:transform .25s var(--ease), opacity .2s var(--ease); }
.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); }

.btn{ font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:13px; letter-spacing:.5px; text-transform:uppercase; text-decoration:none; padding:10px 20px; border-radius:var(--radius-sm); display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:none; transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);}
.btn-connect{ background:linear-gradient(90deg,var(--neon-a),var(--neon-c)); color:#04040a; box-shadow:0 0 18px rgba(0,240,255,.35);}
.btn-connect:hover{ transform:translateY(-2px); box-shadow:0 4px 24px rgba(0,240,255,.55); }
.btn-connect:active{ transform:translateY(0); }
.btn-ghost{ background:transparent; color:var(--txt); border:1px solid var(--line);}
.btn-ghost:hover{ border-color:var(--neon-b); color:var(--neon-b); }
.btn-lg{ padding:15px 30px; font-size:14px; border-radius:10px; }

/* ---- Hero (home) ---- */
.hero{ max-width:1280px; margin:0 auto; padding:70px 24px 40px; display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center;}
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:'Chakra Petch'; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--neon-d); border:1px solid rgba(57,255,138,.35); background:rgba(57,255,138,.06); padding:6px 14px; border-radius:100px; margin-bottom:22px;}
.eyebrow .live-dot{ width:7px;height:7px;border-radius:50%; background:var(--neon-d); animation:pulse 1.4s infinite; }
.hero h1{ font-size:clamp(32px, 5.2vw, 56px); line-height:1.05; font-weight:700; letter-spacing:-1px; margin-bottom:20px;}
.hero h1 .grad{ background:linear-gradient(90deg,var(--neon-a),var(--neon-b) 50%,var(--neon-c)); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% auto; animation:textshift 5s linear infinite;}
.hero p.lead{ color:var(--txt-dim); font-size:18px; max-width:520px; margin-bottom:30px; }
.hero-ctas{ display:flex; gap:14px; margin-bottom:36px; }
.stat-row{ display:flex; gap:34px; }
.stat-row .stat b{ font-family:'Chakra Petch'; font-size:26px; display:block; background:linear-gradient(90deg,var(--neon-a),var(--neon-d)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.stat-row .stat span{ color:var(--txt-dim); font-size:12px; text-transform:uppercase; letter-spacing:1px; }

/* ---- Chat simulado ---- */
.chat-window{ background:linear-gradient(180deg, rgba(16,16,32,.9), rgba(10,10,20,.95)); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.55); position:relative;}
.chat-window::before{ content:''; position:absolute; inset:-1px; z-index:-1; border-radius:17px; background:linear-gradient(120deg,var(--neon-a),var(--neon-c),var(--neon-b)); filter:blur(18px); opacity:.35;}
.chat-titlebar{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:rgba(255,255,255,.03); border-bottom:1px solid var(--line);}
.chat-titlebar .chan{ font-family:'Chakra Petch'; font-weight:600; font-size:14px; color:var(--neon-a); }
.chat-dots{ display:flex; gap:6px; }
.chat-dots i{ width:10px;height:10px;border-radius:50%; display:block; }
.chat-dots i:nth-child(1){background:#ff5f57;} .chat-dots i:nth-child(2){background:#febc2e;} .chat-dots i:nth-child(3){background:#28c840;}
.chat-body{ padding:18px 16px; height:340px; overflow:hidden; display:flex; flex-direction:column; gap:10px; font-size:14px; }
.chat-line{ display:flex; gap:8px; opacity:0; animation:fadeIn .5s forwards; }
.chat-line .t{ color:#55536e; font-size:11px; min-width:40px; padding-top:2px; }
.chat-line .nick{ font-weight:700; white-space:nowrap; }
.chat-line .msg{ color:#d4d3e6; }
@keyframes fadeIn{ to{opacity:1;} }
.chat-footer{ padding:12px 16px; border-top:1px solid var(--line); display:flex; gap:10px; align-items:center; background:rgba(255,255,255,.02);}
.chat-footer input{ flex:1; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:8px; padding:10px 12px; color:var(--txt-dim); font-family:'Rajdhani'; font-size:14px;}
.chat-footer .send{ background:linear-gradient(90deg,var(--neon-a),var(--neon-c)); border:none; border-radius:8px; padding:10px 16px; color:#04040a; font-weight:700; cursor:pointer;}

section{ max-width:1280px; margin:0 auto; padding:70px 24px; }
.section-head{ margin-bottom:36px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.section-head h2{ font-size:32px; font-weight:700; }
.section-head .tag{ color:var(--neon-a); font-size:12px; letter-spacing:2px; text-transform:uppercase; font-family:'Chakra Petch'; margin-bottom:8px; display:block;}
.section-head p{ color:var(--txt-dim); max-width:480px; }

/* ---- Carrusel de noticias ---- */
.carousel{ position:relative; overflow:hidden; border-radius:16px; }
.carousel-track{ display:flex; gap:20px; animation:carousel-scroll 32s linear infinite; width:max-content; }
.carousel:hover .carousel-track{ animation-play-state:paused; }
@keyframes carousel-scroll{ 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
.news-card{ width:340px; flex-shrink:0; border-radius:14px; overflow:hidden; background:var(--panel); border:1px solid var(--line); position:relative; text-decoration:none; display:block; color:var(--txt);}
.news-card .img{ height:170px; background:linear-gradient(135deg,#1a1a30,#0d0d1c); position:relative; overflow:hidden;}
.news-card .img::after{ content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(0,240,255,.25), rgba(255,46,196,.2)); mix-blend-mode:screen;}
.news-card .badge{ position:absolute; top:12px; left:12px; z-index:2; font-family:'Chakra Petch'; font-size:10px; text-transform:uppercase; letter-spacing:1px; padding:5px 10px; border-radius:100px; font-weight:700;}
.badge.destacada{ background:var(--neon-b); color:#1a0012; }
.badge.general{ background:var(--neon-a); color:#04040a; }
.badge.informativa{ background:var(--neon-d); color:#03170a; }
.news-card .content{ padding:16px; }
.news-card h3{ font-size:16px; margin-bottom:8px; line-height:1.3; }
.news-card p{ color:var(--txt-dim); font-size:13px; }
.news-card .meta{ margin-top:12px; font-size:11px; color:#55536e; text-transform:uppercase; letter-spacing:.5px;}

/* ---- Salas ---- */
.rooms-bar{ display:flex; align-items:center; gap:10px; margin-bottom:20px; font-family:'Chakra Petch'; font-size:12px; color:var(--txt-dim); text-transform:uppercase; letter-spacing:1px;}
.rooms-bar .refresh-dot{ width:8px;height:8px;border-radius:50%; background:var(--neon-d); animation:pulse 2s infinite;}
.rooms-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:14px; }
.room-card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); cursor:pointer; position:relative; overflow:hidden; text-decoration:none; display:block; color:var(--txt);}
.room-card:hover{ border-color:var(--neon-a); transform:translateY(-4px); box-shadow:var(--shadow-glow);}
.room-card .name{ font-family:'Chakra Petch'; font-weight:600; font-size:15px; margin-bottom:6px;}
.room-card .count{ font-size:12px; color:var(--txt-dim); display:flex; align-items:center; gap:6px;}
.room-card .count b{ color:var(--neon-d); font-weight:700; }
.room-card .topic{ font-size:11px; color:#55536e; margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rooms-search{ margin-bottom:24px; }
.rooms-search input{ width:100%; max-width:420px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:8px; padding:12px 16px; color:var(--txt); font-family:'Rajdhani'; font-size:15px;}

/* ---- Servicios ---- */
.services-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:16px; }
.service-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px; text-decoration:none; color:var(--txt); transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); display:block;}
.service-card:hover{ border-color:var(--neon-c); box-shadow:0 14px 34px rgba(167,66,255,.18); transform:translateY(-4px);}
.service-card .icon{ font-size:22px; margin-bottom:14px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:rgba(255,255,255,.03); border:1px solid var(--line); position:relative;}
.service-card:hover .icon{ border-color:var(--neon-c); }
.service-card .icon::before, .service-card .icon::after{ content:''; position:absolute; width:6px; height:6px; border:1.5px solid var(--neon-c); opacity:0; transition:opacity .2s var(--ease);}
.service-card .icon::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.service-card .icon::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }
.service-card:hover .icon::before, .service-card:hover .icon::after{ opacity:1; }
.service-card h3{ font-size:16px; margin-bottom:6px; font-family:'Chakra Petch';}
.service-card p{ font-size:13px; color:var(--txt-dim); }

/* ---- Equipo ---- */
.team-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:18px; }
.team-card{ text-align:center; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:26px 16px; }
.avatar{ width:70px;height:70px;border-radius:50%; margin:0 auto 14px; background:linear-gradient(135deg,var(--neon-a),var(--neon-c)); display:flex; align-items:center; justify-content:center; font-family:'Chakra Petch'; font-weight:700; font-size:22px; color:#04040a;}
.team-card h3{ font-size:15px; margin-bottom:4px;}
.team-card .role{ font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--neon-a); font-family:'Chakra Petch'; margin-bottom:8px;}
.team-card .desc{ font-size:12px; color:var(--txt-dim); }
.team-group-title{ font-family:'Chakra Petch'; font-size:14px; text-transform:uppercase; letter-spacing:1px; color:var(--neon-b); margin:36px 0 16px;}
.team-group-title:first-child{ margin-top:0; }

/* ---- Radio player fijo ---- */
.radio-player{ position:fixed; bottom:18px; right:18px; z-index:60; background:rgba(12,12,22,.85); backdrop-filter:blur(16px); border:1px solid var(--line); border-radius:100px; padding:10px 18px 10px 10px; display:flex; align-items:center; gap:12px; box-shadow:0 10px 40px rgba(0,0,0,.5);}
.radio-player .play-btn{ width:38px;height:38px;border-radius:50%; border:none; cursor:pointer; background:linear-gradient(135deg,var(--neon-b),var(--neon-c)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px;}
.radio-info{ line-height:1.2; }
.radio-info .station{ font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--txt-dim); }
.radio-info .track{ font-size:12px; font-weight:600; max-width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.eq{ display:flex; align-items:flex-end; gap:2px; height:16px; }
.eq span{ width:3px; background:var(--neon-a); animation:eq 1s ease-in-out infinite; border-radius:2px;}
.eq span:nth-child(1){height:40%; animation-delay:0s;} .eq span:nth-child(2){height:100%; animation-delay:.2s;} .eq span:nth-child(3){height:60%; animation-delay:.4s;}
@keyframes eq{ 0%,100%{ transform:scaleY(.4);} 50%{transform:scaleY(1);} }

/* ---- Radio page ---- */
.radio-hero{ text-align:center; padding:90px 24px 60px; }
.radio-hero .disc{
  width:220px; height:220px; border-radius:50%; margin:0 auto 34px;
  background: conic-gradient(from 0deg, var(--neon-a), var(--neon-c), var(--neon-b), var(--neon-a));
  display:flex; align-items:center; justify-content:center; position:relative;
  animation: spin 12s linear infinite; box-shadow:0 0 60px rgba(167,66,255,.35);
}
.radio-hero .disc.paused{ animation-play-state:paused; }
.radio-hero .disc::after{ content:''; width:70px; height:70px; border-radius:50%; background:var(--bg-0); }
@keyframes spin{ 100%{ transform:rotate(360deg); } }
.radio-hero h1{ font-size:38px; margin-bottom:10px; }
.radio-hero .now-playing{ font-size:16px; color:var(--txt-dim); margin-bottom:30px; }
.radio-hero .now-playing b{ color:var(--neon-a); font-family:var(--mono); font-weight:600; }
.radio-big-btn{ width:70px; height:70px; border-radius:50%; border:none; cursor:pointer; background:linear-gradient(135deg,var(--neon-a),var(--neon-c)); font-size:26px; color:#04040a; box-shadow:0 0 30px rgba(0,240,255,.4);}
.radio-upcoming{ max-width:600px; margin:60px auto 0; text-align:left; }
.radio-upcoming h3{ font-family:'Chakra Petch'; font-size:14px; text-transform:uppercase; letter-spacing:1px; color:var(--neon-b); margin-bottom:14px;}
.radio-track-row{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--txt-dim); font-family:var(--mono); transition:color .2s var(--ease);}
.radio-track-row:hover{ color:var(--txt); }

/* ---- Formularios genéricos ---- */
.form-section{ max-width:720px; }
.card-form{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:26px; margin-bottom:20px;}
.card-form label{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--txt-dim); margin:14px 0 6px;}
.card-form label:first-child{ margin-top:0; }
.card-form input, .card-form textarea, .card-form select{ width:100%; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:8px; padding:11px 12px; color:var(--txt); font-family:'Rajdhani'; font-size:15px; resize:vertical;}
.card-form select{ appearance:none; }
.card-form button{ margin-top:20px; }
.divider{ height:1px; background:var(--line); margin:30px 0; }
.hint{ color:var(--txt-dim); font-size:13px; margin-bottom:14px; }

.alert{ padding:14px 18px; border-radius:10px; margin-bottom:20px; font-size:14px;}
.alert-ok{ background:rgba(57,255,138,.1); border:1px solid rgba(57,255,138,.3); color:var(--neon-d);}
.alert-error{ background:rgba(255,46,196,.1); border:1px solid rgba(255,46,196,.3); color:var(--neon-b);}

.tabs{ display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; }
.tab-btn{ background:var(--panel); border:1px solid var(--line); color:var(--txt-dim); padding:10px 18px; border-radius:100px; font-family:'Chakra Petch'; font-size:13px; cursor:pointer; transition:.2s;}
.tab-btn.active{ background:linear-gradient(90deg,var(--neon-a),var(--neon-c)); color:#04040a; border-color:transparent; }
.tab-panel.hidden{ display:none; }

/* ---- FAQ ---- */
.faq-item{ background:var(--panel); border:1px solid var(--line); border-radius:12px; margin-bottom:12px; overflow:hidden;}
.faq-q{ padding:18px 22px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-weight:600; font-family:'Chakra Petch'; font-size:15px;}
.faq-q .icon{ color:var(--neon-a); transition:.2s; }
.faq-item.open .faq-q .icon{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:.3s; padding:0 22px; color:var(--txt-dim); font-size:14px;}
.faq-item.open .faq-a{ max-height:400px; padding-bottom:18px; }

/* ---- Legal ---- */
.legal-wrap{ max-width:860px; margin:0 auto; padding:70px 24px 100px; }
.legal-wrap h1{ font-size:32px; margin-bottom:6px; }
.legal-updated{ color:var(--txt-dim); font-size:13px; margin-bottom:36px; font-family:var(--mono); }
.legal-wrap h2{ font-family:'Chakra Petch'; font-size:19px; margin:36px 0 12px; color:var(--neon-a); }
.legal-wrap h3{ font-family:'Chakra Petch'; font-size:16px; margin:22px 0 10px; color:var(--neon-c); }
.legal-wrap p{ color:#c9c8dc; font-size:14.5px; line-height:1.75; margin-bottom:14px; }
.legal-wrap ul, .legal-wrap ol{ color:#c9c8dc; font-size:14.5px; line-height:1.75; margin:0 0 14px 24px; }
.legal-toc{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px 24px; margin-bottom:36px;}
.legal-toc a{ display:block; color:var(--txt-dim); text-decoration:none; font-size:13px; padding:4px 0;}
.legal-toc a:hover{ color:var(--neon-a); }

/* ---- Cookie banner ---- */
.cookie-banner{
  position:fixed; bottom:0; left:0; right:0; z-index:80;
  background:rgba(10,10,20,.97); backdrop-filter:blur(16px); border-top:1px solid var(--line);
  padding:18px 24px; display:none; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.cookie-banner.show{ display:flex; }
.cookie-banner p{ font-size:13px; color:var(--txt-dim); max-width:700px; }
.cookie-banner a{ color:var(--neon-a); }
.cookie-actions{ display:flex; gap:10px; flex-shrink:0; }

footer{ border-top:1px solid var(--line); padding:50px 24px 100px; margin-top:60px; text-align:center; color:var(--txt-dim); font-size:13px;}
footer .flinks{ display:flex; gap:20px; justify-content:center; margin-bottom:20px; flex-wrap:wrap;}
footer a{ color:var(--txt-dim); text-decoration:none; }
footer a:hover{ color:var(--neon-a); }

/* ---- Elementos técnicos (datos, estado en vivo) ---- */
code, .mono-data{ font-family:var(--mono); font-size:.92em; background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:6px; padding:2px 7px; color:var(--neon-a); }

.status-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:8px; position:relative; }
.status-dot::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:1px solid currentColor; opacity:0; }
.status-dot.status-operativo{ background:var(--neon-d); color:var(--neon-d); box-shadow:0 0 8px var(--neon-d); animation:dot-pulse 2s ease-in-out infinite; }
.status-dot.status-degradado{ background:#ffb020; color:#ffb020; box-shadow:0 0 8px #ffb020; }
.status-dot.status-caido{ background:var(--neon-b); color:var(--neon-b); box-shadow:0 0 8px var(--neon-b); }
.status-dot.status-desconocido{ background:#55536e; }
@keyframes dot-pulse{
  0%,100%{ box-shadow:0 0 8px var(--neon-d); }
  50%{ box-shadow:0 0 16px var(--neon-d); }
}

.sev-pill, .est-pill{ font-size:10px; padding:3px 10px; border-radius:100px; text-transform:uppercase; letter-spacing:.5px; font-weight:700; font-family:'Chakra Petch'; }
.sev-info{ background:rgba(0,240,255,.15); color:var(--neon-a); }
.sev-menor{ background:rgba(255,176,32,.15); color:#ffb020; }
.sev-mayor, .sev-critico{ background:rgba(255,46,196,.18); color:var(--neon-b); }
.est-pill{ background:rgba(255,255,255,.06); color:var(--txt-dim); }

/* Marco tipo HUD: esquinas técnicas para paneles destacados (chat demo, servidor principal, gráficos) */
.hud-frame{ position:relative; }
.hud-frame::before, .hud-frame::after{ content:''; position:absolute; width:16px; height:16px; border:1.5px solid var(--neon-a); opacity:.6; pointer-events:none; z-index:2; }
.hud-frame::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; border-radius:6px 0 0 0; }
.hud-frame::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; border-radius:0 0 6px 0; }

/* ---- Scroll reveal (JS aplica .js-reveal; sin JS, el contenido queda visible siempre) ---- */
.reveal.js-reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.js-reveal.in-view{ opacity:1; transform:none; }

@media(max-width:900px){
  .hero{ grid-template-columns:1fr; gap:36px; }
  .hero h1{ letter-spacing:-.5px; }
  .nav-toggle{ display:flex; }
  nav{ position:absolute; top:100%; left:0; right:0; background:rgba(6,6,12,.97); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
  nav#mainNav.open{ max-height:420px; }
  nav ul{ flex-direction:column; gap:0; padding:8px 24px 16px; }
  nav ul li{ border-top:1px solid var(--line); }
  nav a{ display:block; padding:14px 4px; text-transform:none; font-size:15px; }
  nav a::after{ display:none; }
  .header-actions .btn-ghost:not(:last-child){ display:none; }
}
@media(max-width:520px){
  .header-actions span, .header-actions a:not(.btn-connect):not([title="Buscar"]){ display:none; }
}