/* Expediente Ambiental — sistema visual
   Papel, tinta y filetes finos. Acento cobre para secciones; azul glaciar para enlaces.
   Sin sombras decorativas ni tarjetas con fondo. */

@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("/fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("/fonts/plex-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* Color: papel, bosque, salvia, tierra y rubor */
  --papel: #F5F1E8;
  --papel-2: #ECE6D8;
  --tinta: #1B2520;
  --tinta-2: #34423A;
  --roca: #5B665F;
  --filete: #CDD2C4;
  --cobre: #8A4A2B;      /* tierra: secciones y acentos */
  --glaciar: #2E5C42;    /* enlaces */
  --foco: #2E5C42;
  --aviso: #F3E1D6;      /* rubor */
  --bosque: #2F4A38;
  --bosque-osc: #22352A;
  --salvia: #A9C3A0;
  --arcilla: #D9A38A;

  /* Tipografía */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Espacio (escala de 4 px) */
  --e1: 0.25rem; --e2: 0.5rem; --e3: 0.75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2rem; --e7: 3rem; --e8: 4rem;

  --ancho: 76rem;
  --medida: 40rem; /* unos 68 caracteres de cuerpo */
  --gutter: 1rem;
}
@media (min-width: 48rem) { :root { --gutter: 2rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.6;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--glaciar); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--tinta); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 1px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.envoltura { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }

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

/* Accesos */
.saltar { position: absolute; left: var(--e4); top: -3rem; background: var(--tinta); color: var(--papel); padding: var(--e2) var(--e4); font-family: var(--sans); z-index: 10; }
.saltar:focus { top: var(--e4); color: var(--papel); }
main:focus { outline: none; }

.aviso-entorno { background: var(--bosque-osc); color: var(--papel); font-family: var(--sans); font-size: 0.8125rem; text-align: center; padding: var(--e2) var(--gutter); }

/* Cabecera */
.cabecera { }
.cabecera__linea { display: flex; justify-content: space-between; align-items: center; gap: var(--e4); padding-block: var(--e3); font-family: var(--sans); font-size: 0.8125rem; color: var(--roca); }
.cabecera__fecha:first-letter { text-transform: uppercase; }
.cabecera__buscar { display: inline-flex; align-items: center; gap: var(--e2); color: var(--tinta); text-decoration: none; padding: var(--e2) 0; min-height: 44px; }
.cabecera__buscar:hover span { text-decoration: underline; }
.cabecera__marca { text-align: center; padding-block: var(--e4) var(--e5); border-top: 1px solid var(--filete); }
.marca { display: inline-flex; align-items: baseline; gap: var(--e3); color: var(--tinta); text-decoration: none; }
.marca__exp { font-size: 0.8125rem; color: var(--cobre); border: 1px solid var(--cobre); padding: 0.1em 0.4em; transform: translateY(-0.45em); }
.marca__nombre { font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 6.5vw, 3.75rem); line-height: 1; letter-spacing: -0.02em; }
.marca:hover .marca__nombre { color: var(--tinta-2); }
.cabecera__bajada { margin: var(--e3) 0 0; font-family: var(--sans); font-size: 0.875rem; color: var(--tinta-2); }
.cabecera__bajada span { color: var(--cobre); }

