@layer tn.base {
/* ==========================================================================
   TANATOS · base.css
   Reset mínimo, tipografía base, enlaces, foco y helpers de accesibilidad.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--tn-bg);
  color: var(--tn-text);
  font-family: var(--tn-font-sans);
  font-size: var(--tn-fs-body);
  line-height: var(--tn-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { text-wrap: balance; font-weight: var(--tn-fw-semibold); }
p { text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: separate; border-spacing: 0; }
hr { border: 0; height: 1px; background: var(--tn-line); margin: 0; }
::selection { background: var(--tn-signal); color: var(--tn-signal-ink); }

a { color: var(--tn-brand); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--tn-brand-hover); text-decoration: underline; }
a.btn:hover, a.nav-item:hover, a.journey__step:hover, a.journey__child:hover, a.queue:hover, a.card-link:hover, a.brand:hover, a.tabs__item:hover, a.list-link:hover { text-decoration: none; }

:focus-visible { outline: 2px solid var(--tn-brand); outline-offset: 2px; border-radius: var(--tn-r-xs); }
.sidebar :focus-visible, .on-ink :focus-visible { outline-color: var(--tn-signal); }

/* ---------- Escala tipográfica ---------- */
.t-display { font-size: var(--tn-fs-display); line-height: 1.04; letter-spacing: -0.035em; font-weight: var(--tn-fw-semibold); }
.t-h1 { font-size: var(--tn-fs-h1); line-height: var(--tn-lh-tight); letter-spacing: var(--tn-track-tight); font-weight: var(--tn-fw-semibold); }
.t-h2 { font-size: var(--tn-fs-h2); line-height: 1.25; letter-spacing: var(--tn-track-snug); font-weight: var(--tn-fw-semibold); }
.t-h3 { font-size: var(--tn-fs-h3); line-height: 1.35; letter-spacing: -0.01em; font-weight: var(--tn-fw-semibold); }
.t-lede { font-size: var(--tn-fs-lede); line-height: 1.55; color: var(--tn-text-2); }
.t-body { font-size: var(--tn-fs-body); }
.t-sm { font-size: var(--tn-fs-sm); }
.t-xs { font-size: var(--tn-fs-xs); }
.t-label { font-size: var(--tn-fs-xs); font-weight: var(--tn-fw-medium); color: var(--tn-text-3); }
.t-kicker { font-size: 12.5px; font-weight: var(--tn-fw-medium); color: var(--tn-text-3); display: inline-flex; align-items: center; gap: var(--tn-sp-2); }
.t-mono, .mono { font-family: var(--tn-font-mono); font-feature-settings: "tnum"; letter-spacing: -0.01em; }
.mono .tn-missing, .t-mono .tn-missing { font-family: var(--tn-font-sans); letter-spacing: 0; } /* «No informado» es texto (kit, 2026-10-29) */
.t-num { font-variant-numeric: tabular-nums; }
.t-strong { font-weight: var(--tn-fw-semibold); }
.t-medium { font-weight: var(--tn-fw-medium); }
.t-muted { color: var(--tn-text-2); }
.t-faint { color: var(--tn-text-3); }
.t-center { text-align: center; }
.t-right { text-align: right; }
.t-nowrap { white-space: nowrap; }

/* ---------- Iconos (SVG inline, trazo) ---------- */
.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ico--xs { width: 13px; height: 13px; stroke-width: 2.1; }
.ico--sm { width: 15px; height: 15px; }
.ico--lg { width: 22px; height: 22px; }
.ico--xl { width: 28px; height: 28px; stroke-width: 1.6; }
.ico .dash { stroke-dasharray: 3.2 3.2; }

/* ---------- Accesibilidad ---------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: calc(var(--tn-z-intro) + 1); background: var(--tn-ink); color: #fff; padding: 10px 14px; border-radius: var(--tn-r-md); font-weight: var(--tn-fw-medium); transition: top var(--tn-dur-2) var(--tn-ease); }
.skip-link:focus { top: 12px; color: #fff; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

}