/* Color visible de la pagina, para las superficies que necesitan repetirlo en
   vez de dejar ver lo que hay detras. Una seccion con superficie propia lo
   redeclara. */
:root { --surface: var(--bg-body); }

/* Matteria - ficha de libro: base comun de ficha1-3 y ficha6 (granate, reticula
   de 8, ritmo de 8pt). La paleta de cada ficha vive en su colorN.css, que se
   carga despues de este archivo; las @font-face y las familias, en base.css. */

body {
  /* El color de la tinta lo declara cada colorN.css con --ink */
  font-family: var(--serif);
  font-feature-settings: var(--serif-feat);
  letter-spacing: -0.25px;
}/* Lo que no es serif no lleva las alternativas de Reckless ni su tracking
   cerrado. Todo en :where(): especificidad cero,
para que cada versalita
   declare su 0.1em sin pelear con esta lista. */
:where(.page, .club) .grid-toggle {
  font-feature-settings: normal;
  letter-spacing: normal;
}
/* El tracking abierto lo pide la versalita: lo declara cada regla que ponga
   text-transform: uppercase, no esta lista de familias */
.grid-8 {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  /* El canal de 96 es horizontal: el ritmo vertical lo declara cada sección */
  column-gap: var(--gutter);
  row-gap: 0;
}
.grid-8.legacy { row-gap: var(--space-12); }/* ---- Barra superior ---- */
/* Anclada a las 8 columnas del contenido,
como el resto de la página */
.site-header {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  align-items: center;
  gap: var(--gutter);
  width: 100%;
  max-width: min(var(--grid-width), 100%);
  margin-inline: auto;
  padding: var(--space-8) var(--edge);
}
.site-header .logo-link { grid-column: 1; }
.site-header .site-header-nav { grid-column: 7 / span 2; }
@media (max-width: 960px) {
  /* En tableta y móvil el logo se centra */
    /* Mismo aire arriba y abajo: 48 arriba en la barra, 48 abajo los del .entry */
    .site-header:not([data-logo="left"]) .logo-link { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .site-header .site-header-nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; }}
@media (max-width: 767px) {
  .site-header .site-header-nav { grid-column: 1 / -1; }
  .site-header { padding-block: 40px 0; }}
.site-header > * {
  align-self: center;
}
.site-header nav {
  display: flex;
  align-items: center;
}
.site-header-nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}
.site-header-nav a:not([data-share]) {
  padding: var(--space-2) var(--space-6);
  font-family: var(--mono);
  letter-spacing: 0.1em;
  font-size: var(--label);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--borders);
  border-radius: 999px;
  transition: background 0.24s var(--ease), color 0.24s var(--ease), border-color 0.24s var(--ease);
}
.site-header-nav a:not([data-share]):hover {
  color: var(--primary);
  background: var(--ink);
  border-color: var(--ink);
}

@media (max-width: 960px) {
    
  /* Los valores que ya iban bien por debajo de 900, ahora desde 960 (breakpoint del sistema) */
  .site-header {
    grid-template-columns: 1fr auto;
    row-gap: var(--space-4);
    /* Arriba el mismo aire que deja .entry por debajo del logo */
    padding-block: var(--space-8) 0;
  }}

@media (max-width: 600px) {
  .site-header-nav a:not([data-share]) { padding: var(--space-2) var(--space-4); }}
.entry-author {
  margin: 0;
  font-family: var(--serif);
  font-feature-settings: var(--serif-feat);
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
  color: var(--ink-light);
  font-style: normal;
  font-weight: 400;
}
/* Dentro de un texto la autoria no es un bloque: es el nombre marcado para que
   lo lea el dock, asi que hereda tipografia, color y tracking de su titular. */