.navegacion { background: var(--bosque); }
.navegacion ul { list-style: none; margin: 0 auto; display: flex; gap: var(--e5); overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.navegacion ul::-webkit-scrollbar { display: none; }
@media (min-width: 48rem) { .navegacion ul { justify-content: center; } }
.navegacion a { display: inline-flex; align-items: center; min-height: 48px; font-family: var(--sans); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; color: var(--papel); text-decoration: none; border-bottom: 2px solid transparent; }
.navegacion a:hover { border-bottom-color: var(--salvia); }
.navegacion a[aria-current="page"] { border-bottom-color: var(--arcilla); }

/* Piezas en listados */
.pieza__seccion { margin: 0 0 var(--e2); font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.pieza__seccion a { color: var(--cobre); text-decoration: none; }
.pieza__seccion a:hover { text-decoration: underline; }
.pieza__titulo { margin: 0; font-weight: 600; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.pieza__titulo a { color: var(--tinta); text-decoration: none; }
.pieza__titulo a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.pieza__titulo--grande { font-size: clamp(1.75rem, 4.2vw, 2.75rem); line-height: 1.08; letter-spacing: -0.02em; }
.pieza__bajada { margin: var(--e3) 0 0; color: var(--tinta-2); font-size: 1.0625rem; line-height: 1.45; }
.pieza--principal .pieza__bajada { font-size: 1.1875rem; }
.pieza__meta { margin: var(--e3) 0 0; font-size: 0.75rem; color: var(--roca); }
.pieza--lista { padding-block: var(--e4); border-top: 1px solid var(--filete); }
.pieza--lista .pieza__titulo { font-size: 1.1875rem; }
.etiqueta-muestra { margin-left: var(--e2); padding: 0.05em 0.4em; border: 1px solid var(--roca); color: var(--roca); font-weight: 400; letter-spacing: 0.04em; }

/* Portada tipográfica (sin foto) */
.portada-tipo { aspect-ratio: 3 / 2; background: var(--bosque); color: var(--papel); display: flex; flex-direction: column; justify-content: flex-end; gap: var(--e2); padding: var(--e5); position: relative; overflow: hidden; }
.portada-tipo::before { content: ""; position: absolute; inset: var(--e4); border: 1px solid rgba(244, 241, 234, 0.25); pointer-events: none; }
.portada-tipo__organismo { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--salvia); }
.portada-tipo__doc { font-family: var(--serif); font-size: clamp(1.5rem, 3.5vw, 2.25rem); line-height: 1.1; font-weight: 600; max-width: 22ch; }
.portada-tipo__id { font-size: 0.875rem; color: #DCE3D6; }
.pieza__visual { display: block; margin-bottom: var(--e4); }

/* Apertura de portada */
.apertura { display: grid; gap: var(--e6); padding-block: var(--e6); }
@media (min-width: 60rem) {
  .apertura { grid-template-columns: 2fr 1fr; gap: var(--e7); }
  .apertura__secundarias { border-left: 1px solid var(--filete); padding-left: var(--e6); }
}
.apertura__secundarias { display: grid; gap: var(--e5); align-content: start; }
.apertura__secundarias .pieza + .pieza { border-top: 1px solid var(--filete); padding-top: var(--e5); }

.banda { padding-block: var(--e5); }
.banda__titulo { margin: 0 0 var(--e2); padding-top: var(--e3); border-top: 2px solid var(--tinta); font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.banda__titulo a { color: var(--tinta); text-decoration: none; }
.banda__titulo a:hover { text-decoration: underline; }
.grilla-3 { display: grid; gap: 0 var(--e6); }
@media (min-width: 48rem) { .grilla-3 { grid-template-columns: repeat(3, 1fr); } }

.secciones-portada { display: grid; gap: var(--e5) var(--e6); padding-block: var(--e5) var(--e7); }
@media (min-width: 48rem) { .secciones-portada { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .secciones-portada { grid-template-columns: repeat(5, 1fr); } }
.seccion-bloque .pieza--lista .pieza__titulo { font-size: 1.0625rem; }

.metodo { padding-block: var(--e6) var(--e7); border-top: 1px solid var(--tinta); }
.metodo__titulo { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 var(--e4); }
.metodo__pasos { margin: 0 0 var(--e4); padding: 0; list-style: none; display: grid; gap: var(--e4) var(--e6); counter-reset: paso; }
@media (min-width: 48rem) { .metodo__pasos { grid-template-columns: repeat(3, 1fr); } }
.metodo__pasos li { counter-increment: paso; font-size: 1.0625rem; line-height: 1.45; color: var(--tinta-2); }
.metodo__pasos li::before { content: "0" counter(paso); display: block; font-family: var(--mono); font-size: 0.75rem; color: var(--cobre); margin-bottom: var(--e2); }
.metodo__pasos strong { color: var(--tinta); font-weight: 600; }
.metodo p a { font-family: var(--sans); font-size: 0.9375rem; }

/* Artículo */
.articulo { padding-block: var(--e6) var(--e5); }
.articulo > * { max-width: var(--medida); margin-inline: auto; }
.articulo > .articulo__figura { max-width: 56rem; }
.articulo__cabeza { margin-bottom: var(--e5); }
.articulo__seccion { margin: 0 0 var(--e3); font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cobre); }
.articulo__seccion a { color: var(--cobre); text-decoration: none; }
.articulo__seccion a:hover { text-decoration: underline; }
.articulo__titulo, .pagina__titulo { margin: 0; font-weight: 600; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.articulo__bajada { margin: var(--e4) 0 0; font-size: clamp(1.1875rem, 2.4vw, 1.375rem); line-height: 1.4; color: var(--tinta-2); }
.articulo__firma { margin-top: var(--e5); padding-top: var(--e3); border-top: 1px solid var(--filete); font-family: var(--sans); font-size: 0.875rem; }
.articulo__firma p { margin: 0; }
.articulo__firma p + p { margin-top: var(--e1); font-size: 0.75rem; color: var(--roca); }
.articulo__firma a { color: var(--tinta); font-weight: 600; }

.ficha { margin-block: var(--e5) var(--e6); border-top: 2px solid var(--tinta); border-bottom: 1px solid var(--filete); padding-block: var(--e3); }
.ficha__grilla { margin: 0; display: grid; gap: var(--e3) var(--e5); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.ficha dt { font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--roca); }
.ficha dd { margin: var(--e1) 0 0; font-family: var(--sans); font-size: 0.9375rem; line-height: 1.35; }
.ficha dd.mono { font-family: var(--mono); font-size: 0.875rem; }
.estado { display: inline-block; padding: 0.1em 0.5em; border: 1px solid var(--tinta); font-weight: 600; font-size: 0.8125rem; }
.ficha__al { color: var(--roca); font-size: 0.8125rem; }

.articulo__figura { margin: 0 auto var(--e6); }
.articulo__figura figcaption { margin-top: var(--e2); font-family: var(--sans); font-size: 0.8125rem; color: var(--tinta-2); }
.credito { color: var(--roca); }

.prosa > :first-child { margin-top: 0; }
.prosa p { margin: 0 0 var(--e4); }
.prosa h2 { margin: var(--e6) 0 var(--e3); font-size: 1.5rem; line-height: 1.2; font-weight: 600; }
.prosa h3 { margin: var(--e5) 0 var(--e2); font-family: var(--sans); font-size: 1rem; font-weight: 600; }
.prosa ul, .prosa ol { margin: 0 0 var(--e4); padding-left: 1.25em; }
.prosa li { margin-bottom: var(--e2); }
.prosa li::marker { color: var(--cobre); }
.prosa blockquote { margin: var(--e5) 0; padding: 0 0 0 var(--e4); border-left: 3px solid var(--cobre); font-style: italic; color: var(--tinta-2); }
.prosa strong { font-weight: 600; }
.prosa table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 0.9375rem; margin-bottom: var(--e5); }
.prosa th, .prosa td { text-align: left; padding: var(--e2) var(--e3) var(--e2) 0; border-bottom: 1px solid var(--filete); vertical-align: top; }
.prosa th { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--roca); border-bottom-color: var(--tinta); }
.prosa figure { margin: var(--e5) 0; }
.prosa figure img { border: 1px solid var(--filete); }
.prosa figcaption { font-family: var(--sans); font-size: 0.8125rem; color: var(--tinta-2); margin-top: var(--e2); }

.bloque__titulo { margin: 0 0 var(--e3); padding-top: var(--e3); border-top: 2px solid var(--tinta); font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.bloque-docs, .bloque-fuentes, .bloque-correcciones { margin-top: var(--e6); }
.docs { list-style: none; margin: 0; padding: 0; }
.docs__item { padding-block: var(--e3); border-bottom: 1px solid var(--filete); font-family: var(--sans); font-size: 0.9375rem; }
.docs__item a { font-weight: 600; }
.docs__meta { display: block; margin-top: var(--e1); font-size: 0.75rem; color: var(--roca); }
.fuentes { margin: 0; padding-left: 1.5em; font-family: var(--sans); font-size: 0.875rem; color: var(--tinta-2); }
.fuentes li { margin-bottom: var(--e2); }
.correcciones { list-style: none; margin: 0 0 var(--e3); padding: 0; font-family: var(--sans); font-size: 0.875rem; }
.correcciones li { padding-block: var(--e2); border-bottom: 1px solid var(--filete); }
.correcciones time { color: var(--roca); margin-right: var(--e2); font-size: 0.75rem; }
.correcciones__invitacion, .vacio-linea { font-family: var(--sans); font-size: 0.875rem; color: var(--tinta-2); }
.articulo__temas { margin-top: var(--e5); font-family: var(--sans); font-size: 0.875rem; }
.articulo__temas .mono { font-size: 0.75rem; color: var(--roca); margin-right: var(--e2); }
.relacionadas { padding-block: var(--e5) var(--e7); }

.aviso-muestra, .aviso-revision { background: var(--aviso); border-left: 3px solid var(--cobre); padding: var(--e3) var(--e4); font-family: var(--sans); font-size: 0.875rem; line-height: 1.45; color: var(--tinta); margin: 0 0 var(--e5); }

/* Páginas, listados, autor */
.pagina { padding-block: var(--e6) var(--e7); }
.pagina > * { max-width: var(--medida); margin-inline: auto; }
.pagina__cabeza { margin-bottom: var(--e6); }
.pagina__fecha { margin-top: var(--e6); font-size: 0.75rem; color: var(--roca); }
.listado { padding-block: var(--e6) var(--e7); }
.listado__cabeza { max-width: var(--medida); margin-bottom: var(--e6); }
.listado__items { max-width: 48rem; }
.lista-temas { list-style: none; padding: 0; margin: 0; columns: 2 14rem; column-gap: var(--e6); font-family: var(--sans); }
.lista-temas li { padding-block: var(--e2); border-bottom: 1px solid var(--filete); break-inside: avoid; }
.lista-temas .mono { font-size: 0.75rem; color: var(--roca); margin-left: var(--e2); }
.autor__bio { font-size: 1.125rem; color: var(--tinta-2); }
.autor__nota { font-family: var(--sans); font-size: 0.875rem; color: var(--roca); }

/* Estados vacíos y error */
.vacio { padding-block: var(--e7); max-width: var(--medida); }
.vacio__titulo { font-size: 1.75rem; font-weight: 600; line-height: 1.15; margin: 0 0 var(--e3); }
.vacio__codigo { font-size: 0.8125rem; color: var(--cobre); margin: 0 0 var(--e3); }
.vacio__buscar { margin-block: var(--e5); font-family: var(--sans); }
.vacio__buscar label { display: block; font-size: 0.875rem; margin-bottom: var(--e2); }
.vacio__buscar div { display: flex; gap: var(--e2); }
input[type="search"] { flex: 1; min-height: 44px; padding: var(--e2) var(--e3); font: inherit; font-size: 1rem; background: #fff; color: var(--tinta); border: 1px solid var(--tinta); border-radius: 0; }
button { min-height: 44px; padding: var(--e2) var(--e4); font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; background: var(--tinta); color: var(--papel); border: 1px solid var(--tinta); border-radius: 0; cursor: pointer; }
button:hover { background: var(--tinta-2); }

/* Buscador (Pagefind) */
.buscador__caja {
  --pagefind-ui-scale: 0.9;
  --pagefind-ui-primary: var(--glaciar);
  --pagefind-ui-text: var(--tinta);
  --pagefind-ui-background: #fff;
  --pagefind-ui-border: var(--tinta);
  --pagefind-ui-tag: var(--papel-2);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 0;
  --pagefind-ui-font: var(--sans);
  max-width: 48rem;
}
.buscador__caja .pagefind-ui__result-title { font-family: var(--serif); font-weight: 600; }
.buscador__caja .pagefind-ui__result-link { color: var(--tinta); }
.buscador__caja mark { background: var(--aviso); color: var(--tinta); }

/* Pie */
.pie { margin-top: var(--e6); background: var(--bosque-osc); color: var(--papel); font-family: var(--sans); font-size: 0.875rem; }
.pie a { color: var(--papel); text-decoration: none; }
.pie a:hover { text-decoration: underline; color: #fff; }
.pie__grilla { display: grid; gap: var(--e6); padding-block: var(--e7) var(--e6); }
@media (min-width: 48rem) { .pie__grilla { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.pie__nombre { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; margin: 0 0 var(--e3); }
.pie__texto { margin: 0; max-width: 34ch; color: #CBD3C6; line-height: 1.5; }
.pie__titulo { margin: 0 0 var(--e3); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--arcilla); }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: var(--e2); }
.pie li a { display: inline-block; padding-block: 2px; }
.pie__legal { padding-block: var(--e4) var(--e6); border-top: 1px solid rgba(244, 241, 234, 0.2); font-size: 0.75rem; color: #CBD3C6; }

@media print {
  .cabecera__linea, .navegacion, .pie, .aviso-entorno, .relacionadas { display: none; }
  body { background: #fff; }
}

/* Ajustes tras la primera revisión de capturas */
.pieza__visual { text-decoration: none; color: inherit; }
.pieza--principal .portada-tipo { aspect-ratio: 16 / 9; }
.seccion-bloque .pieza__seccion > a { display: none; }
.seccion-bloque .etiqueta-muestra { margin-left: 0; }
.articulo > .aviso-muestra { margin-inline: auto; margin-bottom: var(--e5); }
@media (max-width: 30rem) {
  .marca { flex-direction: column; align-items: center; gap: var(--e2); }
  .marca__exp { transform: none; }
  .navegacion ul { padding-right: var(--e6); }
}

/* Marca con símbolo */
.marca { align-items: center; }
.marca__simbolo { width: clamp(2.5rem, 6vw, 3.5rem); height: auto; flex: none; }
.pie__nombre { display: flex; align-items: center; gap: var(--e3); }
.pie__nombre svg { width: 2rem; height: auto; }
.estado { border-color: var(--bosque); color: var(--bosque); }
.prosa blockquote { border-left-color: var(--salvia); }
@media (max-width: 30rem) { .marca { flex-direction: row; } .marca__nombre { font-size: 1.85rem; } }
.pie__simbolo path:first-child { fill: #3C5C47; }
.metodo { background: var(--aviso); border-top: 0; margin-top: var(--e5); padding-inline: var(--e5); }
@media (min-width: 48rem) { .metodo { padding-inline: var(--e6); } }
.pieza__seccion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.pieza__seccion .etiqueta-muestra { margin-left: 0; }
.pieza__visual img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.pieza__visual--chica { margin-bottom: var(--e3); }
.pieza--secundaria .pieza__visual--chica { display: none; }
@media (min-width: 60rem) { .pieza--secundaria .pieza__visual--chica { display: block; } }
.relacionadas .pieza--lista, .banda .pieza--lista { border-top: 0; }