:root{
  --fondo:#100E0D; --sup:#171413; --sup2:#1E1A18;
  --borde:#2A2522; --borde2:#3A332E;
  --txt:#EDE6DA; --txt2:#9B938A; --txt3:#6A635C;
  --oro-logo:#A27432; --oro:#C79A50; --oro2:#E0BE83;
  --aviso:#B8703F;
  --serif:"Playfair Display", Georgia, "Times New Roman", serif;
  --sans:"Jost", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--fondo)}
body{
  margin:0; color:var(--txt); font:300 15px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:var(--serif); font-weight:400; text-wrap:balance; margin:0}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--oro); outline-offset:3px}

/* ---------- barra ---------- */
.barra{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
  background:var(--fondo); border-bottom:1px solid var(--borde);
}
.barra-in{
  width:100%; margin:0; padding:14px var(--margen);
  display:flex; align-items:center; gap:32px; min-height:140px;
}
.marca{display:flex; align-items:center; gap:0; flex:0 0 auto}
.marca img{height:112px; width:auto; display:block}
nav{display:flex; gap:38px; margin-left:auto}
nav button{
  font-size:16px; color:var(--txt); padding:3px 0 8px; position:relative;
  letter-spacing:.03em; font-weight:400; transition:color .16s;
}
nav button:hover{color:var(--oro2)}
nav button[aria-current="true"]{color:var(--oro)}
nav button[aria-current="true"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--oro);
}
/* la vuelta a la pantalla de entrada: en tenue, para que no compita con las secciones */
nav a.inicio{
  font-size:16px; color:var(--txt3); padding:3px 0 8px; letter-spacing:.03em; font-weight:400;
  transition:color .16s;
}
nav a.inicio:hover{color:var(--oro2)}
.buscar{flex:0 1 280px; max-width:280px}
.buscar input{
  width:100%; padding:9px 13px; background:var(--sup); color:var(--txt);
  border:1px solid var(--borde); border-radius:2px; font:300 13.5px var(--sans);
}
.buscar input::placeholder{color:var(--txt3)}
.buscar input:focus{outline:none; border-color:var(--oro)}

main{max-width:1280px; margin:0 auto; padding:64px var(--margen) 96px}
:root{--margen:clamp(20px,3.2vw,56px); --alto-barra:140px}

/* ---------- cabeceras de seccion ---------- */
.eyebrow{
  font:500 11px var(--sans); text-transform:uppercase; letter-spacing:.18em;
  color:var(--oro); margin-bottom:14px;
}
.tit-seccion{font-size:clamp(34px,5vw,52px); line-height:1.1; letter-spacing:-.015em}
.regla{height:1px; background:var(--borde); margin:24px 0 0}
.entradilla{color:var(--txt2); max-width:62ch; margin:24px 0 0; font-size:15px}
.cab{margin-bottom:44px}

/* ---------- portada ---------- */
.portada{
  position:relative; width:100%; height:calc(100svh - var(--alto-barra)); min-height:520px;
  display:flex; align-items:flex-end; margin:0; padding:0; overflow:hidden;
}
.portada-img{position:absolute; inset:0}
.portada-img img{width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block}
.portada-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, var(--fondo) 0 5%, color-mix(in srgb,var(--fondo) 86%, transparent) 24%,
               color-mix(in srgb,var(--fondo) 28%, transparent) 52%, transparent 76%),
             linear-gradient(90deg, color-mix(in srgb,var(--fondo) 72%, transparent) 0%, transparent 46%);
}
.portada-txt{position:relative; z-index:2; width:100%; margin:0;
  padding:0 var(--margen) clamp(56px,9vh,110px);}
.portada h1{font-size:clamp(34px,4.4vw,68px); line-height:1.04; letter-spacing:-.018em; max-width:18ch}
.portada h1 em{margin-top:.06em}
.portada h1 em{font-style:italic; color:var(--oro); display:block}
.portada p{color:var(--txt2); margin:24px 0 0; max-width:42ch; font-size:15.5px}
.entrar{
  display:inline-flex; align-items:center; gap:10px; margin-top:38px;
  font:400 11.5px var(--sans); text-transform:uppercase; letter-spacing:.2em; color:var(--txt);
  border-bottom:1px solid var(--borde2); padding-bottom:7px; transition:color .16s, border-color .16s;
}
.entrar:hover{color:var(--oro); border-color:var(--oro)}
.portada-pie{
  position:absolute; right:var(--margen); bottom:30px; z-index:3;
  font:400 10.5px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--txt3);
}

