/* ===================== El micrositio de un libro =====================
 *
 * La tercera altura, por encima de la ficha y de la página ampliada: una
 * página entera para un solo libro, con su material propio.
 *
 * **Hoja aparte y no dentro de `sitio.css`.** Esto son seiscientas líneas que
 * solo usa un libro de veintiocho. Metidas en la hoja general las descargaría
 * todo el mundo —la portada, el catálogo, la página de contacto— para no usar
 * ni una. Aquí se piden solo donde hacen falta.
 *
 * **Oscura de arriba abajo, y no por gusto.** El resto del sitio es papel
 * claro, que es lo correcto para leer. Esta no se lee, se recorre: son
 * láminas, un mapa grabado y un trailer, y eso se mira mejor sobre oscuro,
 * igual que en una sala. El cambio de temperatura al entrar también trabaja:
 * dice sin palabras que esto no es una ficha más.
 *
 * Los dos colores salen de la cubierta del propio libro y llegan en fichas de
 * estilo desde la plantilla, así que esta hoja sirve igual para el siguiente
 * micrositio sin tocar una línea. Los de aquí abajo son el respaldo para
 * cuando el color no se haya podido sacar de la portada.
 */
.micro {
  --micro-fondo: #1a1a17;
  --micro-oro: var(--oro);
  --micro-texto: #ece6da;
  --micro-tenue: #a49d8e;

  background: var(--micro-fondo);
  color: var(--micro-texto);
}

/* El contenedor de lectura. Más estrecho que el del sitio (80rem) porque aquí
 * hay párrafos, y una línea de 1.280 px se lee mal: el ojo pierde el renglón
 * al volver. Alrededor de setenta caracteres es lo cómodo. */
.contenedor--estrecho { max-width: 46rem; }

/* ---- La cabecera ---- */
.micro__hero {
  position: relative;
  display: flex;
  align-items: center;
  /* `min-height` y no `height`: si el título es largo y el texto crece, el
   * bloque crece con él en vez de recortarlo. Y `svh` antes que `vh` porque en
   * el móvil la barra del navegador entra y sale, y con `vh` la altura salta
   * cada vez que eso pasa. */
  min-height: 38rem;
  min-height: min(90svh, 46rem);
  padding: var(--e7) 0 var(--e6);
  overflow: hidden;
}

.micro__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bajado de brillo aquí y no en el fichero: la misma imagen se sube una vez
   * y vale para esto y para cualquier otro uso. */
  opacity: .5;
}

/* El velo entre el fondo y el texto. Sin esto el titular cae sobre una imagen
 * con zonas claras y oscuras, y hay trozos que no se leen. Degradado y no gris
 * plano, para que la imagen siga viéndose por arriba. */
.micro__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--micro-fondo) 55%, transparent) 0%,
    color-mix(in srgb, var(--micro-fondo) 80%, transparent) 55%,
    var(--micro-fondo) 100%
  );
}

/* La cubierta ocupa lo que le sobre al texto, con tope. Medido a 900 px con
 * una anchura fija de 22rem: la cubierta se quedaba en 352 px y la columna del
 * título en 440, casi lo mismo, y el título de este libro —que es largo— se
 * partía en cuatro renglones. Con `clamp` la cubierta cede sitio cuando hay
 * poco y vuelve a su tamaño cuando sobra. */
.micro__hero-reja {
  position: relative;
  display: grid;
  grid-template-columns: clamp(13rem, 24vw, 22rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* La cubierta tratada como objeto: levantada del fondo con su sombra y con una
 * pizca de giro, para que parezca un libro puesto ahí y no una imagen pegada. */
.micro__cubierta img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  transform: rotate(-1.5deg);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .4),
    0 16px 40px rgba(0, 0, 0, .55),
    0 40px 80px rgba(0, 0, 0, .35);
}

.micro__reclamo {
  margin: 0 0 var(--e2);
  font-family: var(--interfaz);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--micro-oro);
}

.micro__titulo {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.02;
  font-size: clamp(2.6rem, 7vw, 5rem);
  color: var(--blanco);
}

.micro__firma {
  margin: var(--e2) 0 0;
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  color: var(--micro-tenue);
}
.micro__firma a { color: var(--micro-texto); text-decoration-color: var(--micro-oro); }
.micro__firma a:hover { color: var(--micro-oro); }

.micro__lema {
  margin: var(--e3) 0 0;
  max-width: 34rem;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 1.45;
  color: var(--micro-texto);
}

