/* ====== Base Gamer ====== */
* { box-sizing: border-box; }
:root {
  --bg: #0b0b0b;
  --panel: #101010;
  --text: #e8ffe8;
  --muted: #b9ffcf;
  --accent: #33ff00;
  --accent-2: #00ffcc;
  --line: rgba(51,255,0,.25);
}
html, body { height: 100%; }
body.theme-dark {
  margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  line-height: 1.55;
}

/* ====== NAV ====== */
.nav { position: sticky; top: 0; z-index: 50; background: #0d0f0d; border-bottom: 1px solid rgba(255,255,255,.06); }
.nav__wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 14px; max-width:1200px; margin:0 auto; }
.nav__logo { color: var(--text); text-decoration:none; font-weight:800; letter-spacing:.5px; }
.nav__menu { list-style:none; display:flex; gap:12px; margin:0; padding:0; }
.nav__menu a { color:#eaffea; text-decoration:none; padding:8px 10px; border-radius:8px; }
.nav_menu a:hover, .nav_menu a.is-active { background: rgba(51,255,0,.1); box-shadow: 0 0 8px rgba(51,255,0,.2) inset; }
.nav__dropdown details { position:relative; }
.nav__dropdown summary { list-style:none; cursor:pointer; padding:8px 10px; border-radius:8px; color:#eaffea; }
.nav__dropdown summary:hover { background: rgba(51,255,0,.1); }
.nav__submenu {
  position:absolute; right:0; top:calc(100% + 6px);
  display:flex; flex-direction:column; gap:4px;
  background:#0f0f0f; padding:8px; border-radius:10px; border:1px solid rgba(255,255,255,.08);
  min-width:220px;
}
.nav__submenu a { display:block; padding:8px 10px; border-radius:6px; }
.nav__submenu a:hover { background: rgba(255,255,255,.06); }

/* ====== HERO ====== */
.hero { position:relative; overflow:hidden; }
.hero--slim {
  background:
    radial-gradient(1000px 400px at 50% -10%, rgba(51,255,0,.16), rgba(0,0,0,0) 60%),
    linear-gradient(#060606,#0b0b0b);
  border-bottom: 2px solid var(--accent);
  padding: 34px 14px 26px;
}
.hero__content { max-width: 1200px; margin: 0 auto; text-align:center; }
.hero h1 { margin:0; font-size: clamp(28px, 5vw, 42px); color: var(--accent); text-shadow: 0 0 12px rgba(51,255,0,.6); }
.subtitle { margin:6px 0 0 0; color:#c8ffd4; opacity:.95; }
.hero__glow {
  position:absolute; inset:-20% -10% auto -10%; height:300px; pointer-events:none;
  background: radial-gradient(ellipse at center, rgba(0,255,204,.1), rgba(0,0,0,0) 70%);
  filter: blur(20px);
}

/* ====== Layout ====== */
.layout {
  max-width: 1200px; margin: 18px auto; padding: 0 14px;
  display: grid; grid-template-columns: 1fr 320px; gap: 16px;
}
@media (max-width: 980px){
  .layout { grid-template-columns: 1fr; }
}

/* ====== Cards / Post ====== */
.card { background: #0f0f0f; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; box-shadow: 0 12px 24px rgba(0,0,0,.35); }
.card-dark { background: var(--panel); border-color: var(--line); }
.post { padding: 16px; }
.post__head { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.post__badge { width: 48px; height: 48px; object-fit: cover; border-radius: 10px; border:1px solid rgba(255,255,255,.1); }
.post__title { margin:0; font-size: 1.4rem; color:#eaffea; }
.post__meta { margin:.15rem 0 0 0; font-size:.9rem; color:#a9f2ba; opacity:.9; }

.post h3 { color:#eaffea; margin: 1rem 0 .4rem; }
.post p { margin:.4rem 0 .6rem; }
.bullets { margin:.3rem 0 1rem 1.1rem; }
.bullets li { margin:.25rem 0; }

/* Notes / Warnings */
.note, .warning {
  padding: .9rem 1rem; border-radius: 10px; margin: .8rem 0;
  line-height: 1.55; border:1px solid;
}
.note { background: rgba(0,255,204,.07); border-color: rgba(0,255,204,.35); }
.warning { background: rgba(255,77,77,.08); border-color: rgba(255,77,77,.45); }

/* Team */
.team-grid {
  margin:.6rem 0 1rem; display:grid; gap:12px; grid-template-columns: repeat(3, minmax(0,1fr));
}
.member { text-align:center; background:#0f0f0f; border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:10px; }
.member img { width:100%; height:140px; object-fit:cover; border-radius:8px; margin-bottom:8px; }
.member h4 { margin:.15rem 0 .1rem; }
.member p { margin:0; opacity:.85; font-size:.92rem; }
@media (max-width: 640px){
  .team-grid { grid-template-columns: 1fr; }
}

/* FAQ */
details.faq { background:#0f0f0f; border:1px solid rgba(255,255,255,.08); border-radius:10px; margin:.8rem 0 0; }
details.faq[open] { border-color: rgba(51,255,0,.35); }
details.faq summary { cursor:pointer; padding:.7rem 1rem; color:#e8ffe8; }
details.faq p { padding: 0 1rem 1rem 1rem; margin:0; }

/* ====== Sidebar ====== */
.sidebar { position:relative; }
.buscador { display:flex; gap:8px; margin-bottom:12px; }
.buscador input {
  flex:1; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.12);
  background:#0f0f0f; color:#eaffea;
}
.buscador button {
  padding:10px 14px; border-radius:10px; border:1px solid var(--line); background:#0f0f0f; color:#eaffea; cursor:pointer;
}
.buscador button:hover { box-shadow: 0 0 10px rgba(51,255,0,.35) inset; }

.card21 { background:#0f0f0f; border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:10px; }
.entradareciente h2 { margin:.1rem 0 .4rem; font-size:1rem; color:var(--muted); text-align:center; }
.contenido21 {
  display:flex; gap:10px; align-items:center; text-decoration:none; color:#eaffea;
  padding:.6rem; border-radius:10px; border:1px solid rgba(255,255,255,.06); background:#0f0f0f; margin:.45rem 0;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.contenido21:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,.4); border-color: rgba(51,255,0,.3); }
.contenido21 img { width:84px; height:84px; object-fit:cover; border-radius:8px; }
.texto21 h3 { margin:.05rem 0 .15rem; font-size:1rem; color:var(--accent); }
.texto21 p { margin:0; font-size:.92rem; opacity:.9; }

/* ====== Footer ====== */
.footer { margin: 18px 0 0; border-top: 1px solid rgba(255,255,255,.08); }
.footer__content { max-width: 1200px; margin:0 auto; padding:14px; text-align:center; color:#cfeacc; }
.footer__links a { color:#a7ffb3; text-decoration:none; }
.footer__links a:hover { text-decoration:underline; }
.footer__social a { text-decoration:none; margin:0 6px; }
.brand { color: var(--accent); }

/* ====== A11y ====== */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}