/**
 * Reset, tipografía base y rejilla de página.
 *
 * Lo que vale para todo el documento. Nada de aquí conoce ninguna sección
 * concreta: eso vive en `sections.css`.
 */

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

* {
  margin: 0;
}

html {
  /*
   * El ancla de la navegación interna tiene que caer por debajo del dock
   * fijo, si no el titular de la sección queda tapado.
   */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/*
 * Ambiente de fondo. Dos focos de marca muy abiertos y muy tenues sobre
 * `background`, uno Power arriba a la izquierda y otro Rival abajo a la
 * derecha: la misma tensión de dos colores que lleva el icono de la app.
 * Va en un pseudo-elemento fijo y sin eventos para que no repinte al hacer
 * scroll.
 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 12% -10%, rgb(198 255 74 / 0.07), transparent 60%),
    radial-gradient(45rem 35rem at 92% 108%, rgb(255 92 56 / 0.06), transparent 62%);
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/*
 * Foco visible y de marca en todo lo que se pueda tabular. `:focus-visible`
 * y no `:focus` para que el anillo no salte al hacer clic con el ratón.
 */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* ── Tipografía ─────────────────────────────────────────────────────────── */

/*
 * Recordatorio de docs/design.md: la familia es el peso. Las reglas con
 * `--font-display` no declaran `font-weight` porque el archivo ya es el 700.
 */

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

h1 {
  font-size: var(--type-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-hero);
}

h2 {
  font-size: var(--type-section);
  letter-spacing: var(--tracking-hero);
}

h3 {
  font-size: var(--type-subheading);
}

p {
  text-wrap: pretty;
}

code {
  font-family: var(--font-mono);
}

/* ── Utilidades de texto ────────────────────────────────────────────────── */

.lead {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  color: var(--color-text-secondary);
  max-width: 34ch;
}

.body-muted {
  color: var(--color-text-muted);
  max-width: 60ch;
}

/* Rótulo de sección en mayúsculas: `label` de la escala de la app. */
.label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-dim);
}

/* Cifra protagonista. `tabular-nums` para que no baile al animarse. */
.stat {
  font-family: var(--font-display);
  font-size: var(--type-stat);
  line-height: 1;
  letter-spacing: var(--tracking-hero);
  font-variant-numeric: tabular-nums;
}

.text-power {
  color: var(--color-primary);
}

.text-rival {
  color: var(--color-defeat);
}

/* Solo para lectores de pantalla. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Salto al contenido: primer tabulable del documento. */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: calc(var(--z-nav) + 1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-display);
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ── Rejilla de página ──────────────────────────────────────────────────── */

.shell {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/*
 * `--section-y` es el aire ENTRE dos secciones, no el de cada una. Por eso
 * cada sección se queda con la mitad arriba y la mitad abajo: dos seguidas
 * suman exactamente un `--section-y` y no el doble, que es lo que dejaba la
 * página llena de agujeros.
 */
section {
  padding-block: calc(var(--section-y) / 2);
}