/* Color visible de la pagina: fondo del grupo de mezcla del retrato. Una hoja
   cuyo color lo pinte el body (ficha3) o una seccion con superficie propia lo
   redeclaran. */
: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) :where([class*="mono"],
.grid-toggle,
.label,
.meta,
.stat-label,
.title-section,
.fold2-title){
  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 */
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  color: var(--accent-2);
}
.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;
}
/* Secciones que apilan filas: ritmo vertical propio, después de .grid-8 para que gane */
.grid-8.entry-info { row-gap: var(--space-12); }
.grid-8.entry-hero1 { row-gap: var(--space-6); }
.stats,
.grid-8.team { 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; }
/* Centrado en la retícula de 8: dos columnas centradas (4-5), sin miedo a comer canal */
.site-header .site-search {
  grid-column: 4 / span 2;
  justify-self: center;
  /* Se ensancha un canal completo por cada lado */
  width: calc(100% + 2 * var(--gutter));
  max-width: none;
}
.site-header .site-header-nav { grid-column: 7 / span 2; }
@media (max-width: 960px) {
  /* En tableta y móvil el logo se centra y el buscador se retira */
    /* 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-search { display: none; }
  .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 .site-search,
.site-header nav {
  display: flex;
  align-items: center;
}
.site-search {
  position: relative;
  display: flex;
  align-items: center;
}
/* Los mandos --field-* son los de la serie de formularios (base.css); el
   buscador solo se aparta en geometria: 40px de alto y radio de 3px, que es
   lo que le pide la cabecera. */
/* Solo geometria: los estados los pone el modulo .field de base.css. El radio
   de 3px y los 40px de alto son lo que le pide la cabecera. */
.site-search input {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 var(--space-12) 0 var(--space-4);
  font-size: var(--leading-xs);
  /* 40px de alto menos los dos bordes: centra el texto y el placeholder */
  line-height: 38px;
  border-radius: 3px;
  box-shadow: var(--lift);
}
.site-search input::placeholder {
  line-height: 38px;
}
.site-search-btn {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--field-line);
  border-radius: 0;
  box-sizing: border-box;
  background: none;
  color: var(--field-icon);
  cursor: pointer;
  transition: color 0.24s var(--ease), background 0.24s var(--ease), border-color 0.24s var(--ease);
}
.site-search-btn svg { width: 16px; height: 16px; }
/* El separador no cambia nunca; la lupa se resalta con un velo de fondo */
.site-search .site-search-btn:hover,
.site-search:hover .site-search-btn:hover,
.site-search:active .site-search-btn,
.site-search .site-search-btn:active {
  background: var(--field-bg);
}
.site-search-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.site-header-nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}
.site-header-nav a {
  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:hover {
  color: var(--primary);
  background: var(--ink);
  border-color: var(--ink);
}
/* ---- Ficha ---- */
.entry-aside {
  grid-column: 6 / span 3;
  grid-row: 1;
}
.entry-pays {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
/* Botón de pago: misma caja que los enlaces de la fila */
.entry-pay {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: var(--space-2) var(--space-4);
  background: var(--veil-4);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.24s var(--ease);
}
.entry-pay img { display: block; height: 22px; width: auto; }
.entry-pay:hover {   background: var(--veil-10); }
.entry-pay:active {  background: var(--veil-30); }
.entry-pay:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* ---- Columna de texto ---- */
.entry-headline {
  margin: 0 0 var(--space-10);
  font-family: var(--serif);
  font-feature-settings: var(--serif-feat);
  font-weight: 400;
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.entry-headline--sm {
  margin-top: var(--space-16);
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
}
.entry-sec + .entry-sec {
  margin-top: var(--space-12);
}
/* ---- Escala tipografica h1-h6 ----
   Serif, peso 400, tamano fluido y interlinea siempre multiplo de 8.
   Va en :where para que cualquier clase la ajuste sin pelear especificidad. */
/* Ritmo vertical: separacion de titular a texto y de texto a titular */
.entry-sec p + p {
  margin-top: var(--space-6);
}
/* Filas de obras del autor: versalita mono y filete inferior en cada fila.
   El contenedor (filete superior, sin viñetas) se declara más abajo. */
.author-works li {
  font-family: var(--mono);
  letter-spacing: normal;
  font-feature-settings: normal;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--ink);
  border-bottom: 1px solid var(--borders);
}
/* ---- Responsive ---- */

@media (max-width: 1100px) {
    .entry-aside { grid-column: 6 / span 3; grid-row: 1; }
}

@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;
  }
  .site-header .site-search { grid-column: 1 / -1; grid-row: 2; }
        .entry-aside { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 600px) {
  .site-header-nav a { padding: 8px 16px; }
  .entry-headline { line-height: var(--leading-h4); }
}
/* ---- Portada 3D del libro ---- */
.entry-cover--aside {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  width: 100%;
  max-width: 100%;
  padding: var(--space-6);
  aspect-ratio: 3 / 4;
  min-height: 0;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid var(--borders);
}
/* Halo difuso tras el libro, como en la ficha */
.entry-cover--aside::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Halo con la escala de velos: neutro. Las fichas de fondo claro NO redefinen
     los velos: cambian de escala en su delta (aqui, --veil-dark-30). */
  background: radial-gradient(circle at 50% 50%, var(--veil-30) 0%, rgb(from var(--veil-30) r g b / 0) 76%);
  filter: blur(34px);
  opacity: 0.9;
  animation: halo-wave 2s ease-in-out infinite;
  will-change: transform, border-radius;
}
@keyframes halo-wave {
  0% { transform: translate(0, 0); border-radius: 40% 60% 55% 45% / 55% 45% 55% 45%; }
  25% { transform: translate(3%, -2%); border-radius: 58% 42% 40% 60% / 42% 58% 45% 55%; }
  50% { transform: translate(-2%, 3%); border-radius: 44% 56% 60% 40% / 58% 40% 60% 42%; }
  75% { transform: translate(-3%, -1.5%); border-radius: 60% 40% 44% 56% / 44% 56% 40% 58%; }
  100% { transform: translate(0, 0); border-radius: 40% 60% 55% 45% / 55% 45% 55% 45%; }
}
.entry-cover--aside .book3d {
  position: absolute;
  inset: 8px;
  z-index: 1;
  touch-action: none;
  cursor: grab;
}
.entry-cover--aside .book3d:active {
  cursor: grabbing;
}
.entry-cover--aside .book3d canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* La imagen plana es solo respaldo cuando hay visor 3D: sin canvas en la
   figure, es la cubierta y se ve sin depender de JS */
.entry-cover--aside:has(.book3d) img {
  visibility: hidden;
}
.page.no-3d .entry-cover--aside img {
  visibility: visible;
}
.entry-cover--aside img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 960px) {
  /* La portada no debe comerse la pantalla: alto tope y ancho derivado del ratio */
  .entry-cover--aside {
    width: auto;
    height: 60dvh;
    max-width: 100%;
    margin-inline: auto;
  }
  /* Permite el scroll vertical con el dedo; el giro del libro queda en horizontal */
  .entry-cover--aside .book3d { touch-action: pan-y; }
}

/* ---- Compra bajo la portada ---- */
.entry-aside .entry-buy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.entry-aside .buy-cta {
  width: 100%;
}
/* ---- Cabecera de la ficha ---- */

.entry-titles {
  grid-column: 1 / span 7;
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 1.5vw, 0.9rem);
}
.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;
}
/* Sobre la escala h1 de base.css: solo el reparto de lineas */
.entry-title {
  text-wrap: balance;
}
.meta,
.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);
}
.meta dt,
.meta dd,
.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 el rotulo de seccion (.title-section) */
  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);
}
.meta dd,
.release-row dd {
  /* Versalita, como su rotulo: caja alta y tracking abierto */
  letter-spacing: 0.1em;
  color: var(--ink);
}
.meta--year {
  grid-column: 1 / span 1;
  grid-row: 2;
}
.meta--edition {
  grid-column: 2 / span 4;
  grid-row: 2;
}

@media (max-width: 960px) {
    /* Un peldaño abajo en la escala de leading */
        .entry-hero1 .entry-portrait {
    order: 2;
    grid-row: 1;
    grid-column: 8 / -1;
    justify-self: end;
    align-self: end;
    width: 80px;
    max-width: 80px;
    margin-block: 0;
    /* La ilustracion es tinta gris sobre transparente: luminosity toma la
     luminosidad del dibujo y el color de la pagina, asi se tine con --bg-body
     tanto sobre fondo oscuro como claro. */
  mix-blend-mode: var(--portrait-blend, luminosity);
}
  .entry-hero1 .meta--year { order: 3; grid-row: 2; grid-column: 1 / span 1; }
}

.entry-hero1 .meta dt {
  font-weight: 600;
  color: var(--ink-light);
}

.entry-hero1 .entry-portrait {
  mix-blend-mode: multiply;
  filter: none;
}

.entry-hero1 .meta {
  color: var(--veil-70);
  row-gap: var(--space-2);
}
.metas {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  align-items: start;
  gap: var(--gutter);
  padding-block: var(--space-6);
}
.metas .meta--year { grid-column: 1 / span 1; grid-row: 1; }
.metas .meta--edition { grid-column: 2 / span 4; grid-row: 1; }

@media (max-width: 767px) {
  /* Las dos metas juntas, sin repartirse el ancho de la reticula */
  .metas {
    grid-template-columns: max-content max-content;
    column-gap: var(--space-12);
    row-gap: 0;
  }
  .metas .meta--year { order: 1; grid-column: auto; grid-row: 1; margin-left: 0; }
  .metas .meta--edition { order: 2; grid-column: auto; grid-row: 1; margin-left: 0; }
}
/* ---- Logotipo: monograma que se despliega al pasar por encima ---- */

