/* Base: reset, tipografía, foco accesible y utilidades. */

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

/* Desplazamientos por foco/anclas: dejan libres el header sticky, el stepper sticky (≤1024) y la cadena inferior (>1024). */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + var(--stepper-h, 0px) + 16px);
  scroll-padding-bottom: 100px;
}
@media (max-width: 1024px) { html { scroll-padding-bottom: 16px; } }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.45;
  letter-spacing: -.005em;
  color: var(--text);
  background: var(--bg-glow), var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--transition), color var(--transition);
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: var(--text-link); }
h1, h2, h3, h4, h5 { margin: 0; line-height: 1.15; letter-spacing: -.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
table { border-collapse: collapse; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-4) 0; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; border-radius: var(--radius-xs); }
/* Los títulos reciben foco programático (lectores de pantalla) al cambiar de paso: sin anillo visible. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

::selection { background: var(--info-bg); color: var(--text); }

/* Scrollbars discretas en ambos temas */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

.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: 12px; top: -48px; z-index: var(--z-toast);
  background: var(--surface); color: var(--text); padding: 10px 14px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); font-weight: var(--fw-bold);
}
.skip-link:focus { top: 12px; }

.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden, [hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}