/*
 * Sitio público de Tu Letra Online.
 *
 * El color, la letra, el espacio y el movimiento salen de `base/fichas.css`.
 * Aquí solo está la compostura: cómo se coloca todo en esta superficie.
 *
 * El tono que se busca es el de una editorial, no el de un producto: escala
 * tipográfica con saltos grandes, filetes finos en vez de recuadros, mucho
 * blanco, y los datos del libro tratados como un colofón. La autoridad en una
 * página editorial viene de la contención, no de la decoración.
 */

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--interfaz);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 24px;
}

.saltar { position: absolute; left: -9999px; background: var(--tinta); color: var(--papel); padding: .75rem 1.25rem; z-index: 100; }
.saltar:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }

/* La etiqueta pequeña que ordena la página: género, sección, dato. */
.rotulo {
  font-family: var(--interfaz);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ============================ Cabecera ============================ */
/*
 * Pegada arriba y sólida. Lo de «transparente sobre el hero» que pide el
 * briefing es un añadido que pone `cabecera.js`; el estado escrito aquí es el
 * que se ve si el guion no llega, y es legible sobre cualquier fondo.
 */
:root {
  /* Lo que mide de alto la cabecera. Está aquí y no repetido en cada regla
     porque el hero tiene que subirse por debajo de ella exactamente lo mismo
     que ella ocupa: con el número en dos sitios, cambiar el relleno de la
     cabecera dejaría el hero descuadrado y nadie sabría por qué.
     Son los 88 px que fija el briefing, y conviene que sobre antes que falte:
     de sobrar, el hero se mete un poco más debajo y no se nota; de faltar,
     queda una raya de fondo claro cruzando lo alto de la página. */
  --alto-cabecera: 5.5rem;
}
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--papel);
  border-bottom: 1px solid var(--tinta);
  transition: background var(--paso-medio) var(--curva),
              border-color var(--paso-medio) var(--curva);
}
.cabecera__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.6rem 1.3rem;
  flex-wrap: wrap;
}

/* Sobre el hero: sin fondo y con la letra clara, que es lo que el hero pide
   debajo. Solo se activa cuando el guion lo dice. */
.cabecera--transparente {
  background: transparent;
  border-bottom-color: transparent;
  color: var(--papel);
}
/* Sobre una fotografía, el gris azulado de siempre no llega: medido, se
   quedaba en 2.89. Sobre imagen se usa el papel, que es casi blanco. */
.cabecera--transparente .marca__pie,
.cabecera--transparente .navegacion a { color: var(--papel); }
.cabecera--transparente .navegacion a:hover,
.cabecera--transparente .navegacion a[aria-current="page"] {
  color: var(--papel);
  border-bottom-color: var(--conexion);
}
.marca {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -.005em;
  text-decoration: none;
  line-height: 1;
}
.marca__pie {
  display: block;
  font-family: var(--interfaz);
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-top: .45rem;
}
/* `wrap` y `nowrap` hacen aquí cosas contrarias, y las dos hacen falta.
 *
 * La fila puede partirse; cada enlace, no. Sin esto, en un teléfono
 * «Publica tu obra» se rompía en tres líneas —PUBLICA / TU / OBRA— apiladas
 * dentro de la misma fila, que es la peor de las dos maneras de no caber:
 * ocupa el triple y se lee como tres cosas distintas. Ahora el enlace se
 * mantiene entero y, si no cabe, baja completo a la línea siguiente. */
.navegacion { display: flex; flex-wrap: wrap; gap: .6rem 2rem; }
.navegacion a {
  text-decoration: none;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-bottom: .2rem;
  border-bottom: 1px solid transparent;
  color: var(--tinta-suave);
  white-space: nowrap;
}
.navegacion a:hover { color: var(--tinta); border-bottom-color: var(--azul); }
.navegacion a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--azul); }

/* ---- El selector de idioma ----
 *
 * Son botones de un formulario de verdad —así funciona sin JavaScript, con el
 * teclado y con un lector de pantalla— pero no deben *parecer* botones: si
 * pesaran como el de «Publica tu obra», competirían con la acción principal de
 * la cabecera. Se les quita todo y se dejan como texto pulsable.
 *
 * El activo va en tinta llena y con su raya; los otros, atenuados. Distinguirlo
 * solo por color dejaría fuera a quien no distingue los dos tonos, y por eso el
 * peso de la letra también cambia. */
.idiomas { margin: 0; }
.idiomas__lista {
  display: flex;
  /* Tres idiomas caben de sobra en un ordenador y por poco en un teléfono:
     en 375 px «Portugués» se salía por el borde derecho y quedaba cortado a
     media palabra. Partiendo la fila baja entero. */
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.idiomas__opcion {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0 0 .2rem;
  font: inherit;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  cursor: pointer;
}
.idiomas__opcion:hover { color: var(--tinta); border-bottom-color: var(--azul); }
.idiomas__opcion--activo {
  color: var(--tinta);
  font-weight: 600;
  border-bottom-color: var(--azul);
}
.idiomas__opcion:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
}

/* Sobre el hero de la portada la cabecera es transparente y el fondo es una
 * foto oscura: ahí la tinta normal no se lee. */
.cabecera--transparente .idiomas__opcion { color: var(--sobre-noche); }
.cabecera--transparente .idiomas__opcion:hover,
.cabecera--transparente .idiomas__opcion--activo {
  color: var(--papel);
  border-bottom-color: var(--conexion);
}

/* ======================= Portada · 02 Hero ======================= */
/*
 * La cabecera está pegada arriba y encima de esto, así que el hero sube hasta
 * el borde de la página: por eso el margen negativo, que compensa el alto de la
 * cabecera y hace que la imagen empiece de verdad en el pixel cero.
 *
 * El fondo tiene dos capas. Debajo, un degradado de azul noche que existe
 * siempre. Encima, la fotografía, **solo si el servidor ha comprobado que está**
 * —la clase `hero--con-imagen`—. Mientras no la haya, lo que se ve es el
 * degradado, que es una portada sobria y no un hueco roto.
 */
.hero {
  position: relative;
  margin-top: calc(var(--alto-cabecera) * -1);
  padding-top: var(--alto-cabecera);
  min-height: 82vh;
  display: flex;
  align-items: center;
  /* El color va aparte del degradado a propósito: en pantallas estrechas se
     quita la fotografía y hace falta que quede un fondo sólido debajo. */
  background-color: var(--noche);
  background-image: linear-gradient(150deg, var(--noche) 0%, #0d2f63 55%, var(--azul-hondo) 100%);
  color: var(--papel);
}
/*
 * La dirección de la fotografía no se escribe aquí: la pone la plantilla en
 * `--cabecera`, con `{% static %}`. Así el nombre del fichero puede llevar su
 * huella —`cabecera.a1b2c3.jpg`— y esta hoja no tiene que saberlo.
 */
.hero--con-imagen {
  background-image:
    /*
     * Un velo propio para la cabecera, arriba del todo. La navegación cae
     * sobre el cielo y los pájaros, que cambian de claro a oscuro cada pocos
     * píxeles; medido, «Autores» se quedaba en 2.89 de contraste. Este velo la
     * asienta sin tocar el resto de la imagen.
     */
    linear-gradient(to bottom, rgba(7, 27, 58, .80) 0, rgba(7, 27, 58, .45) 90px, rgba(7, 27, 58, 0) 170px),
    /*
     * Y el velo en diagonal, para el texto.
     *
     * La regla que lo gobierna: **fuerte donde la fotografía está vacía, flojo
     * donde está lo que se mira.** El libro y las golondrinas viven en el
     * tercio derecho; el titular y la bajada, en los dos tercios izquierdos,
     * donde la imagen es casi azul liso y oscurecerla no le quita nada.
     *
     * Los números salen de medir, no de tantear: con el velo anterior el
     * titular se quedaba en 1.63 y la bajada en 1.25 —el mínimo exigible son
     * 4.5— porque el resplandor del libro alcanzaba el final del texto.
     */
    linear-gradient(100deg,
      rgba(7, 27, 58, .90) 0%,
      rgba(7, 27, 58, .86) 42%,
      rgba(7, 27, 58, .64) 64%,
      rgba(7, 27, 58, .16) 82%,
      rgba(7, 27, 58, .03) 100%),
    var(--cabecera);
  background-size: cover;
  background-repeat: no-repeat;
  /*
   * Anclada abajo. La imagen es de proporción 2:1 y el hero suele ser más
   * ancho que alto, así que al recortar se pierde altura: centrada, el corte
   * se comía el libro, que es el motivo de la fotografía. Por abajo se
   * sacrifica cielo, que sobra.
   */
  background-position: right bottom;
}
.hero__caja { max-width: 100%; }
.hero__titulo {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0;
  max-width: 15ch;
}
.hero__titulo em { font-style: italic; color: var(--cielo); }
.hero__bajada {
  margin: 1.75rem 0 0;
  /*
   * El briefing da 620 px de contenido como tope. Se queda en 544 porque a
   * 620 la última línea llegaba hasta el resplandor del libro y el contraste
   * caía a 2.46, medido. De paso la línea se lee mejor más corta.
   */
  max-width: 34rem;
  font-size: clamp(1.02rem, 2.2vw, 1.18rem);
  line-height: 1.65;
  color: var(--cielo);
}
.hero__acciones { display: flex; gap: .85rem; flex-wrap: wrap; margin-top: 2.5rem; }

/* ================== Portada · 03 Prueba de confianza ================== */
.banda { background: var(--cielo); border-bottom: 1px solid var(--borde); }
.banda__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 4rem;
  list-style: none;
  margin: 0;
  padding-block: 2.25rem;
}
.banda__cifra {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 2.9rem);
  font-weight: 500;
  line-height: .95;
  color: var(--noche);
  font-variant-numeric: tabular-nums lining-nums;
}
.banda .rotulo { display: block; margin-top: .55rem; }

