/* onclic.shop — Base tipográfica y elementos globales */
html { font-size: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--gray-900);
  background: var(--gray-50);
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--lh-tight); color: var(--brand-900); }
h1 { font-size: clamp(2.25rem, 5vw, var(--fs-4xl)); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
p  { color: var(--gray-700); }

a { color: var(--brand-500); }
a:hover, a:focus-visible { text-decoration: underline; }

/* Foco visible global (accesibilidad AA) — nunca eliminar sin reemplazo */
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-sm); }

/* Números tabulares para precios/dominios */
.tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }

/* Skip-link accesible */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-toast);
  background: var(--brand-600); color: var(--white);
  padding: var(--sp-3) var(--sp-4); border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

/* Solo lectores de pantalla */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-muted { color: var(--gray-500); }