/* ---------- portada alternativa: la figura girando ---------- */
/* El vídeo trae el fondo en negro puro, así que el bloque se pinta del mismo
   negro y no se ve dónde acaba uno y empieza el otro. Se hace así, y no
   fundiendo el vídeo con mix-blend-mode, porque Safari en el iPhone no aplica
   esa mezcla sobre un vídeo y deja el recuadro a la vista. */
.portada-video{
  background:#000;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,44%);
  align-items:center; gap:clamp(24px,4vw,72px);
  padding:0 var(--margen);
}
.portada-video .portada-txt{padding:0; z-index:2}
.portada-figura{height:100%; display:flex; align-items:center; justify-content:center}
.portada-figura video{
  max-height:calc(100% - 40px); max-width:100%;
  width:auto; height:auto; display:block;
}

@media (max-width:900px){
  .portada-video{
    height:auto; min-height:calc(100svh - var(--alto-barra));
    grid-template-columns:1fr; grid-template-rows:auto auto;
    align-content:center; gap:14px; padding:26px var(--margen) 64px;
  }
  .portada-figura{height:clamp(300px,46vh,420px)}
  .portada-figura video{max-height:100%}
}

/* ---------- lista de autores ---------- */
.orden{display:flex; gap:22px; align-items:baseline; margin-bottom:26px}
.orden button{font-size:12px; color:var(--txt3); letter-spacing:.06em; text-transform:uppercase}
.orden button[aria-pressed="true"]{color:var(--oro)}
.orden .cuenta{margin-left:auto; font:400 12px var(--mono); color:var(--txt3)}
.lista{border-top:1px solid var(--borde)}
.fila{
  width:100%; display:grid; grid-template-columns:minmax(0,1fr) 120px repeat(4, 58px);
  align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--borde);
  text-align:left; transition:background .14s;
}
.fila:hover{background:var(--sup)}
.fila .nom{font-size:15.5px; font-weight:400; line-height:1.4}
.fila .pap{font-size:12.5px; color:var(--txt2); letter-spacing:.02em}
.fila .n{font:400 13px var(--mono); color:var(--txt2); text-align:right}
.fila .n.cero{color:var(--txt3)}
.cabecera-lista{
  display:grid; grid-template-columns:minmax(0,1fr) 120px repeat(4, 58px); gap:12px;
  padding:0 4px 10px; font:500 10px var(--sans); text-transform:uppercase;
  letter-spacing:.14em; color:var(--txt3);
}
.cabecera-lista span:nth-child(n+3){text-align:right}

/* ---------- rejilla de obra ---------- */
.rej{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px}
@media (min-width:1180px){ .rej{grid-template-columns:repeat(4,minmax(0,1fr))} }
.obra{text-align:left; display:flex; flex-direction:column; gap:12px}
/* La miniatura llega ya recortada a 9/10 y encuadrada sobre la pieza, así que
   aquí sólo hay que dejarla llenar el marco. El recorte se decide foto a foto
   al generarla —ver bd/gen_miniaturas.py—, que es la única forma de no cortarle
   la cabeza a una figura vertical y la peana a un diorama apaisado con la
   misma regla. */
.obra .marco{
  position:relative; aspect-ratio:9/10; background:var(--sup); overflow:hidden;
  border:1px solid var(--borde); border-radius:2px;
}
.obra .marco img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.obra:hover .marco{border-color:var(--borde2)}
.obra:hover .marco img{transform:scale(1.02)}
.vacio-marco{
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  color:var(--txt3);
}
.vacio-marco .rombo{font-size:13px; color:var(--borde2)}
.vacio-marco span{font:400 10px var(--sans); text-transform:uppercase; letter-spacing:.16em}
.inv{
  position:absolute; left:8px; top:8px; padding:2px 6px; border-radius:2px;
  background:color-mix(in srgb, var(--fondo) 84%, transparent); border:1px solid var(--borde);
  font:400 10px var(--mono); letter-spacing:.04em; color:var(--txt2);
}
.obra-pie{display:flex; align-items:baseline; justify-content:space-between; gap:14px}
.obra-pie .t{font-family:var(--serif); font-size:17px; line-height:1.3}
.obra-pie .m{font:400 10px var(--sans); text-transform:uppercase; letter-spacing:.13em;
  color:var(--txt3); white-space:nowrap; flex:0 0 auto}

/* ---------- filtros ---------- */
.filtros{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:34px}
.filtros select{
  padding:7px 11px; background:var(--sup); color:var(--txt); border:1px solid var(--borde);
  border-radius:2px; font:300 13px var(--sans);
}
.filtros select:focus{outline:none; border-color:var(--oro)}
.filtros .cuenta{margin-left:auto; font:400 12px var(--mono); color:var(--txt3)}