/* ==================== Portada · 04 Editorial viva ==================== */
.viva__reja { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(2rem, 6vw, 4.5rem); }
.viva__guia {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.5rem, 3.6vw, 2.15rem);
  line-height: 1.24;
  color: var(--noche);
  margin: .85rem 0 0;
  max-width: 18ch;
}
.viva__texto { max-width: var(--lectura); font-size: 1.04rem; line-height: 1.75; }
.viva__texto p { margin: 0 0 1.15rem; }
.viva__texto p:last-child { margin-bottom: 0; }

/* ===================== Portada · 05 Las puertas ===================== */
/*
 * Tres, desde que se añadió la de los clubes de lectura. El briefing hablaba de
 * dos, y la tercera entró porque faltaba la gente que ya lee y lo hace
 * acompañada.
 *
 * Tres o una, nunca dos. Con tres tarjetas en dos columnas queda una huérfana
 * debajo, y un bloque desemparejado en la portada se nota: ya pasó con los
 * libros destacados y hubo que rehacerlo. Por eso se salta de tres a una de
 * golpe, en vez de pasar por dos.
 */
.puertas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  list-style: none;
  padding: 0;
  margin: 0;
}
.puerta {
  background: var(--papel-hondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.puerta--alterna { background: var(--blanco); }
.puerta__titulo {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  margin: 0;
  color: var(--noche);
}
.puerta__texto { margin: .9rem 0 1.75rem; color: var(--tinta-suave); line-height: 1.65; flex: 1; }

/* ============= Portada · 07 Acompañamiento editorial ============= */
.seccion--alterna { background: var(--papel-hondo); }
.etapas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
  counter-reset: none;
}
.etapa { border-top: 2px solid var(--noche); padding-top: 1.1rem; }
.etapa__numero {
  font-family: var(--display);
  font-size: .95rem;
  letter-spacing: .1em;
  color: var(--azul);
  font-variant-numeric: tabular-nums lining-nums;
}
.etapa__titulo {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.35rem;
  margin: .35rem 0 .55rem;
  color: var(--noche);
}
.etapa p { margin: 0; color: var(--tinta-suave); font-size: .95rem; line-height: 1.6; }

/* ==================== Portada · 08 Las voces ==================== */
/*
 * Seis columnas exactas y no las que quepan. Con `auto-fill` entraban cinco y
 * el sexto autor se quedaba solo en una segunda fila, que parece un descuido
 * más que una selección. Como el número de voces está acotado a seis, la
 * retícula se puede fijar: seis, tres y dos.
 */
.voces {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.voz a { text-decoration: none; display: block; text-align: center; }
/*
 * El retrato, mientras no haya fotografía: las iniciales sobre azul noche. Es
 * cuadrado porque las fotos que se pedirán también lo serán, y así el día que
 * lleguen ocupan el mismo hueco y la retícula no se mueve.
 */
.voz__retrato {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  font-family: var(--display);
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  letter-spacing: .04em;
  transition: transform var(--paso-medio) var(--curva);
}
.voz a:hover .voz__retrato { transform: translateY(-3px); }
.voz__nombre {
  display: block;
  margin-top: .9rem;
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--tinta);
  line-height: 1.25;
}
.voz a:hover .voz__nombre { color: var(--azul); }
.voz__obra { display: block; margin-top: .25rem; font-size: .82rem; color: var(--tinta-suave); }

/* ====================== Portada · 11 Cierre ====================== */
.cierre { background: var(--noche); color: var(--papel); padding-block: clamp(3.5rem, 9vw, 6rem); }
.cierre__caja { text-align: center; }
.cierre__frase {
  font-family: var(--display);
  font-size: clamp(1.9rem, 5.5vw, 3.1rem);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 auto;
  max-width: 20ch;
}
.cierre__nota {
  margin: 1.25rem auto 2.25rem;
  max-width: 46ch;
  color: var(--sobre-noche);
  line-height: 1.65;
}

/*
 * Por debajo de unos mil píxeles, la fotografía deja de ir detrás del texto y
 * pasa a ser una banda entera encima.
 *
 * El motivo, medido: la imagen es 2:1 y el hero de un móvil es mucho más alto
 * que ancho, así que para cubrirlo hay que recortarla por los lados. Y lo que
 * se recorta primero es justo el lado vacío y oscuro —el que sostenía el
 * texto—, dejando el libro iluminado detrás de la bajada. A 768 px el
 * contraste caía a 1.48 y no había velo que lo arreglara sin apagar la
 * fotografía entera.
 *
 * Así se gana por los dos lados: el texto queda sobre azul sólido y se lee
 * siempre, y la imagen se ve **completa y sin recortar**, que en un teléfono
 * es más de lo que se veía antes.
 */
@media (max-width: 62rem) {
  .hero--con-imagen {
    display: block;
    min-height: 0;
    padding-top: 0;
    background-image: none;   /* queda el color sólido de `.hero` */
  }
  .hero--con-imagen::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 1774 / 887;   /* la proporción real del fichero */
    /* El velo de la cabecera viaja aquí: la banda sube por debajo de ella y,
       sin esto, la navegación quedaría sobre el cielo estrellado sin nada que
       la asiente.

       Llega hasta 260 px y no hasta 170 porque en un teléfono la cabecera es
       más alta que en un ordenador: la marca, los enlaces, «Publica tu obra»
       en su propia línea y la fila de idiomas. Con el velo corto, «Português»
       —el último y el más largo— caía justo donde se acaba y encima de la
       parte más brillante de la foto, y no se leía. No se salía de la
       pantalla: sencillamente desaparecía sobre el fondo, que cuesta más de
       ver y es igual de inservible. */
    background-image:
      linear-gradient(to bottom, rgba(7, 27, 58, .85) 0, rgba(7, 27, 58, .62) 140px, rgba(7, 27, 58, .35) 200px, rgba(7, 27, 58, 0) 260px),
      var(--cabecera);
    background-size: cover;
    background-position: center;
  }
  .hero--con-imagen .hero__caja { padding-block: var(--e5) var(--e6); }
  .hero--con-imagen .hero__bajada { max-width: none; }
}

@media (max-width: 58rem) {
  /* Tres columnas estrechas estrangulan el texto antes de que la pantalla
   * parezca pequeña. Esta pasa a una columna antes que las demás. */
  .puertas { grid-template-columns: 1fr; }
}
@media (max-width: 52rem) {
  .viva__reja { grid-template-columns: 1fr; }
  .voces { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 30rem) {
  .voces { grid-template-columns: repeat(2, 1fr); }
  /*
   * En el teléfono la navegación no cabe al lado de la marca y baja a su
   * propia fila. Se aprieta para que esa segunda fila no se coma el hero.
   * No se colapsa en un menú desplegable: serían tres enlaces escondidos
   * detrás de un botón que hay que aprender a abrir.
   */
  .cabecera__fila { padding-block: 1rem .9rem; gap: .75rem; }
  .navegacion { gap: 1.1rem; width: 100%; }
  .navegacion a { font-size: .74rem; letter-spacing: .07em; }
}
@media (max-width: 47.99rem) {
  /*
   * En el móvil y en la tableta pequeña los destacados van en una tira que se arrastra con el dedo, que
   * es el «carrusel» del briefing. Sin guion y sin botones: lo hace el propio
   * navegador, se recorre con el teclado y no esconde nada que no se pueda
   * alcanzar desplazando.
   */
  .libros--tira {
    grid-auto-flow: column;
    grid-auto-columns: 62vw;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
    /* Que la tira llegue a los bordes de la pantalla aunque el contenedor
       tenga márgenes: si no, el primer libro parece cortado. */
    margin-inline: calc(var(--e2) * -1);
    padding-inline: var(--e2);
  }
  .libros--tira > * { scroll-snap-align: start; }
  .hero { min-height: 86svh; }
}

/* ============================ Secciones ============================ */
.seccion { padding-block: clamp(3rem, 8vw, 5rem); }
.seccion + .seccion { border-top: 1px solid var(--borde); }

/* El canal de Actualidad, al final de la lista. Separado de las entradas y con
   su explicación al lado en letra pequeña: un botón suelto que dice «RSS» no
   le dice nada a quien no sepa qué es eso. */
.canal {
  margin: 3rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--borde-tenue);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.canal__nota { color: var(--tinta-suave); font-size: .9rem; }

.seccion__cabeza {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  margin-bottom: 2.75rem;
}
.seccion__titulo {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: .5rem 0 0;
}
.seccion__nota { margin: .5rem 0 0; color: var(--tinta-suave); max-width: 44ch; }

.enlace-seco {
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinta);
  border-bottom: 1px solid var(--azul);
  padding-bottom: .15rem;
  white-space: nowrap;
}
.enlace-seco:hover { border-bottom-width: 2px; }

/* ============================ Libros ============================ */
.libros {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(13.5rem, 100%), 1fr));
  gap: 3rem 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.libro a { text-decoration: none; display: block; }

/* La tira de la portada lleva ocho libros y **siempre** va en dos filas de
   cuatro. Con `auto-fill` el número de columnas lo decidía el ancho de la
   pantalla, y ocho no se reparte bien en casi ninguno: medido en diez anchuras,
   solo tres salían cuadradas. De 1280 px para arriba —que es la mayoría de los
   monitores— quedaba una fila de cinco y otra de tres.

   Cuatro es la única cuenta que sale: ocho entre cuatro son dos filas justas, y
   la cubierta crece hasta 284 px en vez de quedarse en 216. Por debajo de 48rem
   manda la tira que se arrastra, así que aquí no hace falta un mínimo. */
@media (min-width: 48rem) {
  .libros--tira { grid-template-columns: repeat(4, 1fr); }
}

/*
 * Cuando hay portada de verdad se enseña. Cuando no —y en una editorial siempre
 * hay títulos antiguos sin material— el hueco se compone como una cubierta:
 * título en Playfair sobre marino, con el filete coral de la casa. En vez de un
 * cuadro gris que se lee como «falta algo», parece una colección.
 */
