:root{
  --bg: #0e0f12;
  --bg-soft:#14161b;
  --text:#e9ecf1;
  --muted:#aab3c5;
  --accent:#31d7a9;
  --accent-2:#7aa7ff;
  --card:#12141a;
  --border: rgba(255,255,255,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{ box-sizing: border-box }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
h1,h2,h3{ line-height:1.1; margin:0 0 .5rem }
p{ margin:.5rem 0 1rem; color:var(--muted)}
section.section{ padding: clamp(3rem, 6vw, 5rem) 1rem; max-width:1100px; margin-inline:auto }

.skip{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{ left:1rem; top:1rem; width:auto; height:auto; background:#000; color:#fff; padding:.5rem .75rem; border-radius:.5rem; z-index:9999 }

.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.75rem 1rem; background:rgba(14,15,18,.6);
  backdrop-filter: blur(10px); border-bottom:1px solid var(--border)
}
.brand{ display:flex; align-items:center; gap:.5rem }
.brand strong{ letter-spacing:.3px }
.tag{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#0a0b0e; border-radius:999px; padding:.1rem .5rem; font-size:.75rem }
.dot{ width:.6rem; height:.6rem; border-radius:50%; display:inline-block }
.dot-r{ background:#ff5959 } .dot-w{ background:#f9f9f9 } .dot-b{ background:#3d5afe }

.icon-btn{
  background:transparent; border:1px solid var(--border);
  padding:.5rem .65rem; border-radius:.65rem; color:var(--text);
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  transition: transform .2s ease, background .2s ease
}
.icon-btn:hover{ transform:translateY(-1px); background:rgba(255,255,255,.05) }

.menu{ display:flex; gap:1rem; list-style:none; margin:0; padding:0 }
.menu a{ padding:.4rem .6rem; border-radius:.5rem; border:1px solid transparent }
.menu a:hover{ border-color:var(--border); background:rgba(255,255,255,.04) }
#menuBtn{ display:none }

.hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding: clamp(3rem, 7vw, 8rem) 1rem 3rem;
}
.hero-inner{ max-width:1100px; margin:auto; text-align:center }
.glow{ font-size:clamp(1.8rem, 3.8vw, 3rem); text-shadow:0 0 20px rgba(49,215,169,.18) }
.accent{ color:var(--accent) }
.subtitle{ margin:.5rem auto 1.25rem; color:#cfd6e6 }

.hero-actions{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin:1rem 0 1.5rem }
.btn{
  border:1px solid var(--border); padding:.7rem 1rem; border-radius:.8rem; cursor:pointer;
  background:rgba(255,255,255,.03); color:var(--text); display:inline-flex; gap:.5rem; align-items:center;
  box-shadow: var(--shadow); transition: transform .15s ease, background .15s ease, border-color .15s ease
}
.btn:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.2) }
.btn.primary{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0a0b0e; font-weight:600 }
.btn.ghost{ background:transparent }

.socials{ list-style:none; display:flex; gap:.8rem; padding:0; margin:0; justify-content:center; flex-wrap:wrap }
.socials a{ display:inline-flex; gap:.5rem; align-items:center; padding:.5rem .7rem; border:1px solid var(--border); border-radius:.8rem; background:rgba(255,255,255,.03) }
.socials a:hover{ background:rgba(255,255,255,.07) }

.hero-bg::before,
.hero-bg::after{
  content:""; position:absolute; inset:-20%;
  background: radial-gradient(600px 200px at 50% -10%, rgba(49,215,169,.15), transparent 60%),
              radial-gradient(400px 220px at 10% 90%, rgba(122,167,255,.12), transparent 60%);
  z-index:-1; animation: floaty 14s ease-in-out infinite alternate;
}
@keyframes floaty{ from{ transform:translateY(0)} to{ transform:translateY(-2.5%) } }

.info-cards{ display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; margin-top:1rem }
.card{
  grid-column: span 12; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid var(--border); border-radius:1rem; padding:1rem; box-shadow:var(--shadow);
  transition: transform .2s ease, border-color .2s ease
}
.card:hover{ transform:translateY(-4px); border-color: rgba(255,255,255,.2) }
.card .big{ font-size:2rem; color:var(--accent) }

.chips{ display:flex; flex-wrap:wrap; gap:.6rem; padding:0; list-style:none; margin:.6rem 0 0 }
.chip{
  border:1px solid var(--border); border-radius:999px; padding:.45rem .75rem; background:rgba(255,255,255,.03)
}
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:1rem }
.tile{
  grid-column: span 12; border:1px solid var(--border); border-radius:1rem; padding:1rem; background:var(--card);
}
.badges{ list-style:none; display:flex; gap:.5rem; padding:0; margin:.5rem 0 0 }
.badges li{ background:rgba(255,255,255,.06); border:1px solid var(--border); padding:.2rem .5rem; border-radius:.5rem; font-size:.85rem }

.contact{ border:1px solid var(--border); border-radius:1rem; padding:1rem; background:var(--card) }
.contact .row{ display:flex; gap:1rem; flex-wrap:wrap }
.contact label{ display:block; flex:1; min-width:220px; color:var(--text) }
.contact input, .contact textarea{
  width:100%; margin-top:.25rem; padding:.7rem .8rem; border-radius:.7rem; border:1px solid var(--border); background:var(--bg-soft); color:var(--text)
}
.contact .actions{ align-items:center; }
.form-note{ color:var(--muted); margin:.5rem 0 0; font-size:.9rem }

.game-section .game-hud{ display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; margin:.5rem 0 1rem }
.stat{ border:1px solid var(--border); border-radius:.7rem; padding:.5rem .7rem; background:rgba(255,255,255,.03) }

.arena{
  position:relative; height:360px; border-radius:1rem; border:1px dashed var(--border); background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  overflow:hidden
}
.star{
  position:absolute; font-size:1.25rem; user-select:none; cursor:pointer; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
  animation: pulse 1.2s ease-in-out infinite
}
@keyframes pulse{ 0%,100%{ transform:scale(1)} 50%{ transform:scale(1.2)} }

.resultado{ font-weight:600; margin-top:.8rem; color:var(--accent) }

.footer{ text-align:center; padding:2rem 1rem; border-top:1px solid var(--border); color:var(--muted) }

/* Responsive grid */
@media (min-width:700px){
  .card{ grid-column: span 4 }
  .tile{ grid-column: span 4 }
}

/* Mobile menu */
@media (max-width:900px){
  #menuBtn{ display:inline-flex }
  .menu{
    position:absolute; right:1rem; top:60px; flex-direction:column; background:rgba(20,22,27,.95);
    border:1px solid var(--border); border-radius:1rem; padding:.6rem; min-width:220px; display:none
  }
  .menu.show{ display:flex }
}

/* Reduced motion friendly */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important }
}

/* Screen reader only */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }