/* ============================================================================
   Página · Catálogo — claudionavarro.net
   ----------------------------------------------------------------------------
   El catálogo no es la portada otra vez. La portada enseña tapas; el catálogo
   lleva un registro. Cada sello ocupa una franja teñida con su propia tinta y
   cada obra es una fila con folio, carátula torcida y fecha.
   Las franjas no miden ni se componen igual porque no cargan lo mismo: un sello
   con una sola obra se resuelve como expediente, no como tres cuartos de vacío.
   Todo se escribe con las variables de Capa 0 y las tres de Capa 1.
   ============================================================================ */

/* ------------------------------------------------- CABECERA + ÍNDICE */
.catalogo-cab__in{ display:grid; gap:var(--space-4); margin-top:var(--space-3); }
@media (min-width:64em){
  /* align-items:start, NO end: la columna de texto mide 227px y el h1 solo 62, así que
     con "end" el título se iba al fondo de la fila (y = arriba + 227 − 62) y aparecía
     DEBAJO del párrafo, con 165px de hueco encima. Medido en el navegador. */
  .catalogo-cab__in{ grid-template-columns:auto minmax(0,1fr); gap:var(--space-7); align-items:start; }
}
.catalogo-cab__in .t-hero{ line-height:0.86; margin-right:-0.04em; }

/* El índice se rige con la misma regla trazada a mano que el resto: la línea
   del sumario no es un borde recto de tabla. */
/* Las reglas de .indice se fueron con el indice de obras. */


/* ------------------------------------------------------- LA FRANJA */
.franja-sello__in{ display:grid; gap:var(--space-6); }
/* Un sello con una sola obra carga poco: su franja se acorta a propósito en
   lugar de dejar tres cuartos de papel teñido sin nada dentro. */
.franja-sello--unica{ padding-block:var(--space-5); }
@media (min-width:64em){
  .franja-sello--unica{ padding-block:var(--space-6); }
  .franja-sello__in{ grid-template-columns:var(--cab,17rem) minmax(0,1fr); gap:var(--space-7); align-items:start; }
  /* El lado de la nota cambia de franja en franja: dos columnas siempre iguales
     es exactamente la grilla que este sitio evita. */
  .franja-sello--der .franja-sello__in{ grid-template-columns:minmax(0,1fr) var(--cab,17rem); }
  .franja-sello--der .sello-cab{ order:2; }
}

/* La nota del sello: un papel pegado a la franja, no una columna alineada */
.sello-cab{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3);
  background:var(--color-superficie);
  border:var(--linea) solid var(--color-linea);
  box-shadow:0.4rem 0.55rem 0 rgba(0,0,0,.13);
  padding:var(--space-4);
  transform:rotate(calc(var(--giro,0deg) * var(--osadia)));
  /* Las tarjetas NO miden todas igual: 17, 20, 15 y 18.5rem según la franja. El
     contenido se ciñe a la tarjeta, nunca al viewport, y nada puede salirse del
     papel: sin esto el nombre se escapaba de la caja en Caja Negra y Alicanto. */
  container-type:inline-size;
  max-width:100%;
}
.sello-cab > *{ max-width:100%; min-width:0; }
.sello-cab__marca{ display:flex; align-items:center; gap:var(--space-3); max-width:100%; min-width:0; }
.sello-cab__nombre{
  font-family:var(--fuente-display); font-weight:800; text-transform:uppercase;
  /* Reserva para navegadores sin container queries: el tipo baja con el viewport. */
  font-size:clamp(1.55rem, 2.2vw + 0.65rem, 2.4rem);
  line-height:0.9; letter-spacing:-0.03em;
  min-width:0; overflow-wrap:anywhere;
}
@supports (container-type: inline-size){
  /* Lo correcto: el tipo se mide contra el ancho REAL de la tarjeta (13cqw de
     15rem da 1.95rem; de 20rem, 2.6rem). Así el nombre entra en las cuatro. */
  .sello-cab__nombre{ font-size:clamp(1.5rem, 13cqw, 2.6rem); }
}
.sello-cab__dicho{
  font-family:var(--fuente-display); font-style:italic;
  font-size:1.0625rem; line-height:1.45; color:var(--color-texto-secundario);
}
/* La muestra del sello: se anima al pasar el cursor, como las teselas del muro */
.cine{
  display:block; position:relative; overflow:hidden; width:100%;
  aspect-ratio:16/9;
  background:var(--color-texto);
  border:var(--linea) solid var(--color-linea);
  box-shadow:var(--sombra);
}
.cine video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* --------------------------------------------------- FILA DE REGISTRO */
.obra{
  /* El ritmo de las tapas (ancho, giro, desnivel) es el mismo de data/catalogo.json
     que usa la portada: aquí sólo se escala, para que la fila no se coma la página. */
  --tapa-escala:0.62;
  --tapa-sube:0.4;
  position:relative;
  display:grid;
  grid-template-columns:1.9rem 4.4rem minmax(0,1fr);
  gap:var(--space-3);
  align-items:start;
  padding-block:var(--space-4);
}
@media (min-width:48em){
  .obra{ grid-template-columns:2.4rem var(--ancho,6rem) minmax(0,1fr); gap:var(--space-4); }
}
@media (min-width:64em){
  .obra{
    grid-template-columns:2.75rem var(--ancho,6rem) minmax(0,1fr) 9rem;
    gap:var(--space-4) var(--space-3);
    transform:translateX(calc(var(--sangria,0rem) * var(--osadia)));
  }
}
@media (min-width:80em){
  .obra{ grid-template-columns:3rem var(--ancho,6rem) minmax(0,1fr) 11rem; gap:var(--space-4); }
}
/* La línea que separa dos obras es el mismo trazo dibujado a mano de las cejas,
   teñido con la tinta del sello. El extremo derecho queda a plomo; el izquierdo
   acompaña la sangría de la fila, así que la regla también sale desigual. */
