/* ═══ El Archivo de la Biblioteca ═══════════════════════════════════════════════════════════════
   Un fichero, no un escaparate: cajones con etiquetas arriba y las fichas debajo, densas y
   alineadas. Mismo idioma que el resto — oro sobre negro, sin esquinas redondeadas, y ninguna
   raya que llegue entera de borde a borde. */

.archivo{position:relative;z-index:2;max-width:1320px;margin:0 auto;
  padding:calc(var(--barra) + clamp(30px,5vh,60px)) clamp(16px,4vw,44px) 14vh}

.archivo-cab{text-align:center;margin-bottom:clamp(26px,4vh,40px)}
.archivo-cab .rotulo{margin:0 0 12px;font-family:var(--f-rotulo);font-size:10px;letter-spacing:.42em;
  text-transform:uppercase;color:var(--gold-idle)}
.archivo-cab h1{margin:0;font-family:var(--f-rotulo);font-weight:600;line-height:1.06;
  font-size:clamp(26px,4.2vw,46px);letter-spacing:.08em;text-wrap:balance}
.archivo-cab .vara{display:block;width:min(300px,56vw);margin:18px auto 0;opacity:.8}

/* ── Evernoth, arriba y entero. No es un resultado: es la casa ── */
.archivo-casa{position:relative;display:block;overflow:hidden;margin-bottom:clamp(26px,4vh,42px);
  min-height:clamp(150px,22vh,230px);text-decoration:none}
.archivo-casa .lienzo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 30%;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.archivo-casa:hover .lienzo{transform:scale(1.035)}
.archivo-casa .velo{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(7,7,10,.92),rgba(7,7,10,.5) 58%,rgba(7,7,10,.8)),
             linear-gradient(0deg,rgba(7,7,10,.8),transparent 60%)}
.archivo-casa .dicho{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;min-height:clamp(150px,22vh,230px);padding:26px 20px;text-align:center}
.archivo-casa .logo{width:min(300px,62vw)}
.archivo-casa .tit{font-family:var(--f-rotulo);font-size:clamp(22px,3.4vw,34px);letter-spacing:.08em;
  color:var(--gold-hi)}
.archivo-casa .pie{font-family:var(--f-rotulo);font-size:9.5px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--ivory-dim)}
/* el filo de abajo, apagado en los extremos */
.archivo-casa::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(201,163,95,.4) 18%,rgba(201,163,95,.4) 82%,transparent)}

/* ── el grano: el libro entero o la pieza suelta ── */
.grano{display:flex;gap:8px;justify-content:center;margin-bottom:clamp(18px,2.6vh,26px)}
.grano button{display:inline-flex;align-items:baseline;gap:8px;cursor:pointer;border-radius:0;
  font-family:var(--f-rotulo);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ivory-dim);background:rgba(7,7,10,.34);border:1px solid rgba(201,163,95,.2);
  padding:10px 18px;transition:color .3s,border-color .3s,background .3s}
.grano button:hover{color:var(--gold-hi);border-color:rgba(201,163,95,.5)}
.grano button[aria-pressed="true"]{color:var(--gold-hi);border-color:var(--gold);
  background:linear-gradient(177deg,rgba(201,163,95,.16),transparent 70%),rgba(7,7,10,.5)}
.grano .cuantos{font-size:9px;opacity:.6;letter-spacing:.06em}

/* ── los cajones ── */
.cajones{display:grid;gap:clamp(12px,1.8vh,18px);margin-bottom:clamp(22px,3.4vh,34px)}
.cajon{display:grid;grid-template-columns:minmax(78px,96px) 1fr;gap:10px 16px;align-items:baseline}
.cajon > .rotulo{margin:0;font-family:var(--f-rotulo);font-size:9.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-idle);text-align:right}
.etiquetas{display:flex;flex-wrap:wrap;gap:6px}
.etiquetas button{position:relative;display:inline-flex;align-items:baseline;gap:7px;cursor:pointer;
  font-family:var(--f-rotulo);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ivory-dim);background:rgba(7,7,10,.34);border:1px solid rgba(201,163,95,.18);
  border-radius:0;padding:7px 11px;transition:color .3s,border-color .3s,background .3s}
