/* mipiel.ar — identidad editorial.
   Deliberadamente distinta de la paleta comercial de Juní Perá: una biblioteca
   que se lee como material de marca pierde la neutralidad que la vuelve
   citable. El vínculo con el laboratorio se declara en el texto, no en el color. */

:root {
  --fondo: #fbfaf7;
  --papel: #ffffff;
  --tinta: #1b2321;
  --tinta-suave: #4d5a56;
  --tenue: #7a8681;
  --linea: #e2ded6;
  --acento: #1f6b5c;
  --acento-suave: #eef4f2;
  --destacado: #b45f1f;
  --medida: 68ch;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #14191a;
    --papel: #1a2122;
    --tinta: #eceae4;
    --tinta-suave: #b3bdb9;
    --tenue: #8a9591;
    --linea: #2c3537;
    --acento: #6fbfa9;
    --acento-suave: #1e2b28;
    --destacado: #e09256;
  }
}

:root[data-theme="dark"] {
  --fondo: #14191a;
  --papel: #1a2122;
  --tinta: #eceae4;
  --tinta-suave: #b3bdb9;
  --tenue: #8a9591;
  --linea: #2c3537;
  --acento: #6fbfa9;
  --acento-suave: #1e2b28;
  --destacado: #e09256;
}

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

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

a { color: var(--acento); text-underline-offset: 0.18em; }
a:hover { color: var(--destacado); }

.saltar {
  position: absolute; left: -9999px;
  background: var(--acento); color: #fff;
  padding: .6rem 1rem; border-radius: 0 0 .4rem 0; z-index: 10;
}
.saltar:focus { left: 0; top: 0; }

.contenedor {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 20px;
}

/* ---------------------------------------------------------------- cabecera */

.cabecera {
  border-bottom: 1px solid var(--linea);
  background: var(--papel);
}
.cabecera-fila {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: baseline; justify-content: space-between;
  padding-block: 1.1rem;
}
.marca { text-decoration: none; color: var(--tinta); display: flex; flex-direction: column; }
.marca-nombre { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; }
.marca-punto { color: var(--acento); }
.marca-bajada { font-size: .78rem; color: var(--tenue); letter-spacing: .04em; text-transform: uppercase; }

.nav { display: flex; flex-wrap: wrap; gap: 1.4rem; font-size: .95rem; }
.nav a { text-decoration: none; color: var(--tinta-suave); }
.nav a:hover { color: var(--acento); text-decoration: underline; }

/* ------------------------------------------------------------------- hero */

.hero {
  background: var(--acento-suave);
  border-bottom: 1px solid var(--linea);
  padding-block: clamp(2.5rem, 7vw, 4.5rem);
}
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1.15; margin: 0 0 1rem;
  max-width: 22ch; letter-spacing: -.015em;
}
.hero-bajada { max-width: var(--medida); font-size: 1.12rem; color: var(--tinta-suave); margin: 0; }

.bloque { padding-block: clamp(2rem, 5vw, 3.25rem); }
.bloque > h2 {
  font-family: var(--serif); font-size: 1.5rem; margin: 0 0 1.25rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--linea);
}

/* --------------------------------------------------------------- artículo */

.articulo { padding-block: clamp(1.75rem, 4vw, 3rem); }

.miga { font-size: .85rem; color: var(--tenue); margin-bottom: 1.5rem; }
.miga a { color: var(--tinta-suave); }

.eyebrow {
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--acento); margin: 0 0 .4rem; font-weight: 600;
}

.articulo-cabecera h1 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 4.5vw, 2.6rem);
  line-height: 1.18; margin: 0 0 1rem; max-width: 26ch; letter-spacing: -.015em;
}

/* La definición citable: primer párrafo, aislado, de 40 a 60 palabras.
   Es el bloque que un sistema extrae cuando necesita responder en dos líneas. */
.definicion {
  font-size: 1.18rem; line-height: 1.6; color: var(--tinta-suave);
  max-width: var(--medida); margin: 0 0 1.75rem;
  padding-left: 1rem; border-left: 3px solid var(--acento);
}

.creditos {
  display: flex; flex-wrap: wrap; gap: .75rem 2rem;
  justify-content: space-between; align-items: baseline;
  padding-block: 1rem; border-block: 1px solid var(--linea);
  font-size: .92rem;
}
.creditos-firmas { display: flex; flex-direction: column; gap: .3rem; }
.firma-rol { color: var(--tenue); }
.firma-revision { color: var(--tinta-suave); }
.creditos-fechas { display: flex; flex-direction: column; gap: .3rem; color: var(--tenue); font-size: .88rem; }
.actualizado { font-weight: 600; color: var(--tinta-suave); }

