/* Akervo — web publica.
   Sobria a proposito: la audiencia es tecnica e institucional (curadores de
   banco, responsables de centro, contratacion publica). Una web con mucho
   efecto resta credibilidad ante ese lector. */

:root {
  --tinta: #1a1f1c;
  --tinta-suave: #4a544d;
  --papel: #fbfaf7;
  --papel-hueco: #f2f0ea;
  --linea: #ddd9cf;
  --acento: #2f6b4f;
  --acento-claro: #e6efe9;
  --animal: #8a5a3c;
  --vegetal: #4a7c3f;
  --ancho: 68rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #e8e6e0;
    --tinta-suave: #a8b0a8;
    --papel: #141815;
    --papel-hueco: #1c211d;
    --linea: #2e3630;
    --acento: #7fbf9a;
    --acento-claro: #1e2a23;
    --animal: #c99a78;
    --vegetal: #8fc47e;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 17px/1.65 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 1.5rem; }

/* --- Cabecera --------------------------------------------------------- */

header.principal {
  border-bottom: 1px solid var(--linea);
  background: var(--papel);
  position: sticky;
  top: 0;
  z-index: 10;
}

header.principal .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  flex-wrap: wrap;
}

.marca {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tinta);
  text-decoration: none;
}
.marca span { color: var(--acento); }

nav.principal { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
nav.principal a {
  color: var(--tinta-suave);
  text-decoration: none;
  font-size: 0.95rem;
  font-family: system-ui, -apple-system, sans-serif;
}
nav.principal a:hover, nav.principal a[aria-current="page"] { color: var(--acento); }

.idioma {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  color: var(--tinta-suave) !important;
}

/* --- Bloques ---------------------------------------------------------- */

main { padding: 3.5rem 0 4rem; }
section { margin-bottom: 3.5rem; }

h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.15;
  margin: 0 0 1.2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

h2 {
  font-size: 1.6rem;
  margin: 2.5rem 0 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

h3 { font-size: 1.15rem; margin: 1.8rem 0 0.6rem; font-weight: 600; }

.entradilla {
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--tinta-suave);
  max-width: 46rem;
}

p { max-width: 46rem; }
a { color: var(--acento); }

.eyebrow {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 0.8rem;
}

/* --- Rejillas --------------------------------------------------------- */

.rejilla { display: grid; gap: 1.5rem; margin-top: 1.5rem; }

/* El minimo manda sobre el nombre de la clase: con `auto-fit`, lo que decide
   cuantas columnas caben es el `minmax`, no lo que uno esperaba al bautizarla.
   Con 20rem cabian TRES en un contenedor de 68rem, y una cuadricula de cuatro
   tarjetas dejaba la cuarta sola en su fila. 24rem fuerza dos de verdad. */
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.tarjeta {
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 1.4rem;
  background: var(--papel-hueco);
}
.tarjeta h3 { margin-top: 0; }
.tarjeta p { margin-bottom: 0; font-size: 0.98rem; }

/* Alinear titulo y texto ENTRE tarjetas de la misma fila.
   Sin esto, un titulo de dos lineas empuja su parrafo hacia abajo mientras los
   vecinos de una linea empiezan mas arriba, y la fila entera se lee desigual.
   `subgrid` hace que las dos filas internas de cada tarjeta sean las mismas
   pistas del contenedor, asi que todos los titulos ocupan el alto del mas alto
   y todos los parrafos arrancan a la vez.
   Dentro de `@supports` porque donde no haya subgrid el resultado sigue siendo
   correcto, solo que desigual: se degrada, no se rompe. */
@supports (grid-template-rows: subgrid) {
  .tarjeta {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    align-content: start;
    /* Una subcuadricula hereda el `gap` del contenedor, asi que el 1.5rem que
       separa tarjetas se colaba TAMBIEN entre el titulo y su parrafo. Se anula
       aqui y la separacion la vuelve a dar el margen del h3, como antes. El
       hueco entre tarjetas no se toca: ese lo sigue poniendo el contenedor. */
    row-gap: 0;
  }
}

/* --- Tablas ----------------------------------------------------------- */

.tabla-envoltorio { overflow-x: auto; margin: 1.5rem 0; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; min-width: 34rem; }
th, td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { font-family: system-ui, sans-serif; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-suave); }
td.animal { color: var(--animal); }
td.vegetal { color: var(--vegetal); }

/* En movil las tablas se APILAN, no se deslizan.
   Con scroll horizontal, la tabla de reinos mostraba «Concepto» y «Perfil
   animal» y dejaba la columna vegetal fuera de pantalla: una comparacion con
   la mitad invisible, y sin ninguna senal de que hubiera mas a la derecha. Es
   justo la pagina que carga el diferencial del producto.
   Apiladas, cada fila pasa a ser un bloque y cada celda una linea, con su
   etiqueta delante para saber que es cada cosa: el color por si solo no basta,
   y menos para quien no lo distingue. */
@media (max-width: 44rem) {
  .tabla-envoltorio { overflow-x: visible; }
  .tabla-envoltorio table { min-width: 0; }
  .tabla-envoltorio thead { display: none; }

  .tabla-envoltorio tr {
    display: block;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--linea);
  }
  .tabla-envoltorio tr:last-child { border-bottom: none; }

  .tabla-envoltorio td {
    display: block;
    border: none;
    padding: 0.15rem 0;
  }
  .tabla-envoltorio td:first-child { font-weight: 600; color: var(--tinta); }

  /* La etiqueta la ponen las clases que ya distinguen la celda, asi que no
     hace falta ensuciar el HTML con un atributo por celda. */
  .tabla-envoltorio td.animal::before { content: "Animal · "; }
  .tabla-envoltorio td.vegetal::before { content: "Vegetal · "; }
  .tabla-niveles td:nth-child(2)::before { content: "Nivel · "; }

  /* Las paginas inglesas usan las mismas clases, asi que la etiqueta se traduce
     por el `lang` del documento en vez de duplicar clases por idioma. */
  :lang(en) .tabla-envoltorio td.vegetal::before { content: "Plant · "; }
  :lang(en) .tabla-niveles td:nth-child(2)::before { content: "Level · "; }

  .tabla-envoltorio td::before {
    font-family: system-ui, sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tinta-suave);
  }
}

/* --- Estados del roadmap ---------------------------------------------- */

.estado {
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.55rem;
  border-radius: 3px;
  white-space: nowrap;
  border: 1px solid var(--linea);
  color: var(--tinta-suave);
}
.estado.desarrollo { border-color: var(--acento); color: var(--acento); background: var(--acento-claro); }
.estado.disponible { background: var(--acento); border-color: var(--acento); color: var(--papel); }

/* --- Pie -------------------------------------------------------------- */

footer.principal {
  border-top: 1px solid var(--linea);
  padding: 2.5rem 0;
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
  color: var(--tinta-suave);
}
footer.principal a { color: var(--tinta-suave); }
footer.principal .contenedor { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }

.nota {
  border-left: 3px solid var(--acento);
  padding: 0.2rem 0 0.2rem 1.1rem;
  color: var(--tinta-suave);
  margin: 1.5rem 0;
  max-width: 46rem;
}

ul.limpia { list-style: none; padding: 0; }
ul.limpia li { padding: 0.4rem 0; border-bottom: 1px solid var(--linea); }

.salto-contenido {
  position: absolute;
  left: -9999px;
}
.salto-contenido:focus {
  left: 1rem; top: 1rem; position: fixed; z-index: 100;
  background: var(--papel); padding: 0.6rem 1rem; border: 2px solid var(--acento);
}