.etiquetas button:hover{color:var(--gold-hi);border-color:rgba(201,163,95,.45)}
.etiquetas button[aria-pressed="true"]{color:#07070A;background:var(--gold);border-color:var(--gold)}
.etiquetas .cuantos{font-size:9px;opacity:.6;letter-spacing:.06em}
.etiquetas button[aria-pressed="true"] .cuantos{opacity:.72}

.limpiar{justify-self:start;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  margin-left:clamp(88px,10vw,112px);padding:7px 12px;border:0;background:none;border-radius:0;
  font-family:var(--f-rotulo);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-idle);transition:color .3s}
.limpiar:hover{color:var(--gold-hi)}
.limpiar svg{width:11px;height:11px}

.archivo-cuenta{margin:0 0 14px;font-family:var(--f-rotulo);font-size:9.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold-idle)}

/* ── la rejilla de fichas ── */
.rejilla{display:grid;gap:clamp(8px,1.1vw,14px);
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.ficha{position:relative;display:flex;min-height:150px;text-decoration:none;overflow:hidden;
  background:linear-gradient(177deg,rgba(255,255,255,.035),transparent 62%),rgba(7,7,10,.36);
  transition:background .4s,box-shadow .5s}
.ficha:hover{background:linear-gradient(177deg,rgba(255,255,255,.06),transparent 62%),rgba(7,7,10,.5);
  box-shadow:0 0 28px rgba(201,163,95,.1)}
/* el canto del cajón: la única raya que sí llega entera, porque es un canto, no un filete */
.ficha .canto{flex:none;width:3px;background:linear-gradient(180deg,var(--tinte),transparent 92%);opacity:.75}
.ficha:hover .canto{opacity:1}
.ficha::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,transparent,rgba(201,163,95,.2) 14%,rgba(201,163,95,.2) 86%,transparent) top/100% 1px no-repeat,
    linear-gradient(90deg,transparent,rgba(201,163,95,.2) 14%,rgba(201,163,95,.2) 86%,transparent) bottom/100% 1px no-repeat,
    linear-gradient(180deg,transparent,rgba(201,163,95,.2) 18%,rgba(201,163,95,.2) 82%,transparent) right/1px 100% no-repeat}
.ficha .dentro{display:flex;flex-direction:column;gap:5px;padding:15px 16px 14px;width:100%}
.ficha .tit{font-family:var(--f-rotulo);font-size:14.5px;line-height:1.22;letter-spacing:.03em;
  color:var(--gold-hi);text-wrap:balance}
.ficha .aut{font-family:var(--f-susurro);font-style:italic;font-size:15px;color:var(--ivory)}
.ficha .sub{font-family:var(--f-susurro);font-style:italic;font-size:14px;color:var(--ivory-dim)}
.ficha .cifras{margin-top:auto;padding-top:8px;font-family:var(--f-rotulo);font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-idle)}
.ficha .temas{display:flex;flex-wrap:wrap;gap:4px}
.ficha .temas i{font-style:normal;font-family:var(--f-rotulo);font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(237,225,200,.5);border:1px solid rgba(201,163,95,.16);padding:3px 6px}

/* las piezas sueltas caben más por fila y no necesitan tanto alto: son cuentos, no libros */
.rejilla.menuda{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.rejilla.menuda .ficha{min-height:104px}
.rejilla.menuda .ficha .dentro{padding:12px 13px 11px;gap:3px}
.rejilla.menuda .ficha .tit{font-size:13px}
.rejilla.menuda .ficha .sub{font-size:13px}

.archivo-nada{margin:clamp(30px,6vh,60px) 0;text-align:center;font-family:var(--f-susurro);
  font-style:italic;font-size:19px;color:var(--ivory-dim)}

@media (max-width:620px){
  .cajon{grid-template-columns:1fr;gap:6px}
  .cajon > .rotulo{text-align:left}
  .limpiar{margin-left:0}
  .rejilla{grid-template-columns:1fr}
}