.cubierta {
  aspect-ratio: 2 / 3;
  background: var(--noche);
  color: var(--papel);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem 1.25rem 1.25rem;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 1px 2px rgba(7,27,58,.12);
}
.libro a:hover .cubierta { transform: translateY(-3px); box-shadow: 0 10px 28px -12px rgba(7,27,58,.45); }
/* El lomo. Un filete vertical que sugiere el canto del libro. */
.cubierta::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 5px;
  background: var(--azul);
}
.cubierta__sello {
  font-size: .56rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cielo);
}
.cubierta__titulo {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.22rem;
  line-height: 1.16;
  margin: 0;
}
.cubierta__autor {
  font-size: .78rem;
  color: var(--cielo);
  margin: .5rem 0 0;
  font-style: italic;
}
/*
 * La cubierta real. `contain` y no `cover`: las proporciones de un libro las
 * decide su diseñador, y recortar una portada para que encaje en 2:3 se come el
 * título o la firma. Cabe entera sobre el marino, que hace de passe-partout.
 */
.cubierta--foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  background: var(--noche);
  padding: 0;
}
.cubierta--foto::before { content: none; }
.libro a:hover .cubierta--foto { transform: translateY(-3px); box-shadow: 0 10px 28px -12px rgba(7,27,58,.45); }

.libro__pie { margin-top: 1rem; }
.libro__titulo {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.22;
  margin: 0;
}
.libro__autor { font-size: .88rem; color: var(--tinta-suave); margin: .2rem 0 0; }
.libro__genero { margin: .55rem 0 0; }

/* Un rótulo que además lleva a algún sitio: las categorías de la ficha. */
.rotulo--enlace {
  display: inline-block;
  text-decoration: none;
  border-bottom: 1px solid var(--borde);
  padding-bottom: .15rem;
  margin-right: .75rem;
}
.rotulo--enlace:hover { color: var(--azul); border-bottom-color: var(--azul); }

/* ==================== Buscador y filtros del catálogo ==================== */
/*
 * Donde antes había una tira de enlaces por género hay ahora un formulario. Los
 * enlaces se quedaron cortos en cuanto los filtros pasaron de uno: con género,
 * autor y formato, una tira por cada uno serían cuarenta enlaces antes de ver
 * el primer libro.
 */
.buscador {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e2);
  margin: 0 0 var(--e3);
  padding: var(--e3);
  background: var(--papel-hondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
}
.buscador__texto { flex: 1 1 18rem; }
.buscador__campo { flex: 0 1 11rem; }
.buscador label {
  display: block;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: .45rem;
}
.buscador input,
.buscador select {
  width: 100%;
  font-family: var(--interfaz);
  font-size: .95rem;
  padding: .7rem .85rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  background: var(--blanco);
  color: var(--tinta);
}
.buscador .boton { flex: 0 0 auto; cursor: pointer; }

/* Lo que está filtrando ahora mismo, y cómo soltar cada cosa. */
.puestos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e1) var(--e2);
  margin: 0 0 var(--e3);
}
.puestos ul { display: flex; flex-wrap: wrap; gap: var(--e1); list-style: none; margin: 0; padding: 0; }
.puestos li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  background: var(--cielo);
  border-radius: var(--radio-control);
  padding: .35rem .5rem .35rem .75rem;
}
.puestos__clase { color: var(--tinta-suave); }
.puestos li a {
  text-decoration: none;
  color: var(--tinta-suave);
  font-size: 1.1rem;
  line-height: 1;
  /* Un aspa de teclado es un blanco diminuto. Se le da tamaño de dedo: los
     24 px que pide WCAG 2.2 como mínimo para un objetivo táctil. */
  min-width: 1.5rem;
  min-height: 1.5rem;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
}
.puestos li a:hover { background: var(--blanco); color: var(--error); }

/* ============================ Paginación ============================ */
.paginas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e3);
  margin-top: var(--e5);
  padding-top: var(--e3);
  border-top: 1px solid var(--borde);
}
.paginas a {
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--azul);
  border-bottom: 1px solid var(--borde);
  padding-bottom: .2rem;
}
.paginas a:hover { border-bottom-color: var(--azul); }
/*
 * El extremo se enseña apagado en vez de esconderlo. Si desapareciera, los dos
 * botones bailarían de sitio al cambiar de página y habría que volver a buscar
 * dónde está «Siguiente».
 */
.paginas__apagado {
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--borde);
}
.paginas__cuenta { font-size: .88rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }

@media (max-width: 34rem) {
  .buscador { padding: var(--e2); }
  .buscador__texto, .buscador__campo { flex: 1 1 100%; }
  .buscador .boton { width: 100%; text-align: center; }
  .paginas { gap: var(--e2); flex-wrap: wrap; }
}

/* ============================ Ficha de libro ============================ */
.ficha {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  padding-block: clamp(3rem, 7vw, 5rem);
  align-items: start;
}
@media (max-width: 52rem) { .ficha { grid-template-columns: 1fr; max-width: 30rem; } }

.ficha__cabeza { margin-bottom: 2.5rem; }
.ficha h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -.018em;
  margin: .75rem 0 0;
}
.ficha__subtitulo {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--tinta-suave);
  margin: .6rem 0 0;
  font-weight: 500;
}
.ficha__firma {
  margin: 1.25rem 0 0;
  font-size: 1.05rem;
}
.ficha__firma a { color: var(--tinta); text-decoration-color: var(--azul); text-underline-offset: 3px; }

.sinopsis {
  max-width: var(--lectura);
  font-size: 1.08rem;
  line-height: 1.72;
  padding-top: 2rem;
  border-top: 1px solid var(--borde);
}
.sinopsis p { margin: 0 0 1.1rem; }
.sinopsis p:last-child { margin-bottom: 0; }
/* Capitular: la primera letra de la sinopsis, como en un libro.
 *
 * En la sinopsis de un libro es la del primer párrafo, que siempre es prosa.
 * En un artículo de Actualidad no: esos empiezan con la firma de la redacción
 * y la entradilla, las dos en negrita, y la capitular caía sobre la firma. Allí
 * el párrafo que la lleva lo marca el servidor, porque «el primero» y «el
 * primero de prosa» no son lo mismo y el CSS solo sabe contar.
 */
.sinopsis:not(.pieza__cuerpo) p:first-child::first-letter,
.pieza__cuerpo p.capitular::first-letter {
  font-family: var(--display);
  font-size: 3.1rem;
  line-height: .82;
  float: left;
  padding: .12em .12em 0 0;
  color: var(--tinta);
}

/* El colofón: los datos de edición, como en la última página de un libro. */
.colofon {
  margin: 3rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--tinta);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0;
}
.colofon > div { padding: .95rem 1.25rem .95rem 0; border-bottom: 1px solid var(--borde-tenue); }
.colofon dt { margin-bottom: .3rem; }
.colofon dd {
  margin: 0;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: .95rem;
}

.comprar { margin-top: 2.5rem; display: flex; gap: .85rem; flex-wrap: wrap; }
.boton {
  font-family: var(--interfaz);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .85rem 1.9rem;
  background: var(--azul);
  color: var(--blanco);
  border: 1px solid var(--azul);
  border-radius: var(--radio-control);
  transition: background var(--paso-corto) var(--curva), color var(--paso-corto) var(--curva);
}
.boton:hover { background: var(--azul-hondo); border-color: var(--azul-hondo); }
.boton--discreto { background: transparent; color: var(--azul); border-color: var(--azul); }
.boton--discreto:hover { background: var(--cielo); color: var(--azul-hondo); border-color: var(--azul-hondo); }

/*
 * Los dos de fondo oscuro —el hero y el cierre—, donde el azul de marca no se
 * distingue del azul noche.
 *
 * Van aquí, **detrás de `.boton`**, y no junto a los bloques que los usan. Los
 * tenía arriba, con el hero, y no pintaban: un modificador con la misma
 * especificidad que la clase base solo gana si va después, y allí iba antes.
 * El resultado era un botón «fantasma» relleno de azul sobre azul.
 */
.boton--claro { background: var(--papel); color: var(--noche); border-color: var(--papel); }
.boton--claro:hover { background: var(--blanco); border-color: var(--blanco); color: var(--noche); }
.boton--fantasma { background: transparent; color: var(--papel); border-color: rgba(247, 242, 232, .55); }
.boton--fantasma:hover { background: rgba(247, 242, 232, .12); border-color: var(--papel); color: var(--papel); }

/* ============================ Autores ============================ */
.autores { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--tinta); }
.autores li { border-bottom: 1px solid var(--borde); }
.autores a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.6rem 0;
  text-decoration: none;
  flex-wrap: wrap;
}
.autores a:hover .autores__nombre { color: var(--azul); }
.autores__nombre {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  margin: 0;
  transition: color .15s ease;
}
.autores__cuenta { font-size: .85rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }

.perfil { padding-block: clamp(3rem, 7vw, 5rem); }
.perfil h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -.018em;
  margin: .75rem 0 0;
}
.perfil__bio {
  max-width: var(--lectura);
  margin: 2rem 0 0;
  font-size: 1.06rem;
  line-height: 1.72;
}
.perfil__bio p { margin: 0 0 1.1rem; }
.enlaces-autor {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: 2rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--borde);
  list-style: none;
}
.enlaces-autor a {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  text-decoration: none;
  border-bottom: 1px solid var(--borde);
  padding-bottom: .2rem;
}
.enlaces-autor a:hover { color: var(--tinta); border-bottom-color: var(--azul); }

/* ============================ Vacío ============================ */
.vacio {
  padding: clamp(3rem, 8vw, 5rem) 0;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  max-width: 42ch;
}
.vacio p { margin: 0; color: var(--tinta-suave); font-size: 1.05rem; }
.vacio p + p { margin-top: .75rem; }

/* ============================ Pie ============================ */
/*
 * Cuatro columnas que en el móvil se apilan por orden, sin trucos: la primera
 * es la casa y las otras tres son los caminos. El briefing pide «contraste
 * alto», así que va en azul noche y no en papel apagado.
 */
