:root{
  --bg: #05060a;
  --panel: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.12);
  --text: #f3f3f6;
  --muted: rgba(243,243,246,.72);

  --pink: #f527cc;
  --pink2:#eb15b2;
  --cyan: #14edf5;
  --blue: #199ee4;
  --violet:#9853d5;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  background: radial-gradient(900px 400px at 20% 10%, rgba(245,39,204,.20), transparent 60%),
              radial-gradient(900px 400px at 80% 25%, rgba(20,237,245,.16), transparent 55%),
              radial-gradient(900px 500px at 50% 85%, rgba(152,83,213,.10), transparent 60%),
              var(--bg);
  color: var(--text);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
.container{ width:min(1100px, calc(100% - 32px)); margin:0 auto; }

.bg-grid{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(800px 400px at 50% 0%, black 30%, transparent 70%);
}

.site-header{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter: blur(10px);
  background: rgba(5,6,10,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 16px;
}

.brand-logo{
  height: 44px;
  width:auto;
  display:block;
}

.nav{
  display:flex;
  gap: 14px;
  font-size: 14px;
  color: var(--muted);
}
.nav a{
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.nav a:hover{
  color: var(--text);
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}

.hero{
  padding: 56px 0 24px;
  text-align:left;
}
.kicker{
  display:inline-block;
  font-size: 12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(243,243,246,.75);
  border: 1px solid rgba(255,255,255,.12);
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
}
.title{
  margin: 14px 0 8px;
  font-size: clamp(36px, 6vw, 56px);
  line-height:1.0;
  text-shadow:
    0 0 24px rgba(245,39,204,.18),
    0 0 28px rgba(20,237,245,.12);
}
.subtitle{
  margin: 0 0 18px;
  max-width: 720px;
  color: var(--muted);
  font-size: 16px;
  line-height:1.55;
}

.cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight: 600;
  font-size: 14px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); }
.btn.primary{
  border-color: rgba(245,39,204,.35);
  background: linear-gradient(90deg, rgba(245,39,204,.22), rgba(20,237,245,.14));
  box-shadow: 0 0 0 1px rgba(245,39,204,.10), 0 10px 30px rgba(245,39,204,.10);
}
.btn.ghost{ color: rgba(243,243,246,.92); }

.section-title{
  margin: 28px 0 14px;
  font-size: 18px;
  color: rgba(243,243,246,.92);
}

.games{ padding: 10px 0 18px; }
.cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 780px){
  .cards{ grid-template-columns: 1fr; }
  .nav{ display:none; }
}

.card{
  position:relative;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
  min-height: 160px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
}
.card h3{ margin: 10px 0 8px; font-size: 20px; }
.card p{ margin:0; color: var(--muted); line-height:1.5; }
.card-link{
  display:inline-block;
  margin-top: 14px;
  font-weight:700;
  color: rgba(243,243,246,.95);
}

.card-top{ display:flex; align-items:center; justify-content:space-between; }
.badge{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(243,243,246,.85);
}

.card.neon::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 18px;
  padding:1px;
  background: linear-gradient(135deg, rgba(245,39,204,.8), rgba(20,237,245,.8), rgba(152,83,213,.8));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.55;
  pointer-events:none;
}
.card.neon.pink::after{
  content:"";
  position:absolute;
  width: 420px;
  height: 220px;
  left:-120px; top:-120px;
  background: radial-gradient(circle at 50% 50%, rgba(245,39,204,.30), transparent 60%);
  pointer-events:none;
}
.card.neon.cyan::after{
  content:"";
  position:absolute;
  width: 420px;
  height: 220px;
  right:-140px; top:-120px;
  background: radial-gradient(circle at 50% 50%, rgba(20,237,245,.22), transparent 60%);
  pointer-events:none;
}

.info{ padding: 8px 0 44px; }
.panel{
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  padding: 16px;
  color: var(--muted);
  line-height:1.6;
}

.footer{
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(5,6,10,.55);
  backdrop-filter: blur(10px);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding: 16px 0;
  color: rgba(243,243,246,.75);
  font-size: 14px;
}
.muted{ color: rgba(243,243,246,.55); }

/* --- Split background (Hytale / GTA) --- */
.split-bg{
  position: fixed;
  inset: 0;
  z-index: -2;             /* por detrás del contenido */
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.split-half{
  position: relative;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  filter: grayscale(0) saturate(1) contrast(1.05) brightness(.75);
  transition: transform .45s ease, filter .45s ease, opacity .45s ease;
  opacity: .85;
}

/* Imágenes */
.split-hytale{ background-image: url("/assets/img/bg-hytale.jpg"); }
.split-gta{ background-image: url("/assets/img/bg-gta.jpg"); }

/* Un degradado “neon” encima para que case con tu estilo */
.split-half::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 420px at 20% 15%, rgba(245,39,204,.20), transparent 60%),
    radial-gradient(800px 420px at 80% 20%, rgba(20,237,245,.14), transparent 60%),
    linear-gradient(to bottom, rgba(5,6,10,.25), rgba(5,6,10,.65));
}

/* Cuando enfocamos Hytale: Hytale a color + más grande; GTA en B/N */
body.focus-hytale .split-hytale{
  filter: grayscale(0) saturate(1.15) contrast(1.08) brightness(.85);
  transform: scale(1.06);
  opacity: .95;
}
body.focus-hytale .split-gta{
  filter: grayscale(1) saturate(.2) contrast(1) brightness(.65);
  transform: scale(1.00);
  opacity: .65;
}

/* Cuando enfocamos GTA: GTA a color + más grande; Hytale en B/N */
body.focus-gta .split-gta{
  filter: grayscale(0) saturate(1.15) contrast(1.08) brightness(.85);
  transform: scale(1.06);
  opacity: .95;
}
body.focus-gta .split-hytale{
  filter: grayscale(1) saturate(.2) contrast(1) brightness(.65);
  transform: scale(1.00);
  opacity: .65;
}

/* En móvil mejor sin “zoom” agresivo */
@media (max-width: 780px){
  .split-half{ opacity: .65; }
  body.focus-hytale .split-hytale,
  body.focus-gta .split-gta{
    transform: scale(1.02);
  }
}

/* Respeta reduced motion */
@media (prefers-reduced-motion: reduce){
  .split-half{ transition: none; }
}