.micro__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2) var(--e3);
  margin-top: var(--e4);
}
.micro__acciones--centro { justify-content: center; }

/* El enlace al trailer no es un botón. Una acción principal y una secundaria:
 * si las dos pesan igual, ninguna manda y quien llega no sabe qué se espera de
 * él. Comprar es el motivo de la página. */
.micro__enlace-trailer {
  font-family: var(--interfaz);
  font-size: .95rem;
  color: var(--micro-texto);
  text-underline-offset: .3em;
  text-decoration-color: var(--micro-oro);
}
.micro__enlace-trailer:hover { color: var(--micro-oro); }

.micro__precio {
  margin: var(--e2) 0 0;
  font-family: var(--interfaz);
  font-size: .95rem;
  color: var(--micro-tenue);
}

/* ---- Las secciones ---- */
.micro__seccion { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.micro__seccion .rotulo { color: var(--micro-oro); }

.micro__seccion-titulo {
  margin: var(--e1) 0 var(--e4);
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.1;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  color: var(--blanco);
}

.micro__promesa p {
  margin: 0 0 var(--e3);
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  line-height: 1.55;
  color: var(--micro-texto);
}
.micro__promesa p:last-child { margin-bottom: 0; }

/* ---- El trailer ---- */
.micro__video {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--e3);
  /* `aspect-ratio` reserva el hueco antes de que el vídeo cargue. Sin esto la
   * página da un salto cuando llega, y lo que estabas leyendo se mueve. */
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 3px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

/* ---- El juego ---- */
.micro__juego { background: color-mix(in srgb, var(--micro-oro) 6%, var(--micro-fondo)); }

.micro__juego-texto {
  margin: 0 0 var(--e3);
  line-height: 1.7;
  color: var(--micro-texto);
}

.descifrador {
  margin-top: var(--e4);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid color-mix(in srgb, var(--micro-oro) 35%, transparent);
  border-radius: 3px;
  background: rgba(0, 0, 0, .25);
}

.descifrador__regla {
  margin: 0 0 var(--e3);
  font-family: var(--display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--micro-oro);
}

.descifrador__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e2);
}

.descifrador__etiqueta {
  font-family: var(--interfaz);
  font-size: .9rem;
  color: var(--micro-tenue);
}
.descifrador__rango { display: block; font-size: .8rem; opacity: .8; }

.descifrador__campo {
  /* 3rem de alto: por debajo de eso, un dedo falla en el móvil. */
  min-height: 3rem;
  width: 8rem;
  padding: 0 var(--e2);
  font-family: var(--interfaz);
  font-size: 1.1rem;
  color: var(--micro-texto);
  background: rgba(0, 0, 0, .4);
  border: 1px solid color-mix(in srgb, var(--micro-oro) 40%, transparent);
  border-radius: 2px;
}
.descifrador__campo:focus-visible {
  outline: 2px solid var(--micro-oro);
  outline-offset: 2px;
}

