/* ═══════════════════════════════════════════════════════════════════════════
   GRAVITY FLIP — hoja del sitio público
   ═══════════════════════════════════════════════════════════════════════════
   Los tokens NO son nuevos: salen de www/style.css, que es lo que pinta el
   juego. Oro #ffd542, cian #4cf2ff, morado #c77dff, verde #7dde8b, superficie
   blanca al .05 con canto superior al .20 y radio 6. Si el juego cambia de
   paleta, se cambia AQUÍ y en www/style.css, no en cada página.

   La letra va autoalojada (el mismo .woff2 que la app) y no desde Google
   Fonts: el sitio tiene que verse igual que el juego incluso con el CDN
   caído, y una fuente de tercero en la portada es una petición externa que no
   hace falta.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url(space-grotesk-latin.woff2) format('woff2');
}

:root {
  --bg:#06080e;
  --gold:#ffd542; --gold-hi:#ffe57e; --gold-lo:#f0a91d;
  --cyan:#4cf2ff; --purple:#c77dff; --green:#7dde8b; --red:#ff6b6b; --orange:#ffae62;
  --ink:#1a1a2e;
  --txt:#ffffff;
  --txt-2:rgba(255,255,255,.68);
  --txt-3:rgba(255,255,255,.55);
  --txt-4:rgba(255,255,255,.34);
  --surf:rgba(255,255,255,.05);
  --edge:rgba(255,255,255,.12);
  --edge-top:rgba(255,255,255,.20);
  --hair:rgba(255,255,255,.09);
  --gut:120px;
}

* { box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a { color:var(--cyan); text-decoration:none; }
a:hover { color:#9df7ff; }

img { max-width:100%; }

.wrap { max-width:1440px; margin:0 auto; }

/* ---------- Barra ---------- */
.topbar {
  display:flex; align-items:center; gap:40px;
  padding:20px var(--gut);
  border-bottom:1px solid var(--hair);
  position:sticky; top:0; z-index:20;
  background:rgba(6,8,14,.92);
  backdrop-filter:blur(10px);
}
.brand { display:flex; align-items:center; gap:12px; }
.brand-txt { font-size:15px; font-weight:700; letter-spacing:2px; color:var(--txt); }
.brand-txt span { color:var(--gold); }

/* El cubo: radio = lado / 6. Es la firma geométrica del juego, no un token. */
.cube { position:relative; width:26px; height:26px; border-radius:4px; background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo)); flex-shrink:0; }
.cube i { position:absolute; top:9px; width:4px; height:7px; border-radius:2px; background:var(--ink); }
.cube i:first-child { left:5px; }
.cube i:last-child { left:17px; }

.navlinks { display:flex; align-items:center; gap:28px; flex:1; font-size:12px; font-weight:700; letter-spacing:2px; }
.navlinks a { color:rgba(255,255,255,.62); }
.navlinks a:hover { color:var(--txt); }

/* ---------- Botones ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 26px; border-radius:6px;
  font-size:15px; font-weight:700; letter-spacing:1.5px;
  border:1px solid transparent; cursor:pointer;
}
.btn-gold {
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo)); color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 6px 26px rgba(255,213,66,.26);
}
.btn-gold:hover { color:var(--ink); filter:brightness(1.06); }
.btn-ghost { background:var(--surf); border:1px solid var(--edge); border-top-color:var(--edge-top); color:var(--txt); }
.btn-ghost:hover { color:var(--txt); background:rgba(255,255,255,.08); }
.btn-sm { min-height:40px; padding:0 20px; font-size:12px; letter-spacing:2px; }
.btn-lg { min-height:58px; padding:0 34px; font-size:16px; }
.btn-block { display:flex; width:100%; }

/* ---------- Piezas ---------- */
.card {
  background:var(--surf);
  border:1px solid var(--edge);
  border-top:1px solid var(--edge-top);
  border-radius:6px;
}
.pill {
  display:inline-flex; align-items:baseline; gap:8px;
  padding:9px 16px; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  font-size:14px; font-weight:700; letter-spacing:1px; color:rgba(255,255,255,.72);
}
.pill b { color:var(--txt); }
.tag {
  display:inline-block; padding:6px 12px; border-radius:999px;
  background:var(--surf); border:1px solid var(--edge);
  font-size:11px; font-weight:700; letter-spacing:1px; color:var(--txt-3);
}

.eyebrow { font-size:12px; font-weight:700; letter-spacing:2px; }
.sec { padding:110px var(--gut) 0; }
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:36px; }
.sec-head h2 { margin:0; font-size:46px; font-weight:700; letter-spacing:1px; line-height:1.05; }
.sec-head .lede { max-width:380px; font-size:15px; line-height:1.65; color:var(--txt-3); text-wrap:pretty; }

