/* Reset, page ground, and the states that apply everywhere. */

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

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

body {
  margin: 0;
  background: var(--crema);
  color: var(--noche);
  font-family: var(--font-body);
  font-size: var(--text-size);
  line-height: var(--text-line);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

/* Links shift verde and take an ambar underline. */
a { color: inherit; }

.ap-prose a {
  color: var(--selva);
  text-decoration-color: var(--ambar);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.ap-prose a:hover { color: var(--verde); }

/* One focus treatment, on everything — including SVG map points. */
:focus-visible {
  outline: var(--anillo-foco);
  outline-offset: var(--anillo-offset);
}

button { font: inherit; }

/* — Typographic primitives — */

.ap-display {
  font-family: var(--font-display);
  line-height: var(--display-line);
  letter-spacing: var(--display-tracking);
  font-weight: 400;
}

/* Section titles: Archivo at width 118%, black, uppercase. */
.ap-title {
  font-stretch: var(--title-stretch);
  font-weight: var(--title-weight);
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: var(--title-line);
  letter-spacing: var(--title-tracking);
  text-transform: uppercase;
}

.ap-measure { max-width: var(--medida); }
.ap-prose {
  max-width: var(--prosa);
  text-wrap: pretty;
}
.ap-prose p + p { margin-top: 14px; }

/* Mono means: this is data, and it may be missing.
   Opacity is .7, not .6: ink at .6 over cream measures 4.30:1 and fails AA.
   .7 measures 5.93:1 and still reads as secondary. axe caught the original. */
.ap-mono,
.ap-pending {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  opacity: .7;
  font-weight: 500;
}

.ap-binomial { font-style: italic; font-weight: 500; }
.ap-authority {
  font-style: normal;
  font-weight: 600;
  font-size: .62em;
  opacity: .8;
}

/* — Layout containers — */

.ap-container {
  max-width: var(--ancho-ficha);
  margin: 0 auto;
  padding-inline: var(--canal);
}
.ap-container--wide { max-width: var(--ancho-directorio); }
.ap-container--sheet { padding-inline: 22px; }

.ap-section { padding-block: var(--e-9); }

.ap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: var(--e-5);
}

/* Available to screen readers, absent from the visual layout. */
.ap-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ap-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ambar);
  color: var(--noche);
  padding: 12px 18px;
  z-index: 200;
  border-radius: 0 0 var(--radio-suave) 0;
}
.ap-skip-link:focus { left: 0; }

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