/* =========================================================
   Base: reset, tipografía, foco y títulos comunes
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
}

body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  color: var(--text);
  font: 400 1.05rem/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--gold);
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
strong { color: var(--gold); font-weight: 600; }
h1, h2, h3 { margin: 0; font-weight: 400; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.px {
  shape-rendering: crispEdges;
  image-rendering: pixelated;
  overflow: visible;
}

.skip {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 300;
  padding: 12px 16px;
  background: var(--gold);
  color: var(--ink);
  font: 700 var(--px-xs)/1 var(--f-pixel);
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* Títulos de pantalla */
.stage-title {
  margin-bottom: 20px;
  color: var(--gold);
  font: 400 clamp(1.7rem, 4vw, 3.3rem)/1.02 var(--f-display);
  letter-spacing: .01em;
  text-shadow: 3px 3px 0 var(--red), 6px 6px 0 var(--ink);
  text-wrap: balance;
}

/* Movimiento reducido: sin parpadeos ni desplazamientos en toda la web */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}