/* ---------- ficha de obra ---------- */
.volver{
  display:inline-block; margin-bottom:34px; font:400 11px var(--sans);
  text-transform:uppercase; letter-spacing:.16em; color:var(--txt3);
}
.volver:hover{color:var(--oro)}
.ficha{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start}

/* ---------- visor: foto grande, miniaturas debajo ---------- */
/* la caja no cambia de tamaño al pasar de foto: la imagen se ajusta dentro */
.visor{
  position:relative; background:var(--sup); border:1px solid var(--borde);
  border-radius:2px; overflow:hidden; aspect-ratio:9/10; max-height:76vh;
}
.visor-img{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; padding:0; cursor:zoom-in;
}
.visor-img img{max-width:100%; max-height:100%; width:auto; height:auto; display:block}
.visor .sin{
  width:100%; height:100%; display:flex; flex-direction:column; gap:12px;
  align-items:center; justify-content:center; color:var(--txt3);
  font:400 10.5px var(--sans); text-transform:uppercase; letter-spacing:.16em;
}
/* las flechas aparecen al pasar por encima; en pantalla táctil, siempre */
.flecha{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:64px; display:flex; align-items:center; justify-content:center;
  font:400 30px/1 var(--sans); color:var(--txt);
  background:color-mix(in srgb, #000 55%, transparent);
  border:1px solid color-mix(in srgb, var(--txt) 14%, transparent);
  opacity:0; transition:opacity .16s, background .16s, color .16s;
}
.flecha.izq{left:0; border-left:0}
.flecha.der{right:0; border-right:0}
.flecha:hover{background:color-mix(in srgb, #000 75%, transparent); color:var(--oro)}
.visor:hover .flecha, .visor:focus-within .flecha{opacity:1}
@media (hover:none){ .visor .flecha{opacity:.85} }
.visor-n{
  position:absolute; right:10px; bottom:10px; z-index:3;
  font:400 10.5px var(--mono); letter-spacing:.1em; color:var(--txt2);
  background:color-mix(in srgb, #000 60%, transparent); padding:4px 9px; border-radius:2px;
}

.tira-caja{display:flex; align-items:center; gap:6px; margin-top:12px}
.tira{
  flex:1 1 auto; min-width:0;   /* sin esto el carril empuja la página a lo ancho */
  display:flex; gap:8px; overflow-x:auto; scroll-behavior:smooth;
  scrollbar-width:none; padding:2px 0;
}
.tira::-webkit-scrollbar{display:none}
.mini{
  flex:0 0 auto; width:64px; height:64px; padding:0; overflow:hidden;
  border:1px solid var(--borde); border-radius:2px; opacity:.55;
  transition:opacity .16s, border-color .16s;
}
.mini img{width:100%; height:100%; object-fit:cover; display:block}
.mini:hover{opacity:.85; border-color:var(--borde2)}
.mini[aria-current]{opacity:1; border-color:var(--oro)}
.tira-flecha{
  flex:0 0 auto; width:24px; height:64px; color:var(--txt3);
  font:400 20px/1 var(--sans); border:1px solid var(--borde); border-radius:2px;
}
.tira-flecha:hover{color:var(--oro); border-color:var(--borde2)}
.ver-todas{
  display:inline-block; margin-top:14px; font:400 10.5px var(--sans);
  text-transform:uppercase; letter-spacing:.16em; color:var(--txt3);
  border-bottom:1px solid var(--borde); padding-bottom:5px;
}
.ver-todas:hover{color:var(--oro); border-color:var(--oro)}

/* ---------- la fotografía a pantalla completa ---------- */
.luz{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center;
  background:color-mix(in srgb, #000 92%, transparent);
  padding:clamp(12px,4vw,56px);
}
.luz.abierta{display:flex}
.luz img{max-width:100%; max-height:100%; width:auto; height:auto; display:block; object-fit:contain}
.luz .flecha{opacity:1; width:56px; height:88px; background:color-mix(in srgb, #000 40%, transparent)}
.luz .flecha[hidden]{display:none}
.luz .flecha.izq{left:clamp(4px,2vw,28px); border:1px solid color-mix(in srgb, var(--txt) 14%, transparent)}
.luz .flecha.der{right:clamp(4px,2vw,28px); border:1px solid color-mix(in srgb, var(--txt) 14%, transparent)}
.luz-cerrar{
  position:absolute; top:clamp(8px,2vw,22px); right:clamp(8px,2vw,22px); z-index:4;
  width:42px; height:42px; font:400 26px/1 var(--sans); color:var(--txt2);
  border:1px solid color-mix(in srgb, var(--txt) 14%, transparent); border-radius:2px;
}
.luz-cerrar:hover{color:var(--oro)}
.luz-pie{
  position:absolute; left:0; right:0; bottom:clamp(8px,2vh,20px); text-align:center;
  font:400 10.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--txt3);
  pointer-events:none; padding:0 16px;
}
.ficha .inv-t{font:400 11px var(--mono); letter-spacing:.14em; color:var(--txt3); margin-bottom:10px}
.ficha h1{font-size:clamp(28px,3.6vw,40px); line-height:1.1; letter-spacing:-.015em}
.autoria{color:var(--txt2); margin:16px 0 0; font-size:15px}
.autoria a{color:var(--txt); border-bottom:1px solid var(--borde2)}
.autoria a:hover{color:var(--oro); border-color:var(--oro)}
.bloque{margin-top:42px}
.bloque h3{
  font:500 10px var(--sans); text-transform:uppercase; letter-spacing:.18em;
  color:var(--txt3); margin-bottom:16px;
}
table.datos{width:100%; border-collapse:collapse; font-size:14px}
table.datos th{
  text-align:left; font-weight:400; color:var(--txt3); padding:11px 20px 11px 0;
  white-space:nowrap; vertical-align:top; width:1%; font-size:13px;
}
table.datos td{padding:11px 0; border-bottom:1px solid var(--borde); vertical-align:top}
table.datos tr:last-child td{border-bottom:0}
.origen{display:block; font-size:12px; color:var(--txt3); font-style:italic; margin-top:3px}
.nulo{color:var(--txt3); font-style:italic}
.regla-mm{display:flex; align-items:center; gap:10px; margin-top:8px}
.regla-mm i{display:block; height:7px; border-left:1px solid var(--oro); border-right:1px solid var(--oro);
  border-bottom:1px solid var(--oro)}
.regla-mm span{font:400 10.5px var(--mono); color:var(--txt3)}

/* ---------- galeria ---------- */
.gal{display:flex; flex-direction:column; gap:44px}
.gal-grupo h4{
  font:500 10px var(--sans); text-transform:uppercase; letter-spacing:.18em;
  color:var(--oro); margin:0 0 16px;
}
.gal-grupo.conjunto h4{color:var(--txt2)}
.gal-fotos{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px}
.gal-fotos button{
  aspect-ratio:9/10; padding:0; background:var(--sup); border:1px solid var(--borde);
  border-radius:2px; overflow:hidden; cursor:zoom-in; transition:border-color .16s;
}
.gal-fotos button:hover{border-color:var(--oro)}
.gal-fotos img{width:100%; height:100%; object-fit:cover; transition:transform .25s}
.gal-fotos button:hover img{transform:scale(1.03)}
.gal-vacia{display:flex; align-items:center; justify-content:center; color:var(--txt3);
  font:400 10px var(--mono); letter-spacing:.1em}

/* ---------- resultados ---------- */
.res-bloque{margin-bottom:64px}
.res-bloque h3{
  font:500 10px var(--sans); text-transform:uppercase; letter-spacing:.18em; color:var(--oro);
  margin-bottom:20px; display:flex; gap:12px; align-items:baseline;
}
.res-bloque h3 span{font-family:var(--mono); color:var(--txt3); letter-spacing:.04em}
.sin-res{color:var(--txt2); padding:48px 0; text-align:center}

/* ---------- una imagen que no se pudo cargar ---------- */
.falla{position:relative; background:var(--sup)}
.falla img{visibility:hidden}
.falla::after{
  content:"imagen no disponible"; position:absolute; inset:0; padding:8px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font:400 9.5px var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--txt3);
}
.mini.falla::after{content:"\00d7"; font-size:15px; letter-spacing:0}

.pie{
  border-top:1px solid var(--borde); margin-top:96px; padding:28px 0 0;
  display:flex; justify-content:flex-end;
}
.pie p{font-size:12.5px; color:var(--txt3); margin:0}

@media (max-width:900px){
  .rej{grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
  .ficha{grid-template-columns:minmax(0,1fr); gap:34px}
  .portada-txt{padding:0 24px 88px}
  .barra-in{min-height:112px; padding:8px var(--margen)}
  .marca img{height:88px}
  .fila,.cabecera-lista{grid-template-columns:minmax(0,1fr) repeat(4,46px)}
  .fila .pap,.cabecera-lista span:nth-child(2){display:none}
}
@media (max-width:600px){
  .rej{grid-template-columns:1fr}
  main{padding:40px 20px 72px}
  .barra-in{padding:8px var(--margen); gap:12px; min-height:92px}
  .marca img{height:70px}
  nav{gap:22px}
  nav button, nav a.inicio{font-size:14.5px}
  .buscar{flex:1 1 100%; max-width:none}
  .orden,.filtros{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}