span.entry-author {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  font-feature-settings: inherit;
}
/* Sobre la escala h1 de base.css: solo el reparto de lineas */
.entry-title {
  text-wrap: balance;
}
.release-row {
  font-family: var(--mono);
  font-feature-settings: normal;
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  color: var(--veil-70);
}
.release-row dt,
.release-row dd {
  margin: 0;
}
.release-row dt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* Mismo estilo tipografico que los rotulos en versalita mono */
  font-family: var(--mono);
  font-feature-settings: normal;
  letter-spacing: 0.1em;
  font-size: var(--label);
  line-height: var(--leading-xs);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-light);
}
.release-row dd {
  /* Versalita, como su rotulo: caja alta y tracking abierto */
  letter-spacing: 0.1em;
}
/* El h2 cierra un peldano el leading: a 32px, un interlineado de 64 abre demasiado */
:where(.page, .club) h2 {
  line-height: var(--leading-h3);
}
/* Ritmo vertical unico de las secciones: mismo aire arriba y abajo en todos los anchos */
.legacy {
  padding-block: var(--space-24);
}
/* Bandas a sangre: el fondo llega al borde de la ventana y el contenido
   recupera la reticula con el mismo padding */
.legacy {
  margin-inline: calc(-1 * var(--bleed-pad));
  padding-inline: var(--bleed-pad);
}
/* ---- Bloque de la edición, clonado del caso ---- */

.case-text p { padding-block: 32px; }
.release-details-table {
  margin: 0;
  border-block: 1px solid var(--borders);
  border-inline: 0;
}
.release-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 48px;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  font-feature-settings: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--borders);
}
.release-row:last-child {
  border-bottom: 0;
}
.release-row dt,
.release-row dd {
  transition: translate 0.24s var(--ease), color 0.18s ease;
}
.release-row:hover dd {
  translate: -3px 0;
}
.release-details-table dt,
.release-details-table dd { margin: 0; }
.team-avatars {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.team-avatars img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.team-avatar {
  position: relative;
  display: inline-flex;
}
.release-details-table dd:has(.team-avatars) {
  overflow: visible;
}
.team-avatar + .team-avatar {
  margin-left: -10px;
}
.team-avatar:hover {
  z-index: 2;
}
.team-avatar:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.release-details {
  margin-top: var(--space-10);
  container-type: inline-size;
  padding: var(--space-8);
  background: var(--veil-4);
  border-radius: 3px;
}
.release-details-title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  letter-spacing: -0.01em;
}
.release-details-table dd {
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}
.release-row:hover dt {
  color: var(--ink-light);
  translate: 3px 0;
}
.legacy {
  align-items: start;
  /* El rotulo del avatar va en nowrap y puede asomar por el borde: se recorta en
     horizontal para no abrir scroll lateral, y sigue saliendo hacia arriba */
  overflow-x: clip;
  overflow-y: visible;
}
.legacy .case-text {
  grid-column: 5 / span 4;
  max-width: none;
}

@media (max-width: 960px) {
  .legacy { row-gap: var(--space-10); }
  .legacy .case-text { grid-column: 1 / -1; }}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  /* Velo neutro: funciona con fotos claras y oscuras, y el blur del modal
     separa la imagen de la pagina que queda detras */
  background: var(--veil-dark-90);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  display: grid;
  place-items: center;
}
.lightbox[hidden] { display: none; }
.lightbox-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  overflow: hidden;
  touch-action: none;
}
.lightbox-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox-close-slot {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 3;
  display: flex;
}
/* Igual que el cierre del modal (.shop-x): velo blanco al 10%, filete al 14% y
   tinta crema que se aclara en hover */
.lightbox-close {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  /* El lightbox es oscuro por naturaleza, no por contraste con la pagina: el
     boton va con las escalas literales, no con la semantica */
  border: 1px solid var(--veil-white-10);
  border-radius: 50%;
  background: var(--veil-dark-50);
  color: var(--veil-white-70);
  cursor: pointer;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  transition: background 0.3s ease, color 0.3s ease;
}
.lightbox-close:hover,
.lightbox-close:focus-visible {
  background: var(--veil-dark-30);
  color: var(--cream);
}
.lightbox-close .icon-close { display: block; }
@media (max-width: 767px) {
  .lightbox-close-slot {
    top: calc(0.75rem + env(safe-area-inset-top));
    left: 0;
    right: 0;
    bottom: auto;
    justify-content: center;
  }}
/* ---- Orden en responsive: portada, cabecera, texto y botones de compra ---- */

@media (max-width: 960px) {
  .legacy { order: 10; }}

/* ---- CTA anclado abajo (móvil) ---- */
/* Superficie y blur vienen de shop.css; aqui solo el filete y la sombra */
.buy-dock .dock-card {
  border-color: var(--borders);
  box-shadow: 0 12px 32px -18px var(--veil-dark-70);
}

