/* Páginas de texto (privacidad, sobre el juego). Reusa la paleta de styles.css. */
:root {
  --night: #08130D; --pitch: #0F2419; --chalk: #F2F5EE; --chalk-dim: #B9C4BB;
  --line: rgba(242, 245, 238, .16); --yellow: #FFD400;
  --display: "Anton", "Impact", sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--night); }
body {
  margin: 0; min-height: 100dvh; color: var(--chalk); font: 400 1.0625rem/1.65 var(--body);
  background: var(--pitch) repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 28px, transparent 28px 56px);
}
.top { display: flex; align-items: center; height: 56px; background: var(--night); border-bottom: 1px solid var(--line); }
.brand {
  position: relative; z-index: 0; display: flex; align-items: center; height: 100%;
  padding: 0 22px 0 16px; color: var(--night); text-decoration: none;
  font: 400 1.7rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em;
}
.brand::before { content: ""; position: absolute; inset: 0 0 0 -20px; z-index: -1; background: var(--yellow); transform: skewX(-14deg); }
.brand span { opacity: .55; }
.volver { margin-left: auto; margin-right: 16px; color: var(--chalk-dim); font: 600 .95rem var(--cond); text-transform: uppercase; letter-spacing: .12em; text-decoration: none; }
.volver:hover, .volver:focus-visible { color: var(--yellow); }
main { max-width: 720px; margin: 0 auto; padding: 40px 20px 64px; }
.kicker { margin: 0; color: var(--yellow); font: 700 .9rem var(--cond); text-transform: uppercase; letter-spacing: .18em; }
h1 { margin: 4px 0 8px; font: 400 clamp(2.2rem, 7vw, 3.2rem)/1.05 var(--display); text-transform: uppercase; }
h2 { margin: 36px 0 8px; font: 700 1.35rem/1.2 var(--cond); text-transform: uppercase; letter-spacing: .06em; }
p, li { color: #DCE3D6; }
.fecha-act { color: var(--chalk-dim); font-size: .95rem; }
a { color: var(--yellow); }
ul { padding-left: 1.2em; }
li { margin: 4px 0; }
.pie { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 16px; color: var(--chalk-dim); font-size: .9rem; }
.pie a { color: var(--chalk-dim); }

/* Historias */
.bajada { font-size: 1.2rem; color: var(--chalk); }
.donde { margin: 20px 0 28px; padding: 12px 16px; border-left: 4px solid var(--yellow); background: rgba(8,19,13,.55); color: var(--chalk); font-weight: 600; }
.donde span { display: block; color: var(--yellow); font: 700 .8rem var(--cond); text-transform: uppercase; letter-spacing: .18em; }
.dato-final { font-style: italic; color: var(--chalk-dim); }
.cta {
  display: block; margin: 32px 0 8px; padding: 16px 20px; text-align: center; text-decoration: none;
  background: var(--yellow); color: var(--night); font: 700 1.1rem var(--cond); text-transform: uppercase; letter-spacing: .1em;
}
.cta:hover, .cta:focus-visible { background: #FFE14D; }
.historias { list-style: none; padding: 0; display: grid; gap: 12px; }
.historias a { display: block; padding: 14px 16px; border: 1px solid var(--line); background: rgba(8,19,13,.45); text-decoration: none; color: var(--chalk-dim); }
.historias a:hover, .historias a:focus-visible { border-color: var(--yellow); }
.historias b { display: block; margin: 2px 0 4px; color: var(--chalk); font: 700 1.25rem var(--cond); text-transform: uppercase; letter-spacing: .04em; }
.historias .cat { color: var(--yellow); font: 700 .75rem var(--cond); text-transform: uppercase; letter-spacing: .18em; }