.descifrador__salida {
  /* Alto reservado aunque esté vacía: si no, el bloque crece al escribir la
   * primera cifra y todo lo de abajo pega un salto. */
  min-height: 2.5rem;
  margin: var(--e3) 0 0;
  font-family: var(--interfaz);
  font-size: 1.05rem;
  color: var(--micro-tenue);
}
.descifrador__salida--fuera { color: #e0a898; }
.descifrador__salida--hallada { color: var(--micro-texto); }

.descifrador__letra {
  display: inline-block;
  min-width: 2.2rem;
  margin-left: .35em;
  padding: .1em .35em;
  font-family: var(--display);
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  color: var(--micro-fondo);
  background: var(--micro-oro);
  border-radius: 2px;
}

/* ---- La lámina grande ---- */
.micro__lamina img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.micro__pie-lamina {
  margin: var(--e2) 0 0;
  font-family: var(--interfaz);
  font-size: .9rem;
  text-align: center;
  color: var(--micro-tenue);
}

/* ---- Los capítulos ---- */
.capitulos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.capitulo {
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 3px;
  overflow: hidden;
}

.capitulo__lamina {
  display: block;
  width: 100%;
  height: auto;
  /* Cuadradas todas: las láminas del libro lo son, y fijarlo evita que una que
   * venga con otra proporción descuadre su fila entera. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.capitulo__texto { padding: var(--e3); }

.capitulo__numero {
  font-family: var(--interfaz);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--micro-oro);
}

.capitulo__titulo {
  margin: var(--e1) 0 0;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--blanco);
}

.capitulo__verso {
  margin: var(--e2) 0 0;
  font-family: var(--display);
  font-style: italic;
  line-height: 1.5;
  color: var(--micro-tenue);
}

/* ---- La autora ---- */
.micro__autora-reja {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.micro__retrato {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}

.micro__bio p {
  margin: 0 0 var(--e3);
  line-height: 1.75;
  color: var(--micro-texto);
}
/* Los enlaces secos del micrositio van en oro, todos.
 *
 * `.enlace-seco` viene del catálogo, donde el fondo es papel claro: se pinta
 * en tinta oscura con subrayado azul y ahí se lee perfectamente. Dentro del
 * micrositio el fondo es el color del libro —aquí, marrón oscuro— y esa misma
 * tinta da un contraste de **1,13 sobre 4,5 que pide lo accesible**: no es que
 * se vea poco, es que no se ve.
 *
 * La regla estaba puesta solo para `.micro__bio`, así que el primer enlace que
 * se añadió fuera de la biografía —el crédito de las citas de prensa— salió
 * invisible sin que ninguna prueba lo notara. Se mira el contenedor entero
 * para que al siguiente no le pase lo mismo. */
.micro .enlace-seco {
  color: var(--micro-oro);
  border-bottom-color: color-mix(in srgb, var(--micro-oro) 55%, transparent);
}

/* ---- El colofón ---- */
.micro__colofon { background: rgba(0, 0, 0, .2); }
.micro__colofon .colofon dd { color: var(--micro-texto); }
.micro__colofon .colofon dt { color: var(--micro-oro); }

/* ---- El cierre ---- */
.micro__cierre {
  padding: clamp(4rem, 9vw, 7rem) 0;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%,
      color-mix(in srgb, var(--micro-oro) 12%, transparent) 0%,
      transparent 60%),
    var(--micro-fondo);
}

.micro__cierre-frase {
  margin: 0 0 var(--e4);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  line-height: 1.3;
  color: var(--blanco);
}

.micro__aviso,
.micro__nota-autores {
  margin: var(--e3) auto 0;
  max-width: 38rem;
  font-family: var(--interfaz);
  font-size: .85rem;
  line-height: 1.6;
  color: var(--micro-tenue);
}

/* La única mención al servicio en toda la página, y separada del resto por una
 * línea para que se lea como lo que es: una nota al pie, no una oferta. */
.micro__nota-autores {
  margin-top: var(--e5);
  padding-top: var(--e3);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.micro__nota-autores a { color: var(--micro-oro); }

.micro__cierre .compartir { justify-content: center; }

/* ---- Pantallas estrechas ---- */
@media (max-width: 56rem) {
  /* La cubierta pasa arriba y centrada, y se encoge: a una columna, a 22rem
   * ocuparía media pantalla de alto y empujaría el título y el botón de
   * comprar fuera de la vista. */
  .micro__hero-reja,
  .micro__autora-reja { grid-template-columns: 1fr; }

  .micro__cubierta { max-width: 14rem; margin: 0 auto; }
  .micro__hero-texto { text-align: center; }
  .micro__lema { margin-left: auto; margin-right: auto; }
  .micro__acciones { justify-content: center; }
  .micro__retrato { max-width: 16rem; }
  .descifrador__fila { justify-content: center; }
}

/* Quien pide en su sistema que no le muevan las cosas, no se las movemos. */
@media (prefers-reduced-motion: reduce) {
  .micro__cubierta img { transform: none; }
}

/* --- Un trozo del libro --------------------------------------------------
 *
 * Se compone como se compone un libro y no como se compone una web: medida
 * corta, línea generosa, cursiva ninguna. Es la sección donde la página deja
 * de venderse y se pone a leer, y tiene que notarse. */
.micro__fragmento-texto {
  margin: 0;
  border-left: 2px solid var(--micro-oro, currentColor);
  padding-left: 1.4rem;
  font-size: 1.08rem;
  line-height: 1.85;
  max-width: 34em;
}
.micro__fragmento-texto p + p { margin-top: 1.1em; }
.micro__fragmento-pie {
  margin-top: 1rem;
  padding-left: 1.4rem;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
}

/* --- Lo que dijo en otro sitio ------------------------------------------- */
.micro__citas { margin-top: 1.8rem; display: grid; gap: 1.4rem; }
.micro__cita { margin: 0; }
.micro__cita blockquote { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.micro__cita blockquote p { margin: 0; }
.micro__cita blockquote p::before { content: "«"; }
.micro__cita blockquote p::after { content: "»"; }
/* El crédito, más pequeño pero no escondido: es lo que hace que la cita
 * valga, y quien quiera comprobarla tiene que poder verlo. */
/* Sin `opacity`: el crédito ya se distingue por tamaño.
 *
 * Bajar la opacidad de un texto es apagar su contraste sin que el número que
 * pusiste en el CSS lo diga, y aquí se sumaba a un color que ya era ilegible.
 * Si hay que atenuar algo, se atenúa eligiendo el color, que se puede medir. */
.micro__cita figcaption {
  margin-top: .5rem;
  font-size: .8rem;
}
/* El crédito es una frase, no una etiqueta.
 *
 * `.enlace-seco` lleva `white-space: nowrap`, y en su sitio está bien: se usa
 * para rótulos de dos palabras —«Su página», «Ver el catálogo»— que quedarían
 * feos partidos. Pero aquí el texto es «Yudith Izaguirre, entrevista de
 * @marabuzal, PeakD, 04-03-2026», y sin poder partirse pedía 533 px en una
 * pantalla de 375: arrastraba el ancho mínimo de toda la columna y **la
 * página entera se desplazaba de lado**.
 *
 * Se anula aquí y no en `.enlace-seco`, que la usan las veintisiete páginas
 * del catálogo y ahí el `nowrap` es el comportamiento correcto. */
.micro__cita figcaption a {
  white-space: normal;
  /* Y si algún día el medio se llama algo larguísimo y sin espacios, que
     parta por donde pueda antes que volver a sacar la página de su sitio. */
  overflow-wrap: anywhere;
}
/* Los hijos de una rejilla no bajan de su ancho mínimo si no se les dice.
 * Es la otra mitad del mismo fallo y cuesta una línea. */
.micro__citas > * { min-width: 0; }

/* --- Antes de decidir ----------------------------------------------------
 *
 * El reparo en grande y la respuesta debajo, no al revés: quien llega aquí
 * está buscando *su* duda entre las demás, y la encuentra leyendo solo los
 * títulos. */
.micro__reparos-lista { margin: 1.5rem 0 0; display: grid; gap: 1.8rem; }
.micro__reparos-lista dt {
  font-family: var(--display, inherit);
  font-size: 1.15rem;
  line-height: 1.35;
  margin-bottom: .5rem;
}
.micro__reparos-lista dd { margin: 0; line-height: 1.7; opacity: .88; }
.micro__reparos-lista dd p + p { margin-top: .8em; }

@media (max-width: 34rem) {
  .micro__fragmento-texto { padding-left: 1rem; font-size: 1rem; }
  .micro__fragmento-pie { padding-left: 1rem; }
}

/* --- Quién habita el libro -----------------------------------------------
 *
 * Una tira que se arrastra con el dedo, no una pila.
 *
 * Las tarjetas son 9:16: están hechas para un teléfono a pantalla completa, y
 * una debajo de otra dejarían la página imposible de recorrer —cinco
 * tarjetas serían seis mil píxeles de scroll—. En horizontal se miran como se
 * miran, y el que no quiera mirarlas sigue bajando. */
.micro__tira {
  display: flex;
  gap: 1.2rem;
  margin: 1.8rem 0 0;
  padding: 0 max(1.5rem, calc((100% - var(--ancho, 68rem)) / 2)) 1rem;
  list-style: none;
  overflow-x: auto;
  /* Cada tarjeta se queda encajada al soltar, en vez de a medio camino. */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.micro__ficha-personaje {
  flex: 0 0 auto;
  width: min(16rem, 62vw);
  scroll-snap-align: center;
}
.micro__ficha-personaje img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}
/* La frase, otra vez y en texto de verdad.
 *
 * En la tarjeta está dibujada: no la lee un lector de pantalla, no la indexa
 * ningún buscador y no se puede copiar. Aquí se ve pequeña porque ya se ha
 * leído arriba, pero existe. */
.micro__personaje-frase {
  margin: .7rem 0 0;
  font-size: .9rem;
  line-height: 1.5;
  opacity: .9;
}
.micro__personaje-frase::before { content: "«"; }
.micro__personaje-frase::after { content: "»"; }
.micro__personaje-donde {
  margin: .3rem 0 0;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .6;
}

@media (prefers-reduced-motion: reduce) {
  .micro__tira { scroll-behavior: auto; }
}