/*
 * reset.css — Reset moderno de CSS
 *
 * Inspirado en el enfoque de Josh Comeau y Andy Bell.
 * Elimina inconsistencias entre navegadores y establece
 * una base sensata para el sistema de diseño.
 *
 * Depende de tokens.css (usa --color-accent-primary, --color-navy-deep,
 * --color-gold-soft).
 */

/* ─── Box model global ───────────────────────────────────────────────────── */

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

* {
  margin: 0;
  padding: 0;
}

/* ─── Raíz del documento ─────────────────────────────────────────────────── */

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
  /*
   * Evita el rebote elástico (rubber-band) en iOS/Android al hacer
   * overscroll. Sin esto, el header sticky/fixed se "despega" del borde
   * superior durante el rebote, dejando un hueco visible detrás.
   */
  overscroll-behavior-y: none;
}

/* ─── Cuerpo base ────────────────────────────────────────────────────────── */

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* clip no crea scroll container, por lo que no rompe position:sticky */
}

/* ─── Media elements ─────────────────────────────────────────────────────── */

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

figure {
  max-width: 100%;
}

/* ─── Herencia tipográfica en formularios ────────────────────────────────── */

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* ─── Texto ──────────────────────────────────────────────────────────────── */

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ─── Links ──────────────────────────────────────────────────────────────── */

a {
  text-decoration-skip-ink: auto;
  color: inherit;
}

/* ─── Listas en navegación ───────────────────────────────────────────────── */

nav ul,
nav ol {
  list-style: none;
}

/* ─── Botones ────────────────────────────────────────────────────────────── */

button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  line-height: inherit;
}

button:disabled {
  cursor: not-allowed;
}

/* ─── Focus accesible ────────────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ─── Selección de texto con colores de marca ────────────────────────────── */

::selection {
  background-color: var(--color-gold-soft);
  color: var(--color-navy-deep);
}

/* ─── Utilidad de accesibilidad: oculto visualmente pero legible ──────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ─── Tablas ─────────────────────────────────────────────────────────────── */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ─── Separador horizontal ───────────────────────────────────────────────── */

hr {
  border: none;
  border-top: var(--border-thin) solid var(--color-border-subtle);
  margin-block: var(--space-lg);
}