/* ==========================================================================
   base.css — reset, design tokens, tipografía
   Atlas de Biodiversidad · J.E. Jaimes Ingenieros S.A.S.
   ========================================================================== */

:root {
  /* --- Marca ------------------------------------------------------------ */
  --rojo: #c8202f;
  --rojo-osc: #a4141f;
  --rojo-claro: #e84353;
  --rojo-tinte: #fdf0f1;
  --rojo-borde: #f6d6d9;

  /* --- Verdes de biodiversidad (escala de densidad del mapa) ------------ */
  --v1: #e8f2e2;
  --v2: #cbe3bd;
  --v3: #9ecd8a;
  --v4: #63a95e;
  --v5: #357d43;
  --v6: #1f4a2e;

  /* --- Neutros ---------------------------------------------------------- */
  --tinta: #1a2420;
  --tinta-2: #24302b;
  --gris-1: #5c675f;
  --gris-2: #8a938c;
  --gris-3: #c3c9c3;
  --linea: #e5e7e3;
  --linea-sutil: #eef0ec;
  --papel: #f7f6f1;
  --papel-2: #fbfaf7;
  --blanco: #ffffff;

  /* --- Semánticos ------------------------------------------------------- */
  --ok: #2f7d4f;
  --alerta: #b3701a;
  --fondo: var(--papel);
  --texto: var(--tinta-2);
  --texto-tenue: var(--gris-1);

  /* --- Estados UICN ----------------------------------------------------- */
  --uicn-lc: #2f9e5f;
  --uicn-nt: #8fb63a;
  --uicn-vu: #e0a93b;
  --uicn-en: #dd7038;
  --uicn-cr: #c8202f;

  /* --- Tipografía ------------------------------------------------------- */
  --fuente: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-num: 'Archivo', system-ui, sans-serif;

  --t-xs: 0.6875rem;   /* 11px */
  --t-sm: 0.8125rem;   /* 13px */
  --t-base: 0.9375rem; /* 15px */
  --t-md: 1.0625rem;   /* 17px */
  --t-lg: 1.375rem;    /* 22px */
  --t-xl: 1.875rem;    /* 30px */
  --t-2xl: 2.5rem;     /* 40px */
  --t-3xl: 3.5rem;     /* 56px */
  --t-4xl: 4.75rem;    /* 76px */

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-bold: 700;
  --peso-black: 800;

  /* --- Espaciado (escala de 4) ------------------------------------------ */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;
  --e-10: 8rem;

  /* --- Formas ----------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-full: 999px;

  --sombra-1: 0 1px 2px rgba(26, 36, 32, 0.04), 0 2px 8px rgba(26, 36, 32, 0.04);
  --sombra-2: 0 2px 4px rgba(26, 36, 32, 0.05), 0 8px 24px rgba(26, 36, 32, 0.07);
  --sombra-3: 0 4px 8px rgba(26, 36, 32, 0.06), 0 18px 48px rgba(26, 36, 32, 0.12);
  --sombra-rojo: 0 6px 20px rgba(200, 32, 47, 0.28);

  /* --- Layout ----------------------------------------------------------- */
  --ancho: 1240px;
  --ancho-estrecho: 820px;
  --alto-header: 74px;

  /* --- Movimiento ------------------------------------------------------- */
  --ease-suave: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-salida: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-rapida: 0.18s;
  --dur-media: 0.36s;
  --dur-lenta: 0.6s;
}

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

* {
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--fuente);
  font-size: var(--t-base);
  font-weight: var(--peso-normal);
  line-height: 1.6;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

/* `hidden` debe ganar siempre. Sin esto, cualquier regla de clase que fije
   `display` (por ejemplo `.campos { display: grid }`) deja visible un elemento
   marcado como oculto, porque tiene la misma especificidad que la regla del
   navegador para [hidden]. */
[hidden] {
  display: none !important;
}

img {
  height: auto;
}

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

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* --- Tipografía --------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5 {
  font-weight: var(--peso-black);
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--tinta);
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 5.5vw, var(--t-4xl)); }
h2 { font-size: clamp(1.75rem, 3.6vw, var(--t-2xl)); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); letter-spacing: -0.02em; }
h5 { font-size: var(--t-md); letter-spacing: -0.01em; }

p { text-wrap: pretty; }

/* --- Utilidades de texto ------------------------------------------------ */
.eyebrow {
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rojo);
}

.eyebrow--tenue { color: var(--gris-2); }

.lead {
  font-size: var(--t-md);
  line-height: 1.62;
  color: var(--texto-tenue);
}

.tenue { color: var(--texto-tenue); }
.sm { font-size: var(--t-sm); }
.xs { font-size: var(--t-xs); }
.bold { font-weight: var(--peso-bold); }
.cientifico { font-style: italic; }
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

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

/* --- Foco visible ------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--rojo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Selección ---------------------------------------------------------- */
::selection {
  background: var(--rojo);
  color: #fff;
}

/* --- Scrollbar ---------------------------------------------------------- */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: var(--papel); }
  ::-webkit-scrollbar-thumb {
    background: var(--gris-3);
    border: 3px solid var(--papel);
    border-radius: var(--r-full);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--gris-2); }
}