@keyframes logoDrop {
  from { opacity: 0; translate: 0 -8px; }
  to { opacity: 1; translate: 0 0; }
}
.site-header[data-load] .logo-face {
  opacity: 0;
}
.site-header[data-load][data-shown] .logo-face {
  opacity: 1;
  animation: logoDrop 0.9s var(--ease) both;
}
.logo-link {
  --logo-h: clamp(24px, 2.9vw, 32px);
  position: relative;
  display: block;
  height: var(--logo-h);
  width: calc(var(--logo-h) * 0.833);
  overflow: hidden;
  color: var(--ink);
  transition: width 0.42s var(--ease);
}
/* Al pasar por encima el monograma se despliega en el logotipo completo: solo
   cambia el ancho, el color es el mismo en reposo y en hover (el logo es un
   enlace, asi que hay que frenar aqui el color de a:hover) */
.logo-link:hover,
.logo-link:focus-visible {
  width: calc(var(--logo-h) * 4.917);
  color: var(--ink);
}
.logo-face {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

/* Escala del logo por escalones, siempre en múltiplos de 8 */
@media (max-width: 960px) { .logo-link { --logo-h: 48px; } }
.logo-svg {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}
/* Delta de familia: en las fichas 1-3 y 6 el h2 cierra un peldano el leading
   (a 32px el interlineado de 64 abria demasiado) */
:where(.page, .club) h2 {
  line-height: var(--leading-h3);
}
/* ---- Cifras, clonadas de la ficha del libro ---- */
/* Ritmo vertical unico de las secciones: mismo aire arriba y abajo en todos los anchos */
.stats,
.author,
.team,
.posters {
  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 */
.entry-hero1,
.author,
.team {
  margin-inline: calc(-1 * var(--bleed-pad));
  padding-inline: var(--bleed-pad);
}
/* ---- Separador de tres estrellas entre la galería y el autor ---- */
.entry-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  box-sizing: content-box;
  overflow: visible;
  margin: var(--space-24) 0;
  border: 0;
}
.entry-divider::after {
  content: "";
  display: block;
  width: 140px;
  height: 36px;
  background: var(--veil-10);
  /* Trazado en linea: una mascara externa no carga bajo file:// */
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQwIiBoZWlnaHQ9IjM2IiB2aWV3Qm94PSIwIDAgMTQwIDM2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNC40MzQ3OSAxMi43Mjg2QzQuMTU0ODMgMTEuOTQ3NCA0LjIxMDg0IDExLjI1MTQgNC42MDIwMSAxMC42MzdDNC44ODA0NSAxMC4xMzQ2IDUuNDY2MzcgOS44Mjg2NiA2LjM1OTIzIDkuNzE2MjhDNy4xOTU2IDkuNjYwNzMgNy45NzY0MSA5LjgyODY2IDguNzAyMDUgMTAuMjE4N0MxMS40MzQ5IDExLjcyNDMgMTMuOTQ1OCAxNC4wNjcxIDE2LjIzMzYgMTcuMjQ2OEMxMi4wNDk4IDE2Ljg1NzYgOC42MTc0NSAxNS45Mzc1IDUuOTQwODUgMTQuNDg2QzUuMjE1MTIgMTQuMDk2MyA0LjcxMzE5IDEzLjUxMDcgNC40MzQ3NiAxMi43Mjg3TDQuNDM0NzkgMTIuNzI4NlpNNi42MTAzOSAyNi41MzYxQzUuNzczMjEgMjYuNDgxMiA1LjE4NzYxIDI2LjE3MzMgNC44NTI4MSAyNS42MTZDNC41NzMyIDI1LjExMzIgNC42MDIwMyAyNC41MDA0IDQuOTM2ODMgMjMuNzc0MUM1LjMyNjQ3IDIyLjk5NDEgNS44ODQ4OSAyMi40MDg1IDYuNjEwMzggMjIuMDE3M0M5Ljg0NTI4IDIwLjIzMjYgMTMuMDI1OSAxOS4yNTYyIDE2LjE1MDcgMTkuMDg4OUMxNC4wMjkxIDIyLjIxMzcgMTEuNzE1NSAyNC40NzIxIDkuMjA0NDggMjUuODY2NUM4LjMxMTM4IDI2LjM2ODggNy40NDcwMiAyNi41OTE2IDYuNjEwMTcgMjYuNTM2TDYuNjEwMzkgMjYuNTM2MVpNMTUuNzMxOSAzLjk0MTU4QzE2LjM0NDcgMy4yMTcxNCAxNy4wNDE5IDIuODUzMTUgMTcuODI0MyAyLjg1MzE1QzE4LjQ5MjcgMi44NTMxNSAxOS4xMzM4IDMuMjQ0MzIgMTkuNzQ4MyA0LjAyNTEzQzIwLjMwNjMgNC44MDY3OCAyMC41ODU0IDUuNjQzNDggMjAuNTg1NCA2LjUzNTUzQzIwLjU4NTQgOS4yMTM1MSAxOS42NjQyIDEyLjQ0OTQgMTcuODI0MyAxNi4yNDMyQzE1Ljg3MDYgMTIuMjI2OCAxNC44OTQ3IDguOTkxMzMgMTQuODk0NyA2LjUzNTUzQzE0Ljg5NTEgNS41MzE5NCAxNS4xNzMgNC42NjcyMiAxNS43MzE5IDMuOTQxNThaTTE5LjMzMDQgMzIuMjI2OEMxOC44Mjc1IDMyLjg0MTIgMTguMjQyIDMzLjE0NjMgMTcuNTcyIDMzLjE0NjNDMTYuOTU4NCAzMy4xNDYzIDE2LjQwMTIgMzIuODExOSAxNS44OTkxIDMyLjE0MzZDMTUuMzk3NiAzMS41MjkyIDE1LjE0NTEgMzAuODMyOCAxNS4xNDUxIDMwLjA1MTJDMTUuMTQ1MSAyNy4wOTQgMTYuMDM2NyAyMy43NzQgMTcuODI0NCAyMC4wOTIxQzE5LjMzMDEgMjMuMTYyIDIwLjA4MjggMjYuNDgxOCAyMC4wODI4IDMwLjA1MTJDMjAuMDgzMiAzMC44ODg0IDE5LjgzMjggMzEuNjEzNSAxOS4zMzA0IDMyLjIyNjhaTTI5LjcwNjUgOS44ODMwOEMzMC41NDM3IDkuOTk1NDYgMzEuMTU3NyAxMC4zNTcxIDMxLjU0ODQgMTAuOTcxNUMzMS44MjYgMTEuNDcyNyAzMS43OTg5IDEyLjExNTEgMzEuNDY0NCAxMi44OTU1QzMxLjA3MzIgMTMuNjc3NSAzMC41MTQ4IDE0LjI2MzEgMjkuNzkgMTQuNjUzNkMyNy41MDI0IDE1LjkzNzEgMjQuMDcxNCAxNi43NzM2IDE5LjQ5NzYgMTcuMTYzNkMyMS41NjE3IDE0LjMxODQgMjQuMDk5OSAxMi4wNTg4IDI3LjExMzcgMTAuMzg0OEMyNy45NTA1IDkuOTM4NjcgMjguODE0NSA5Ljc3Mjc0IDI5LjcwNjUgOS44ODMxMUwyOS43MDY1IDkuODgzMDhaTTMxLjIxNDEgMjMuNjkwNkMzMS42MDMzIDI0LjQxNjIgMzEuNjMxOCAyNS4wMjkzIDMxLjI5NzMgMjUuNTMyMkMzMC45NjE3IDI2LjAzNDYgMzAuMzc2OSAyNi4zNDE4IDI5LjUzOTcgMjYuNDUyOUMyOC42NDY1IDI2LjU2NDUgMjcuODM2OSAyNi40MjYxIDI3LjExMzcgMjYuMDM0NkMyNC4zNzg2IDI0LjUyNzggMjEuODQxMiAyMi4xNTcxIDE5LjQ5NzYgMTguOTIxQzIzLjAxMjQgMTkuMjU2MSAyNi4zMDM3IDIwLjI2MDUgMjkuMzcyMSAyMS45MzQyQzMwLjIwODggMjIuMzgwMiAzMC44MjMzIDIyLjk2NTkgMzEuMjE0MSAyMy42OTA2SDMxLjIxNDFaIiBmaWxsPSJibGFjayIgc3R5bGU9ImZpbGw6YmxhY2s7ZmlsbC1vcGFjaXR5OjE7Ij48L3BhdGg+CjxwYXRoIGQ9Ik0xMDguNDM1IDEyLjcyODZDMTA4LjE1NSAxMS45NDc0IDEwOC4yMTEgMTEuMjUxNCAxMDguNjAyIDEwLjYzN0MxMDguODggMTAuMTM0NiAxMDkuNDY2IDkuODI4NjYgMTEwLjM1OSA5LjcxNjI4QzExMS4xOTYgOS42NjA3MyAxMTEuOTc2IDkuODI4NjYgMTEyLjcwMiAxMC4yMTg3QzExNS40MzUgMTEuNzI0MyAxMTcuOTQ2IDE0LjA2NzEgMTIwLjIzNCAxNy4yNDY4QzExNi4wNSAxNi44NTc2IDExMi42MTcgMTUuOTM3NSAxMDkuOTQxIDE0LjQ4NkMxMDkuMjE1IDE0LjA5NjMgMTA4LjcxMyAxMy41MTA3IDEwOC40MzUgMTIuNzI4N0wxMDguNDM1IDEyLjcyODZaTTExMC42MSAyNi41MzYxQzEwOS43NzMgMjYuNDgxMiAxMDkuMTg4IDI2LjE3MzMgMTA4Ljg1MyAyNS42MTZDMTA4LjU3MyAyNS4xMTMyIDEwOC42MDIgMjQuNTAwNCAxMDguOTM3IDIzLjc3NDFDMTA5LjMyNiAyMi45OTQxIDEwOS44ODUgMjIuNDA4NSAxMTAuNjEgMjIuMDE3M0MxMTMuODQ1IDIwLjIzMjYgMTE3LjAyNiAxOS4yNTYyIDEyMC4xNTEgMTkuMDg4OUMxMTguMDI5IDIyLjIxMzcgMTE1LjcxNSAyNC40NzIxIDExMy4yMDQgMjUuODY2NUMxMTIuMzExIDI2LjM2ODggMTExLjQ0NyAyNi41OTE2IDExMC42MSAyNi41MzZMMTEwLjYxIDI2LjUzNjFaTTExOS43MzIgMy45NDE1OEMxMjAuMzQ1IDMuMjE3MTQgMTIxLjA0MiAyLjg1MzE1IDEyMS44MjQgMi44NTMxNUMxMjIuNDkzIDIuODUzMTUgMTIzLjEzNCAzLjI0NDMyIDEyMy43NDggNC4wMjUxM0MxMjQuMzA2IDQuODA2NzggMTI0LjU4NSA1LjY0MzQ4IDEyNC41ODUgNi41MzU1M0MxMjQuNTg1IDkuMjEzNTEgMTIzLjY2NCAxMi40NDk0IDEyMS44MjQgMTYuMjQzMkMxMTkuODcxIDEyLjIyNjggMTE4Ljg5NSA4Ljk5MTMzIDExOC44OTUgNi41MzU1M0MxMTguODk1IDUuNTMxOTQgMTE5LjE3MyA0LjY2NzIyIDExOS43MzIgMy45NDE1OFpNMTIzLjMzIDMyLjIyNjhDMTIyLjgyOCAzMi44NDEyIDEyMi4yNDIgMzMuMTQ2MyAxMjEuNTcyIDMzLjE0NjNDMTIwLjk1OCAzMy4xNDYzIDEyMC40MDEgMzIuODExOSAxMTkuODk5IDMyLjE0MzZDMTE5LjM5OCAzMS41MjkyIDExOS4xNDUgMzAuODMyOCAxMTkuMTQ1IDMwLjA1MTJDMTE5LjE0NSAyNy4wOTQgMTIwLjAzNyAyMy43NzQgMTIxLjgyNCAyMC4wOTIxQzEyMy4zMyAyMy4xNjIgMTI0LjA4MyAyNi40ODE4IDEyNC4wODMgMzAuMDUxMkMxMjQuMDgzIDMwLjg4ODQgMTIzLjgzMyAzMS42MTM1IDEyMy4zMyAzMi4yMjY4Wk0xMzMuNzA2IDkuODgzMDhDMTM0LjU0NCA5Ljk5NTQ2IDEzNS4xNTggMTAuMzU3MSAxMzUuNTQ4IDEwLjk3MTVDMTM1LjgyNiAxMS40NzI3IDEzNS43OTkgMTIuMTE1MSAxMzUuNDY0IDEyLjg5NTVDMTM1LjA3MyAxMy42Nzc1IDEzNC41MTUgMTQuMjYzMSAxMzMuNzkgMTQuNjUzNkMxMzEuNTAyIDE1LjkzNzEgMTI4LjA3MSAxNi43NzM2IDEyMy40OTggMTcuMTYzNkMxMjUuNTYyIDE0LjMxODQgMTI4LjEgMTIuMDU4OCAxMzEuMTE0IDEwLjM4NDhDMTMxLjk1IDkuOTM4NjcgMTMyLjgxNCA5Ljc3Mjc0IDEzMy43MDcgOS44ODMxMUwxMzMuNzA2IDkuODgzMDhaTTEzNS4yMTQgMjMuNjkwNkMxMzUuNjAzIDI0LjQxNjIgMTM1LjYzMiAyNS4wMjkzIDEzNS4yOTcgMjUuNTMyMkMxMzQuOTYyIDI2LjAzNDYgMTM0LjM3NyAyNi4zNDE4IDEzMy41NCAyNi40NTI5QzEzMi42NDcgMjYuNTY0NSAxMzEuODM3IDI2LjQyNjEgMTMxLjExNCAyNi4wMzQ2QzEyOC4zNzkgMjQuNTI3OCAxMjUuODQxIDIyLjE1NzEgMTIzLjQ5OCAxOC45MjFDMTI3LjAxMiAxOS4yNTYxIDEzMC4zMDQgMjAuMjYwNSAxMzMuMzcyIDIxLjkzNDJDMTM0LjIwOSAyMi4zODAyIDEzNC44MjMgMjIuOTY1OSAxMzUuMjE0IDIzLjY5MDZIMTM1LjIxNFoiIGZpbGw9ImJsYWNrIiBzdHlsZT0iZmlsbDpibGFjaztmaWxsLW9wYWNpdHk6MTsiPjwvcGF0aD4KPHBhdGggZD0iTTU2LjQzNDggMTIuNzI4NkM1Ni4xNTQ4IDExLjk0NzQgNTYuMjEwOCAxMS4yNTE0IDU2LjYwMiAxMC42MzdDNTYuODgwNCAxMC4xMzQ2IDU3LjQ2NjQgOS44Mjg2NiA1OC4zNTkyIDkuNzE2MjhDNTkuMTk1NiA5LjY2MDczIDU5Ljk3NjQgOS44Mjg2NiA2MC43MDIxIDEwLjIxODdDNjMuNDM0OSAxMS43MjQzIDY1Ljk0NTggMTQuMDY3MSA2OC4yMzM2IDE3LjI0NjhDNjQuMDQ5OCAxNi44NTc2IDYwLjYxNzUgMTUuOTM3NSA1Ny45NDA5IDE0LjQ4NkM1Ny4yMTUxIDE0LjA5NjMgNTYuNzEzMiAxMy41MTA3IDU2LjQzNDggMTIuNzI4N0w1Ni40MzQ4IDEyLjcyODZaTTU4LjYxMDQgMjYuNTM2MUM1Ny43NzMyIDI2LjQ4MTIgNTcuMTg3NiAyNi4xNzMzIDU2Ljg1MjggMjUuNjE2QzU2LjU3MzIgMjUuMTEzMiA1Ni42MDIgMjQuNTAwNCA1Ni45MzY4IDIzLjc3NDFDNTcuMzI2NSAyMi45OTQxIDU3Ljg4NDkgMjIuNDA4NSA1OC42MTA0IDIyLjAxNzNDNjEuODQ1MyAyMC4yMzI2IDY1LjAyNTkgMTkuMjU2MiA2OC4xNTA3IDE5LjA4ODlDNjYuMDI5MSAyMi4yMTM3IDYzLjcxNTUgMjQuNDcyMSA2MS4yMDQ1IDI1Ljg2NjVDNjAuMzExNCAyNi4zNjg4IDU5LjQ0NyAyNi41OTE2IDU4LjYxMDIgMjYuNTM2TDU4LjYxMDQgMjYuNTM2MVpNNjcuNzMxOSAzLjk0MTU4QzY4LjM0NDcgMy4yMTcxNCA2OS4wNDE5IDIuODUzMTUgNjkuODI0MyAyLjg1MzE1QzcwLjQ5MjcgMi44NTMxNSA3MS4xMzM4IDMuMjQ0MzIgNzEuNzQ4MyA0LjAyNTEzQzcyLjMwNjMgNC44MDY3OCA3Mi41ODU0IDUuNjQzNDggNzIuNTg1NCA2LjUzNTUzQzcyLjU4NTQgOS4yMTM1MSA3MS42NjQyIDEyLjQ0OTQgNjkuODI0MyAxNi4yNDMyQzY3Ljg3MDYgMTIuMjI2OCA2Ni44OTQ3IDguOTkxMzMgNjYuODk0NyA2LjUzNTUzQzY2Ljg5NTEgNS41MzE5NCA2Ny4xNzMgNC42NjcyMiA2Ny43MzE5IDMuOTQxNThaTTcxLjMzMDQgMzIuMjI2OEM3MC44Mjc1IDMyLjg0MTIgNzAuMjQyIDMzLjE0NjMgNjkuNTcyIDMzLjE0NjNDNjguOTU4NCAzMy4xNDYzIDY4LjQwMTIgMzIuODExOSA2Ny44OTkxIDMyLjE0MzZDNjcuMzk3NiAzMS41MjkyIDY3LjE0NTEgMzAuODMyOCA2Ny4xNDUxIDMwLjA1MTJDNjcuMTQ1MSAyNy4wOTQgNjguMDM2NyAyMy43NzQgNjkuODI0NCAyMC4wOTIxQzcxLjMzMDEgMjMuMTYyIDcyLjA4MjggMjYuNDgxOCA3Mi4wODI4IDMwLjA1MTJDNzIuMDgzMiAzMC44ODg0IDcxLjgzMjggMzEuNjEzNSA3MS4zMzA0IDMyLjIyNjhaTTgxLjcwNjUgOS44ODMwOEM4Mi41NDM3IDkuOTk1NDYgODMuMTU3NyAxMC4zNTcxIDgzLjU0ODQgMTAuOTcxNUM4My44MjYgMTEuNDcyNyA4My43OTg5IDEyLjExNTEgODMuNDY0NCAxMi44OTU1QzgzLjA3MzIgMTMuNjc3NSA4Mi41MTQ4IDE0LjI2MzEgODEuNzkgMTQuNjUzNkM3OS41MDI0IDE1LjkzNzEgNzYuMDcxNCAxNi43NzM2IDcxLjQ5NzYgMTcuMTYzNkM3My41NjE3IDE0LjMxODQgNzYuMDk5OSAxMi4wNTg4IDc5LjExMzcgMTAuMzg0OEM3OS45NTA1IDkuOTM4NjcgODAuODE0NSA5Ljc3Mjc0IDgxLjcwNjUgOS44ODMxMUw4MS43MDY1IDkuODgzMDhaTTgzLjIxNDEgMjMuNjkwNkM4My42MDMzIDI0LjQxNjIgODMuNjMxOCAyNS4wMjkzIDgzLjI5NzMgMjUuNTMyMkM4Mi45NjE3IDI2LjAzNDYgODIuMzc2OSAyNi4zNDE4IDgxLjUzOTcgMjYuNDUyOUM4MC42NDY1IDI2LjU2NDUgNzkuODM2OSAyNi40MjYxIDc5LjExMzcgMjYuMDM0NkM3Ni4zNzg2IDI0LjUyNzggNzMuODQxMiAyMi4xNTcxIDcxLjQ5NzYgMTguOTIxQzc1LjAxMjQgMTkuMjU2MSA3OC4zMDM3IDIwLjI2MDUgODEuMzcyMSAyMS45MzQyQzgyLjIwODggMjIuMzgwMiA4Mi44MjMzIDIyLjk2NTkgODMuMjE0MSAyMy42OTA2SDgzLjIxNDFaIiBmaWxsPSJibGFjayIgc3R5bGU9ImZpbGw6YmxhY2s7ZmlsbC1vcGFjaXR5OjE7Ij48L3BhdGg+Cjwvc3ZnPg==") center / contain no-repeat;
  mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQwIiBoZWlnaHQ9IjM2IiB2aWV3Qm94PSIwIDAgMTQwIDM2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNC40MzQ3OSAxMi43Mjg2QzQuMTU0ODMgMTEuOTQ3NCA0LjIxMDg0IDExLjI1MTQgNC42MDIwMSAxMC42MzdDNC44ODA0NSAxMC4xMzQ2IDUuNDY2MzcgOS44Mjg2NiA2LjM1OTIzIDkuNzE2MjhDNy4xOTU2IDkuNjYwNzMgNy45NzY0MSA5LjgyODY2IDguNzAyMDUgMTAuMjE4N0MxMS40MzQ5IDExLjcyNDMgMTMuOTQ1OCAxNC4wNjcxIDE2LjIzMzYgMTcuMjQ2OEMxMi4wNDk4IDE2Ljg1NzYgOC42MTc0NSAxNS45Mzc1IDUuOTQwODUgMTQuNDg2QzUuMjE1MTIgMTQuMDk2MyA0LjcxMzE5IDEzLjUxMDcgNC40MzQ3NiAxMi43Mjg3TDQuNDM0NzkgMTIuNzI4NlpNNi42MTAzOSAyNi41MzYxQzUuNzczMjEgMjYuNDgxMiA1LjE4NzYxIDI2LjE3MzMgNC44NTI4MSAyNS42MTZDNC41NzMyIDI1LjExMzIgNC42MDIwMyAyNC41MDA0IDQuOTM2ODMgMjMuNzc0MUM1LjMyNjQ3IDIyLjk5NDEgNS44ODQ4OSAyMi40MDg1IDYuNjEwMzggMjIuMDE3M0M5Ljg0NTI4IDIwLjIzMjYgMTMuMDI1OSAxOS4yNTYyIDE2LjE1MDcgMTkuMDg4OUMxNC4wMjkxIDIyLjIxMzcgMTEuNzE1NSAyNC40NzIxIDkuMjA0NDggMjUuODY2NUM4LjMxMTM4IDI2LjM2ODggNy40NDcwMiAyNi41OTE2IDYuNjEwMTcgMjYuNTM2TDYuNjEwMzkgMjYuNTM2MVpNMTUuNzMxOSAzLjk0MTU4QzE2LjM0NDcgMy4yMTcxNCAxNy4wNDE5IDIuODUzMTUgMTcuODI0MyAyLjg1MzE1QzE4LjQ5MjcgMi44NTMxNSAxOS4xMzM4IDMuMjQ0MzIgMTkuNzQ4MyA0LjAyNTEzQzIwLjMwNjMgNC44MDY3OCAyMC41ODU0IDUuNjQzNDggMjAuNTg1NCA2LjUzNTUzQzIwLjU4NTQgOS4yMTM1MSAxOS42NjQyIDEyLjQ0OTQgMTcuODI0MyAxNi4yNDMyQzE1Ljg3MDYgMTIuMjI2OCAxNC44OTQ3IDguOTkxMzMgMTQuODk0NyA2LjUzNTUzQzE0Ljg5NTEgNS41MzE5NCAxNS4xNzMgNC42NjcyMiAxNS43MzE5IDMuOTQxNThaTTE5LjMzMDQgMzIuMjI2OEMxOC44Mjc1IDMyLjg0MTIgMTguMjQyIDMzLjE0NjMgMTcuNTcyIDMzLjE0NjNDMTYuOTU4NCAzMy4xNDYzIDE2LjQwMTIgMzIuODExOSAxNS44OTkxIDMyLjE0MzZDMTUuMzk3NiAzMS41MjkyIDE1LjE0NTEgMzAuODMyOCAxNS4xNDUxIDMwLjA1MTJDMTUuMTQ1MSAyNy4wOTQgMTYuMDM2NyAyMy43NzQgMTcuODI0NCAyMC4wOTIxQzE5LjMzMDEgMjMuMTYyIDIwLjA4MjggMjYuNDgxOCAyMC4wODI4IDMwLjA1MTJDMjAuMDgzMiAzMC44ODg0IDE5LjgzMjggMzEuNjEzNSAxOS4zMzA0IDMyLjIyNjhaTTI5LjcwNjUgOS44ODMwOEMzMC41NDM3IDkuOTk1NDYgMzEuMTU3NyAxMC4zNTcxIDMxLjU0ODQgMTAuOTcxNUMzMS44MjYgMTEuNDcyNyAzMS43OTg5IDEyLjExNTEgMzEuNDY0NCAxMi44OTU1QzMxLjA3MzIgMTMuNjc3NSAzMC41MTQ4IDE0LjI2MzEgMjkuNzkgMTQuNjUzNkMyNy41MDI0IDE1LjkzNzEgMjQuMDcxNCAxNi43NzM2IDE5LjQ5NzYgMTcuMTYzNkMyMS41NjE3IDE0LjMxODQgMjQuMDk5OSAxMi4wNTg4IDI3LjExMzcgMTAuMzg0OEMyNy45NTA1IDkuOTM4NjcgMjguODE0NSA5Ljc3Mjc0IDI5LjcwNjUgOS44ODMxMUwyOS43MDY1IDkuODgzMDhaTTMxLjIxNDEgMjMuNjkwNkMzMS42MDMzIDI0LjQxNjIgMzEuNjMxOCAyNS4wMjkzIDMxLjI5NzMgMjUuNTMyMkMzMC45NjE3IDI2LjAzNDYgMzAuMzc2OSAyNi4zNDE4IDI5LjUzOTcgMjYuNDUyOUMyOC42NDY1IDI2LjU2NDUgMjcuODM2OSAyNi40MjYxIDI3LjExMzcgMjYuMDM0NkMyNC4zNzg2IDI0LjUyNzggMjEuODQxMiAyMi4xNTcxIDE5LjQ5NzYgMTguOTIxQzIzLjAxMjQgMTkuMjU2MSAyNi4zMDM3IDIwLjI2MDUgMjkuMzcyMSAyMS45MzQyQzMwLjIwODggMjIuMzgwMiAzMC44MjMzIDIyLjk2NTkgMzEuMjE0MSAyMy42OTA2SDMxLjIxNDFaIiBmaWxsPSJibGFjayIgc3R5bGU9ImZpbGw6YmxhY2s7ZmlsbC1vcGFjaXR5OjE7Ij48L3BhdGg+CjxwYXRoIGQ9Ik0xMDguNDM1IDEyLjcyODZDMTA4LjE1NSAxMS45NDc0IDEwOC4yMTEgMTEuMjUxNCAxMDguNjAyIDEwLjYzN0MxMDguODggMTAuMTM0NiAxMDkuNDY2IDkuODI4NjYgMTEwLjM1OSA5LjcxNjI4QzExMS4xOTYgOS42NjA3MyAxMTEuOTc2IDkuODI4NjYgMTEyLjcwMiAxMC4yMTg3QzExNS40MzUgMTEuNzI0MyAxMTcuOTQ2IDE0LjA2NzEgMTIwLjIzNCAxNy4yNDY4QzExNi4wNSAxNi44NTc2IDExMi42MTcgMTUuOTM3NSAxMDkuOTQxIDE0LjQ4NkMxMDkuMjE1IDE0LjA5NjMgMTA4LjcxMyAxMy41MTA3IDEwOC40MzUgMTIuNzI4N0wxMDguNDM1IDEyLjcyODZaTTExMC42MSAyNi41MzYxQzEwOS43NzMgMjYuNDgxMiAxMDkuMTg4IDI2LjE3MzMgMTA4Ljg1MyAyNS42MTZDMTA4LjU3MyAyNS4xMTMyIDEwOC42MDIgMjQuNTAwNCAxMDguOTM3IDIzLjc3NDFDMTA5LjMyNiAyMi45OTQxIDEwOS44ODUgMjIuNDA4NSAxMTAuNjEgMjIuMDE3M0MxMTMuODQ1IDIwLjIzMjYgMTE3LjAyNiAxOS4yNTYyIDEyMC4xNTEgMTkuMDg4OUMxMTguMDI5IDIyLjIxMzcgMTE1LjcxNSAyNC40NzIxIDExMy4yMDQgMjUuODY2NUMxMTIuMzExIDI2LjM2ODggMTExLjQ0NyAyNi41OTE2IDExMC42MSAyNi41MzZMMTEwLjYxIDI2LjUzNjFaTTExOS43MzIgMy45NDE1OEMxMjAuMzQ1IDMuMjE3MTQgMTIxLjA0MiAyLjg1MzE1IDEyMS44MjQgMi44NTMxNUMxMjIuNDkzIDIuODUzMTUgMTIzLjEzNCAzLjI0NDMyIDEyMy43NDggNC4wMjUxM0MxMjQuMzA2IDQuODA2NzggMTI0LjU4NSA1LjY0MzQ4IDEyNC41ODUgNi41MzU1M0MxMjQuNTg1IDkuMjEzNTEgMTIzLjY2NCAxMi40NDk0IDEyMS44MjQgMTYuMjQzMkMxMTkuODcxIDEyLjIyNjggMTE4Ljg5NSA4Ljk5MTMzIDExOC44OTUgNi41MzU1M0MxMTguODk1IDUuNTMxOTQgMTE5LjE3MyA0LjY2NzIyIDExOS43MzIgMy45NDE1OFpNMTIzLjMzIDMyLjIyNjhDMTIyLjgyOCAzMi44NDEyIDEyMi4yNDIgMzMuMTQ2MyAxMjEuNTcyIDMzLjE0NjNDMTIwLjk1OCAzMy4xNDYzIDEyMC40MDEgMzIuODExOSAxMTkuODk5IDMyLjE0MzZDMTE5LjM5OCAzMS41MjkyIDExOS4xNDUgMzAuODMyOCAxMTkuMTQ1IDMwLjA1MTJDMTE5LjE0NSAyNy4wOTQgMTIwLjAzNyAyMy43NzQgMTIxLjgyNCAyMC4wOTIxQzEyMy4zMyAyMy4xNjIgMTI0LjA4MyAyNi40ODE4IDEyNC4wODMgMzAuMDUxMkMxMjQuMDgzIDMwLjg4ODQgMTIzLjgzMyAzMS42MTM1IDEyMy4zMyAzMi4yMjY4Wk0xMzMuNzA2IDkuODgzMDhDMTM0LjU0NCA5Ljk5NTQ2IDEzNS4xNTggMTAuMzU3MSAxMzUuNTQ4IDEwLjk3MTVDMTM1LjgyNiAxMS40NzI3IDEzNS43OTkgMTIuMTE1MSAxMzUuNDY0IDEyLjg5NTVDMTM1LjA3MyAxMy42Nzc1IDEzNC41MTUgMTQuMjYzMSAxMzMuNzkgMTQuNjUzNkMxMzEuNTAyIDE1LjkzNzEgMTI4LjA3MSAxNi43NzM2IDEyMy40OTggMTcuMTYzNkMxMjUuNTYyIDE0LjMxODQgMTI4LjEgMTIuMDU4OCAxMzEuMTE0IDEwLjM4NDhDMTMxLjk1IDkuOTM4NjcgMTMyLjgxNCA5Ljc3Mjc0IDEzMy43MDcgOS44ODMxMUwxMzMuNzA2IDkuODgzMDhaTTEzNS4yMTQgMjMuNjkwNkMxMzUuNjAzIDI0LjQxNjIgMTM1LjYzMiAyNS4wMjkzIDEzNS4yOTcgMjUuNTMyMkMxMzQuOTYyIDI2LjAzNDYgMTM0LjM3NyAyNi4zNDE4IDEzMy41NCAyNi40NTI5QzEzMi42NDcgMjYuNTY0NSAxMzEuODM3IDI2LjQyNjEgMTMxLjExNCAyNi4wMzQ2QzEyOC4zNzkgMjQuNTI3OCAxMjUuODQxIDIyLjE1NzEgMTIzLjQ5OCAxOC45MjFDMTI3LjAxMiAxOS4yNTYxIDEzMC4zMDQgMjAuMjYwNSAxMzMuMzcyIDIxLjkzNDJDMTM0LjIwOSAyMi4zODAyIDEzNC44MjMgMjIuOTY1OSAxMzUuMjE0IDIzLjY5MDZIMTM1LjIxNFoiIGZpbGw9ImJsYWNrIiBzdHlsZT0iZmlsbDpibGFjaztmaWxsLW9wYWNpdHk6MTsiPjwvcGF0aD4KPHBhdGggZD0iTTU2LjQzNDggMTIuNzI4NkM1Ni4xNTQ4IDExLjk0NzQgNTYuMjEwOCAxMS4yNTE0IDU2LjYwMiAxMC42MzdDNTYuODgwNCAxMC4xMzQ2IDU3LjQ2NjQgOS44Mjg2NiA1OC4zNTkyIDkuNzE2MjhDNTkuMTk1NiA5LjY2MDczIDU5Ljk3NjQgOS44Mjg2NiA2MC43MDIxIDEwLjIxODdDNjMuNDM0OSAxMS43MjQzIDY1Ljk0NTggMTQuMDY3MSA2OC4yMzM2IDE3LjI0NjhDNjQuMDQ5OCAxNi44NTc2IDYwLjYxNzUgMTUuOTM3NSA1Ny45NDA5IDE0LjQ4NkM1Ny4yMTUxIDE0LjA5NjMgNTYuNzEzMiAxMy41MTA3IDU2LjQzNDggMTIuNzI4N0w1Ni40MzQ4IDEyLjcyODZaTTU4LjYxMDQgMjYuNTM2MUM1Ny43NzMyIDI2LjQ4MTIgNTcuMTg3NiAyNi4xNzMzIDU2Ljg1MjggMjUuNjE2QzU2LjU3MzIgMjUuMTEzMiA1Ni42MDIgMjQuNTAwNCA1Ni45MzY4IDIzLjc3NDFDNTcuMzI2NSAyMi45OTQxIDU3Ljg4NDkgMjIuNDA4NSA1OC42MTA0IDIyLjAxNzNDNjEuODQ1MyAyMC4yMzI2IDY1LjAyNTkgMTkuMjU2MiA2OC4xNTA3IDE5LjA4ODlDNjYuMDI5MSAyMi4yMTM3IDYzLjcxNTUgMjQuNDcyMSA2MS4yMDQ1IDI1Ljg2NjVDNjAuMzExNCAyNi4zNjg4IDU5LjQ0NyAyNi41OTE2IDU4LjYxMDIgMjYuNTM2TDU4LjYxMDQgMjYuNTM2MVpNNjcuNzMxOSAzLjk0MTU4QzY4LjM0NDcgMy4yMTcxNCA2OS4wNDE5IDIuODUzMTUgNjkuODI0MyAyLjg1MzE1QzcwLjQ5MjcgMi44NTMxNSA3MS4xMzM4IDMuMjQ0MzIgNzEuNzQ4MyA0LjAyNTEzQzcyLjMwNjMgNC44MDY3OCA3Mi41ODU0IDUuNjQzNDggNzIuNTg1NCA2LjUzNTUzQzcyLjU4NTQgOS4yMTM1MSA3MS42NjQyIDEyLjQ0OTQgNjkuODI0MyAxNi4yNDMyQzY3Ljg3MDYgMTIuMjI2OCA2Ni44OTQ3IDguOTkxMzMgNjYuODk0NyA2LjUzNTUzQzY2Ljg5NTEgNS41MzE5NCA2Ny4xNzMgNC42NjcyMiA2Ny43MzE5IDMuOTQxNThaTTcxLjMzMDQgMzIuMjI2OEM3MC44Mjc1IDMyLjg0MTIgNzAuMjQyIDMzLjE0NjMgNjkuNTcyIDMzLjE0NjNDNjguOTU4NCAzMy4xNDYzIDY4LjQwMTIgMzIuODExOSA2Ny44OTkxIDMyLjE0MzZDNjcuMzk3NiAzMS41MjkyIDY3LjE0NTEgMzAuODMyOCA2Ny4xNDUxIDMwLjA1MTJDNjcuMTQ1MSAyNy4wOTQgNjguMDM2NyAyMy43NzQgNjkuODI0NCAyMC4wOTIxQzcxLjMzMDEgMjMuMTYyIDcyLjA4MjggMjYuNDgxOCA3Mi4wODI4IDMwLjA1MTJDNzIuMDgzMiAzMC44ODg0IDcxLjgzMjggMzEuNjEzNSA3MS4zMzA0IDMyLjIyNjhaTTgxLjcwNjUgOS44ODMwOEM4Mi41NDM3IDkuOTk1NDYgODMuMTU3NyAxMC4zNTcxIDgzLjU0ODQgMTAuOTcxNUM4My44MjYgMTEuNDcyNyA4My43OTg5IDEyLjExNTEgODMuNDY0NCAxMi44OTU1QzgzLjA3MzIgMTMuNjc3NSA4Mi41MTQ4IDE0LjI2MzEgODEuNzkgMTQuNjUzNkM3OS41MDI0IDE1LjkzNzEgNzYuMDcxNCAxNi43NzM2IDcxLjQ5NzYgMTcuMTYzNkM3My41NjE3IDE0LjMxODQgNzYuMDk5OSAxMi4wNTg4IDc5LjExMzcgMTAuMzg0OEM3OS45NTA1IDkuOTM4NjcgODAuODE0NSA5Ljc3Mjc0IDgxLjcwNjUgOS44ODMxMUw4MS43MDY1IDkuODgzMDhaTTgzLjIxNDEgMjMuNjkwNkM4My42MDMzIDI0LjQxNjIgODMuNjMxOCAyNS4wMjkzIDgzLjI5NzMgMjUuNTMyMkM4Mi45NjE3IDI2LjAzNDYgODIuMzc2OSAyNi4zNDE4IDgxLjUzOTcgMjYuNDUyOUM4MC42NDY1IDI2LjU2NDUgNzkuODM2OSAyNi40MjYxIDc5LjExMzcgMjYuMDM0NkM3Ni4zNzg2IDI0LjUyNzggNzMuODQxMiAyMi4xNTcxIDcxLjQ5NzYgMTguOTIxQzc1LjAxMjQgMTkuMjU2MSA3OC4zMDM3IDIwLjI2MDUgODEuMzcyMSAyMS45MzQyQzgyLjIwODggMjIuMzgwMiA4Mi44MjMzIDIyLjk2NTkgODMuMjE0MSAyMy42OTA2SDgzLjIxNDFaIiBmaWxsPSJibGFjayIgc3R5bGU9ImZpbGw6YmxhY2s7ZmlsbC1vcGFjaXR5OjE7Ij48L3BhdGg+Cjwvc3ZnPg==") center / contain no-repeat;
}
/* ---- Autor y cita, clonado de la ficha del libro ---- */
.author-bio .entry-portrait {
  grid-column: auto;
  grid-row: auto;
  justify-self: start;
  align-self: auto;
  width: 100%;
  max-width: none;
  margin-bottom: 0;
  /* Tinta gris sobre transparente: luminosity toma la luminosidad del dibujo
     y el color de la pagina, asi el retrato se tine con la paleta */
  mix-blend-mode: var(--portrait-blend, luminosity);
}
.author-bio {
  align-self: start;
}
/* La figure es el grupo de mezcla del retrato: repite el color visible de la
   pagina para que el dibujo tenga contra que mezclarse. Cada hoja declara
   --surface en su :root (--bg-body, o el color que pinte el body); una seccion
   con superficie propia lo redeclara y el retrato lo hereda. */
.entry-portrait-fig {
  margin: 0 0 var(--space-6);
  background: var(--surface);
}
.author-title {
  margin: 0;
  font-family: var(--serif);
  font-feature-settings: var(--serif-feat);
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
  letter-spacing: -0.01em;
  color: var(--ink-light);
}
.author-role {
  margin: var(--space-1) 0 0;
  display: flex;
  justify-content: space-between;
  font-family: var(--serif);
  font-feature-settings: var(--serif-feat);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--ink-light);
}
.author-role span {
  font-family: var(--mono);
    font-feature-settings: normal;
  font-style: normal;
  font-size: var(--text-sm);
}
.author-works {
  list-style: none;
  margin: var(--space-10) 0 0;
  padding: 0;
  border-top: 1px solid var(--borders);
}
.author-works li {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
}
.author-works li { color: var(--ink-light); }
.author-works li span,
.author-works li svg {
  transition: translate 0.24s var(--ease), color 0.18s ease;
}
.author-works li:hover span:first-child {
  translate: 3px 0;
}
.author-works li:hover span:last-child,
.author-works li:hover svg {
  translate: -3px 0;
}
.author-work-link {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  line-height: var(--leading-md);
  gap: var(--space-4);
  text-decoration: none;
  transition: color 0.28s var(--ease);
}
/* El texto va en spans con color propio: el hover del enlace tiene que
   alcanzarlos, o el color del li gana por especificidad */