.grid-2 { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; }
.grid-3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; }

/* ---------- El pasillo ---------- */
/* Todo en absoluto dentro de una caja con proporción fija: es un dibujo, no
   una maqueta, y en móvil tiene que encoger entero y no reordenarse. */
.hall {
  position:relative; border-radius:6px; overflow:hidden;
  background:linear-gradient(180deg,#080b13,#0a0e18);
  border:1px solid rgba(255,255,255,.10);
}
.hall .roof, .hall .floor { position:absolute; left:0; right:0; height:10%; }
.hall .roof { top:0; background:linear-gradient(180deg,#12141a,#0a0d15); border-bottom:1px solid rgba(255,107,107,.45); }
.hall .floor { bottom:0; background:linear-gradient(0deg,#12141a,#0a0d15); border-top:1px solid rgba(255,107,107,.45); }
.hall .axis { position:absolute; left:0; right:0; top:50%; height:1px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 10px, transparent 10px 22px); }
.hall .bar { position:absolute; border-radius:4px; background:linear-gradient(180deg,#2a3040,#1b2130); border:1px solid rgba(255,107,107,.35); }
.hall .band { position:absolute; border-radius:4px; background:linear-gradient(180deg,var(--purple),#7b3fb8); box-shadow:0 0 22px rgba(199,125,255,.35); }
.hall .coin { position:absolute; border-radius:999px; background:linear-gradient(180deg,var(--gold-hi),#c9a416); box-shadow:0 0 14px rgba(255,213,66,.5); }
.hall .trail { position:absolute; border-radius:4px; background:var(--gold); }
.hall .hero-cube { position:absolute; border-radius:6px; background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo)); box-shadow:0 0 34px rgba(255,213,66,.55), inset 0 -3px 0 rgba(201,164,22,.7); }
.hall .hero-cube i { position:absolute; top:34%; width:16%; height:29%; border-radius:3px; background:var(--ink); }
.hall .hero-cube i:first-child { left:21%; }
.hall .hero-cube i:last-child { left:63%; }
.hall .metros { position:absolute; left:2%; top:15%; font-size:12px; font-weight:700; letter-spacing:2px; color:var(--txt-4); }

/* ---------- Pie ---------- */
.foot { margin-top:110px; padding:56px var(--gut) 44px; border-top:1px solid var(--hair); }
/* Cinco columnas (una es el idioma) no caben con 80 px de hueco: la ultima
   se caia a una segunda fila ella sola. 56 las mete justas a 1440. */
.foot-cols { display:flex; gap:44px 56px; flex-wrap:wrap; }
.foot-col { display:flex; flex-direction:column; gap:12px; }
.foot-col h3 { margin:0; font-size:11px; font-weight:700; letter-spacing:2px; color:var(--txt-4); }
.foot-col a { font-size:14px; color:rgba(255,255,255,.62); }
.foot-col a:hover { color:var(--txt); }
.foot-base {
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:44px; padding-top:24px; border-top:1px solid rgba(255,255,255,.07);
  font-size:12px; color:var(--txt-4);
}

/* ---------- Páginas de texto (legal) ---------- */
.doc { max-width:1000px; margin:0 auto; padding:56px var(--gut) 0; }
.doc h1 { margin:0; font-size:44px; font-weight:700; letter-spacing:.5px; line-height:1.08; }
.doc h2 { margin:48px 0 18px; font-size:26px; font-weight:700; letter-spacing:.5px; }
.doc h2 .num { font-size:12px; letter-spacing:2px; color:var(--gold); margin-right:14px; vertical-align:middle; }
.doc h3 { margin:0; font-size:15px; font-weight:700; letter-spacing:1.5px; }
.doc p, .doc li { font-size:15px; line-height:1.7; color:var(--txt-2); }
.doc ul, .doc ol { padding-left:22px; margin:0; }
.doc ul li, .doc ol li { margin:9px 0; }
.doc .meta { margin-top:14px; font-size:13px; color:var(--txt-3); line-height:1.7; }
.doc code { font-family:inherit; font-weight:700; color:var(--gold); }
.crumbs { display:flex; align-items:center; gap:10px; font-size:12px; font-weight:700; letter-spacing:1.5px; color:var(--txt-4); margin-bottom:22px; }
.crumbs a { color:var(--txt-4); }
.note { display:flex; gap:14px; padding:20px 24px; border-radius:6px; margin-top:28px; }
.note svg { flex-shrink:0; margin-top:2px; }
.note p { margin:0; }
.note-info { background:rgba(76,242,255,.06); border:1px solid rgba(76,242,255,.22); border-top-color:rgba(76,242,255,.34); }
.note-warn { background:rgba(255,107,107,.07); border:1px solid rgba(255,107,107,.26); }
.note-plain { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); }
/* `.doc ol` gana en especificidad a `.steps`, asi que la sangria y el margen
   del texto corrido se colaban dentro de la lista de pasos: filas metidas 22 px
   y separadas 9 px por una banda negra. Los dos selectores llevan `.doc`
   delante por eso, no por gusto. */
.doc .steps { display:flex; flex-direction:column; gap:1px; border-radius:6px; overflow:hidden; border:1px solid var(--edge); list-style:none; padding:0; margin:0; }
.doc .steps li { display:flex; align-items:center; gap:18px; padding:16px 22px; background:var(--surf); margin:0; }
.steps .n { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:4px; background:rgba(255,213,66,.14); border:1px solid rgba(255,213,66,.3); font-size:12px; font-weight:700; color:var(--gold); flex-shrink:0; }
.split { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; }
.split > div { padding:26px; border-radius:6px; }
.split .goes { background:rgba(255,107,107,.05); border:1px solid rgba(255,107,107,.24); border-top-color:rgba(255,107,107,.36); }
.split .stays { background:rgba(125,222,139,.05); border:1px solid rgba(125,222,139,.24); border-top-color:rgba(125,222,139,.36); }
.split h3 { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.split .goes h3 { color:var(--red); }
.split .stays h3 { color:var(--green); }
.split ul { padding-left:0; list-style:none; }
/* La raya NO va como hermano flex: un `li` con un `<b>` dentro tiene tres
   hijos (raya, negrita, texto) y en flex cada uno se convierte en una COLUMNA
   -- la frase se parte en tres trozos apilados. Va absoluta, y el texto fluye
   como texto. */
.split li { position:relative; padding-left:18px; font-size:14px; line-height:1.6; }
.split li::before { content:'—'; position:absolute; left:0; top:0; }
.split .goes li::before { color:var(--red); }
.split .stays li::before { color:var(--green); }
.rows { display:flex; flex-direction:column; gap:1px; border-radius:6px; overflow:hidden; border:1px solid var(--edge); }
.rows > div { display:flex; align-items:center; gap:20px; padding:16px 22px; background:var(--surf); font-size:14px; color:var(--txt-2); }
.rows > div > :first-child { flex:1; }
.rows b { font-size:13px; letter-spacing:1px; color:var(--txt-3); }
.rows b.ok { color:var(--green); }
/* ---------- Selector de idioma ----------
   Un control segmentado de dos casillas, no un <select>: son dos idiomas y
   siempre los mismos, y un desplegable esconde la mitad de la respuesta.
   El idioma activo es un <span> y el otro un <a> con href de verdad -- funciona
   sin JavaScript, se puede abrir en otra pestana y un buscador lo sigue. */
.langsel {
  display:flex; gap:2px; padding:2px; flex-shrink:0;
  border-radius:6px; background:rgba(255,255,255,.05); border:1px solid var(--edge);
}
.langsel a, .langsel span {
  display:flex; align-items:center; padding:7px 13px; border-radius:4px;
  font-size:11px; font-weight:700; letter-spacing:1.5px; line-height:1;
}
.langsel span { background:rgba(255,213,66,.16); color:var(--gold); }
.langsel a { color:rgba(255,255,255,.5); }
.langsel a:hover { color:var(--txt); background:rgba(255,255,255,.07); }

.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   MÓVIL
   ═══════════════════════════════════════════════════════════════════════════
   Un solo corte a 900 px: por debajo, todo pasa a una columna y el canalón
   baja de 120 a 20. No hay tres tamaños intermedios porque no hacen falta —
   lo que cambia de verdad entre 1440 y 390 es el número de columnas. */
@media (max-width:900px) {
  :root { --gut:20px; }
  .topbar { gap:16px; padding:16px 20px; }
  .navlinks { display:none; }
  .sec { padding-top:56px; }
  .sec-head { flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:22px; }
  .sec-head h2 { font-size:30px; letter-spacing:.5px; line-height:1.1; }
  .sec-head .lede { max-width:none; }
  .grid-2, .grid-3, .split { grid-template-columns:minmax(0, 1fr); gap:12px; }
  .foot { margin-top:56px; padding:32px 20px 36px; }
  .foot-cols { gap:32px; }
  .doc { padding-top:36px; }
  .doc h1 { font-size:30px; }
  .doc h2 { margin-top:36px; font-size:21px; }
  .btn-hide-sm { display:none; }
}