.pie {
  background: var(--noche);
  color: var(--papel);
  padding-block: clamp(3rem, 7vw, 4.5rem) 2.5rem;
  margin-top: clamp(3rem, 8vw, 5rem);
}
/*
 * Ese aire de arriba separa el pie del contenido claro, y en casi todas las
 * páginas hace falta. En la portada no: el bloque de cierre ya es azul noche y
 * el margen dejaba una franja de papel entre dos bloques oscuros, como si
 * faltara algo. Donde el cierre está, el pie se pega a él.
 */
main:has(.cierre) + .pie { margin-top: 0; }
.pie__reja {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2.5rem 2rem;
}
/* El emblema, al tamaño en el que se lee. El `height: auto` es lo que evita
   que el `width`/`height` del HTML lo deforme; esos atributos están para que el
   navegador reserve el hueco antes de descargarlo y la página no dé un salto. */
.pie__emblema { width: 9.5rem; height: auto; margin-bottom: var(--e2); }
.pie__marca { font-family: var(--display); font-weight: 500; font-size: 1.35rem; margin: 0; }
.pie__nota { margin: .6rem 0 0; font-size: .88rem; color: var(--sobre-noche); max-width: 38ch; }
.pie__columna { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.pie__titulo {
  font-family: var(--interfaz);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--conexion);
  margin: 0 0 .2rem;
}
.pie__columna a {
  font-size: .92rem;
  color: var(--sobre-noche);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--paso-corto) var(--curva);
}
.pie__columna a:hover { color: var(--papel); border-bottom-color: var(--conexion); }

.pie__cierre {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(247, 242, 232, .18);
}
.pie__lema {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.15rem;
  margin: 0;
  color: var(--papel);
}
.pie__legal { margin: 0; font-size: .78rem; color: var(--sobre-noche); }

@media (max-width: 52rem) {
  .pie__reja { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 34rem) {
  .pie__reja { grid-template-columns: 1fr; gap: 2rem; }
}

/* ============================ Migas ============================ */
.migas { font-size: .78rem; color: var(--tinta-suave); padding-top: 1.75rem; }
.migas a { color: var(--tinta-suave); text-decoration: none; border-bottom: 1px solid var(--borde); }
.migas a:hover { color: var(--tinta); }
.migas span { color: var(--tinta-suave); padding-inline: .45rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ======================= Publica con nosotros ======================= */
/*
 * La llamada principal dentro de la navegación.
 *
 * Llevaba `!important` para ganarle a `.navegacion a`, y esa era la manera
 * rápida y la equivocada: `!important` no se puede matizar después, y cuando la
 * cabecera se volvió transparente sobre el hero este enlace se quedó en azul de
 * marca sobre azul noche. Medido: 1.90 de contraste, cuando el mínimo son 4.5.
 * Se lee ganando por especificidad, que sí admite excepciones.
 */
.navegacion a.navegacion__accion {
  color: var(--azul);
  border-bottom-color: var(--azul);
  font-weight: 500;
}
.cabecera--transparente .navegacion a.navegacion__accion {
  color: var(--blanco);
  border-bottom-color: var(--conexion);
}
.acciones-hero { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: var(--e4); }
.columnas-texto { max-width: var(--lectura); }
.columnas-texto p { margin: 0 0 var(--e2); }

/*
 * El proceso en cuatro etapas. Números grandes y contenidos: lo que ordena la
 * lectura es la secuencia, no el adorno.
 */
.proceso {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--e5) var(--e4);
  counter-reset: paso;
}
.proceso li { border-top: 1px solid var(--borde); padding-top: var(--e2); }
.proceso__numero {
  font-family: var(--display);
  font-size: 1.6rem;
  color: var(--azul);
  display: block;
  margin-bottom: var(--e1);
}
.proceso h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.3rem;
  margin: 0 0 .4rem;
}
.proceso p { margin: 0; color: var(--tinta-suave); }
.proceso--simple { grid-template-columns: 1fr; gap: var(--e3); }

.requisitos { padding-left: 1.2rem; margin: 0 0 var(--e2); }
.requisitos li { margin-bottom: .6rem; }

/* Las preguntas, con el desplegable nativo: funciona sin JavaScript, con
   teclado y con lector de pantalla, y no hay que mantenerlo. */
.preguntas { max-width: var(--lectura); }
.preguntas details { border-bottom: 1px solid var(--borde); padding: var(--e2) 0; }
.preguntas summary {
  cursor: pointer;
  font-family: var(--display);
  font-size: 1.15rem;
  list-style-position: outside;
}
.preguntas summary::marker { color: var(--azul); }
.preguntas details p { margin: var(--e1) 0 0; color: var(--tinta-suave); }

.cierre { background: var(--noche); color: var(--papel); padding-block: var(--e7); }
.cierre h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.9rem, 5vw, 3rem);
  margin: 0 0 var(--e3);
  max-width: 18ch;
}
.boton--claro { background: var(--papel); color: var(--noche); border-color: var(--papel); }
.boton--claro:hover { background: var(--cielo); border-color: var(--cielo); color: var(--noche); }

/* ======================= El formulario ======================= */
.formulario-envio { max-width: 40rem; padding-block: var(--e5) var(--e7); }
.formulario-envio .lienzo__cabeza { margin-bottom: var(--e3); }
.formulario-envio h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  margin: .3rem 0 0;
}

.pasos { margin: 0 0 var(--e4); }
.pasos ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1) var(--e3);
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  border-bottom: 1px solid var(--borde);
  padding-bottom: var(--e2);
}
.pasos--aqui { color: var(--azul); font-weight: 600; }
.pasos--hecho a { color: var(--tinta); }

.campo { margin-bottom: var(--e3); }
.campo label {
  display: block;
  font-size: .8rem;
  font-weight: 500;
  margin-bottom: .4rem;
}
.campo input[type="text"], .campo input[type="email"], .campo input[type="number"],
.campo input[type="file"], .campo select, .campo textarea {
  width: 100%;
  font: inherit;
  padding: .7rem .8rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  background: var(--blanco);
  color: var(--tinta);
}
.campo input[type="checkbox"] { width: auto; margin-right: .5rem; }
.campo--mal input, .campo--mal select, .campo--mal textarea { border-color: var(--error); }
.campo__ayuda { font-size: .85rem; color: var(--tinta-suave); margin: .4rem 0 0; }
.campo__error { color: var(--error); font-size: .88rem; margin: .4rem 0 0; font-weight: 500; }
.obligatorio { color: var(--azul); }

/* La trampa para robots. Fuera de la vista, fuera del recorrido de teclado y
   marcada para los lectores de pantalla: una persona no la encuentra. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.acciones-paso { display: flex; gap: var(--e2); align-items: center; margin-top: var(--e4); }

.aviso { border-left: 3px solid var(--azul); background: var(--cielo); padding: var(--e2) var(--e3); margin: 0 0 var(--e3); }
.aviso--error { border-left-color: var(--error); background: #fdf0ee; }
.aviso ul { margin: .5rem 0 0; padding-left: 1.2rem; }

.repaso { border-top: 1px solid var(--borde); padding: var(--e3) 0; }
.repaso__titulo {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.25rem;
  margin: 0 0 var(--e2);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e2);
}
.repaso dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem var(--e3); margin: 0; }
.repaso dt { color: var(--tinta-suave); font-size: .85rem; }
.repaso dd { margin: 0; }

.acuse {
  background: var(--cielo);
  border-radius: var(--radio-tarjeta);
  padding: var(--e4);
  text-align: center;
  margin-bottom: var(--e5);
}
.acuse__rotulo {
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0;
}
.acuse__referencia {
  font-family: var(--display);
  font-size: clamp(2rem, 7vw, 3rem);
  margin: .3rem 0 var(--e2);
  letter-spacing: .02em;
}

@media (max-width: 40rem) {
  .repaso dl { grid-template-columns: 1fr; gap: .1rem; }
  .repaso dt { margin-top: .6rem; }
  .acciones-paso { flex-direction: column-reverse; align-items: stretch; }
}

/* ===================== La página ampliada de un libro ===================== */
/*
 * Lo que la editorial vende dentro del paquete de servicio. La diferencia con
 * la ficha normal no es que tenga más cosas: es que **el libro manda**. La
 * portada ocupa, el color sale de ella y el botón de comprar está en dos
 * sitios, arriba y al final.
 *
 * Los dos colores llegan en `--obra-fondo` y `--obra-acento`, puestos por la
 * plantilla, distintos en cada libro y sacados de su cubierta. Si faltan, estos
 * valores de respaldo son los de la casa, así que la página nunca se queda sin
 * color.
 */
.obra {
  --obra-fondo: var(--noche);
  --obra-acento: var(--conexion);
}

.obra__portada {
  background: var(--obra-fondo);
  color: var(--papel);
  margin-top: calc(var(--alto-cabecera) * -1);
  padding-top: calc(var(--alto-cabecera) + var(--e6));
  padding-bottom: var(--e6);
}
.obra__reja {
  display: grid;
  grid-template-columns: minmax(12rem, 20rem) 1fr;
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: center;
}

/*
 * La cubierta como objeto, no como miniatura: sombra larga y un filete claro
 * que hace de canto. Es el truco que la separa del fondo y le da cuerpo, y el
 * que permite que una portada de 334 píxeles aguante a este tamaño.
 */
.obra__cubierta img {
  width: 100%;
  height: auto;
  border-radius: 3px 8px 8px 3px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .28),
    0 18px 50px -12px rgba(0, 0, 0, .55),
    inset 1px 0 0 rgba(255, 255, 255, .14);
}

.obra__categoria {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--obra-acento);
  margin: 0 var(--e2) var(--e2) 0;
  border-bottom: 1px solid transparent;
}
.obra__categoria:hover { border-bottom-color: var(--obra-acento); }

.obra__titulo {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0;
}
.obra__subtitulo {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  margin: .6rem 0 0;
  color: var(--cielo);
}
.obra__firma { margin: var(--e2) 0 0; font-size: 1.02rem; color: var(--cielo); }
.obra__firma a { color: inherit; text-decoration-color: var(--obra-acento); text-underline-offset: 3px; }

