/* Páginas estáticas (aviso de privacidad, borrar cuenta). Los colores vienen de /tokens.css, que se liga
   antes que este archivo (generado desde design/tokens.json). Mismo lenguaje que el resto de la web:
   Big Shoulders en mayúsculas para lo que se grita, mono para lo que se etiqueta y una luz verde arriba. */
@font-face {
  font-family: 'Big Shoulders Display';
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/big-shoulders-caps.woff2') format('woff2');
  unicode-range: U+0020-005A, U+00A1, U+00BF, U+00C1, U+00C9, U+00CD, U+00D1, U+00D3, U+00DA, U+00DC, U+2019;
}
:root {
  color-scheme: dark;
  --display: 'Big Shoulders Display', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  background: radial-gradient(ellipse 90% 26rem at 50% 0, color-mix(in srgb, var(--accent) 16%, transparent), transparent), var(--background);
  background-repeat: no-repeat;
  color: var(--on-background);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
}
/* La cabecera y el pie viven fuera de <main> (así son banner y pie de página para el
   lector de pantalla), y cada uno se centra con el mismo ancho que el contenido. */
main { max-width: 44rem; margin: 0 auto; padding: 0 1rem 3rem; }
header.brand { max-width: 44rem; margin: 0 auto 2.5rem; padding: 2rem 1rem 0; display: flex; align-items: center; gap: 0.875rem; }
header.brand img { width: 2.75rem; height: 2.75rem; }
header.brand a { color: var(--accent); font-family: var(--display); font-weight: 900; font-size: 2rem; line-height: 1; letter-spacing: 0.02em; text-decoration: none; text-transform: uppercase; }
h1 { font-family: var(--display); font-size: clamp(3.25rem, 14vw, 5rem); line-height: 0.86; font-weight: 900; text-transform: uppercase; text-wrap: balance; margin-bottom: 1rem; }
h2 { font-family: var(--display); font-size: 1.875rem; line-height: 1; font-weight: 900; text-transform: uppercase; margin: 2.75rem 0 0.875rem; border-top: 1px solid var(--divider); padding-top: 1.25rem; }
p, li { margin-bottom: 0.75rem; }
ul, ol { padding-left: 1.25rem; }
li::marker { color: var(--accent); }
ol li::marker { font-family: var(--mono); font-weight: 700; }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
strong { font-weight: 700; }
.lead { font-size: 1.25rem; line-height: 1.4; color: var(--on-background); margin-top: 1.25rem; max-width: 36rem; }
.muted { color: var(--muted); }
p.muted:first-of-type { font-family: var(--mono); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.cta { display: inline-block; margin: 0.5rem 0 1rem; padding: 0.9rem 1.5rem; border-radius: 1rem; background: var(--accent); color: var(--background); font-weight: 800; text-decoration: none; }
.cta:hover { filter: brightness(1.08); }
.box { border: 2px solid var(--on-background); background: var(--surface); padding: 1rem; margin: 1.5rem 0; }
footer { max-width: 44rem; margin: 3rem auto 0; padding: 1.25rem 1rem 3rem; border-top: 1px solid var(--divider); color: var(--muted); font-size: 0.9375rem; }
footer a { margin-right: 1.25rem; font-family: var(--mono); font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }
footer p { margin-top: 0.75rem; }