@media (max-width: 960px) {
  .buy-dock { display: block; }
  /* Logotipo centrado, salvo cabeceras con data-logo="left" */
  .site-header:not([data-logo="left"]) .logo-link {
    justify-self: center;
    margin-inline: auto;
  }
  /* Blur neutro, independiente del color de fondo */
  /* Cerrar el lightbox: abajo y centrado, al alcance del pulgar */
  .lightbox-close-slot {
    top: auto;
    right: auto;
    left: 50%;
    bottom: calc(1.5rem + env(safe-area-inset-bottom));
    translate: -50% 0;
    justify-content: center;
  }}
.toc-part-num { font-variant-numeric: tabular-nums; }
.toc-title { position: relative; overflow: hidden; white-space: nowrap; }
.toc-leaders::after {
  position: absolute;
  padding-left: 0.5ch;
  text-align: right;
  color: var(--veil-dark-50);
  content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
}
.toc-page {
  min-width: 3ch;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--veil-70);
}
/* Variante simple: solo las seis partes, con guia de puntos y pagina */
.toc-brief {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  font-family: var(--mono);
  letter-spacing: normal;
  font-feature-settings: normal;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}
.toc-brief > li {
  display: grid;
  grid-template-columns: auto max-content;
  align-items: end;
  column-gap: var(--space-2);
}
.toc-brief > li + li { margin-top: var(--space-4); }
.toc-brief .toc-part-num { margin-right: 0.5ch; }
/* El titulo puede ocupar varias lineas: la guia se dibuja como borde punteado
   flexible y se alinea con la ultima linea */
.toc-brief .toc-title {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  overflow: visible;
  white-space: normal;
}
.toc-brief .toc-leaders {
  flex: 1 1 auto;
  min-width: 3ch;
  align-self: flex-end;
  margin: 0 0 0.35em 0.5ch;
  border-bottom: 1px dotted var(--veil-dark-50);
}
.toc-brief .toc-leaders::after { content: none; }
@media (max-width: 767px) {
  .toc-title { white-space: normal; }
  .toc-leaders { display: none; }}
.team-avatar::after { background: var(--ink); color: var(--dark); }

/* Pila de posters: dos cartas giradas que se pasan arrastrando. Modulo
   transversal: la colocacion la pone quien lo usa, aqui solo la superficie y su
   4/5. */
.poster-stack {
  position: relative;
  aspect-ratio: 4 / 5;
  touch-action: pan-y;
}
.poster-card {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 48px -28px var(--veil-dark-70);
  transition: transform 0.42s var(--ease), opacity 0.42s var(--ease);
  will-change: transform;
}
/* Las cartas se encogen un poco para que el giro no saque las esquinas de la
   columna; la proporcion la mantiene el aspect-ratio del contenedor */
.poster-card[data-pos="0"] { transform: rotate(-1.5deg) translate(-0.5%, 2%) scale(0.92); }
.poster-card[data-pos="1"] { transform: rotate(2.5deg) translate(2%, -0.5%) scale(0.9); }
.poster-card[data-pos="2"] { transform: rotate(-4deg) translate(-1.5%, -2%) scale(0.88); }
.poster-card.is-dragging { transition: none; }
.poster-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.poster-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .poster-card { transition: none; }}
/* Colocacion en .legacy: ocupa el hueco del image-slot que tenia */
.legacy .poster-stack { grid-column: 1 / span 4; grid-row: 1; }
@media (max-width: 960px) {
  .legacy .poster-stack { grid-column: 1 / -1; grid-row: auto; }}

/* ---- Indicativo de galeria sobre una apertura ----
   Universal: el disparador del visor y su contador. Cualquier familia lo usa,
   asi que no lleva prefijo de layout. La proporcion la decide la figura. */
.album-shot {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.album-shot > img {
  display: block;
  width: 100%;
  height: auto;
}
.album-shot-badge {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius);
  background: var(--veil-white-70);
  color: var(--dark);
  font-family: var(--mono);
  font-feature-settings: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: var(--label);
  line-height: var(--leading-xs);
  transition: transform 0.3s var(--ease);
}
.album-shot-badge img { display: block; width: 20px; height: auto; object-fit: contain; }
.album-shot:hover .album-shot-badge { transform: translateY(-2px); }