/* La frase gancho. Va grande y en cursiva porque es lo que se lee de un
   vistazo, y lo que acaba copiado en el mensaje de quien comparte. */
.obra__gancho {
  font-family: var(--display);
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  font-style: italic;
  line-height: 1.35;
  margin: var(--e3) 0 0;
  max-width: 34ch;
  color: var(--papel);
}

.obra__acciones { display: flex; gap: .85rem; flex-wrap: wrap; margin-top: var(--e4); }
.obra__precio { margin: var(--e2) 0 0; font-size: .92rem; color: var(--cielo); }

.obra__sinopsis { margin-top: var(--e2); }
.obra__sinopsis p:first-child::first-letter { color: var(--obra-fondo); }

.obra__autor { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(2rem, 5vw, 4rem); }
.obra__bio { max-width: var(--lectura); line-height: 1.75; }
.obra__bio p { margin: 0 0 1.1rem; }

.obra__cierre {
  background: var(--obra-fondo);
  color: var(--papel);
  padding-block: clamp(3rem, 8vw, 5rem);
  text-align: center;
}
.obra__cierre .obra__acciones { justify-content: center; }
.obra__cierre-frase {
  font-family: var(--display);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  margin: 0;
}
.obra__aviso {
  margin: var(--e3) auto 0;
  max-width: 44ch;
  font-size: .82rem;
  color: var(--sobre-noche);
}

/* --- Compartir ---------------------------------------------------------- */
/*
 * Enlaces, no botones de las redes. Los que ellas ofrecen son código suyo que
 * se ejecuta en esta página, ve quién entra y se lo cuenta aunque nadie pulse.
 * Esto son direcciones: no hay nada que ejecutar.
 */
.redes-de-un-articulo {
  margin-top: var(--e5);
  padding-top: var(--e3);
  border-top: 1px solid rgba(247, 242, 232, .2);
}
/*
 * El rótulo pequeño está pensado para fondo claro y aquí cae sobre el oscuro
 * del cierre. Medido antes de corregirlo: 1.98 de contraste, cuando el mínimo
 * son 4.5. Es una etiqueta de once píxeles, de las que nadie mira al revisar
 * una página, y por eso hay que medirlas en vez de mirarlas.
 */
.obra__cierre .rotulo { color: var(--sobre-noche); }
.compartir ul {
  list-style: none;
  padding: 0;
  margin: var(--e2) 0 0;
  display: flex;
  gap: var(--e3);
  flex-wrap: wrap;
  justify-content: center;
}
.compartir a {
  color: var(--papel);
  text-decoration: none;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(247, 242, 232, .35);
  padding-bottom: .2rem;
}
.compartir a:hover { border-bottom-color: var(--obra-acento); color: var(--obra-acento); }

@media (max-width: 52rem) {
  .obra__reja { grid-template-columns: 1fr; justify-items: start; }
  /* La cubierta deja de ocupar toda la columna: a pantalla completa en un
     móvil se comería la pantalla entera antes de llegar al título. */
  .obra__cubierta { max-width: 14rem; }
  .obra__autor { grid-template-columns: 1fr; }
}

/* ======================= Directorio de autores ======================= */
/*
 * Retrato, nombre, géneros y obras, que es lo que pide el briefing. De los
 * cuatro, el retrato es el único que hoy no existe: hasta que cada autor
 * entregue el suyo van las iniciales, compuestas con la letra de la casa. Un
 * hueco gris con un icono de persona dice «falta algo»; una inicial, no.
 */
.buscador--solo { max-width: 40rem; align-items: flex-end; }

.directorio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
  gap: var(--e5) var(--e3);
  list-style: none;
  padding: 0;
  margin: var(--e2) 0 0;
}
/* En el teléfono, dos columnas y no una.
 *
 * `auto-fill` con un mínimo de 11rem no llega a meter dos columnas en 375 px,
 * así que caía a una sola y cada retrato pasaba a medir el ancho entero de la
 * pantalla: 327 px de círculo por autor y una página de once mil píxeles,
 * trece pantallas de scroll para ver a veinte personas. Pidiendo dos columnas
 * a las claras, el directorio se recorre de un vistazo. */
@media (max-width: 34rem) {
  .directorio { grid-template-columns: repeat(2, 1fr); }
  .autor-ficha__nombre { font-size: 1rem; }
  .autor-ficha__iniciales { font-size: clamp(1.3rem, 9vw, 1.9rem); }
}

.autor-ficha a { text-decoration: none; display: block; text-align: center; }

.autor-ficha__retrato {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  background: var(--noche);
  color: var(--papel);
  transition: transform var(--paso-medio) var(--curva);
}
.autor-ficha__iniciales {
  font-family: var(--display);
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  letter-spacing: .04em;
}
.autor-ficha a:hover .autor-ficha__retrato { transform: translateY(-3px); }

.autor-ficha__nombre {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.25;
  margin: var(--e2) 0 0;
  color: var(--tinta);
}
.autor-ficha a:hover .autor-ficha__nombre { color: var(--azul); }
.autor-ficha__generos {
  margin: .35rem 0 0;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--azul);
}
.autor-ficha__cuenta { margin: .3rem 0 0; font-size: .82rem; color: var(--tinta-suave); }

/* --- La ficha de un autor --------------------------------------------- */
.perfil--con-retrato {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--e4);
  align-items: center;
}
.perfil__retrato {
  display: grid;
  place-items: center;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--noche);
  color: var(--papel);
}
.perfil__iniciales { font-family: var(--display); font-size: 2.6rem; letter-spacing: .04em; }
.perfil__texto h1 { margin-top: .4rem; }
.perfil__generos {
  margin: .6rem 0 0;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--azul);
}
/* La biografía y los enlaces cuelgan de la rejilla en la segunda columna, para
   que empiecen alineados con el nombre y no debajo del retrato. */
.perfil--con-retrato .perfil__bio,
.perfil--con-retrato .enlaces-autor { grid-column: 2; }

@media (max-width: 40rem) {
  .perfil--con-retrato { grid-template-columns: 1fr; justify-items: start; }
  .perfil--con-retrato .perfil__bio,
  .perfil--con-retrato .enlaces-autor { grid-column: 1; }
}

/* ========================= La editorial ========================= */
.editorial__abre { padding-block: clamp(3rem, 8vw, 5rem) clamp(2rem, 5vw, 3rem); }
.editorial__titulo {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: .75rem 0 0;
  max-width: 18ch;
}
.editorial__titulo em { font-style: italic; color: var(--tinta-suave); }
.editorial__entrada {
  margin: var(--e3) 0 0;
  max-width: var(--lectura);
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  color: var(--tinta-suave);
  line-height: 1.7;
}

/* Rótulo a la izquierda y texto a la derecha: la compostura de un documento
   editorial, que es lo que esta página es. */
.editorial__reja { display: grid; grid-template-columns: 1fr 2.2fr; gap: clamp(1.5rem, 5vw, 4rem); }
.editorial__texto { max-width: var(--lectura); line-height: 1.75; }
.editorial__texto p { margin: 0 0 1.15rem; }
.editorial__texto p:last-child { margin-bottom: 0; }

/* Los microcopys del documento de contenidos. Son frases de marca, no cuerpo
   de texto, y se distinguen sin gritar. */
.editorial__lema {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--azul);
  margin-top: var(--e2);
}
.editorial__lema--claro { color: var(--conexion); }

.editorial__pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
}
.editorial__pilares p { line-height: 1.75; margin: .75rem 0 0; }

.editorial__lista { margin: 0 0 1.15rem; padding-left: 1.2rem; }
.editorial__lista li { margin-bottom: .4rem; }
.editorial__ahora { font-size: .95rem; color: var(--tinta-suave); }
.editorial__ahora a { color: var(--azul); text-decoration-color: var(--borde); }

.editorial__manifiesto {
  background: var(--noche);
  color: var(--papel);
  padding-block: clamp(3.5rem, 9vw, 6rem);
  text-align: center;
}
.editorial__credo {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4.5vw, 2.5rem);
  line-height: 1.35;
  margin: var(--e2) 0 0;
}
.editorial__cierre-texto {
  margin: var(--e3) auto 0;
  max-width: 46ch;
  color: var(--sobre-noche);
  line-height: 1.7;
}
.editorial__acciones { display: flex; gap: .85rem; flex-wrap: wrap; justify-content: center; margin-top: var(--e4); }
.editorial__manifiesto .rotulo { color: var(--sobre-noche); }

/* ========================== Actualidad ========================== */
.entradas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  gap: var(--e4) var(--e3);
  list-style: none;
  padding: 0;
  margin: var(--e2) 0 0;
}
.entrada-tarjeta a { text-decoration: none; display: block; }
.entrada-tarjeta__imagen {
  width: 100%;
  /* `height: auto` hace falta desde que la etiqueta lleva `width` y `height`
     de verdad —los pone ahí para que el navegador reserve el hueco y la página
     no salte—. Con un alto fijo en la etiqueta, el `aspect-ratio` de aquí no
     manda y la imagen sale con el alto del original: mil trescientos píxeles
     de recuadro azul. */
  height: auto;
  aspect-ratio: 16 / 9;
  /* **`contain` y no `cover`: la miniatura no se recorta.**
   *
   * Con `cover` la imagen se estiraba hasta llenar el recuadro de 16:9 y lo
   * que sobraba se cortaba. Para las de 1600×900 daba igual —ya son 16:9—,
   * pero «Fráncfort 2026» es vertical, 1080×1350, y perdía el cuarenta por
   * ciento de su altura: la cabeza y los pies, fuera. La editorial lo vio el
   * 15-10-2026.
   *
   * Con `contain` cabe entera. Una imagen vertical deja franjas a los lados, y
   * por eso el fondo es el papel de la casa y no blanco: así se lee como una
   * foto enmarcada y no como un hueco que falta por cargar.
   *
   * El recuadro sigue siendo 16:9 a propósito. Dejar que cada tarjeta midiera
   * lo que quisiera desalinearía la rejilla entera, y una fila donde una
   * tarjeta es el doble de alta que su vecina parece rota. */
  object-fit: contain;
  border-radius: var(--radio-tarjeta);
  background: var(--papel-hondo);
  transition: transform var(--paso-medio) var(--curva);
}
.entrada-tarjeta a:hover .entrada-tarjeta__imagen { transform: translateY(-3px); }
.entrada-tarjeta__texto { margin-top: var(--e2); }
.entrada-tarjeta__titulo {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.25;
  margin: .4rem 0 0;
  color: var(--tinta);
}
.entrada-tarjeta a:hover .entrada-tarjeta__titulo { color: var(--azul); }
.entrada-tarjeta__resumen { margin: .5rem 0 0; font-size: .95rem; color: var(--tinta-suave); line-height: 1.6; }
/* De qué serie es parte. En letra pequeña y atenuada: ordena la lista sin
   competir con el titular, que es lo que hay que leer primero. No lleva color
   de enlace porque no lo es —la serie no tiene página propia—, y un texto azul
   que no se puede pulsar es una promesa que no se cumple. */
