/*
 * Terrakusine: base (fuente, reset y tipografía). Requiere tokens.css.
 * Guía: .claude/docs/guia-de-diseno.md
 */

/* Hanken Grotesk (OFL, ver fuentes/OFL.txt), servida desde el propio hosting */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 300; font-display: swap; src: url("fuentes/hanken-grotesk-latin-300.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("fuentes/hanken-grotesk-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("fuentes/hanken-grotesk-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("fuentes/hanken-grotesk-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 800; font-display: swap; src: url("fuentes/hanken-grotesk-latin-800.woff2") format("woff2"); }

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

html { height: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--tk-papel);
  color: var(--tk-texto);
  font-family: var(--tk-fuente);
  font-size: var(--tk-letra-base);
  line-height: var(--tk-interlineado);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--tk-accion-texto); }
h1, h2, h3, h4, p { margin: 0; }

:focus-visible { outline: var(--tk-borde-foco) solid var(--tk-foco); outline-offset: 2px; }

[hidden] { display: none !important; }

/* Título de pantalla: juego liviano + negrita del wordmark ("Listado de <b>productos</b>") */
.titulo {
  font-size: var(--tk-letra-3xl);
  font-weight: var(--tk-peso-liviano);
  line-height: var(--tk-interlineado-titulo);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.titulo b { font-weight: var(--tk-peso-titulo); }

/* Cifras alineadas */
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* Sólo para lectores de pantalla */
.solo-lector {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}