.cuerpo { max-width: 100%; margin-top: 2rem; }
.cuerpo > * { max-width: var(--medida); }
.cuerpo > .tabla-scroll { max-width: min(100%, 58rem); }

.cuerpo h2 {
  font-family: var(--serif); font-size: 1.5rem; line-height: 1.25;
  margin: 2.75rem 0 .85rem; letter-spacing: -.01em;
}
.cuerpo h3 { font-size: 1.15rem; margin: 2rem 0 .6rem; }
.cuerpo p { margin: 0 0 1.15rem; }
.cuerpo ul, .cuerpo ol { margin: 0 0 1.25rem; padding-left: 1.35rem; }
.cuerpo li { margin-bottom: .45rem; }
.cuerpo strong { color: var(--tinta); }

.cuerpo blockquote {
  margin: 1.5rem 0; padding: .25rem 0 .25rem 1.15rem;
  border-left: 3px solid var(--linea); color: var(--tinta-suave); font-style: italic;
}

.cuerpo code { font-family: var(--mono); font-size: .9em; background: var(--acento-suave); padding: .1em .35em; border-radius: .25em; }

/* Bloques de texto citado literal: un INCI tal como figura en el envase.
   Se muestran en monoespaciada porque lo que importa es que se lea carácter
   por carácter, no que se lea cómodo. El scroll horizontal evita que una
   lista larga rompa el ancho de la columna en un teléfono. */
.cuerpo pre {
  margin: 1.5rem 0; padding: .9rem 1.1rem;
  background: var(--acento-suave); border-radius: .4rem;
  overflow-x: auto; font-size: .92rem; line-height: 1.6;
}
.cuerpo pre code { background: none; padding: 0; font-size: 1em; }

/* Tablas reales, nunca imágenes: es lo que se puede leer y citar.
   Rompen el ancho de lectura a propósito: una comparativa de seis columnas
   apretada en 68 caracteres deja de ser legible. */
.tabla-scroll {
  max-width: min(100%, 58rem);
  margin: 1.75rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: .4rem;
}
.tabla-scroll table { margin: 0; min-width: 34rem; }
.tabla-scroll th, .tabla-scroll td { white-space: normal; }
.tabla-scroll td:first-child, .tabla-scroll th:first-child { min-width: 8rem; }

.cuerpo table, table {
  width: 100%; border-collapse: collapse; margin: 1.5rem 0;
  font-size: .95rem; background: var(--papel);
}
caption {
  caption-side: top; text-align: left; font-size: .85rem;
  color: var(--tenue); padding-bottom: .5rem;
}
th, td { padding: .6rem .75rem; border: 1px solid var(--linea); text-align: left; vertical-align: top; }
thead th { background: var(--acento-suave); font-weight: 600; }
tbody th[scope="row"] { background: var(--acento-suave); font-weight: 600; width: 32%; }

.fuentes {
  max-width: var(--medida); margin-top: 3rem;
  padding-top: 1.5rem; border-top: 1px solid var(--linea);
}
.fuentes h2 { font-family: var(--serif); font-size: 1.25rem; margin: 0 0 .75rem; }
.fuentes ol { padding-left: 1.25rem; font-size: .92rem; color: var(--tinta-suave); }

.aviso {
  max-width: var(--medida); margin-top: 2rem;
  background: var(--acento-suave); border-radius: .5rem;
  padding: 1rem 1.15rem; font-size: .9rem; color: var(--tinta-suave);
}
.aviso p { margin: 0; }

/* --------------------------------------------------------------- tarjetas */

.tarjetas {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.tarjeta {
  display: flex; flex-direction: column; gap: .4rem;
  background: var(--papel); border: 1px solid var(--linea); border-radius: .6rem;
  padding: 1.15rem; text-decoration: none; color: var(--tinta);
}
a.tarjeta:hover { border-color: var(--acento); }
.tarjeta-eyebrow { font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; color: var(--tenue); }
.tarjeta-titulo { font-family: var(--serif); font-size: 1.18rem; line-height: 1.3; }
.tarjeta-texto { font-size: .92rem; color: var(--tinta-suave); }

.lista-articulos { padding-left: 1.2rem; }
.vacio { color: var(--tenue); }

/* -------------------------------------------------------------------- pie */

.pie {
  margin-top: 4rem; border-top: 1px solid var(--linea);
  background: var(--papel); padding-block: 2rem;
  font-size: .9rem; color: var(--tinta-suave);
}
.pie-transparencia { max-width: var(--medida); margin: 0 0 1rem; }
.pie-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1rem; }
.pie-legal { color: var(--tenue); font-size: .85rem; margin: 0; }

@media (max-width: 40rem) {
  .creditos { flex-direction: column; gap: .75rem; }
  tbody th[scope="row"] { width: auto; }
}