/* La ficha de una obra: lo que se encuentra al bajar de la tapa.

   Marco oscuro, como el resto de la casa — la ficha no es papel, es el cromo de la Library; el
   papel se reserva para el texto. Ninguna línea llega sólida de borde a borde: los filos se
   desvanecen en los extremos. Sin esquinas redondeadas y sin sombras difusas. */

/* «ficha-pagina», no «ficha»: El Archivo ya usa .ficha para sus tarjetas y sus reglas se colaban
   aquí dentro —de ahí venía un overflow:hidden que recortaba catorce píxeles en el móvil. */
.ficha-pagina {
  scroll-margin-top: var(--barra);       /* el botón «la historia» baja aquí: que no quede bajo la barra */
  padding: clamp(2rem, 6vw, 4.5rem) 0 clamp(3rem, 9vw, 6rem);
  background: linear-gradient(180deg, var(--pitch), var(--obsidian) 70%);
}

.ficha-obra {
  width: min(var(--medida), calc(100% - 2.6rem));
  margin-inline: auto;
  display: grid;
  /* minmax(0,1fr) y no «auto»: con auto, la fila de tapas de «del mismo libro» impone su
     anchura mínima —ocho tapas puestas en fila— y estira la columna hasta novecientos píxeles */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.2rem);
}

.ficha-obra > .vara {
  width: min(320px, 70%);
  justify-self: center;
  opacity: .5;
}

.f-bloque > h3 {
  font-family: var(--f-rotulo);
  font-size: clamp(.78rem, 2.6vw, .9rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .9rem;
}

.f-bloque > h3::after {                 /* el filo se va: nunca de borde a borde */
  content: "";
  display: block;
  height: 1px;
  margin-top: .7rem;
  background: linear-gradient(90deg, transparent, var(--edge) 12%, var(--gold-idle) 50%, var(--edge) 88%, transparent);
  opacity: .7;
}

.f-bloque p { margin: 0 0 .7rem; color: var(--ivory); line-height: 1.68; }
.f-bloque p:last-child { margin-bottom: 0; }
.f-nota { color: var(--ivory-dim); font-size: .9em; }
.f-sello {
  font-family: var(--f-rotulo);
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-idle);
}
.f-dice { font-family: var(--f-susurro); font-size: clamp(1.1rem, 3.4vw, 1.32rem); color: var(--ivory); }

/* lo que se tarda, en cifras */
.f-cifras { display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 5vw, 2.6rem); margin-bottom: 1rem; }
.f-cifras p { margin: 0; display: grid; gap: .1rem; }
.f-cifras b {
  font-family: var(--f-rotulo); font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 400; color: var(--gold-hi); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.f-cifras span {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ivory-dim);
}
.f-voz { font-size: .92rem; color: var(--ivory-dim); }
.escalon {
  font-family: var(--f-rotulo); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold-idle); padding: .2em .6em; margin-right: .5em;
  white-space: nowrap;
}
.escalon[data-n="1"] { color: var(--locked); border-color: var(--edge); }
.escalon[data-n="4"], .escalon[data-n="5"] { color: var(--gold-hi); border-color: var(--gold); }

/* la misma historia, otras voces: la pieza que vale */
.voces { display: grid; gap: 1px; background: var(--edge); border-block: 1px solid var(--edge); }
.voz-version { background: var(--pitch); padding: clamp(1.1rem, 4vw, 1.6rem); }
.voz-version.aqui { background: color-mix(in oklab, var(--ash) 80%, var(--gold-idle)); }
.voz-version .cuando {
  font-family: var(--f-rotulo); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-idle); margin-bottom: .45rem;
}
.voz-version .lengua { color: var(--ivory-dim); letter-spacing: .1em; }
.voz-version h4 {
  font-family: var(--f-susurro); font-weight: 500; font-style: italic;
  font-size: clamp(1.14rem, 3.6vw, 1.36rem); color: var(--ivory); margin: 0 0 .15rem;
}
.voz-version .quien { font-size: .86rem; color: var(--ivory-dim); margin-bottom: .7rem; }
.voz-version .cambia { color: var(--ivory); }
.voz-version .fuente { font-size: .8rem; color: var(--locked); }
.voz-version .estas {
  font-family: var(--f-rotulo); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-hi);
}