.entrada-tarjeta__serie {
  margin: .35rem 0 0;
  font-size: .8rem;
  color: var(--tinta-suave);
}

.pieza { max-width: var(--lectura); margin: 0 auto; padding-block: clamp(2rem, 6vw, 3.5rem); }
.pieza__cabeza h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2rem, 5.5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.018em;
  margin: .6rem 0 0;
}
.pieza__entrada { margin: var(--e2) 0 0; font-size: 1.1rem; color: var(--tinta-suave); line-height: 1.7; }
.pieza__imagen { width: 100%; height: auto; border-radius: var(--radio-tarjeta); margin: var(--e4) 0; }

/* Una imagen dentro del texto, con su pie. Mismo ancho que la de cabecera para
   que el artículo no dé saltos, y el pie en letra pequeña y atenuada: explica
   la imagen, no compite con el texto. */
.pieza__figura { margin: var(--e4) 0; }
.pieza__figura img {
  width: 100%;
  height: auto;
  border-radius: var(--radio-tarjeta);
  display: block;
}
.pieza__figura figcaption {
  margin-top: .5rem;
  font-size: .85rem;
  color: var(--tinta-suave);
  text-align: center;
}
.pieza__cuerpo { margin-top: var(--e3); }

/* --- Los apartados y las listas de un artículo ------------------------- */
/*
 * Un artículo de Actualidad se escribe de una pieza, con sus apartados y a
 * veces una lista de libros o de fuentes. Antes el cuerpo se pintaba como
 * párrafos sueltos, así que un apartado salía en la página escrito
 * literalmente «## Ver estos libros en Amazon», con las dos almohadillas.
 *
 * Nunca `h1`: el de la página es el título del artículo.
 */
.pieza__cuerpo h2,
.pieza__cuerpo h3,
.pieza__cuerpo h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.25;
  margin: 2.4rem 0 .9rem;
}
.pieza__cuerpo h2 { font-size: 1.5rem; }
.pieza__cuerpo h3 { font-size: 1.22rem; }
.pieza__cuerpo h4 { font-size: 1.05rem; letter-spacing: .02em; }
/* El primero no se separa del arranque: arriba ya está el borde del cuerpo. */
.pieza__cuerpo > :first-child { margin-top: 0; }

.pieza__lista { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.pieza__lista li { margin-bottom: .5rem; }
.pieza__lista li:last-child { margin-bottom: 0; }

/* Los enlaces dentro del texto, subrayados con el azul de la casa: en un
   artículo con fuentes hay muchos, y el color solo no basta para quien no
   distingue bien los colores. */
.pieza__cuerpo a {
  color: var(--tinta);
  text-decoration-color: var(--azul);
  text-underline-offset: 3px;
}
.pieza__cuerpo a:hover { text-decoration-color: var(--tinta); }

/* El enlace de compra dentro de un renglón. No es un botón —eso es la ficha
   de aparte— pero sí se tiene que ver que lleva a comprar. */
.citado__enlace { white-space: nowrap; }

/* --- El hilo de una serie ---------------------------------------------- */
/*
 * Dos piezas, arriba y abajo del artículo, y distintas de ver a propósito.
 *
 * Arriba es una **nota de orientación**: una línea fina, en letra pequeña, que
 * dice dónde estás sin pelearse con el título que tiene justo encima. Si
 * pesara más que el titular, un artículo de una serie empezaría hablando de la
 * serie en vez de sí mismo.
 *
 * Abajo es una **lista para decidir**, con el mismo peso que las otras
 * secciones del final de la página: ahí ya se ha terminado de leer.
 */
.hilo {
  margin: var(--e3) 0 0;
  padding: .8rem 1.1rem;
  background: var(--papel-hondo);
  border-radius: var(--radio-control);
  box-shadow: inset 2px 0 0 var(--azul);
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.2rem;
  align-items: baseline;
  justify-content: space-between;
  font-size: .9rem;
}
.hilo p { margin: 0; }
.hilo__donde { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline; }
.hilo__donde a { color: var(--tinta); text-decoration-color: var(--azul); text-underline-offset: 3px; }
.hilo__cuenta { color: var(--tinta-suave); }
.hilo__saltos { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.hilo__salto { color: var(--azul); text-decoration: none; white-space: nowrap; }
.hilo__salto:hover { text-decoration: underline; text-underline-offset: 3px; }

/* La serie entera, al final. Un filete por parte y nada más: es una lista de
   títulos, y cada uno enmarcado en su tarjeta parecería seis artículos
   distintos en vez de seis partes de uno. */
.serie { list-style: none; padding: 0; margin: var(--e2) 0 0; }
.serie__parte {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: .2rem .6rem;
  align-items: baseline;
  padding: .75rem .6rem;
  border-top: 1px solid var(--borde);
}
.serie__parte:last-child { border-bottom: 1px solid var(--borde); }
.serie__numero { font-family: var(--display); font-size: 1.05rem; color: var(--tinta-suave); }
.serie__titulo {
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.3;
  text-decoration: none;
  color: var(--tinta);
}
a.serie__titulo:hover { color: var(--azul); }
/* La parte que se está leyendo. Con una sombra interior y no con un borde
   izquierdo: un borde la movería .6rem a la derecha y los números de la lista
   dejarían de estar en columna. */
.serie__parte--esta { box-shadow: inset 2px 0 0 var(--azul); background: var(--papel-hondo); }
.serie__parte--esta .serie__titulo { font-weight: 500; }
.serie__aqui {
  grid-column: 2;
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--azul);
}

.etiquetas { display: flex; gap: .5rem; flex-wrap: wrap; list-style: none; padding: 0; margin: var(--e4) 0 0; }
.etiquetas li {
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  background: var(--papel-hondo);
  border-radius: var(--radio-control);
  padding: .3rem .7rem;
}

@media (max-width: 46rem) {
  .editorial__reja { grid-template-columns: 1fr; }
}

/* =========================== Contacto =========================== */
.contacto { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(2rem, 6vw, 4.5rem); align-items: start; }
.contacto__intro { max-width: 34rem; }
.contacto__aviso {
  margin-top: var(--e4);
  padding: var(--e2) var(--e3);
  background: var(--papel-hondo);
  border-left: 3px solid var(--azul);
  border-radius: 0 var(--radio-control) var(--radio-control) 0;
}
.contacto__aviso p { margin: .3rem 0; font-size: .92rem; }
.contacto__formulario { max-width: 34rem; }
.contacto__despues { margin-top: var(--e5); max-width: var(--lectura); }
.contacto__despues ul { margin: var(--e2) 0 0; padding-left: 1.2rem; }
.contacto__despues li { margin-bottom: .5rem; }
.casilla { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; }
.casilla input { width: auto; margin-top: .3rem; }

@media (max-width: 52rem) {
  .contacto { grid-template-columns: 1fr; }
}

/* ── Testimonios · bloque 10 ──────────────────────────────────────────────
   Una cita sola ocupa el ancho de lectura y va centrada. Varias van en una
   fila que se arrastra, con parada en cada una para que ninguna quede a
   medias. Nada se mueve solo: no hay animación que apagar en
   `prefers-reduced-motion` porque no hay ninguna encendida. */
.citas { list-style: none; margin: 0; padding: 0; }

.cita { max-width: 44rem; margin-inline: auto; }
.cita figure { margin: 0; }

.cita__texto {
  margin: 0 0 var(--e3);
  font-family: var(--display);
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem);
  line-height: 1.4;
  color: var(--tinta);
  /* Las comillas las pone el navegador y en el idioma de la página, en vez de
     escribirlas a mano en cada testimonio y acabar con tres estilos distintos. */
  quotes: "«" "»" "“" "”";
}
.cita__texto::before { content: open-quote; color: var(--oro); }
.cita__texto::after  { content: close-quote; color: var(--oro); }

.cita__firma {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--interfaz);
  font-size: .95rem;
}
.cita__cara {
  flex: none;
  width: 4.5rem; height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cielo);
}
.cita__quien { display: block; font-weight: 600; color: var(--tinta); }
.cita__condicion { display: block; color: var(--tinta-suave); }