.author-work-link:hover,
.author-work-link:hover span,
.author-work-link:hover svg,
.author-title a:hover { color: var(--accent-2); }
.author-work-link svg {
  flex: none;
  color: inherit;
}

.author > * {
  position: relative;
}
.author {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  grid-template-rows: auto auto minmax(240px, 1fr);
  column-gap: var(--gutter);
}
.author-statement {
  grid-column: 1 / span 5;
  grid-row: 1;
  position: relative;
}
.author-statement .title-section { margin-bottom: var(--space-8); }
.author-quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--serif);
  font-feature-settings: var(--serif-feat);
  font-weight: 400;
  /* Igual que los titulares: tamano e interlinea interpolan juntos */
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  line-height: clamp(2.25rem, 1.6rem + 2.8vw, 3rem);
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.author-quote p {
  margin: 0;
  font: inherit;
}
.author-quote p::before {
  content: '\00AB';
}
.author-quote p::after {
  content: '\00BB';
}
/* Mismo estilo tipografico que el rotulo de seccion (.title-section) */
.author-quote cite {
  display: block;
  margin-top: var(--space-6);
  font-family: var(--mono);
  font-feature-settings: normal;
  letter-spacing: 0.1em;
  font-size: var(--label);
  line-height: var(--leading-xs);
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  color: var(--ink-light);
}
.author-aside {
  grid-column: 4 / span 4;
  grid-row: 3;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: flex-start;
}
.author-lede { margin: 24px 0 0; }

