/* Tokens (colores, tipografía, tamaños), base del documento y etiquetas comunes. */
/* Atlas de papel: el mapa ocupa toda la pantalla; las fichas son hojas de papel que suben desde abajo (móvil) o flotan a la izquierda (escritorio). */
:root {
  --mar: #c9d3d4;          /* agua: gris azulado suave */
  --tierra: #f7f2e7;       /* tierra: blanco cálido */
  --papel: #fbf8f1;        /* fichas */
  --linea: #e4dccd;        /* filetes y bordes */
  --frontera: #c8bca9;
  --tinta: #2a231e;        /* negro cálido */
  --tinta-2: #6c6158;      /* texto secundario */
  --tinta-3: #776c60;      /* 4.8:1 sobre el papel: legible también en letra pequeña */
  --rojo: #9d3b2b;         /* rojo apagado: nuestros sitios */
  --oliva: #66693a;        /* conciertos y eventos */
  --terracota: #c0714c;    /* restaurantes */
  --visitado: #b4583f;     /* lavado de países visitados */
  --sombra: 0 10px 36px rgba(42, 35, 30, .14), 0 1px 3px rgba(42, 35, 30, .08);

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --t-xs: .6875rem;  /* 11px etiquetas */
  --t-s: .875rem;
  --t-m: 1.0625rem;  /* 17px texto */
  --t-l: 1.375rem;
  --t-xl: 1.875rem;
  --t-xxl: clamp(2.1rem, 7.5vw, 3.25rem);

  color-scheme: light;
}

[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--tierra);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: var(--t-m);
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; border-radius: 4px; }

/* ---------- Etiquetas comunes ---------- */
.eti {
  font-family: var(--serif);
  font-style: italic;
  font-size: .98rem;
  color: var(--tinta-2);
  line-height: 1.4;
}
.num { font-variant-numeric: tabular-nums lining-nums; font-style: normal; }