/* ===========================

   CRIANSOFT — Global Styles (clean)

   =========================== */



/* Reset */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }



/* --------- Theme tokens --------- */

:root{

  --bg:#0b0f16;

  --surface:#121722;

  --card:#141a25;

  --text:#e9eef8;

  --muted:#a8b3c7;

  --line:#233044;

  --line-strong:#2f3e57;

  --brand:#2a66ff;

  --brand-ink:#ffffff;

}



/* --------- Base --------- */

body{

  background:

    radial-gradient(1200px 600px at 10% -10%, rgba(255,255,255,.06), transparent 60%),

    linear-gradient(180deg, #0a0e15 0%, #0c1017 28%, #0b0f16 100%);

  color: var(--text);

  font: 16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",Arial,sans-serif;

}

a{ color:#d9e4ff; text-decoration:none; }

a:hover{ text-decoration:underline; }

img{ max-width:100%; display:block; }



/* --------- Layout helpers --------- */

.wrap, .container, .site-main {

  max-width: 1100px; margin: 0 auto; padding: 0 16px;

}

.section{ padding: 28px 0; }

h1,h2,h3{ color:#f0f4ff; }

h2{ margin: 8px 0 12px; font-size: clamp(20px,3vw,26px); }

p{ margin:.5rem 0 0; color:#c7d2e5; }



/* --------- Header / Nav --------- */

.site-header{

  position: sticky; top: 0; z-index: 50;

  background: rgba(10,14,21,.80);

  backdrop-filter: blur(6px) saturate(130%);

  border-bottom: 1px solid var(--line);

}

.site-header .brand{

  font-weight: 800; letter-spacing: .08em;

  padding: 12px 20px 4px; font-size: 14px; color:#c9d7f1;

}

.nav{ display:flex; gap:10px; flex-wrap:wrap; padding:8px 20px 14px; }

.nav a{

  padding:8px 10px; border-radius:10px;

  border:1px solid transparent; color:#dde7ff;

}

.nav a:hover{ background:#151b27; border-color:var(--line); text-decoration:none; }

.nav a.active{ background:#1a2230; border-color:var(--line-strong); }

.nav .pill{ background:#1a2230; border:1px solid #2b3648; border-radius:999px; padding:8px 12px; color:#bcd1ff; }



/* --------- HERO (home / pages) --------- */

.hero, .hero-block{ position:relative; overflow:hidden; border-radius:12px; }

.hero img, .hero-block img{

  width:100%; height: clamp(240px, 35vw, 420px); object-fit:cover;

  filter: brightness(1.14) contrast(1.05) saturate(1.04);

}

.hero::after, .hero-block::after{

  content:""; position:absolute; inset:0; pointer-events:none;

  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.22));

}

.hero__text{ position:absolute; left:20px; right:20px; bottom:18px; color:#fff; }

.hero__text h1{ margin:0 0 6px; font-size: clamp(22px,3vw,34px); }



/* Botones */

.btn{

  display:inline-block; padding:10px 14px; border-radius:10px;

  border:1px solid var(--line); background:#151c27; color:#d7e3ff; font-weight:700;

}

.btn-primary{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }

.btn:hover{ filter: brightness(1.05); text-decoration:none; }



/* --------- News --------- */

.news-list{

  list-style:none; margin:10px 0 0; padding:0;

  display:grid; gap:10px;

}

.news-list li{ background:#12151c; border:1px solid var(--line); border-radius:10px; padding:12px 14px; }

.news-list time{ font-size:.82rem; color:#94a3bd; margin-right:8px; }

.news-list a{ color:#d9e4ff; border-bottom:1px dashed transparent; }

.news-list a:hover{ border-bottom-color:#8896b6; text-decoration:none; }



/* =========================================

   GAMES — Cards bloque 16:9 + meta

   ========================================= */

.cards-grid, .games-grid{

  display:grid;

  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

  gap: 18px;

}

.game-card{

  display:block; text-decoration:none;

  background: var(--card);

  border:1px solid var(--line);

  border-radius:12px; overflow:hidden;

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;

}

.game-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.35); border-color: var(--line-strong); }



/* Área de portada/logos (16:9) */

.game-card__cover, .game-media, .cover{

  aspect-ratio:16 / 9;

  display:flex; align-items:center; justify-content:center;

  background:#0b0f15;

}

.game-card__cover img, .game-media img, .cover img{

  max-width:92%; max-height:92%;

  width:100%; height:100%; object-fit:contain; display:block;

}



/* Texto/meta */

.game-card__meta, .game-body{ padding:12px 14px; }

.game-card h3{ margin:6px 0 6px; font-size:18px; line-height:1.15; color:#e7edf7; }

.game-card p{ color:#a7b3c7; font-size:14px; margin:0; }



/* Chips / tags */

.tag{

  display:inline-block; font-size:12px; line-height:1;

  color:#8fb3ff; background:rgba(143,179,255,.08);

  border:1px solid rgba(143,179,255,.25);

  padding:2px 8px; border-radius:999px; margin-bottom:6px;

}



/* Fondo sutil para página de Games (añade class="page-games" al <body>) */

.page-games{

  background:

    radial-gradient(600px 300px at 20% 18%, rgba(56,132,255,.10), transparent 60%),

    radial-gradient(600px 300px at 82% 35%, rgba(255,120,0,.09), transparent 60%),

    linear-gradient(180deg, #0a0f14 0%, #0b1118 100%);

}

.page-games::after{

  content:""; position:fixed; inset:0; pointer-events:none;

  box-shadow: inset 0 0 140px rgba(0,0,0,.35); z-index:-1;

}



/* --------- Game detail hero (logos grandes sin recorte) --------- */

.game-hero .hero-img{

  width:100%; height: clamp(260px, 42vw, 520px);

  object-fit: contain; background:#0d0f14;

  border-bottom:1px solid var(--line);

}

.hero-logo{

  display:block; width: min(62vw, 760px); height:auto; margin: 0 auto 10px;

  filter: drop-shadow(0 8px 30px rgba(255,80,0,.35));

}



/* --------- Gallery --------- */

.grid{ display:grid; gap:12px; }

.grid-4{ grid-template-columns: repeat(4,1fr); }

@media (max-width:960px){ .grid-4{ grid-template-columns: repeat(3,1fr); } }

@media (max-width:640px){ .grid-4{ grid-template-columns: repeat(2,1fr); } }



.gallery img{

  width:100%; height:190px; object-fit:cover;

  background:#0d1118; border:1px solid var(--line); border-radius:10px;

  cursor: zoom-in;

}

.img-keep{ width:100%; height:auto; object-fit:contain; background:#0d1118; border:1px solid var(--line); border-radius:10px; }



/* --------- Lightbox (galería ampliada) --------- */

.lightbox{

  position: fixed; inset: 0; display:none;

  background: rgba(0,0,0,.82); z-index: 1000; padding: 24px;

  align-items: center; justify-content: center;

}

.lightbox.open{ display:flex; }

.lightbox img{

  max-width: min(96vw, 1400px); max-height: 90vh;

  border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.6);

}

.lightbox .nav, .lightbox .close{

  position: absolute; border:1px solid rgba(255,255,255,.22);

  background: rgba(0,0,0,.45); color:#fff; cursor:pointer;

  border-radius:10px; padding:10px 14px; font-size:28px; line-height:1;

  backdrop-filter:saturate(120%) blur(4px);

}

.lightbox .close{ top:12px; right:12px; font-size:30px; }

.lightbox .nav{ top:50%; transform: translateY(-50%); }

.lightbox .prev{ left:12px; } .lightbox .next{ right:12px; }

.lightbox .nav:hover, .lightbox .close:hover{ background: rgba(255,255,255,.12); }



/* --------- Socials (footer chips) --------- */

.socials{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 8px; }

.socials a{

  display:inline-block; padding:6px 10px; border-radius:999px;

  border:1px solid var(--line); background:rgba(255,255,255,.04);

  color:#cfd7e6; text-decoration:none; font-size:.88rem;

}

.socials a:hover{ border-color:#92a0b8; }



/* --------- Footer --------- */

.site-footer{

  margin-top:30px; padding:24px 20px; color:var(--muted);

  border-top:1px solid var(--line);

}



/* --------- Responsive tweaks --------- */

@media (max-width:820px){

  .nav{ gap:6px; }

  .news-list li{ padding:10px 12px; }

}

@media (max-width:520px){

  .nav a{ padding:7px 9px; }

}

/* === Fondo global con orbes azul + ámbar y viñeta === */

:root{

  --orb-blue:  rgba(56,132,255,.10);   /* azul suave */

  --orb-amber: rgba(255,160,60,.10);   /* ámbar suave */

  --vignette:  rgba(0,0,0,.35);        /* viñeta */

}



body{

  background: linear-gradient(180deg, #0a0f14 0%, #0b1118 100%);

}



/* Orbes y viñeta, fijos detrás del contenido */

body::before{

  content:"";

  position: fixed; inset: 0;

  pointer-events: none;

  z-index: -2;

  filter: saturate(120%) contrast(105%);

  background:

    radial-gradient(600px 300px at 18% 20%, var(--orb-blue),  transparent 60%),

    radial-gradient(600px 300px at 82% 38%, var(--orb-amber), transparent 60%);

}



body::after{

  content:"";

  position: fixed; inset: 0;

  pointer-events: none;

  z-index: -1;

  box-shadow: inset 0 0 140px var(--vignette);

}



/* Ajuste en móviles: orbes un poco más pequeños */

@media (max-width: 640px){

  body::before{

    background:

      radial-gradient(360px 180px at 20% 18%, var(--orb-blue),  transparent 60%),

      radial-gradient(360px 180px at 80% 36%, var(--orb-amber), transparent 60%);

  }

}



/* (Opcional) Si alguna página no debe mostrar orbes (por ejemplo un fondo muy cargado),

   añade class="no-orbs" al <body> de esa página */

body.no-orbs::before,

body.no-orbs::after{ display: none; }

/* === Orbes + viñeta un poco más intensos (override) === */

:root{

  --orb-blue:  rgba(56,132,255,.16);   /* antes .10 */

  --orb-amber: rgba(255,160,60,.14);   /* antes .10 */

  --vignette:  rgba(0,0,0,.42);        /* antes .35 */

}



body::before{

  /* orbes un poco más grandes y saturados */

  background:

    radial-gradient(720px 360px at 17% 20%, var(--orb-blue),  transparent 62%),

    radial-gradient(720px 360px at 83% 40%, var(--orb-amber), transparent 62%);

  filter: saturate(125%) contrast(110%);

}



@media (max-width: 640px){

  body::before{

    background:

      radial-gradient(420px 210px at 22% 20%, var(--orb-blue),  transparent 62%),

      radial-gradient(420px 210px at 78% 38%, var(--orb-amber), transparent 62%);

  }

}

/* --- Hero con logo centrado (KM2, etc.) --- */

.hero--logo{

  background:

    radial-gradient(1100px 520px at 50% -8%, rgba(255,255,255,.06), transparent 60%);

  border-bottom: 1px solid var(--line);

}

.hero--logo .wrap{ text-align:center; padding: 28px 0 18px; }



.hero-logo{

  display:block;

  width: min(820px, 68vw);    /* << tamaño del logo */

  height:auto;

  margin: 8px auto 12px;

  filter: drop-shadow(0 10px 34px rgba(0,0,0,.42));

}



.hero-cta{

  display:flex;

  gap:10px;

  justify-content:center;

  flex-wrap:wrap;

}

/* Trailer embed */

.video-embed{

  position:relative;

  padding-top:56.25%;   /* 16:9 */

  border-radius:12px;

  overflow:hidden;

  border:1px solid var(--line);

  background:#0d1118;

}

.video-embed iframe{

  position:absolute;

  inset:0;

  width:100%;

  height:100%;

  border:0;

}

/* RPG gallery like Comics (full-width, no crop) */

.gallery-stacked{ display:grid; grid-template-columns:1fr; gap:12px; }

.gallery-stacked .img-keep{

  width:100%; height:auto; display:block; object-fit:contain; /* no recorte */

  border-radius:12px; border:1px solid var(--line); background:#0b0f15;

  box-shadow:0 10px 24px rgba(0,0,0,.35);

  transition:transform .2s ease, box-shadow .2s ease;

}

.gallery-stacked .img-keep:hover{

  transform:translateY(-1px);

  box-shadow:0 16px 36px rgba(0,0,0,.45);

}



/* Lightbox (si no lo tenías ya) */

.lightbox{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.82); z-index:1000; padding:24px; }

.lightbox.open{ display:flex; }

.lightbox img{ max-width:min(96vw,1600px); max-height:90vh; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.6); }

.lightbox .lb-btn{

  position:absolute; border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.45);

  color:#fff; cursor:pointer; border-radius:10px; padding:10px 14px; font-size:28px; line-height:1;

  backdrop-filter:saturate(120%) blur(4px);

}

.lightbox .lb-close{ top:12px; right:12px; font-size:30px }

.lightbox .lb-prev{ top:50%; left:12px; transform:translateY(-50%) }

.lightbox .lb-next{ top:50%; right:12px; transform:translateY(-50%) }

.lightbox .lb-btn:hover{ background:rgba(255,255,255,.12) }

/* Hero universal con fondo + gradiente */

.hero-banner{

  position:relative; border-bottom:1px solid var(--line);

  background-image:

    linear-gradient(180deg, rgba(6,10,14,.55), rgba(8,12,18,.82)),

    var(--hero, var(--hero-img, none));

  background-size: 100% 100%, cover;

  background-position:center; background-repeat:no-repeat;

}

.hero-banner .wrap{

  min-height:320px; padding:36px 0;

  display:flex; align-items:center; justify-content:center; text-align:center;

}

.hero-logo{ width:min(760px,80vw); height:auto; object-fit:contain;

  margin:0 auto; filter:drop-shadow(0 14px 40px rgba(0,0,0,.45)); }

.hero-cta{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }