:root {
  --navy: #0d2436;
  --navy2: #143650;
  --sea: #1f6f78;
  --foam: #eaf1f3;
  --white: #ffffff;
  --ink: #13212b;
  --muted: #5a6b76;
  --line: #d3dfe4;
  --gold: #c9a14a;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 16px/1.55 var(--sans); color: var(--ink); background: var(--foam); }
a { color: var(--sea); }
h1, h2 { font-family: var(--serif); font-weight: normal; }

.hero { position: relative; color: #fff; background: radial-gradient(ellipse at 80% 0%, #24577a 0%, transparent 60%), linear-gradient(160deg, var(--navy2), var(--navy)); padding: 1.2rem clamp(1rem, 5vw, 4rem) 0; }
.nav { display: flex; gap: 1.6rem; align-items: center; font-size: .92rem; }
.nav a { color: #cfe0ea; text-decoration: none; }
.nav a:hover { color: #fff; }
.logo { font-family: var(--serif); font-size: 1.2rem; color: var(--gold); margin-right: auto; letter-spacing: .1em; }
.hero-in { max-width: 48rem; padding: clamp(3rem, 10vw, 7rem) 0 clamp(4rem, 10vw, 7rem); }
.tag { text-transform: uppercase; letter-spacing: .2em; font-size: .78rem; color: var(--gold); margin: 0 0 1rem; }
.hero h1 { font-size: clamp(2.4rem, 6.5vw, 4.4rem); line-height: 1.05; margin: 0 0 1.2rem; }
.lead { font-size: 1.2rem; color: #cfe0ea; max-width: 34rem; }
.lead b { color: #fff; }
.cta { display: inline-block; margin-top: 1rem; background: var(--gold); color: var(--navy); text-decoration: none; font-weight: 600; padding: .75rem 1.3rem; border-radius: 3px; }
.waves { display: block; width: calc(100% + 2 * clamp(1rem, 5vw, 4rem)); margin: 0 calc(-1 * clamp(1rem, 5vw, 4rem)); height: 70px; color: var(--foam); }

.autor { max-width: 70rem; margin: 0 auto; padding: 3rem clamp(1rem, 4vw, 2rem) 4rem; display: grid; grid-template-columns: 19rem 1fr; gap: 3.5rem; align-items: start; }
.card { background: var(--white); border-radius: 6px; box-shadow: 0 10px 30px rgba(13,36,54,.12); padding: 1.6rem; text-align: center; margin-top: -6rem; position: relative; }
.portrait { width: 9rem; height: 10.8rem; margin: 0 auto 1rem; border-radius: 4px; background: var(--foam); color: #b8cad2; overflow: hidden; }
.portrait svg { width: 100%; height: 100%; display: block; }
.name { font-family: var(--serif); font-size: 1.4rem; margin: 0; }
.role { color: var(--sea); margin: .2rem 0 1.2rem; font-size: .92rem; }
.facts { list-style: none; padding: 0; margin: 0; text-align: left; border-top: 1px solid var(--line); }
.facts li { padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.facts span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.bio h2 { font-size: 2.2rem; margin: 0 0 1rem; color: var(--navy); }
.bio .intro { font-size: 1.25rem; font-family: var(--serif); }
.bio blockquote { margin: 2rem 0 0; padding: 1.2rem 1.4rem; background: var(--navy); color: #fff; font-family: var(--serif); font-size: 1.2rem; font-style: italic; border-left: 4px solid var(--gold); }

.catalogo { background: var(--white); padding: 3.5rem clamp(1rem, 4vw, 3rem); }
.head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; max-width: 90rem; margin: 0 auto; }
.head h2 { font-size: 2.2rem; margin: 0; color: var(--navy); }
.head p { margin: 0; color: var(--muted); }
.head b { color: var(--sea); font-size: 1.4rem; }
.filters { max-width: 90rem; margin: 1.2rem auto; background: var(--foam); padding: 1rem; border-radius: 6px; }
input, select { font: inherit; font-size: .92rem; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: .5rem .6rem; min-width: 0; }
input:focus, select:focus { outline: 2px solid var(--sea); outline-offset: -1px; }
.q { width: 100%; font-size: 1.05rem; padding: .7rem .9rem; margin-bottom: .6rem; }
.row { display: grid; grid-template-columns: 5rem 1.4fr 1.2fr 11rem 1fr 7.5rem 9rem 1fr auto; gap: .5rem; align-items: center; }
.yr { display: flex; gap: .3rem; }
.yr input { width: 50%; }
.mk { white-space: nowrap; font-size: .9rem; }
.active { display: flex; flex-wrap: wrap; gap: .4rem; }
.active:not(:empty) { margin-top: .8rem; }
.active button { font: inherit; font-size: .82rem; background: var(--navy); color: #fff; border: 0; border-radius: 99px; padding: .25rem .7rem; cursor: pointer; }
.active button.all { background: none; color: var(--sea); text-decoration: underline; }

.table { max-width: 90rem; margin: 0 auto; }
.thead, summary { display: grid; grid-template-columns: 5rem 2.4fr 1.6fr 4.5rem 1.1fr 6rem 3.5rem; gap: .8rem; align-items: start; }
.thead { border-bottom: 2px solid var(--navy); padding: 0 .8rem; }
.thead button { all: unset; cursor: pointer; padding: .6rem 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600; }
.thead button[aria-sort="ascending"]::after { content: " ▲"; color: var(--sea); }
.thead button[aria-sort="descending"]::after { content: " ▼"; color: var(--sea); }
.tr { border-bottom: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; padding: .65rem .8rem; font-size: .93rem; }
summary::-webkit-details-marker { display: none; }
summary:hover { background: var(--foam); }
.tr[open] summary { background: var(--foam); }
.c-num, .c-year, .c-idm { font-variant-numeric: tabular-nums; color: var(--muted); }
.c-title { font-weight: 600; color: var(--navy); }
.c-num::before { content: "▸ "; color: var(--sea); }
.tr[open] .c-num::before { content: "▾ "; }
.more { padding: .6rem .8rem 1rem calc(5rem + 1.6rem); background: var(--foam); }
.more p { margin: 0; white-space: pre-line; font-size: .9rem; max-width: 50rem; }
.more .none { color: var(--muted); font-style: italic; }
.status { text-align: center; color: var(--muted); padding: 2rem; }

.foot { max-width: 90rem; margin: 1.4rem auto 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: .9rem; color: var(--muted); }
.pager { display: flex; gap: .25rem; flex-wrap: wrap; }
.pager button { font: inherit; min-width: 2.3rem; padding: .4rem .6rem; border: 1px solid var(--line); background: var(--white); color: var(--ink); border-radius: 4px; cursor: pointer; }
.pager button[aria-current] { background: var(--sea); border-color: var(--sea); color: #fff; }
.pager button:disabled { opacity: .35; cursor: default; }
.pager .gap { padding: .4rem .2rem; }

.venta { background: var(--navy); color: #fff; padding: 4rem clamp(1rem, 5vw, 4rem); display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; }
.venta h2 { font-size: 2rem; margin: 0 0 1rem; }
.venta p { color: #cfe0ea; }
.contact p { margin: 0 0 1rem; font-size: 1.1rem; color: #fff; }
.contact span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); }
footer { background: var(--navy); color: #7f97a8; text-align: center; padding: 1.5rem; font-size: .85rem; border-top: 1px solid var(--navy2); }
footer a { color: #cfe0ea; }

@media (max-width: 1100px) {
  .row { grid-template-columns: repeat(4, 1fr); }
  .row .yr { grid-column: span 2; }
}
@media (max-width: 760px) {
  .nav a { display: none; }
  .autor { grid-template-columns: 1fr; gap: 2rem; }
  .row { grid-template-columns: 1fr 1fr; }
  .thead { display: none; }
  summary { grid-template-columns: 1fr auto; gap: .1rem .8rem; }
  .c-title { grid-column: 1; grid-row: 1; }
  .c-num { grid-column: 2; grid-row: 1; text-align: right; }
  .c-author { grid-column: 1 / -1; }
  .c-year, .c-place, .c-lang, .c-idm { display: inline; font-size: .82rem; color: var(--muted); }
  .c-year { grid-column: 1 / -1; }
  .c-place, .c-lang, .c-idm { display: none; }
  .tr[open] .c-place, .tr[open] .c-lang, .tr[open] .c-idm { display: block; grid-column: 1 / -1; }
  .tr[open] .c-idm::before { content: "IDM "; }
  .more { padding-left: .8rem; }
  .venta { grid-template-columns: 1fr; }
}
.preset { font-weight: 600; white-space: nowrap; }

.portrait { background: none; }
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rarezas { background: var(--navy); color: #fff; padding: 4rem clamp(1rem, 5vw, 4rem); }
.rarezas h2 { font-size: 2.2rem; margin: 0; }
.lead2 { color: #cfe0ea; margin: .3rem 0 2rem; }
.rare { list-style: none; padding: 0; margin: 0 auto; max-width: 90rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.2rem; }
.rare-item { background: var(--navy2); border: 1px solid #24577a; border-top: 3px solid var(--gold); border-radius: 4px; padding: 1.2rem; display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; }
.rare-img { color: var(--gold); }
.rare-img svg, .rare-img img { width: 100%; height: auto; display: block; }
.rare-body p { margin: 0; }
.rare-t { font-family: var(--serif); font-size: 1.15rem; }
.rare-a { color: #cfe0ea; }
.rare-m { color: #7f97a8; font-size: .85rem; }
.rare-n { font-size: .9rem; color: #cfe0ea; margin-top: .5rem !important; }
.rare-link { color: var(--gold); font-size: .9rem; }