.citas--fila {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(38rem, 82%);
  gap: var(--e5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Sitio para el anillo de foco y para la sombra del borde al desplazar. */
  padding: var(--e1) var(--e1) var(--e3);
  /* Que la primera y la última puedan quedar centradas como las de en medio. */
  scroll-padding-inline: var(--e1);
}
.citas--fila > .cita { scroll-snap-align: center; max-width: none; }
.citas--fila:focus-visible { outline: 3px solid var(--azul); outline-offset: 4px; }

@media (max-width: 47.99rem) {
  .citas--fila { grid-auto-columns: 88%; gap: var(--e4); }
}

/* La misma circunferencia sirva de marco a una fotografía o a una inicial: así
   una fila con las dos cosas no parece dos filas distintas. `object-fit` es lo
   que impide que un retrato que no venga cuadrado salga estirado. */
img.voz__retrato { object-fit: cover; background: var(--cielo); }
.voz__iniciales { background: var(--noche); color: var(--papel); }

/* ── Texto legal ───────────────────────────────────────────────────────────
   Una columna de prosa y nada más. Estas páginas se leen enteras cuando alguien
   quiere saber qué se hace con lo suyo, así que lo único que importa es que se
   puedan leer: medida corta, interlínea holgada y jerarquía clara. Sin el
   diseño de «La editorial», que está pensado para otra cosa. */
.legal { max-width: 46rem; }
.legal__titulo {
  font-family: var(--display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1.1;
  margin: 0 0 var(--e4);
  color: var(--tinta);
}
.legal h2 {
  font-family: var(--display);
  font-size: 1.6rem;
  line-height: 1.2;
  margin: var(--e5) 0 var(--e2);
  color: var(--tinta);
}
.legal h3 {
  font-family: var(--interfaz);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: var(--e3) 0 var(--e1);
  color: var(--tinta-suave);
}
.legal p, .legal li { line-height: 1.7; color: var(--tinta); }
.legal p { margin: 0 0 var(--e2); }
.legal ul { margin: 0 0 var(--e2); padding-left: 1.2rem; }
.legal li { margin-bottom: var(--e1); }
.legal .aviso { margin-bottom: var(--e4); }

/* La entrada de la guía: una línea más grande que el cuerpo, para que quede
   claro dónde empieza a leerse. */
.guia__entrada {
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  margin-bottom: var(--e4);
}
.guia__acciones { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }

/* --- La voz del autor ---------------------------------------------------
 *
 * Los audios de su página. Uno debajo de otro y con sitio: son para
 * escuchar, no para recorrer con la vista. */
.audios { list-style: none; padding: 0; margin: var(--e3) 0 0; display: grid; gap: var(--e4); }
.audio__titulo { font-family: var(--display); font-size: 1.15rem; margin: 0 0 .25rem; }
.audio__sobre {
  margin: 0 0 .35rem;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.audio__nota { margin: 0 0 .6rem; color: var(--tinta-suave); line-height: 1.6; }
.audio audio { width: 100%; max-width: 32rem; }

/* La puerta del portal, en la página pública del autor.
 *
 * Discreta a propósito: esta página es para que un lector conozca a quien
 * escribe, y sus libros no pueden competir con un enlace administrativo. Va
 * debajo del género, separada, y en el tamaño de una nota al pie. */
.perfil__portal {
  margin: var(--e3) 0 0;
  font-size: .85rem;
  color: var(--tinta-suave);
}
.perfil__portal .enlace-seco { margin-left: .35rem; }

/* La portada y la contracubierta, una debajo de otra.
 *
 * La columna de la ficha mide 17rem: poner las dos al lado dejaría cada una en
 * ocho, que es menos de lo que mide una portada en el catálogo. Una debajo de
 * otra se ven las dos a tamaño de leer el título.
 *
 * Es un `div` dentro de la reja de `.ficha`, así que ocupa la primera columna
 * igual que ocupaba la imagen suelta: la maqueta no cambia para los libros que
 * no tienen contracubierta, que hoy son todos.
 */
.cubiertas { display: grid; gap: 1rem; }

/* Un escalón por debajo de la de delante: se mira después, y a veces es solo
 * el texto de contraportada sobre un fondo liso. */
.cubierta--detras { opacity: .92; }
.cubierta--detras:hover { opacity: 1; }

/* El botón de comprar de la cabecera. Separado del nombre del autor y sin el
 * precio ni el aviso de afiliados, que van una sola vez con el de abajo. */
.comprar--cabeza { margin-top: 1.5rem; }

/* El trozo del libro en la ficha del catálogo.
   Se separa de la sinopsis para que se vea que es otra cosa: la sinopsis la
   escribe la editorial, esto lo escribió quien firma el libro. */
.fragmento { margin: 2.5rem 0; padding-left: 1.25rem; border-left: 3px solid var(--borde); }
.fragmento__texto { max-width: 62ch; line-height: 1.7; }
.fragmento__texto p { margin: 0 0 0.9rem; }
.fragmento__pie { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--tinta-suave); }

/* --- Una obra de teatro ------------------------------------------------- */
/*
 * La editorial tiene una colección entera de teatro —La cuarta pared— y sus
 * muestras se pintaban como prosa corrida: los personajes salían dentro del
 * párrafo y no se veía quién hablaba.
 *
 * Una obra se lee saltando de nombre en nombre, así que el nombre tiene que
 * poder encontrarse recorriendo el margen con los ojos. De ahí la sangría al
 * revés: el nombre sobresale y lo que dice queda alineado debajo.
 */
.muestra__parlamento {
  margin: 0 0 0.75rem;
  padding-left: 1.6rem;
  text-indent: -1.6rem;
}
.muestra__quien {
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.04em;
}
/* Lo que hace el actor, no lo que dice. No se esconde —quien lee teatro las
   lee— pero se distingue de la voz del personaje. */
.muestra__hace,
.muestra__acotacion {
  font-style: italic;
  color: var(--tinta-suave);
}
.muestra__acotacion {
  margin: 1.1rem 0;
  padding-left: 1.6rem;
  font-size: 0.95rem;
}
.muestra__verso { margin: 0 0 0.9rem; }

/* El resumen de un `<details>`. Se le quita el triángulo que pone el navegador
   —cada uno dibuja el suyo— y se pone una flecha propia que gira al abrir.
   Se viste como un rótulo, que es lo que son los demás títulos de esta ficha,
   pero en azul: es lo único de la página que hay que pulsar para que pase algo. */
.fragmento__abrir {
  cursor: pointer;
  list-style: none;
  font-family: var(--interfaz);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--azul);
  padding: 0.35rem 0;
}
.fragmento__abrir::-webkit-details-marker { display: none; }
.fragmento__abrir::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 0.15s ease;
}
.fragmento[open] > .fragmento__abrir::before { transform: rotate(90deg); }
.fragmento__abrir:hover { text-decoration: underline; }
/* Sin esto, al abrir con el teclado no se ve dónde está el foco. */
.fragmento__abrir:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
.fragmento__texto { margin-top: 1rem; }

.fragmento__comprar { margin: 1.5rem 0 0.25rem; }
.fragmento__comprar p { margin: 0 0 0.6rem; color: var(--tinta-suave); font-size: 0.95rem; }

@media (prefers-reduced-motion: reduce) {
  .fragmento__abrir::before { transition: none; }
}

/* --- Las reacciones de una entrada de Actualidad ---------------------------
 *
 * Tres botones sobrios. No son «me gusta» de red social: son lo que un lector
 * le dice a un autor sin escribir nada, y por eso llevan palabras y no solo un
 * icono, que cada cual interpreta a su manera.
 */
.reacciones { margin: var(--e4) 0 0; padding-top: 1.5rem; border-top: 1px solid var(--borde-tenue); }
.reacciones__botones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .75rem; }

.reaccion {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: .9rem;
  color: var(--tinta);
  cursor: pointer;
}
.reaccion:hover { border-color: var(--azul); color: var(--azul); }
.reaccion:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

/* Ya la pulsaste. Se marca con color **y con el fondo**, no solo con color:
 * quien no distingue el azul tiene que poder ver igual cuál ha pulsado. */
.reaccion--pulsada { border-color: var(--azul); background: var(--cielo); color: var(--azul); }

.reaccion__cuenta {
  font-variant-numeric: tabular-nums;
  color: var(--tinta-suave);
  min-width: 1.2em;
  text-align: right;
}
.reaccion--pulsada .reaccion__cuenta { color: var(--azul); }

/* --- La entrada más reciente, destacada ------------------------------------
 *
 * Imagen a un lado y texto al otro en pantalla ancha; una encima de otra en el
 * teléfono. No lleva borde ni sombra: lo que la separa del resto es el tamaño
 * y el aire, que es como se hace en papel.
 */
.destacada {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--e3);
  align-items: center;
  margin: var(--e2) 0 var(--e5);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--borde-tenue);
  text-decoration: none;
  color: inherit;
}
.destacada__imagen {
  width: 100%;
  height: auto;
  /* **16:9 y `contain`: la destacada tampoco se recorta.**
   *
   * Tenía 16:10 con `cover`, y las imágenes de la casa son 1600×900 —16:9, que
   * es lo que pide el panel: «Horizontal, 1600×900 va bien»—. Más anchas que
   * el recuadro, así que `cover` las recortaba **por los lados**: en la del
   * 15-10-2026 se perdió la «R» de «RADAR EDITORIAL» y el principio de dos
   * renglones más. La editorial lo vio en la web.
   *
   * Con el recuadro en 16:9 la imagen de la casa encaja exacta y no queda ni
   * una franja. Y con `contain`, una que venga en otra proporción se ve
   * entera en vez de perder los bordes, que es donde suele estar el título. */
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: var(--radio-tarjeta);
  background: var(--papel-hondo);
  transition: transform var(--paso-medio) var(--curva);
}
.destacada:hover .destacada__imagen { transform: translateY(-3px); }
.destacada__titulo {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1.15;
  margin: .5rem 0 0;
}
.destacada:hover .destacada__titulo { color: var(--azul); }
.destacada__resumen {
  margin: .9rem 0 0;
  color: var(--tinta-suave);
  line-height: 1.65;
  max-width: 46ch;
}
/* «Seguir leyendo» no es un botón: es una pista. Subrayada y en azul para que
   se vea que lleva a algún sitio, sin competir con el título. */