/* del mismo libro */
.fila-hermanas {
  display: flex; gap: clamp(.8rem, 3vw, 1.2rem);
  min-width: 0;                         /* si no, la fila entera cuenta como anchura mínima */
  overflow-x: auto; padding-bottom: .8rem; margin-bottom: 1rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.hermana { flex: 0 0 clamp(96px, 26vw, 122px); display: grid; gap: .45rem; text-decoration: none; scroll-snap-align: start; }
.tapita { display: block; border: 1px solid var(--edge); background: var(--obsidian); }
.tapita svg { display: block; width: 100%; height: auto; }
.tapita.grande { flex: 0 0 clamp(120px, 34vw, 164px); }
.hermana .nombre {
  font-family: var(--f-texto); font-size: .86rem; line-height: 1.3; color: var(--ivory);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hermana .rato { font-size: .7rem; letter-spacing: .1em; color: var(--ivory-dim); }
.hermana:hover .nombre, .hermana:focus-visible .nombre { color: var(--gold-hi); }

/* quien lo escribió */
.retrato-ficha { display: flex; gap: clamp(1rem, 4vw, 1.6rem); align-items: flex-start; }
.retrato-ficha img {
  flex: 0 0 clamp(78px, 22vw, 108px); width: clamp(78px, 22vw, 108px);
  aspect-ratio: 1 / 1.18; object-fit: cover; object-position: 50% 22%;
  border: 1px solid var(--edge); filter: grayscale(.4) contrast(1.06);
}
.retrato-ficha .nombre { font-family: var(--f-rotulo); font-size: clamp(1rem, 3.2vw, 1.14rem); color: var(--ivory); }
.retrato-ficha .vida { font-size: .86rem; color: var(--ivory-dim); }

/* temas */
.f-temas .temas { display: flex; flex-wrap: wrap; gap: .5rem; }
.f-temas .tema {
  font-family: var(--f-rotulo); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ivory-dim); border: 1px solid var(--edge); padding: .34em .74em; text-decoration: none;
}
.f-temas .tema:hover, .f-temas .tema:focus-visible { color: var(--gold-hi); border-color: var(--gold-idle); }

/* de dónde sale */
.sello-libre {
  font-family: var(--f-rotulo); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--pitch); background: var(--gold-idle); padding: .22em .6em; margin-right: .5em;
}
.f-libre { font-size: .88rem; color: var(--ivory-dim); }

/* la tapa */
.tapa-ficha { display: flex; gap: clamp(1rem, 4vw, 1.6rem); align-items: flex-start; }

@media (max-width: 460px) {
  .retrato-ficha, .tapa-ficha { flex-direction: column; }
  .tapita.grande { flex: 0 0 auto; width: clamp(130px, 46vw, 180px); }
}

/* el dato bajo la firma, en la tapa de un clásico */
.obra .dato-tapa {
  font-family: var(--f-rotulo); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ivory-dim); margin: .2rem 0 0;
}

/* la tapa compuesta dentro del marco de un estante. El SVG es 300×400, la misma proporción que
   .tapa, pero sin esto se queda a su tamaño propio y el marco lo recorta. */
/* height:auto y no 100%: .tapa da su altura con aspect-ratio y contra eso el 100% de un hijo no
   resuelve —el SVG se estiraba a la altura de la ventana—. La tapa es 300×400 y el marco 3/4,
   así que con la anchura basta: la altura sale sola y encaja al píxel. */
.tapa > .tapa-svg { width: 100%; height: auto; display: block; }
.libro.con-tapa:hover .tapa > .tapa-svg { filter: brightness(1.08); }

/* la tapa compuesta, en el escaparate de la obra */
.pieza-tapa { display: grid; place-items: center; }
.pieza-tapa .tapa-svg {
  width: min(300px, 62vw); height: auto; display: block;
  border: 1px solid var(--edge);
}

@media (prefers-reduced-motion: no-preference) {
  .pieza-tapa .tapa-svg { transition: transform .6s var(--curva); }
  .pieza-tapa:hover .tapa-svg { transform: translateY(-4px); }
}