.obra + .obra::before{
  content:''; position:absolute; left:0; right:0; top:0; height:0.25rem;
  background-color:color-mix(in srgb, var(--sello-acento) 45%, var(--color-linea));
  -webkit-mask-image:var(--regla-trazo); mask-image:var(--regla-trazo);
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
  -webkit-mask-size:7.5rem 0.25rem; mask-size:7.5rem 0.25rem;
}
@media (min-width:64em){ .obra + .obra::before{ right:calc(-1 * var(--sangria,0rem)); } }

.obra__n{
  font-family:var(--fuente-mono); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:0.06em; color:var(--sello-tinta); padding-top:0.3rem;
}
.obra__tapa{
  display:block; width:100%;
  transform:rotate(calc(var(--giro,0deg) * var(--osadia)))
            translateY(calc(var(--sube,0rem) * var(--osadia)));
  transition:transform var(--motion-medio) var(--curva-papel);
}
.obra__tapa img{
  width:100%;
  border:var(--linea) solid var(--color-linea);
  box-shadow:var(--sombra);
  transition:box-shadow var(--motion-rapido) var(--curva-tinta);
}
.obra:hover .obra__tapa{ transform:rotate(0deg) translateY(-0.3rem); }
.obra:hover .obra__tapa img{ box-shadow:0.3rem 0.55rem 0 rgba(0,0,0,.13); }
/* Lo que aún no sale se muestra, pero apagado: misma convención que la portada */
/* Anunciado pero no publicado: se nota, pero ya no se destruye el arte. Con 40% de
   opacidad y 80% de desaturación una carátula real quedaba ilegible, y ahora las hay.
   La distinción la sostienen el tinte y el rótulo "en preparación" de cada fila. */
.obra--prep .obra__tapa img{ opacity:.62; filter:grayscale(.35); }
.obra--prep .obra__titulo{ color:var(--color-texto-secundario); }
/* Hueco reservado: el tomo existe, la carátula todavía no */
.obra__tapa--hueco{
  display:grid; place-content:center; text-align:center;
  aspect-ratio:2/3;
  border:var(--linea) dashed var(--sello-acento);
  background:color-mix(in srgb, var(--sello-acento) 7%, transparent);
  font-family:var(--fuente-mono); font-size:var(--fs-xs); font-weight:700;
  color:var(--sello-tinta); text-transform:uppercase; letter-spacing:0.06em; line-height:1.5;
}
.obra__titulo{
  font-family:var(--fuente-display); font-weight:700; font-size:1.0625rem; line-height:1.25;
}
.obra__meta{ margin-top:var(--space-1); }
.obra__gen{
  font-family:var(--fuente-display); font-size:var(--fs-sm);
  color:var(--color-texto-secundario); margin-top:var(--space-1);
}
.obra__datos .enlace{ display:inline-block; margin-top:var(--space-2); }
.obra__cuando{
  grid-column:3;
  font-family:var(--fuente-mono); font-size:var(--fs-xs); line-height:1.5;
  color:var(--color-texto-secundario);
}
@media (min-width:64em){ .obra__cuando{ grid-column:auto; text-align:right; } }
.obra__cuando b{ display:block; color:var(--sello-acento); font-weight:700; }

/* ------------------------------------------------ EXPEDIENTE DE OBRA ÚNICA */
/* Un sello con una sola obra no llena una franja de cuatro columnas: se
   resuelve como una ficha de expediente, con la carátula y su registro técnico.
   La franja queda corta a propósito, porque carga poco. */
.expediente{ display:grid; gap:var(--space-5); align-items:start; }
@media (min-width:64em){
  .expediente{ grid-template-columns:10rem minmax(0,1fr); gap:var(--space-6); }
}
.expediente__tapa{
  display:block; max-width:9rem;
  transform:rotate(calc(var(--giro,0deg) * var(--osadia)));
}
@media (min-width:64em){ .expediente__tapa{ max-width:none; } }
.expediente__tapa img{
  width:100%;
  border:var(--linea) solid var(--color-linea);
  box-shadow:var(--sombra);
}
.expediente__in{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2); }
.expediente__in .ficha{ width:100%; margin-top:var(--space-3); }
.expediente__in .ficha__fila{ grid-template-columns:6.5rem minmax(0,1fr); }
.expediente__in .enlace{ margin-top:var(--space-3); }