.destacada__seguir {
  display: inline-block;
  margin-top: 1.1rem;
  font-family: var(--interfaz);
  font-size: .85rem;
  color: var(--azul);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

@media (max-width: 860px) {
  .destacada { grid-template-columns: 1fr; gap: var(--e2); }
  .destacada__imagen { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  .destacada__imagen { transition: none; }
}

/* Los filtros por tipo de entrada. Pastillas sobrias, del mismo aire que los
   botones de reacción: lo que está activo se marca con fondo y con color, no
   solo con color, para que se vea igual sin distinguir el azul. */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: var(--e2) 0 0;
}
.filtros a {
  display: inline-block;
  padding: .35rem .85rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-family: var(--interfaz);
  font-size: .82rem;
  color: var(--tinta-suave);
  text-decoration: none;
  transition: color var(--paso-corto) var(--curva), border-color var(--paso-corto) var(--curva);
}
.filtros a:hover { color: var(--azul); border-color: var(--azul); }
.filtros a[aria-current] {
  background: var(--cielo);
  border-color: var(--azul);
  color: var(--azul);
}
@media (prefers-reduced-motion: reduce) {
  .filtros a { transition: none; }
}

/* --- El catálogo en el móvil -----------------------------------------------
 *
 * La rejilla pide 13,5 rem por columna, y en un teléfono solo caben unos 20,5:
 * caía a una sola columna y cada ficha se estiraba hasta **579 píxeles de alto**
 * en una pantalla de 812. Un libro por pantalla, y veintisiete pantallas para
 * recorrer el catálogo. Nadie las pasa: se mira el primero y se sale.
 *
 * No era una decisión, era un efecto secundario del mínimo de la rejilla.
 *
 * Dos columnas y no tres. Con tres, la portada queda en unos cien píxeles y a
 * ese tamaño deja de ser una cubierta: es un sello de color. Las cubiertas de
 * esta casa están encargadas y pagadas, y son parte de lo que se vende. Con
 * dos quedan en unos ciento cincuenta, que es donde todavía se reconoce el
 * libro, y caben cuatro o cinco por pantalla.
 */
@media (max-width: 640px) {
  /* `:not(.libros--tira)` porque la tira de la portada usa la misma clase y en
     el móvil se convierte en un carrusel horizontal con `grid-template-columns:
     none`. Sin excluirla, esta regla —que va después en el fichero y tiene la
     misma especificidad— le devolvía las dos columnas y le rompía el arrastre. */
  .libros:not(.libros--tira) {
    grid-template-columns: repeat(2, 1fr);
    /* El hueco de 3 rem entre filas está pensado para pantalla grande; con dos
       columnas estrechas separa tanto que rompe la sensación de estantería. */
    gap: 1.75rem 1rem;
  }

  /* La ficha, a la medida de media pantalla. Sin esto, el título en cuerpo de
     escritorio ocupa tres líneas y deshace lo que se acaba de ganar. */
  .libros:not(.libros--tira) .libro__pie { margin-top: .7rem; }
  .libros:not(.libros--tira) .libro__titulo { font-size: .95rem; line-height: 1.2; }
  .libros:not(.libros--tira) .libro__autor { font-size: .8rem; }
  .libros:not(.libros--tira) .libro__genero { margin-top: .35rem; }

  /* Y la cubierta compuesta —la de los libros sin portada— se escribe más
     pequeña para que el título siga cabiendo dentro del rectángulo. */
  .libros:not(.libros--tira) .cubierta { padding: 1rem .85rem .85rem; }
  .libros:not(.libros--tira) .cubierta__titulo { font-size: .95rem; }
  .libros:not(.libros--tira) .cubierta__sello { font-size: .5rem; letter-spacing: .2em; }
}

/* Y en el teléfono, la tira de la portada deja de ser una tira.
 *
 * Era un carrusel que se arrastraba con el dedo: ocho libros elegidos de los
 * que **se veían uno y medio**, 216 por 437 píxeles cada uno. Para ver los
 * otros seis y medio había que saber que aquello se arrastra, y la mayoría de
 * la gente no lo sabe ni lo prueba. Ocho libros escogidos para la portada y
 * siete escondidos detrás de un gesto.
 *
 * Con las mismas dos columnas del catálogo se ven los ocho bajando, que es lo
 * que todo el mundo hace sin pensar. Y la portada se parece al catálogo, que
 * para quien entra es la misma casa.
 *
 * Entre 640 y 768 píxeles —tabletas pequeñas en vertical— se queda el carrusel:
 * ahí caben casi tres libros de un vistazo y el gesto sí se entiende. */
@media (max-width: 640px) {
  .libros--tira {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-columns: auto;
    overflow-x: visible;
    gap: 1.75rem 1rem;
    /* Se deshacen los márgenes negativos del carrusel: servían para que la
       tira llegara a los bordes de la pantalla, y una rejilla no los quiere. */
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
  }
  .libros--tira .libro__pie { margin-top: .7rem; }
  .libros--tira .libro__titulo { font-size: .95rem; line-height: 1.2; }
  .libros--tira .libro__autor { font-size: .8rem; }
  .libros--tira .libro__genero { margin-top: .35rem; }
  .libros--tira .cubierta { padding: 1rem .85rem .85rem; }
  .libros--tira .cubierta__titulo { font-size: .95rem; }
  .libros--tira .cubierta__sello { font-size: .5rem; letter-spacing: .2em; }
}

/* --- Un libro del que habla un artículo -----------------------------------
 *
 * Se distingue del texto a propósito: es lo único del artículo que lleva a una
 * tienda, y el lector tiene que ver de un vistazo que ahí cambia de registro.
 * Sin color chillón ni recuadro de anuncio: un filete y un fondo apenas.
 */
.citado {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin: var(--e3) 0;
  padding: 1.1rem 1.25rem;
  background: var(--papel-hondo);
  border-left: 3px solid var(--azul);
  border-radius: 0 var(--radio-tarjeta) var(--radio-tarjeta) 0;
}
.citado__portada { width: 92px; height: auto; border-radius: 4px; flex-shrink: 0; }
.citado__titulo {
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.2;
  margin: .3rem 0 0;
}
.citado__autor { margin: .2rem 0 0; color: var(--tinta-suave); font-size: .9rem; }
.citado .boton { margin-top: .85rem; }

@media (max-width: 560px) {
  .citado { flex-direction: column; gap: .8rem; }
  .citado__portada { width: 110px; }
}

/* ── Los vídeos dentro de un artículo ───────────────────────────────────
 *
 * Dos clases, una pinta. El marco de YouTube o Vimeo necesita una caja con
 * proporción fija: un `iframe` no sabe cuánto mide su contenido, y sin esto
 * sale con la altura de serie —ciento cincuenta píxeles— en cualquier pantalla.
 */
.video { margin: 2rem 0; }
.video__reproductor { width: 100%; height: auto; border-radius: var(--radio-tarjeta); display: block; }
.video__marco {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  background: var(--noche);
}
.video__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__nota { display: block; margin: .35rem 0; }
.video__fuera { display: inline-block; margin-top: .25rem; font-size: .9rem; }

/* ======================== Compartir un artículo ========================= */
/*
 * **Se llama `redes` y no `compartir`, y el motivo merece quedar escrito.**
 *
 * `.compartir` ya existía: es el bloque de compartir de la ficha de un libro,
 * y cae sobre el cierre oscuro, así que lleva `.compartir a { color: papel }`.
 * Al estrenar este bloque con el mismo nombre, esa regla ganaba por
 * especificidad y los cinco nombres salían **de color papel sobre papel**:
 * invisibles, con la pastilla ancha y vacía.
 *
 * No se vio en ninguna prueba —el HTML era correcto— y no se vio leyendo el
 * código. Se vio pintando la página y mirándola.
 */
/*
 * Pegado a las reacciones, al final del artículo: quien comparte algo es quien
 * acaba de terminarlo.
 *
 * Mismo pastillero que las reacciones, a propósito. Son dos filas de botones
 * redondos una debajo de otra, y si cada una tuviera su forma parecerían dos
 * cosas sin relación en vez de «lo que puedes hacer ahora con esto».
 *
 * Los colores de marca solo aparecen al acercarse. En reposo la fila es gris y
 * tranquila: cinco pastillas de colores al pie de cada artículo gritan más que
 * el artículo, y en una página de una editorial literaria eso se nota.
 */
.redes-de-un-articulo { margin: var(--e3) 0 0; }
.redes {
  list-style: none;
  margin: .75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.redes__red {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: .9rem;
  color: var(--tinta);
  text-decoration: none;
  cursor: pointer;
}

.redes__icono { display: inline-flex; color: var(--tinta-suave); }
.redes__red:hover .redes__icono { color: inherit; }
.redes__red:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

/* El color de cada casa, solo al acercarse. */
.redes__red--whatsapp:hover { border-color: #25d366; color: #128c4b; }
.redes__red--facebook:hover { border-color: #1877f2; color: #1877f2; }
.redes__red--telegram:hover { border-color: #29a9eb; color: #1c7fb8; }
.redes__red--x:hover { border-color: var(--tinta); color: var(--tinta); }
.redes__red--correo:hover,
.redes__red--copiar:hover,
.redes__red--nativo:hover { border-color: var(--azul); color: var(--azul); }

/* Copiado. Con fondo y no solo con color, como la reacción pulsada: quien no
 * distingue el azul tiene que poder ver igual que ya funcionó. */
.redes__red--hecho {
  border-color: var(--azul);
  background: var(--cielo);
  color: var(--azul);
}
.redes__red--hecho .redes__icono { color: var(--azul); }

/* En un teléfono el nombre de las redes estorba: seis pastillas con texto no
 * caben y la fila se parte en tres. Se quedan los dibujos, que ahí sí se
 * reconocen, y el nombre sigue estando para quien usa lector de pantalla.
 *
 * Los dos botones del guion mantienen su texto: «Compartir» y «Copiar enlace»
 * no tienen un dibujo que nadie reconozca de memoria. */
@media (max-width: 34rem) {
  .redes__red--whatsapp .redes__nombre,
  .redes__red--facebook .redes__nombre,
  .redes__red--telegram .redes__nombre,
  .redes__red--x .redes__nombre,
  .redes__red--correo .redes__nombre {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .redes__red--whatsapp,
  .redes__red--facebook,
  .redes__red--telegram,
  .redes__red--x,
  .redes__red--correo { padding: .55rem; }
}