/* Tilt Jump: la web lleva el aspecto del juego. Papel milimetrado de día y plano azul de noche */
@font-face { font-family: "TJ Saira Stencil"; src: url("fonts/saira-stencil-one-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "TJ Barlow C"; src: url("fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "TJ Barlow SC"; src: url("fonts/barlow-semi-condensed-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "TJ Barlow SC"; src: url("fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "TJ Barlow SC"; src: url("fonts/barlow-semi-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #eef3f6;
  --grid: #d6e3eb;
  --grid-major: #b9cfdd;
  --ink: #1b2838;
  --ink-soft: #52657a;
  --copper: #a8541f;
  --copper-line: #c4692f;
  --sheet: rgba(250, 252, 253, 0.94);
  --sheet-line: #b9cfdd;
  --lime: #c6e83f;
  --lime-ink: #1b2838;
  --font-ui: "TJ Barlow SC", "Barlow Semi Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-head: "TJ Barlow C", "Barlow Condensed", "Roboto Condensed", "Arial Narrow", Impact, sans-serif;
  --font-logo: "TJ Saira Stencil", "Saira Stencil One", Impact, sans-serif;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #13416c;
    --grid: rgba(214, 232, 255, 0.075);
    --grid-major: rgba(214, 232, 255, 0.16);
    --ink: #e7f0fa;
    --ink-soft: #a7bdd4;
    --copper: #f0a06a;
    --copper-line: #db7d42;
    --sheet: rgba(12, 46, 82, 0.94);
    --sheet-line: rgba(214, 232, 255, 0.24);
    --lime: #d2f04c;
    --lime-ink: #10263d;
  }
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 16px); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 500 18px/1.55 var(--font-ui);
  /* cuadrícula: una línea fina cada 16 px y una gruesa cada 80, como el fondo del juego */
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1.4px, transparent 1.4px),
    linear-gradient(90deg, var(--grid-major) 1.4px, transparent 1.4px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--copper); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2.5px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--copper-line); outline-offset: 3px; border-radius: 4px; }
strong { font-weight: 700; }

/* Portada */
.cover {
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(48px, 12vh, 120px) 24px 64px;
}
.logo {
  margin: 0 0 28px;
  font: 400 clamp(64px, 19vw, 132px)/0.9 var(--font-logo);
  letter-spacing: 0.01em;
  transform: rotate(-6deg);
  transform-origin: left bottom;
}
.logo span { display: block; }
.logo span + span { margin-left: 0.55em; }
.lede { margin: 0 0 12px; font-size: clamp(21px, 5vw, 25px); line-height: 1.35; font-weight: 600; max-width: 30ch; }
.cover p { max-width: 34rem; }
.links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 32px 0 0; padding: 0; list-style: none; font-weight: 600; }

/* Documentos: política de privacidad y borrar cuenta */
.doc {
  max-width: 44rem;
  margin: 24px auto 48px;
  padding: 28px clamp(20px, 5vw, 48px) 36px;
  background: var(--sheet);
  border: 1.5px solid var(--sheet-line);
  border-radius: 14px;
}
.doc-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 8px; }
.home { font: 400 26px/1 var(--font-logo); color: var(--ink); text-decoration: none; display: inline-block; transform: rotate(-6deg); }
.lang { display: flex; gap: 14px; font-weight: 600; }
.lang [aria-current="true"] { color: var(--ink); text-decoration: none; }
h1, h2 { font-family: var(--font-head); font-weight: 800; line-height: 1.05; letter-spacing: 0.005em; }
h1 { margin: 22px 0 6px; font-size: clamp(36px, 8vw, 48px); }
h2 { margin: 36px 0 8px; font-size: 27px; }
.doc p, .doc ul, .doc ol { max-width: 66ch; }
.doc li { margin: 6px 0; }
.date { margin: 0 0 20px; color: var(--ink-soft); font-weight: 600; }
.summary { margin: 18px 0 8px; padding: 14px 18px 14px 20px; border-left: 4px solid var(--copper-line); background: color-mix(in srgb, var(--copper-line) 9%, transparent); border-radius: 0 10px 10px 0; }
.summary ul { margin: 0; padding-left: 20px; }
.lang-block + .lang-block { margin-top: 56px; padding-top: 28px; border-top: 1.5px dashed var(--sheet-line); }
.contact { display: inline-block; margin-top: 4px; padding: 10px 18px; border-radius: 12px; background: var(--lime); color: var(--lime-ink); font-weight: 700; text-decoration: none; }
.contact:hover { filter: brightness(1.05); }
footer { max-width: 44rem; margin: 0 auto 32px; padding: 0 24px; color: var(--ink-soft); font-size: 15px; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }