/* Catábasis: bestiario imposible del cielo al abismo.
   Láminas sobre papel: en zonas claras se funden con multiply; en zonas oscuras las de color
   usan su versión sin papel (alfa) y las de línea se invierten con screen. */

@font-face { font-family: 'IM Fell English'; src: url('fonts/fell.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IM Fell English'; src: url('fonts/fell-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url('fonts/garamond.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url('fonts/garamond-italic.woff2') format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; }

:root {
  --fell: 'IM Fell English', 'Iowan Old Style', Georgia, serif;
  --garamond: 'EB Garamond', Garamond, 'Times New Roman', serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --margen: clamp(16px, 5vw, 72px);

  /* papel por zona, de arriba abajo */
  --z-aire: #ecebe4;
  --z-fronda: #e4e6d5;
  --z-hojarasca: #e5dcc8;
  --z-subsuelo: #d4c7ab;
  --z-mar: #0e1a1b;
  --z-abismo: #07090b;
  --z-osario: #0d0d0c;

  --tinta: #1c1f1c;
  --tinta-2: #4a4c44;
  --rubrica: #a92e1b;
  --hueso: #ebe6d9;
  --hueso-2: #b3ad9f;
  --rubrica-clara: #e46a50;

  --capa-cabecera: 10;
  --capa-sonda: 9;
  --capa-ficha: 3;
  --capa-linterna: 2;

  color-scheme: light;
}

/* claro por defecto; el oscuro solo con el botón de la cabecera (tema.js pone data-tema en <html>) */
:root[data-tema='oscuro'] {
  --z-aire: #161613;
  --z-fronda: #131611;
  --z-hojarasca: #18140e;
  --z-subsuelo: #1b1610;
  --tinta: #ebe6d9;
  --tinta-2: #b3ad9f;
  --rubrica: #e46a50;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--z-aire);
  color: var(--tinta);
  font-family: var(--garamond);
  font-size: clamp(1.05rem, .35vw + .98rem, 1.22rem);
  line-height: 1.55;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--rubrica); }
:focus-visible { outline: 2px solid var(--rubrica); outline-offset: 3px; }
button { font: inherit; color: inherit; }

.saltar {
  position: fixed; left: 12px; top: -60px; z-index: 20;
  padding: .6rem 1rem; background: var(--tinta); color: var(--z-aire); text-decoration: none;
}
.saltar:focus { top: 12px; }

/* ---------------------------------------------------------------- botones (forma: esquina recta) */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .7rem 1.4rem;
  border: 1px solid currentColor; border-radius: 0;
  font-family: var(--garamond); font-size: 1.02rem; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .2s var(--ease), background-color .25s, color .25s;
}
.boton:active { transform: translateY(1px); }
.boton-tinta { background: var(--tinta); color: var(--z-aire); border-color: var(--tinta); }
.boton-tinta:hover { background: var(--rubrica); border-color: var(--rubrica); color: var(--z-aire); }
.boton-linea { background: transparent; }
.boton-linea:hover { color: var(--rubrica); }
.boton-hueso { background: var(--hueso); color: var(--z-osario); border-color: var(--hueso); }
.boton-hueso:hover { background: var(--rubrica-clara); border-color: var(--rubrica-clara); color: var(--z-osario); }

/* ---------------------------------------------------------------- cabecera */
.cabecera {
  position: fixed; inset: 0 0 auto; z-index: var(--capa-cabecera);
  height: 64px; padding: 0 var(--margen);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  color: var(--tinta);
  background: color-mix(in srgb, var(--cab-fondo, var(--z-aire)) 88%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: color .6s, background-color .9s;
}
body[data-tono='oscuro'] .cabecera { color: var(--hueso); }
.cabecera a { text-decoration: none; }
.cabecera-volver { display: inline-flex; align-items: center; gap: .35rem; font-size: .98rem; justify-self: start; min-height: 44px; }
.cabecera-volver svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.cabecera-marca { font-family: var(--fell); font-size: 1.5rem; letter-spacing: .01em; }
.cabecera-nav { justify-self: end; display: flex; gap: clamp(.8rem, 2vw, 2rem); font-size: .98rem; }
.cabecera-nav a { min-height: 44px; display: inline-flex; align-items: center; }
.cabecera-nav a[aria-current='page'] { text-decoration: underline; }
.cabecera-tema {
  width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; cursor: pointer;
  display: inline-grid; place-items: center;
}
.cabecera-tema:hover { color: var(--rubrica); }
.cabecera-tema svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* sin tema.js el botón no hace nada: mejor no enseñarlo */
:root:not([data-tema]) .cabecera-tema { display: none; }
.tema-sol, [data-tema='oscuro'] .tema-luna { display: none; }
[data-tema='oscuro'] .tema-sol { display: block; }

/* ---------------------------------------------------------------- sonda de profundidad */
.sonda {
  position: fixed; right: var(--margen); top: 50%; z-index: var(--capa-sonda);
  translate: 0 -50%;
  display: grid; justify-items: end; gap: .1rem;
  font-variant-numeric: lining-nums tabular-nums;
  pointer-events: none;
  transition: color .6s, opacity .6s;
}
body[data-zona='portada'] .sonda { opacity: 0; }
body[data-tono='oscuro'] .sonda { color: var(--hueso); }
.sonda-cota { font-family: var(--garamond); font-size: 1.55rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.sonda-zona { font-variant-caps: all-small-caps; letter-spacing: .08em; font-size: 1rem; color: inherit; opacity: .75; }
.sonda-hilo { width: 1px; height: 22vh; margin-top: .8rem; background: currentColor; opacity: .25; position: relative; }
.sonda-hilo span { position: absolute; inset: 0; background: currentColor; transform-origin: top; scale: 1 0; opacity: 1; }
@supports (animation-timeline: scroll()) {
  .sonda-hilo span { animation: hilo linear both; animation-timeline: scroll(root); }
  @keyframes hilo { to { scale: 1 1; } }
}

/* ---------------------------------------------------------------- láminas: fusión con el papel */
.lamina-img { mix-blend-mode: multiply; }
.zona-mar .lamina[data-modo='linea'] .lamina-img,
.zona-abismo .lamina[data-modo='linea'] .lamina-img {
  filter: invert(1) hue-rotate(180deg);
  mix-blend-mode: screen;
}
/* la máscara aísla cada pieza: la fusión va en la pieza y la inversión en la imagen */
.mesa-pieza { mix-blend-mode: screen; }
.mesa-pieza img { filter: invert(1) hue-rotate(180deg); }
.zona-mar .lamina[data-modo='color'] .lamina-img,
.zona-abismo .lamina[data-modo='color'] .lamina-img { mix-blend-mode: normal; }

[data-tema='oscuro'] .lamina[data-modo='linea'] .lamina-img,
[data-tema='oscuro'] .hoja[data-modo='linea'] img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
[data-tema='oscuro'] .lamina[data-modo='color'] .lamina-img,
[data-tema='oscuro'] .hoja[data-modo='color'] img { mix-blend-mode: normal; }

/* ---------------------------------------------------------------- portada */
.portada {
  position: relative;
  min-height: 100dvh;
  padding: 96px var(--margen) 48px;
  display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; gap: 1.5rem;
  background: var(--z-aire);
}
.portada-texto { grid-column: 1 / 7; position: relative; z-index: 2; }
.portada h1 {
  font-family: var(--fell); font-weight: 400;
  font-size: clamp(4.2rem, 11vw, 10.5rem); line-height: .9; letter-spacing: -.015em;
  margin: 0 0 1.4rem -.04em;
}
.portada-sub { font-size: clamp(1.2rem, 1.6vw, 1.5rem); max-width: 30ch; margin: 0 0 2.2rem; color: var(--tinta-2); }
.portada-columna { grid-column: 7 / 13; position: relative; height: min(88dvh, 920px); }
.portada-pieza { position: absolute; display: block; }
.portada-pieza img { width: 100%; mix-blend-mode: multiply; }
[data-tema='oscuro'] .portada-pieza[data-modo='color'] img { mix-blend-mode: normal; }
[data-tema='oscuro'] .portada-pieza[data-modo='linea'] img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
.portada-pieza-1 { width: 56%; top: 0; left: 0; }
.portada-pieza-2 { width: 30%; top: 14%; right: 4%; }
.portada-pieza-3 { width: 60%; bottom: -4%; left: 22%; }

@media (prefers-reduced-motion: no-preference) {
  /* se anima la imagen y no el <picture>: así multiply sigue fundiéndose con el papel */
  .portada-pieza img, .portada-texto > * { animation: aparecer 1.4s var(--ease) both; }
  .portada-texto > :nth-child(2) { animation-delay: .12s; }
  .portada-texto > :nth-child(3) { animation-delay: .24s; }
  .portada-pieza-2 img { animation-delay: .25s; }
  .portada-pieza-3 img { animation-delay: .45s; }
  @keyframes aparecer { from { opacity: 0; translate: 0 24px; } }
}

/* ---------------------------------------------------------------- zonas: papel que se oscurece */
.zona, .osario { position: relative; padding: 24vh var(--margen) 20vh; }
@media (min-width: 1024px) {
  .zona, .osario { padding-right: calc(var(--margen) + 7rem); }
}
.zona-aire { background: var(--z-aire); }
.zona-fronda { background: linear-gradient(var(--z-aire), var(--z-fronda) 38vh); }
.zona-hojarasca { background: linear-gradient(var(--z-fronda), var(--z-hojarasca) 38vh); }
.zona-subsuelo { background: linear-gradient(var(--z-hojarasca), var(--z-subsuelo) 46vh); }
.zona-mar { background: linear-gradient(var(--z-subsuelo), #5d5444 14vh, #1f2523 40vh, var(--z-mar) 70vh); color: var(--hueso); --rubrica: var(--rubrica-clara); --tinta: var(--hueso); --tinta-2: var(--hueso-2); }
.zona-abismo { background: linear-gradient(var(--z-mar), var(--z-abismo) 60vh); color: var(--hueso); --rubrica: var(--rubrica-clara); --tinta: var(--hueso); --tinta-2: var(--hueso-2); }
.osario { background: linear-gradient(var(--z-abismo), var(--z-osario) 40vh); color: var(--hueso); --rubrica: var(--rubrica-clara); --tinta: var(--hueso); --tinta-2: var(--hueso-2); }

.zona-cabecera { position: relative; max-width: 62rem; margin-bottom: clamp(4rem, 12vh, 9rem); }
.zona-cota {
  /* IM Fell solo trae cifras antiguas: las cotas van en Garamond con cifras de caja alta */
  margin: 0; font-family: var(--garamond); font-weight: 400; font-variant-numeric: lining-nums;
  font-size: clamp(4.5rem, 15vw, 13.5rem); line-height: .8; letter-spacing: -.02em;
  color: color-mix(in srgb, currentColor 13%, transparent);
}
.zona-cabecera h2 {
  font-family: var(--fell); font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: 1.02;
  margin: -.42em 0 1.2rem .06em;
}
.zona-intro { max-width: 40ch; margin: 0 0 0 .1em; font-size: clamp(1.12rem, 1.3vw, 1.3rem); color: var(--tinta-2); }

/* figura común */
.lamina { margin: 0; position: relative; }
.lamina-boton {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  /* sin z-index: un contexto de apilamiento aislaría la imagen y multiply dejaría de ver el papel */
  position: relative;
}
.lamina-boton picture { display: block; }
.lamina-boton .lamina-img { max-height: 80vh; width: auto; }
.lamina-boton:hover .lamina-img { scale: 1.015; }
.lamina-img { transition: scale .8s var(--ease), opacity 1.1s var(--ease), translate 1.1s var(--ease); }
.ficha { position: relative; z-index: var(--capa-ficha); max-width: 36ch; margin-top: 1.1rem; }
.ficha-latin { display: block; font-style: italic; color: var(--rubrica); font-size: 1rem; }
.ficha h3 { font-family: var(--fell); font-weight: 400; font-size: clamp(1.6rem, 2.1vw, 2.05rem); line-height: 1.08; margin: .1rem 0 .55rem; }
.ficha p { margin: 0 0 .6rem; }
.ficha-verdad { font-size: .98rem; color: var(--tinta-2); }
.ficha-verdad span { font-variant-caps: all-small-caps; letter-spacing: .05em; color: var(--tinta); }
.ficha-fuente { font-size: .9rem; color: var(--tinta-2); }

/* aparición al entrar (JS añade .is-visible). Se anima la imagen, no la figura,
   para que multiply no se aísle durante la transición. */
.js .lamina:not(.is-visible) .lamina-img { opacity: 0; translate: 0 34px; }
.js .lamina:not(.is-visible) .ficha { opacity: 0; translate: 0 18px; }
.js .ficha { transition: opacity 1s var(--ease) .15s, translate 1s var(--ease) .15s; }
@media (prefers-reduced-motion: reduce) {
  .js .lamina:not(.is-visible) .lamina-img, .js .lamina:not(.is-visible) .ficha { opacity: 1; translate: none; }
}

/* ---------------------------------------------------------------- I. el aire: vuelo disperso */
.zona-laminas-aire { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 3vw, 3rem); row-gap: 7rem; align-items: start; }
.vuelo-1 { grid-column: 1 / 6; }
.vuelo-2 { grid-column: 8 / 13; margin-top: -14rem; }
.vuelo-3 { grid-column: 4 / 9; }
.vuelo-4 { grid-column: 10 / 13; margin-top: 10rem; }
.vuelo-5 { grid-column: 1 / 5; margin-top: 4rem; }
.vuelo-6 { grid-column: 6 / 10; margin-top: 12rem; }
.vuelo-7 { grid-column: 2 / 7; }
.vuelo-8 { grid-column: 8 / 12; margin-top: 8rem; }
@media (prefers-reduced-motion: no-preference) {
  .vuelo .lamina-img { animation: planeo 9s ease-in-out infinite alternate; }
  .vuelo:nth-child(2n) .lamina-img { animation-duration: 11s; animation-delay: -3s; }
  .vuelo:nth-child(3n) .lamina-img { animation-duration: 13s; animation-delay: -6s; }
  @keyframes planeo { from { transform: translateY(-10px) rotate(-.6deg); } to { transform: translateY(10px) rotate(.6deg); } }
}

/* ---------------------------------------------------------------- II. la fronda: pliegos de herbario */
.zona-laminas-fronda { columns: 3 18rem; column-gap: clamp(1.5rem, 4vw, 4rem); }
.pliego { break-inside: avoid; margin-bottom: clamp(3rem, 8vh, 6rem); }
.pliego:nth-child(3n + 2) { padding-top: 6rem; }
.pliego .ficha {
  margin-left: auto; margin-top: -1.5rem; max-width: 30ch;
  padding: .9rem 1rem 1rem; border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  background: color-mix(in srgb, var(--z-fronda) 82%, transparent);
}

/* ---------------------------------------------------------------- III. la hojarasca: cajón de especímenes */
.zona-hojarasca { padding-bottom: 8vh; }
.cajon { margin-inline: calc(var(--margen) * -1); }
@media (min-width: 1024px) { .cajon { margin-right: calc((var(--margen) + 7rem) * -1); } }
.cajon-pista {
  display: flex; gap: clamp(2rem, 5vw, 5rem); align-items: flex-end;
  padding: 2rem var(--margen) 3rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
  /* la pista se desplaza con translate y eso la aísla: necesita su propio papel para que multiply funcione */
  background: var(--z-hojarasca);
}
.especimen { flex: 0 0 min(78vw, 30rem); scroll-snap-align: center; }
.especimen .lamina-boton { height: min(48dvh, 540px); display: grid; place-items: end center; }
.especimen .lamina-boton picture { max-height: 100%; }
.especimen .lamina-img { max-height: min(46dvh, 520px); width: auto; margin-inline: auto; }
.especimen .ficha { border-top: 1px solid color-mix(in srgb, currentColor 35%, transparent); padding-top: .8rem; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    .cajon { height: calc(var(--n, 8) * 46vh); view-timeline: --cajon block; }
    .cajon-pista {
      position: sticky; top: 0; height: 100dvh; width: max-content;
      overflow: visible; align-items: center; padding-top: 88px; padding-bottom: 1.5rem;
      animation: pan linear both; animation-timeline: --cajon; animation-range: contain 0% contain 100%;
    }
    @keyframes pan { to { translate: calc(-100% + 100vw) 0; } }
  }
}

/* ---------------------------------------------------------------- IV. el subsuelo: estratos */
.estrato {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 3vw, 3rem); align-items: end;
  padding: 3.5rem 0 4.5rem; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  position: relative;
}
.estrato-cota { position: absolute; top: .8rem; left: 0; font-variant-caps: all-small-caps; letter-spacing: .06em; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.estrato .lamina { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; }
.estrato .lamina-boton { grid-column: 2 / 8; }
.estrato .ficha { grid-column: 9 / 13; align-self: center; }
.estrato-2 .lamina-boton, .estrato-5 .lamina-boton { grid-column: 3 / 11; }
.estrato-2 .ficha, .estrato-5 .ficha { grid-column: 3 / 9; grid-row: 2; margin-top: 1.4rem; }
.estrato-3 .lamina-boton, .estrato-6 .lamina-boton { grid-column: 7 / 12; grid-row: 1; }
.estrato-3 .ficha, .estrato-6 .ficha { grid-column: 2 / 6; grid-row: 1; }
.estrato-1 .lamina-boton { grid-column: 1 / 6; }
.estrato-1 .ficha { grid-column: 7 / 11; }

/* ---------------------------------------------------------------- V. el mar interior */
.zona-laminas-mar { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 3vw, 3rem); row-gap: 8rem; }
.nado-1 { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; }
.nado-1 .lamina-boton { grid-column: 1 / 10; }
.nado-1 .ficha { grid-column: 9 / 13; margin-bottom: 2rem; }
.nado-2 { grid-column: 2 / 7; }
.nado-3 { grid-column: 8 / 13; margin-top: 12rem; }
.nado-4 { grid-column: 4 / 10; }
.nado-5 { grid-column: 1 / 5; margin-top: 6rem; }
.nado-6 { grid-column: 7 / 11; }
.nado-7 { grid-column: 3 / 8; }
@media (prefers-reduced-motion: no-preference) {
  .nado .lamina-img { animation: deriva 14s ease-in-out infinite alternate; }
  .nado:nth-child(2n) .lamina-img { animation-duration: 17s; animation-delay: -5s; }
  @keyframes deriva { from { transform: translate(-14px, 4px); } to { transform: translate(14px, -4px); } }
}

/* ---------------------------------------------------------------- VI. el abismo, con linterna */
.zona-laminas-abismo { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 3vw, 3rem); row-gap: 9rem; }
.fondo-1 { grid-column: 1 / 7; }
.fondo-2 { grid-column: 8 / 13; margin-top: 10rem; }
.fondo-3 { grid-column: 3 / 9; }
.fondo-4 { grid-column: 9 / 13; margin-top: 4rem; }
.fondo-5 { grid-column: 1 / 5; }
.fondo-6 { grid-column: 6 / 10; margin-top: 8rem; }
.fondo-7 { grid-column: 2 / 8; }
.fondo-8 { grid-column: 9 / 13; margin-top: 12rem; }
.fondo-9 { grid-column: 4 / 10; }
.fondo-10 { grid-column: 1 / 6; }
.zona-abismo .ficha { z-index: var(--capa-ficha); }
.linterna {
  position: fixed; inset: 0; z-index: var(--capa-linterna); pointer-events: none;
  background: radial-gradient(circle min(40vmax, 460px) at var(--lx, 50%) var(--ly, 55%), transparent 0, rgb(7 9 11 / .28) 45%, rgb(7 9 11 / .8) 100%);
  opacity: 0; transition: opacity 1.2s var(--ease);
}
body[data-zona='abismo'] .linterna { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .fondo .lamina-img { animation: latido 7s ease-in-out infinite alternate; }
  @keyframes latido { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
}

/* ---------------------------------------------------------------- VII. el osario: mesa de quimeras */
.mesa { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 3vw, 3rem); row-gap: 2rem; align-items: center; }
.mesa-lamina { grid-column: 1 / 9; position: relative; aspect-ratio: 1400 / 1000; }
.mesa-pieza { position: absolute; inset: 0; transition: opacity .35s var(--ease); }
.mesa-pieza img { width: 100%; height: 100%; }
.mesa-pieza[data-parte='cola'] { -webkit-mask-image: linear-gradient(90deg, #000 0 30%, transparent 37%); mask-image: linear-gradient(90deg, #000 0 30%, transparent 37%); }
.mesa-pieza[data-parte='tronco'] { -webkit-mask-image: linear-gradient(90deg, transparent 29%, #000 36% 64%, transparent 71%); mask-image: linear-gradient(90deg, transparent 29%, #000 36% 64%, transparent 71%); }
.mesa-pieza[data-parte='cabeza'] { -webkit-mask-image: linear-gradient(90deg, transparent 63%, #000 70%); mask-image: linear-gradient(90deg, transparent 63%, #000 70%); }
.mesa-pieza.is-cambiando { opacity: 0; }
.mesa-ficha { grid-column: 9 / 13; }
.mesa-ficha h3 { font-family: var(--fell); font-weight: 400; font-size: clamp(1.7rem, 2.4vw, 2.3rem); line-height: 1.08; margin: .2rem 0 .7rem; }
.mesa-mandos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.mesa-parte { display: inline-flex; align-items: center; gap: .3rem; }
.mesa-parte span { font-variant-caps: all-small-caps; letter-spacing: .06em; margin-right: .4rem; min-width: 3.6rem; }
.mesa-parte button {
  width: 44px; height: 44px; border: 1px solid color-mix(in srgb, currentColor 45%, transparent); background: none; cursor: pointer;
  font-family: var(--fell); font-size: 1.5rem; line-height: 1;
}
.mesa-parte button:hover { border-color: currentColor; color: var(--rubrica); }
.mesa-mandos .boton-hueso { margin-left: auto; }
.mesa-nota { grid-column: 1 / -1; font-size: .92rem; color: var(--tinta-2); margin: 0; }

/* ---------------------------------------------------------------- colofón */
.colofon {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem;
  padding: 5rem var(--margen) 4rem;
  background: var(--z-osario); color: var(--hueso); --rubrica: var(--rubrica-clara);
  border-top: 1px solid rgb(235 230 217 / .14);
}
.pagina-herbolario .colofon { background: var(--z-aire); color: var(--tinta); border-color: color-mix(in srgb, var(--tinta) 15%, transparent); --rubrica: inherit; }
.colofon-texto { grid-column: 1 / 8; }
.colofon-texto p { max-width: 62ch; margin: 0 0 .8rem; font-size: 1rem; }
.colofon-titulo { font-family: var(--fell); font-size: 2rem !important; margin-bottom: 1rem !important; }
.colofon-enlaces { grid-column: 9 / 13; display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }

/* ---------------------------------------------------------------- visor (ficha ampliada) */
.visor {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0;
  background: var(--z-aire); color: var(--tinta);
}
.visor::backdrop { background: rgb(12 12 10 / .7); }
.visor-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) min(34rem, 38vw); height: 100%; }
.visor-lamina { display: grid; place-items: center; padding: clamp(1rem, 4vw, 4rem); min-height: 0; }
.visor-lamina img { max-height: calc(100dvh - 8rem); width: auto; object-fit: contain; mix-blend-mode: multiply; }
.visor-ficha { position: relative; overflow-y: auto; padding: 5rem 2.5rem 2.5rem; border-left: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.visor-ficha h2 { font-family: var(--fell); font-weight: 400; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.05; margin: .2rem 0 1rem; }
.visor-ficha .ficha-verdad em { font-style: normal; }
.visor-cerrar { position: absolute; top: 1rem; right: 1rem; width: 48px; height: 48px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.visor-cerrar svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.visor-datos { margin: 1.6rem 0; display: grid; gap: .55rem; font-size: .98rem; }
.visor-datos div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; }
.visor-datos div:has(dd:empty) { display: none; }
.visor-datos dt { font-variant-caps: all-small-caps; letter-spacing: .06em; color: var(--tinta-2); }
.visor-datos dd { margin: 0; }
.visor-nota { font-size: .92rem; color: var(--tinta-2); }
.visor-nota:empty { display: none; }
.visor-acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
[data-tema='oscuro'] .visor-lamina img { mix-blend-mode: normal; }
[data-tema='oscuro'] .visor[data-modo='linea'] .visor-lamina img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }

/* ---------------------------------------------------------------- herbolario */
.pagina-herbolario main { padding: 120px var(--margen) 6rem; }
.herbolario-cabecera { max-width: 70rem; margin-bottom: 3.5rem; }
.herbolario-cabecera h1 { font-family: var(--fell); font-weight: 400; font-size: clamp(3.4rem, 8vw, 7rem); line-height: .95; margin: 0 0 1rem; }
.herbolario-cabecera > p { max-width: 46ch; font-size: 1.2rem; color: var(--tinta-2); margin: 0 0 2.4rem; }
.filtros { display: grid; gap: 1.4rem; }
.filtros-zonas { display: flex; flex-wrap: wrap; gap: .5rem; }
.filtros-zonas button {
  min-height: 44px; padding: .45rem .9rem; border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  background: none; cursor: pointer; font-size: 1rem;
}
.filtros-zonas button span { color: var(--tinta-2); font-variant-numeric: tabular-nums; margin-left: .2rem; }
.filtros-zonas button[aria-pressed='true'] { background: var(--tinta); color: var(--z-aire); border-color: var(--tinta); }
.filtros-zonas button[aria-pressed='true'] span { color: inherit; opacity: .7; }
.filtros-buscar { display: grid; gap: .35rem; max-width: 26rem; }
.filtros-buscar span { font-variant-caps: all-small-caps; letter-spacing: .06em; color: var(--tinta-2); }
.filtros-buscar input {
  min-height: 48px; padding: .6rem .9rem; font: inherit; color: var(--tinta);
  background: transparent; border: 1px solid color-mix(in srgb, var(--tinta) 45%, transparent); border-radius: 0;
}
.filtros-buscar input::placeholder { color: var(--tinta-2); opacity: .9; }
.hojas { list-style: none; margin: 0; padding: 0; columns: 5 14rem; column-gap: clamp(1.2rem, 2.5vw, 2.4rem); }
.hoja { break-inside: avoid; margin-bottom: 2.4rem; }
.hoja[hidden] { display: none; }
.hoja-boton { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.hoja img { width: 100%; mix-blend-mode: multiply; transition: scale .6s var(--ease); }
.hoja-boton:hover img { scale: 1.02; }
.hoja-titulo { font-family: var(--fell); font-size: 1.25rem; line-height: 1.15; margin: .7rem 0 .15rem; }
.hoja-fuente { font-size: .9rem; color: var(--tinta-2); margin: 0; }
.hojas-vacio { font-size: 1.2rem; color: var(--tinta-2); }

/* ---------------------------------------------------------------- móvil: una columna */
@media (max-width: 1023px) {
  .sonda { top: auto; bottom: 12px; right: 12px; translate: none; justify-items: end; padding: .35rem .65rem; background: var(--cab-fondo, var(--z-aire)); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
  .sonda-zona { font-size: .85rem; }
  .sonda-cota { font-size: 1.2rem; }
  .sonda-hilo { display: none; }
  .visor-cuerpo { grid-template-columns: 1fr; grid-template-rows: auto auto; height: auto; min-height: 100%; }
  .visor { overflow-y: auto; }
  .visor-lamina img { max-height: 62dvh; }
  .visor-ficha { border-left: 0; border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); padding: 2rem 1.2rem 2.5rem; overflow: visible; }
}
@media (max-width: 767px) {
  .cabecera { grid-template-columns: auto 1fr; }
  .cabecera-marca { display: none; }
  .cabecera-volver span { display: none; }
  .portada { grid-template-columns: 1fr; padding-top: 88px; align-content: start; }
  .portada-texto, .portada-columna { grid-column: 1; }
  .portada-columna { height: 62dvh; }
  .zona, .osario { padding-top: 16vh; padding-bottom: 14vh; }
  .zona-laminas-aire, .zona-laminas-mar, .zona-laminas-abismo { grid-template-columns: 1fr; row-gap: 4.5rem; }
  .zona-laminas-aire > *, .zona-laminas-mar > *, .zona-laminas-abismo > * { grid-column: 1 !important; margin-top: 0 !important; }
  .nado-1 { display: block; }
  .zona-laminas-fronda { columns: 1; }
  .pliego:nth-child(3n + 2) { padding-top: 0; }
  .estrato { display: block; padding: 3rem 0; }
  .estrato .lamina { display: block; }
  .estrato .ficha { margin-top: 1rem; }
  .mesa { grid-template-columns: 1fr; }
  .mesa > * { grid-column: 1 !important; }
  .mesa-mandos .boton-hueso { margin-left: 0; }
  .colofon { grid-template-columns: 1fr; }
  .colofon-texto, .colofon-enlaces { grid-column: 1; }
}