@media (max-width: 960px) {
  .author-statement { grid-column: 1 / -1; }
  .author-aside { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .author {
    min-height: 0;
    grid-template-rows: none;
  }
  .author-aside {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-top: var(--space-10);
    margin-left: 15%;
  }
}
@media (max-width: 960px) {
  .author {
    min-height: 0;
    grid-template-rows: auto;
  }
  .author-aside { align-self: start; margin-top: var(--space-10); }
}
/* ---- 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;
  color: var(--ink);
}
.release-details-table dd {
  color: var(--ink);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}
.release-row:hover dt {
  color: var(--ink-light);
  translate: 3px 0;
}
.team {
  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;
}
.team .case-text {
  grid-column: 5 / span 4;
  max-width: none;
}
.team image-slot {
  grid-column: 1 / span 4;
  grid-row: 1;
  aspect-ratio: 4 / 5;
}
image-slot {
  width: 100%;
}

@media (max-width: 960px) {
  .team { row-gap: var(--space-10); }
  .team .case-text { grid-column: 1 / -1; }
  .team image-slot { grid-column: 1 / -1; grid-row: auto; }
}
/* ---- Materiales arrastrables ---- */

.posters {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
  display: block;
  margin-inline: calc(-1 * var(--bleed-pad));
  padding-inline: var(--bleed-pad);
}
.section-head {
  position: relative;
  max-width: 62rem;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-areas: 'stack';
  place-items: center;
  align-content: center;
  text-align: center;
}
.section-ghost {
  grid-area: stack;
  margin: 0;
  align-self: center;
  font-family: var(--sans);
    font-feature-settings: normal;
  font-weight: 600;
  font-size: clamp(2.6rem, 6.5vw, 5.6rem);
  line-height: var(--leading-h3);
  letter-spacing: -0.06em;
  color: var(--veil-10);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.section-title {
  grid-area: stack;
  position: relative;
  z-index: 1;
  margin: 0;
  align-self: center;
  font-family: var(--serif);
  font-feature-settings: var(--serif-feat);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.scatter {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 0;
  height: 80vh;
  margin: 0;
  padding-inline: 0;
  background: transparent;
  /* Las laminas asoman arriba y abajo, pero nunca lateralmente: una que roce el
     borde derecho abriria scroll horizontal en toda la pagina */
  overflow-x: clip;
  overflow-y: visible;
  pointer-events: none;
  z-index: 1;
  touch-action: pan-y;
}
.scatter-wrap {
  position: relative;
  width: 100%;
  max-width: var(--grid-width);
  height: 100%;
  margin-inline: auto;
  pointer-events: none;
}
.scatter img {
  position: absolute;
  display: block;
  height: auto;
  cursor: grab;
  pointer-events: auto;
  user-select: none;
  -webkit-user-drag: none;
  box-shadow: 0 1.25rem 2.5rem var(--veil-dark-30);
  transition: transform 0.5s var(--ease), box-shadow 0.3s ease;
}
.scatter img:hover {
  --hov: -3deg;
  --hsc: 1.06;
  box-shadow: 0 1.75rem 3.25rem var(--veil-dark-50);
}
/* Flotación sutil, independiente del transform de arrastre */
@keyframes scatter-float {
  0%   { translate: 0 -5.5%; }
  25%  { translate: 4% 0; }
  50%  { translate: 0 5.5%; }
  75%  { translate: -4% 0; }
  100% { translate: 0 -5.5%; }
}
.scatter img {
  animation: scatter-float 12s linear infinite;
  will-change: translate;
}
.scatter img:nth-child(1) { animation-duration: 9s; animation-delay: -1s; }
.scatter img:nth-child(2) { animation-duration: 11s; animation-delay: -5s; }
.scatter img:nth-child(3) { animation-duration: 10s; animation-delay: -3s; }
.scatter img:nth-child(4) { animation-duration: 12s; animation-delay: -8s; }
.scatter img.is-dragging {
  animation: none;
  translate: none;
  transition: box-shadow 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .scatter img { animation: none; }
}
@media (max-width: 960px) {
  .section-head { padding-top: 0; }
  .scatter { min-height: 0; height: 520px; }
  /* Materiales es lo ultimo del recorrido: su aire inferior lo pone ya el pie */
  .posters { padding-bottom: 0; }
}
/* ---- Galería y lightbox, clonados de la ficha del libro ---- */

.gallery {
  position: relative;
  /* Unidad de columna tomada de la retícula viva, sea de 8, 4, 2 o 1 columnas */
  --track: min(var(--grid-width), 100vw - 2 * var(--edge));
  --grid-col: calc((var(--track) - (var(--grid-columns) - 1) * var(--grid-gutter)) / var(--grid-columns));
  /* Escritorio: 5 columnas de 8 */
  --slide-span: 5;
  --slide-w: calc(var(--slide-span) * var(--grid-col) + (var(--slide-span) - 1) * var(--grid-gutter));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  margin-block: 0;
}
.title-section{
  margin: 0;
  font-family: var(--mono);
  letter-spacing: 0.1em;
  font-feature-settings: normal;
  font-size: var(--label);
  font-weight: 600;
  text-transform: uppercase;
  line-height: var(--leading-xs);
  color: var(--ink-light);
}
.slider {
  display: flex;
  gap: var(--grid-gutter);
  margin-right: calc(-1 * var(--bleed-pad));
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
.slider::-webkit-scrollbar { display: none; }
.slide {
  flex: 0 0 var(--slide-w);
  width: var(--slide-w);
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
}
.slide img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

@media (max-width: 960px) {
  /* Tableta: 2 columnas de 4 */
  .gallery { --slide-span: 2; }
}
@media (max-width: 767px) {
  .gallery {
    --slide-span: 2;
    gap: var(--grid-gutter);
  }
  .slider {
    gap: var(--space-3);
    margin-inline: calc(-1 * var(--edge)) calc(-1 * var(--edge));
    padding-inline: var(--edge) 0;
    scroll-padding-left: var(--edge);
    cursor: grab;
  }
}
@media (max-width: 479px) {
  /* Con una sola columna, la diapositiva ocupa el ancho de la reticula: asi
     mantiene el 16:9 en pantalla en vez de desbordar y verse recortada */
  .gallery { --slide-span: 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 svg { display: block; }

@media (max-width: 960px) {
  .gallery { min-height: 0; margin-bottom: 0; }
  .gallery { margin-block: 0; }
}
@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;
  }
}
.gallery figcaption { margin-top: var(--space-4); line-height: var(--leading-md); }
/* ---- Recomendar: clonado de la ficha del libro ---- */

.description-share > span,
.description-share-cells a,
.description-share-cells button {
  font-family: var(--mono);
  letter-spacing: normal;
}
.description-share > span { letter-spacing: 0.1em; }
.description-share {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.description-share > span {
  font-size: var(--label);
  font-weight: 600;
  line-height: var(--leading-md);
  padding-top: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  align-self: flex-start;
}
.description-share-cells {
  display: flex;
  border-radius: var(--radius);
  box-shadow: var(--lift);
}
.description-share-cells a,
.description-share-cells button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-left: -1px;
  border: 1px solid var(--borders);
  color: var(--ink);
  background: none;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease;
}
.description-share-cells a:hover,
.description-share-cells button:hover {
  background: var(--veil-10);
  color: var(--ink);
  border-color: var(--borders);
}
.description-share-cells a { border-radius: 0; }
/* En la barra superior el bloque va en linea */
.site-header-nav .description-share {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}
/* ---- Orden en responsive: portada, cabecera, texto y botones de compra ---- */

@media (max-width: 960px) {
    /* Los contenedores intermedios ceden el paso para poder ordenar entre niveles */
  .entry-info,
  .entry-aside { display: contents; }

  .entry-cover--aside { order: 1; }
      .entry-buy { order: 4; }
  .entry-folds { order: 5; }
  .stats { order: 6; }
  .gallery { order: 7; }
  .author { order: 8; }
  .entry-divider:nth-of-type(1) { order: 9; }
  .team { order: 10; }
  .posters { order: 12; }

  .entry-cover--aside { margin-bottom: var(--space-8); }
  .entry-buy { margin-top: var(--space-8); }
}

/* ---- CTA anclado abajo (móvil) ---- */
/* Solo color: la estructura del dock vive en shop.css */
.buy-dock .dock-card {
  background: var(--veil-10);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-color: var(--borders);
  box-shadow: 0 12px 32px -18px var(--veil-dark-70);
}

@media (max-width: 960px) {
  .buy-dock { display: block; }
  /* El CTA vive en el dock inferior */
  .entry-aside .entry-buy .buy-row,
  .entry-aside .entry-pays { display: none; }
  /* Acerca autor y titulo: el hueco lo crean las cajas de linea */
  .entry-titles { gap: 0; }
  /* Buscador y compartir del header fuera en movil */
  .site-header .site-search,
  .site-header .description-share { display: none; }
  /* Logotipo centrado, salvo cabeceras con data-logo="left" */
  .site-header:not([data-logo="left"]) .logo-link {
    justify-self: center;
    margin-inline: auto;
  }
  /* Peldano h1 con un clamp algo mas contenido en movil */
  .section-ghost { font-size: clamp(3.25rem, 1.9rem + 6.4vw, 4rem); line-height: var(--leading-h1); }
  .section-title { font-size: var(--text-h2); line-height: var(--leading-h2); }
  /* Blur neutro, independiente del color de fondo */
  .buy-dock .dock-card { background: var(--veil-10); }
  /* 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);
  color: var(--ink);
}
.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; }
}

/* ================= Layout: clasico (ficha1, ficha2) =================
   Estructura de la ficha estandar. La hoja del libro solo trae color. */
@media (max-width: 767px) {
  body.lay-classic .entry,
  body.lay-article .entry {
    padding-top: var(--space-10);
  }
}
body.lay-classic .entry,
body.lay-article .entry {
  padding-block: var(--space-12) 0;
}
body.lay-classic .entry-description {
  grid-column: 1 / span 5;
  grid-row: 1;
}
@media (max-width: 1100px) {
  body.lay-classic .entry-description {
    grid-column: 1 / span 5;
    grid-row: 1;
  }
}
@media (max-width: 960px) {
  body.lay-classic .entry-info,
  body.lay-article .entry-info {
    row-gap: var(--space-16);
  }
  body.lay-classic .entry,
  body.lay-article .entry {
    padding-block: var(--space-8) var(--space-18);
  }
  body.lay-classic .entry-description {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}
body.lay-classic .entry-info,
body.lay-article .entry-info {
  align-items: start;
  margin-top: 0;
}
@media (max-width: 960px) {
  body.lay-classic :where(.page, .club) h1,
  body.lay-article :where(.page, .club) h1 {
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
  }
  body.lay-classic .entry-hero1 .entry-titles {
    order: 1;
    grid-row: 1;
    grid-column: 1 / span 3;
  }
}
body.lay-classic .entry-hero1 {
  align-items: start;
  width: auto;
  max-width: none;
  margin-block: 0;
  padding-block: var(--space-16);
}
@media (max-width: 960px) {
  body.lay-classic .entry-hero1 {
    padding-block: var(--space-8) var(--space-6);
  }
}
body.lay-classic .team-avatar::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
@media (max-width: 767px) {
  body.lay-classic :where(.page, .club) h1,
  body.lay-article :where(.page, .club) h1 {
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
  }
}
@media (max-width: 960px) {
  body.lay-classic .entry,
  body.lay-article .entry {
    display: flex;
    flex-direction: column;
  }
  body.lay-classic .entry-hero1 {
    order: 2;
  }
  body.lay-classic .entry-description {
    order: 3;
  }
}

/* ================= Layout: con columna lateral (ficha3) ================= */
@media (max-width: 767px) {
  body.lay-aside .entry {
    padding-top: var(--space-10);
  }
}
body.lay-aside .entry {
  padding-block: var(--space-12) 0;
}
@media (min-width: 961px) {
  body.lay-aside .entry {
    padding-block: var(--space-24) 0;
  }
}
body.lay-aside .entry-description {
  grid-column: 2 / span 4;
  grid-row: 1;
}
@media (max-width: 1100px) {
  body.lay-aside .entry-description {
    grid-column: 2 / span 4;
    grid-row: 1;
  }
}
@media (max-width: 960px) {
  body.lay-aside .entry-info > .entry-hero1 {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: var(--space-12);
  }
  body.lay-aside .entry-info > .entry-aside {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  body.lay-aside .entry {
    padding-block: var(--space-8) var(--space-18);
  }
  body.lay-aside .entry-info {
    row-gap: var(--space-16);
  }
  body.lay-aside .entry-description {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  body.lay-aside .entry-aside .entry-cover--aside {
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
  }
}
body.lay-aside .entry-info {
  align-items: start;
  margin-top: 0;
}
@media (min-width: 961px) {
  body.lay-aside .entry-info {
    row-gap: var(--space-8);
  }
}
@media (min-width: 961px) {
  body.lay-aside .entry-info > .entry-hero1 {
    grid-column: 2 / span 4;
    grid-row: 1;
  }
  body.lay-aside .entry-info > .entry-description {
    grid-row: 2;
  }
  body.lay-aside .entry-info > .entry-aside {
    grid-row: 1 / span 2;
    /* La columna se estira hasta el final de la fila: sin esto el sticky no
       tiene recorrido, porque su bloque contenedor mide lo que su contenido. */
    align-self: stretch;
  }
  /* El CTA se queda en su sitio bajo los detalles y se pega arriba cuando el
     scroll llega a su altura. */
  body.lay-aside .entry-aside .entry-buy {
    position: sticky;
    top: var(--space-8);
    /* El recorrido acaba donde acaba la columna: al llegar a las cifras el CTA
       sale de cuadro solo, sin salto ni JS. */
    padding-bottom: var(--space-16);
  }
}
body.lay-aside .entry-hero1 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-6) var(--gutter);
}
body.lay-aside .entry-hero1 .entry-titles {
  grid-column: 1 / -1;
}
@media (min-width: 961px) {
  body.lay-aside .entry-hero1 .entry-author {
    font-size: var(--text-xl);
    line-height: var(--leading-xl);
  }
  body.lay-aside .entry-hero1 .entry-title {
    font-size: var(--text-h2);
    line-height: var(--leading-h3);
  }
}
@media (max-width: 960px) {
  body.lay-aside :where(.page, .club) h1 {
    font-size: var(--text-h2);
    line-height: var(--leading-h3);
  }
  body.lay-aside .entry-hero1 .entry-titles {
    order: 1;
    grid-row: 1;
  }
}
body.lay-aside .entry-hero1 {
  align-items: start;
  width: auto;
  max-width: none;
  margin-block: 0 var(--space-8);
  padding-block: 0;
}
@media (max-width: 960px) {
  body.lay-aside .entry-hero1 {
    padding-block: var(--space-8) var(--space-6);
  }
}
body.lay-aside .team-avatar::after {
  content: attr(data-name);
  font-family: var(--sans);
  letter-spacing: normal;
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
@media (max-width: 767px) {
  body.lay-aside :where(.page, .club) h1 {
    font-size: var(--text-h2);
    line-height: var(--leading-h4);
  }
}
@media (max-width: 960px) {
  body.lay-aside .entry {
    display: flex;
    flex-direction: column;
  }
  body.lay-aside .entry-hero1 {
    order: 2;
  }
  body.lay-aside .entry-description {
    order: 3;
  }
}
body.lay-aside .entry-info > .entry-logo {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  margin-top: var(--space-2);
  transition: color 0.32s var(--ease);
}
body.lay-aside .entry-info > .entry-logo:hover,
body.lay-aside .entry-info > .entry-logo:focus-visible {
  width: calc(var(--logo-h) * 0.833);
}
body.lay-aside .entry-logo[data-load] .logo-face {
  opacity: 0;
}
body.lay-aside .entry-logo[data-load][data-shown] .logo-face {
  opacity: 1;
  animation: logoDrop 0.9s var(--ease) both;
}
@media (prefers-reduced-motion: reduce) {
  body.lay-aside .entry-logo[data-load] .logo-face {
    opacity: 1;
    animation: none;
  }
}
@media (max-width: 960px) {
  body.lay-aside .entry-info > .entry-logo {
    order: 0;
    justify-self: auto;
    margin: 0 auto var(--space-12);
  }
}
body.lay-aside .gallery {
  padding-block: 0;
}

/* ================= Layout: cabecera de datos (ficha6) ================= */
body.lay-head .entry {
  padding-block: 0;
}
body.lay-head .stats {
  padding-block: var(--space-24) 0;
}
body.lay-head .entry-description {
  grid-column: 1 / span 5;
  grid-row: 1;
}
@media (max-width: 1100px) {
  body.lay-head .entry-description {
    grid-column: 1 / span 5;
    grid-row: 1;
  }
}
@media (max-width: 960px) {
  body.lay-head .entry-info {
    row-gap: var(--space-16);
  }
  body.lay-head .entry-description {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}
body.lay-head .entry-info {
  align-items: start;
  margin-top: 0;
}
@media (max-width: 960px) {
  body.lay-head :where(.page, .club) h1 {
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
  }
}
body.lay-head .entry-hero1 {
  align-items: start;
  width: auto;
  max-width: none;
  margin-block: 0;
  padding-block: var(--space-16);
}
body.lay-head .team-avatar::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
@media (max-width: 767px) {
  body.lay-head :where(.page, .club) h1 {
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
  }
}
@media (max-width: 960px) {
  body.lay-head .entry {
    display: flex;
    flex-direction: column;
  }
  body.lay-head .entry-hero1 {
    order: 1;
  }
  body.lay-head .gallery {
    order: 2;
  }
  body.lay-head .stats {
    order: 3;
  }
  body.lay-head .entry-description {
    order: 4;
  }
}
body.lay-head .grid-8.entry-hero1 {
  /* Aire bajo el titular: dos escalones por encima del resto */
  row-gap: var(--space-20);
}
body.lay-head .entry-hero1 {
  padding-block: var(--space-24);
}
body.lay-head .entry-hero1 {
  font-family: var(--sans);
  font-feature-settings: normal;
}
body.lay-head .entry-hero1 .head-metas {
  font-family: var(--sans);
  letter-spacing: normal;
  font-feature-settings: normal;
}
body.lay-head .head-main {
  grid-column: 1 / span 4;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
}
body.lay-head .head-title {
  /* Sobre la escala h1 de base.css: tracking mas cerrado que el de la escala */
  letter-spacing: -0.035em;
  text-wrap: balance;
}
body.lay-head .head-summary {
  grid-column: 5 / span 4;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  font-family: var(--serif);
  font-feature-settings: var(--serif-feat);
}
body.lay-head .head-claim {
  margin: 0;
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
body.lay-head .head-notes {
  display: flex;
  flex-direction: column;
}
body.lay-head .head-note + .head-note {
  margin-top: var(--space-6);
}
body.lay-head .head-metas {
  margin: var(--space-20) 0 0;
}
@media (min-width: 961px) {
  body.lay-head .entry-hero1 .head-main {
    align-self: stretch;
  }
  body.lay-head .head-metas {
    margin: 0;
    padding-top: var(--space-20);
    margin-top: auto;
  }
}
:is(body.lay-head, body.lay-article) .head-row {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-4);
  padding-block: calc(var(--space-3) - 1px) var(--space-3);
  /* mismo alto que .entry-links li */
  border-top: 1px solid var(--borders);
}
:is(body.lay-head, body.lay-article) .head-row dt {
  font-family: var(--mono);
  letter-spacing: 0.1em;
  font-feature-settings: normal;
  font-size: var(--text-xs);
  line-height: var(--leading-sm);
  text-transform: uppercase;
  font-weight: 700;
}
:is(body.lay-head, body.lay-article) .head-row dd {
  margin: 0;
  font-family: var(--mono);
  letter-spacing: normal;
  font-feature-settings: normal;
  font-size: var(--text-xs);
  line-height: var(--leading-sm);
  font-weight: 500;
  color: var(--ink-light);
}
body.lay-head .head-note {
  margin: var(--space-8) 0 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: 400;
  text-wrap: pretty;
}
body.lay-head .head-note p {
  margin: 0;
}
body.lay-head .head-note p + p {
  margin-top: var(--space-6);
}
@media (max-width: 960px) {
  body.lay-head .grid-8.entry-hero1 {
    row-gap: 0;
  }
  body.lay-head .head-main {
    display: contents;
  }
  body.lay-head .head-title {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
  }
  body.lay-head .head-summary {
    display: contents;
  }
  body.lay-head .head-claim {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: var(--space-2);
    font-size: var(--text-h4);
    line-height: var(--leading-h4);
  }
  body.lay-head .head-metas {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: var(--space-12);
  }
  body.lay-head .head-notes {
    grid-column: 1 / -1;
    grid-row: 4;
  }
}
@media (max-width: 767px) {
  body.lay-head .head-title {
    letter-spacing: -0.03em;
  }
  :is(body.lay-head, body.lay-article) .head-row {
    grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr);
  }
}
body.lay-head .gallery {
  padding-block: 0;
}
body.lay-head .entry-description .entry-sec:first-child .entry-headline--sm {
  margin-top: 0;
}
@media (min-width: 961px) {
  body.lay-head .entry-aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }
}
body.lay-head .logo-link:hover,
body.lay-head .logo-link:focus-visible {
  width: calc(var(--logo-h) * 5.405);
}
body.lay-head .entry-aside .entry-buy {
  gap: var(--space-6);
  margin-top: 0;
}
body.lay-head .entry-pays {
  gap: var(--space-6);
}
@media (max-width: 960px) {
  body.lay-head .site-header .logo-link {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    margin-inline: 0;
  }
  body.lay-head .site-header .site-header-nav {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
  }
  body.lay-head .site-header .description-share {
    display: flex;
  }
}

/* Estructura compartida que vivia repetida en las seis hojas de color */
.entry-hero1 { color: inherit; }
/* La negrita del cuerpo sube a la tinta plena: el parrafo puede ir en un peldano
   mas suave, pero lo que destaca no */
.entry-description strong { color: var(--ink); }

.team-avatar::after { background: var(--ink); color: var(--dark); }

/* ==========================================================================
   Cabeceras de apertura. Una ficha elige una, y solo cambia el hero:
   - .entry-hero1     clasica: autoria, titulo y metas (ficha1-3, 6-7)
   - .entry-hero2     a borde de ventana, plano o en tarjeta (ficha4-5, en
                      entry-hero.css)
   Ojo: .hero2-body (sin numero) NO es de esta serie: es el bloque de contenido
   que va dentro de .entry-hero2, en entry-hero.css.
   ========================================================================== */

/* ---- Galeria apilada (lay-article): sin carrusel, cada imagen abre el visor ---- */
.gallery-stack {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-16);
}
.gallery-stack .stack-shot {
  display: block;
  width: 100%;
  padding: 0;
  border: 8px solid var(--white);
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
}
.gallery-stack .stack-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}