/* los cuentos de un estante, uno a uno: renglones, no tapas. Doscientas tapas en una pantalla
   no se miran. Para verlas en rejilla está El Archivo. */
.m-sueltas-grupo + .m-sueltas-grupo { margin-top: clamp(1.8rem, 5vw, 2.8rem); }
.m-sueltas-grupo h3 {
  font-family: var(--f-rotulo); font-weight: 400;
  font-size: clamp(.9rem, 3vw, 1.05rem); letter-spacing: .1em;
  color: var(--ivory); margin: 0 0 .9rem;
}
.m-sueltas-grupo h3 a { color: inherit; text-decoration: none; }
.m-sueltas-grupo h3 a:hover, .m-sueltas-grupo h3 a:focus-visible { color: var(--gold-hi); }
.m-sueltas-grupo h3 span {
  font-size: .7rem; letter-spacing: .14em; color: var(--gold-idle); margin-left: .5em;
  font-variant-numeric: tabular-nums;
}
.m-sueltas-grupo ul {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: clamp(1.4rem, 4vw, 2.4rem);
}
.m-sueltas-grupo li { break-inside: avoid; }
.m-sueltas-grupo li a {
  display: flex; gap: .8rem; align-items: baseline; justify-content: space-between;
  padding: .42rem 0; text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--edge) 70%, transparent);
}
.m-sueltas-grupo .n { font-family: var(--f-texto); font-size: .94rem; color: var(--ivory); line-height: 1.35; }
.m-sueltas-grupo .m {
  flex: 0 0 auto; font-size: .7rem; letter-spacing: .1em; color: var(--ivory-dim);
  font-variant-numeric: tabular-nums;
}
.m-sueltas-grupo li a:hover .n, .m-sueltas-grupo li a:focus-visible .n { color: var(--gold-hi); }

@media (max-width: 640px) { .m-sueltas-grupo ul { columns: 1; } }

/* ═══ apagar el sonido: por canales y del todo ═══
   El deslizador se queda; esto es el interruptor que faltaba. Apagado, el canal entero se atenúa
   —el rótulo, el icono y la barra— para que de un vistazo se vea qué suena y qué no. */

.silencio {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  width: 100%; margin-bottom: .4rem; padding: .72rem 1rem;
  background: none; border: 1px solid var(--edge); color: var(--ivory-dim);
  font-family: var(--f-rotulo); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  cursor: pointer;
}
.silencio svg { width: 15px; height: 15px; flex: none; }
.silencio:hover, .silencio:focus-visible { color: var(--gold-hi); border-color: var(--gold-idle); }
.silencio.puesto { color: var(--gold-hi); border-color: var(--gold); }
.silencio.puesto svg { opacity: .45; }

/* la raya del icono cuando está callado: se dibuja encima, no se cambia el icono */
.silencio.puesto, .canal.callado .apagar { position: relative; }
.silencio.puesto svg, .canal.callado .apagar svg { opacity: .4; }
.silencio.puesto::after, .canal.callado .apagar::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 19px; height: 1px;
  background: currentColor; transform: translate(-50%, -50%) rotate(-38deg); pointer-events: none;
}
.silencio.puesto::after { left: 1rem; width: 17px; transform: translateY(-50%) rotate(-38deg); }

.ajuste.canal { gap: 10px; }
.apagar {
  flex: none; width: 30px; height: 30px; margin-left: auto; padding: 0;
  display: grid; place-items: center;
  background: none; border: 1px solid transparent; color: var(--gold); cursor: pointer;
}
.apagar svg { width: 15px; height: 15px; }
.apagar:hover, .apagar:focus-visible { border-color: var(--edge); color: var(--gold-hi); }
.canal.callado .apagar { color: var(--locked); }
.canal.callado > span { color: var(--locked); }
.canal.callado .nivel { opacity: .4; }

/* el estante de un clásico: su retrato hace de lienzo, apagado detrás del velo */
.portada-clasico .lienzo.retrato { object-fit: cover; object-position: 50% 24%; filter: grayscale(.55) contrast(1.05); }