/* vgames.cl — página de inicio. Mismos tokens que la aplicación (OLED, rojo coral). Sin fuentes externas. */
:root {
  --negro: #050506; --fondo: #0b0c0e; --panel: #14161a; --panel-2: #1c1f25;
  --linea: rgba(255, 255, 255, .09); --texto: #ece9e4; --tenue: #9aa0a6;
  --acento: #ff4d3d; --acento-2: #c9372c;
  --fuente: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; background: var(--negro); color: var(--texto);
  font: 400 1.05rem/1.55 var(--fuente); -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(60rem 36rem at 15% -8%, rgba(255, 77, 61, .20), transparent 60%),
    radial-gradient(48rem 30rem at 95% 30%, rgba(120, 60, 255, .10), transparent 60%);
  background-repeat: no-repeat;
}
a { color: inherit; }
img { display: block; }

.barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1rem, 5vw, 4rem); }
.marca { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; }
.marca b { color: var(--acento); font-weight: 700; }
nav { display: flex; align-items: center; gap: .4rem; }
nav a { text-decoration: none; padding: .5rem .9rem; border-radius: 999px; color: var(--tenue); transition: color .2s, background .2s; }
nav a:hover { color: var(--texto); background: rgba(255, 255, 255, .06); }
nav a.entrar { color: var(--texto); box-shadow: inset 0 0 0 1px var(--linea); }

main { max-width: 68rem; margin: 0 auto; padding: 0 clamp(1rem, 5vw, 2rem) 4rem; }
.portada { padding: clamp(2.5rem, 9vw, 6rem) 0 3rem; }
.etiqueta { margin: 0 0 1rem; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--acento); font-weight: 700; }
h1 { margin: 0; font-size: clamp(2.6rem, 8vw, 5.2rem); line-height: .98; letter-spacing: -.035em; font-weight: 800; }
.sub { max-width: 38rem; margin: 1.4rem 0 0; color: var(--tenue); font-size: clamp(1.02rem, 2.2vw, 1.2rem); }
.acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.boton {
  display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.5rem; border-radius: 999px; text-decoration: none; font-weight: 600;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--linea); transition: transform .15s, background .2s, box-shadow .2s;
}
.boton:hover { background: rgba(255, 255, 255, .13); transform: translateY(-1px); }
.boton.primario { background: var(--acento); color: #14090a; box-shadow: 0 10px 40px rgba(255, 77, 61, .35); }
.boton.primario:hover { background: #ff6657; }
.boton svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.boton:focus-visible, nav a:focus-visible, summary:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; }
.detalle { margin: 1rem 0 0; color: var(--tenue); font-size: .92rem; }
.aviso { margin-top: 1.2rem; max-width: 40rem; color: var(--tenue); font-size: .93rem; }
.aviso summary { cursor: pointer; width: fit-content; }
.aviso p { margin: .7rem 0 .5rem; }
.aviso code { display: block; padding: .7rem .9rem; border-radius: .6rem; background: var(--panel); box-shadow: inset 0 0 0 1px var(--linea); font: 500 .8rem/1.4 ui-monospace, Consolas, monospace; word-break: break-all; color: var(--texto); user-select: all; }

.seccion { padding: 2.5rem 0 1rem; }
h2 { margin: 0 0 1.2rem; font-size: 1.5rem; letter-spacing: -.02em; }
.juegos { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1.1rem; }
.vacio { color: var(--tenue); margin: 0; }
.ficha { position: relative; aspect-ratio: 2 / 3; border-radius: 1.1rem; overflow: hidden; background: var(--panel); box-shadow: 0 0 0 1px var(--linea), 0 18px 50px rgba(0, 0, 0, .5); transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
.ficha:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 24px 60px rgba(0, 0, 0, .6), 0 0 60px color-mix(in oklab, var(--c, #ff4d3d) 40%, transparent); }
.ficha img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ficha .velo { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .85)); }
.ficha .sinarte { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; text-align: center; font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; background: radial-gradient(circle at 50% 30%, color-mix(in oklab, var(--c, #ff4d3d) 55%, #000), #07080a 75%); }
.ficha .pie { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem; }
.ficha h3 { margin: 0; font-size: 1.05rem; line-height: 1.2; }
.ficha p { margin: .25rem 0 0; font-size: .85rem; color: #cfcfd2; }
.ficha .chip { display: inline-block; margin-top: .55rem; padding: .18rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgba(255, 255, 255, .14); }

.familia ol { margin: 0; padding-left: 1.3rem; max-width: 40rem; color: var(--tenue); }
.familia li { margin: .4rem 0; }
.familia li b { color: var(--texto); }
.nota { max-width: 40rem; margin-top: 1rem; color: var(--tenue); font-size: .93rem; }

footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: 2rem clamp(1rem, 5vw, 4rem); color: var(--tenue); font-size: .85rem; border-top: 1px solid var(--linea); }

@media (max-width: 36rem) {
  nav a:not(.entrar) { display: none; }
  .boton { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* páginas de texto (privacidad) */
.doc { max-width: 46rem; padding-top: 2.5rem; }
.h1-doc { font-size: clamp(2rem, 6vw, 3.4rem); }
.doc h2 { margin: 2.2rem 0 .6rem; font-size: 1.25rem; }
.doc p, .doc li { color: #c9ccd0; }
.doc ul { padding-left: 1.2rem; }
.doc li { margin: .5rem 0; }
.doc b { color: var(--texto); }
footer a { color: var(--texto); }