/* ============================================================
   carmenleo.com — Portada
   Escritora primero. La sala oscura abre y cierra la página; en
   medio, la página clara: la escena de la semana, los talleres, los
   cuadernos, la biografía. De la escena a la página y vuelta.
   ============================================================ */

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

body { background: var(--sala-900); }

/* El halo de la portada se extiende a todo el ancho; que no provoque
   desplazamiento lateral. (clip, no hidden: no rompe lo pegajoso) */
html, body { overflow-x: clip; }

/* ---------- Piezas comunes ---------- */

.envoltura {
  width: min(100% - 2 * var(--gutter), var(--ancho-contenido));
  margin-inline: auto;
}
.envoltura--lectura { width: min(100% - 2 * var(--gutter), var(--ancho-texto)); }

.bloque {
  position: relative;
  padding-block: clamp(4.5rem, 10vw, 8.5rem);
}

.papel {
  background: var(--papel);
  color: var(--papel-tinta);
}
.papel--hondo { background: var(--papel-hondo); }

/* Grano de papel, apenas perceptible */
.papel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--grano);
  opacity: var(--grano-papel);
  mix-blend-mode: multiply;
}

.antetitulo {
  margin: 0 0 var(--esp-3);
  font-family: var(--fuente-ui);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--interletra-ancha);
  text-transform: uppercase;
  color: var(--luz-tinta);
}
.antetitulo--luz { color: var(--luz); }

.bloque__cabeza { max-width: 40rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }

.bloque__titulo {
  margin: 0 0 var(--esp-4);
  font-family: var(--fuente-display);
  font-weight: 400;
  font-size: var(--t-xl);
  line-height: var(--lh-titulo);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.bloque__entrada {
  margin: 0;
  font-size: var(--t-lg);
  line-height: 1.5;
  font-family: var(--fuente-display);
  font-style: italic;
  color: var(--texto-suave);
}

.papel p { max-width: 38rem; }

/* ---------- Botones: uno de luz por vista, el resto de línea ---------- */

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3) var(--esp-4);
  margin-top: var(--esp-5);
}

.boton {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.8rem 1.5rem;
  font-family: var(--fuente-ui);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 1px solid rgba(244, 239, 230, 0.35);
  border-radius: var(--radio-suave);
  color: var(--hueso);
  transition:
    background-color var(--dur-rapida) var(--curva-suave),
    border-color var(--dur-rapida) var(--curva-suave),
    color var(--dur-rapida) var(--curva-suave);
}
.boton:hover { border-color: var(--luz); color: var(--luz-clara); }

.boton--luz {
  background: var(--luz);
  border-color: var(--luz);
  color: var(--sala-900);
}
.boton--luz:hover { background: var(--luz-clara); border-color: var(--luz-clara); color: var(--sala-900); }

/* Sobre papel: botón de tinta */
.boton--tinta {
  background: var(--papel-tinta);
  border-color: var(--papel-tinta);
  color: var(--papel);
}
.boton--tinta:hover { background: var(--luz-tinta); border-color: var(--luz-tinta); color: var(--papel); }

.enlace-sobrio {
  font-family: var(--fuente-ui);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--subrayado);
  transition: color var(--dur-instante), text-decoration-color var(--dur-instante);
}
.enlace-sobrio:hover { color: var(--enlace-hover); text-decoration-color: currentColor; }

/* ---------- Cabecera ---------- */

.cabecera {
  position: fixed;
  z-index: var(--z-cabecera);
  inset: 0 0 auto 0;
  height: var(--alto-cabecera);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding-inline: var(--gutter);
  color: var(--hueso);
  transition: background-color var(--dur-media) var(--curva-suave), box-shadow var(--dur-media);
}
/* Al bajar, la cabecera se vuelve sólida para seguir leyéndose sobre el papel */
.cabecera.solida {
  background: rgba(10, 9, 7, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(244, 239, 230, 0.08);
}

.cabecera__nombre {
  font-family: var(--fuente-display);
  font-style: italic;
  font-size: 1.35rem;
  white-space: nowrap;
}

.cabecera__nav {
  display: flex;
  gap: clamp(0.9rem, 2.2vw, 2rem);
  font-family: var(--fuente-ui);
  font-size: var(--t-xs);
  letter-spacing: var(--interletra-media);
  text-transform: uppercase;
}
.cabecera__nav a { padding-block: 0.4rem; color: var(--hueso-apagado); transition: color var(--dur-instante); }
.cabecera__nav a:hover { color: var(--luz-clara); }

/* ---------- 1. Portada ---------- */

.portada {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  padding: calc(var(--alto-cabecera) + 1.5rem) var(--gutter) 3rem;
  max-width: 88rem;
  margin-inline: auto;
}
.portada::before {
  content: "";
  position: absolute;
  inset: 0 -50vw;
  z-index: -1;
  background: radial-gradient(ellipse 60% 70% at 70% 45%, var(--sala-700), var(--sala-900) 70%);
}

.portada__nombre {
  margin: 0;
  font-family: var(--fuente-display);
  font-weight: 300;
  font-size: var(--t-3xl);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.portada__lema {
  margin: var(--esp-3) 0 0;
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-xl);
  color: var(--luz-clara);
}

.portada__intro {
  max-width: 34rem;
  margin: var(--esp-5) 0 0;
  font-size: var(--t-md);
  color: var(--hueso-apagado);
}

/* Retrato de autora: fotografía editorial, no pantalla. Blanco y
   negro, con un filo de luz desplazado como un marco de solapa; al
   acercarse, el color vuelve despacio. */
.retrato-autora {
  position: relative;
  margin: 0;
  aspect-ratio: 5 / 6;
}
.retrato-autora::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(clamp(10px, 1.4vw, 18px), clamp(10px, 1.4vw, 18px));
  border: 1px solid var(--luz);
  opacity: 0.55;
  transition: transform var(--dur-lenta) var(--curva);
}
.retrato-autora:hover::before { transform: translate(6px, 6px); }

/* La margarita. La foto nace en blanco y negro; el color brota de
   la flor, se queda en ella como un foco y, al acercarse, se extiende
   a toda la escena. La foto respira y se inclina hacia el cursor. */
@property --color-r {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 13%;
}
.margarita {
  --flor-x: 41%;
  --flor-y: 66%;
  --color-r: 13%;
  --inclina-x: 0deg;
  --inclina-y: 0deg;
  aspect-ratio: 1200 / 1245;
  perspective: 1400px;
  transition: --color-r 2600ms var(--curva-suave);
}
/* Con JS, empieza sin color y florece al cargar (portada.js) */
.js .margarita:not(.florecida) { --color-r: 0.5%; }
.margarita:hover,
.margarita.abierta { --color-r: 160%; transition-duration: 1800ms; }

.margarita__marco {
  position: relative;
  height: 100%;
  overflow: hidden;
  box-shadow: var(--sombra-centro);
  transform: rotateX(var(--inclina-x)) rotateY(var(--inclina-y));
  transition: transform 900ms var(--curva);
  cursor: pointer;
}
.margarita__marco img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: var(--flor-x) var(--flor-y);
  animation: respirar 16s ease-in-out infinite alternate;
}
.margarita__gris { filter: grayscale(1) contrast(1.06) brightness(0.96); }
.margarita__color {
  -webkit-mask-image: radial-gradient(var(--color-r) var(--color-r) at var(--flor-x) var(--flor-y), #000 30%, transparent 100%);
          mask-image: radial-gradient(var(--color-r) var(--color-r) at var(--flor-x) var(--flor-y), #000 30%, transparent 100%);
}
@keyframes respirar { to { transform: scale(1.045); } }

/* Pétalos que se sueltan de la flor (los crea portada.js) */
.petalos {
  position: absolute;
  inset: 0 -50vw;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}
.petalo {
  position: absolute;
  top: 0;
  left: 0;
  width: 11px;
  height: 27px;
  margin: -13px 0 0 -5px;
  border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%;
  background: linear-gradient(180deg, #fffdf6 0%, #f4ecd8 70%, #e9d9a6 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  opacity: 0;
  will-change: transform, opacity;
}

/* Entrada de la portada: emerge, no salta */
.portada__texto > * {
  opacity: 0;
  transform: translateY(14px);
  animation: emerger-bloque var(--dur-emerger) var(--curva) forwards;
}
/* La marca se dibuja y el lema aparece palabra a palabra (tinta.css):
   ellos no entran como bloque */
.portada__texto > .marca,
.portada__texto > .portada__lema { opacity: 1; transform: none; animation: none; }
.portada__texto > .antetitulo      { animation-delay: 300ms; }
.portada__texto > .portada__nombre { animation-delay: 500ms; }
.portada__texto > .portada__intro  { animation-delay: 1900ms; }
.portada__texto > .acciones        { animation-delay: 2200ms; }

@keyframes emerger-bloque { to { opacity: 1; transform: none; } }

/* ---------- 2. La escena de la semana ---------- */

.escena-destacada__titulo {
  margin: 0;
  font-family: var(--fuente-display);
  font-weight: 400;
  font-size: var(--t-2xl);
  line-height: 1.05;
}
.escena-destacada__titulo a { transition: color var(--dur-instante); }
.escena-destacada__titulo a:hover { color: var(--luz-tinta); }

.escena-destacada__fecha {
  margin: var(--esp-3) 0 var(--esp-5);
  font-family: var(--fuente-ui);
  font-size: var(--t-xs);
  letter-spacing: var(--interletra-media);
  text-transform: uppercase;
  color: var(--papel-tinta-suave);
}

.escena-destacada__texto p {
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem);
  line-height: 1.75;
  margin: 0 0 1.2em;
}
/* Letra capital: gesto editorial clásico, marca de libro */
.escena-destacada__texto p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.1em 0 0;
  font-family: var(--fuente-display);
  font-size: 3.6em;
  line-height: 0.8;
  color: var(--luz-tinta);
}

.nota-cadencia {
  margin: var(--esp-5) 0 0;
  font-family: var(--fuente-display);
  font-style: italic;
  color: var(--papel-tinta-suave);
}

/* ---------- 3. Libros ---------- */

.libros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

/* Hueco de proporción fija: las cuatro portadas (de formas distintas)
   se asientan sobre la misma línea de base, como en una estantería. */
.libro__portada {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 3 / 4;
  margin-bottom: var(--esp-4);
}
.libro__portada img {
  /* height:auto es imprescindible: con la altura del atributo HTML, la
     imagen se estiraba a 1300 px y la portada quedaba fuera de la vista */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 2px;
  box-shadow:
    0 1px 2px rgba(33, 29, 24, 0.15),
    0 18px 36px -12px rgba(33, 29, 24, 0.45);
  transition: transform var(--dur-media) var(--curva), box-shadow var(--dur-media) var(--curva);
}
/* El libro como objeto: al acercarse gira sobre su lomo, como cuando
   se saca de la estantería para mirarlo */
.libro__portada { perspective: 1100px; }
.libro__portada img { transform-origin: 0% 50%; }
.libro__portada:hover img,
.libro__portada:focus-visible img {
  transform: rotateY(-24deg) translateX(4px);
  box-shadow:
    inset 6px 0 10px -4px rgba(0, 0, 0, 0.25),
    22px 26px 40px -16px rgba(33, 29, 24, 0.55);
}

.libro__tipo {
  margin: 0 0 var(--esp-2);
  font-family: var(--fuente-ui);
  font-size: var(--t-xs);
  letter-spacing: var(--interletra-media);
  text-transform: uppercase;
  color: var(--luz-tinta);
}
.libro__titulo {
  margin: 0 0 var(--esp-2);
  font-family: var(--fuente-display);
  font-weight: 500;
  font-size: var(--t-lg);
  line-height: 1.15;
}
.libro__gancho {
  margin: 0 0 var(--esp-3);
  font-family: var(--fuente-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--papel-tinta);
}
.libro__sinopsis {
  margin: 0 0 var(--esp-4);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--papel-tinta-suave);
}

/* ---------- 4 y 5. Talleres y Sobre mí ---------- */

.dos-columnas {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
}
.dos-columnas--invertidas { grid-template-columns: 0.85fr 1.15fr; }

.figura { margin: 0; }

/* Foto pegada en el cuaderno: borde de papel, un poco torcida y
   sujeta con un trozo de cinta. Al acercarse se endereza y recupera
   el color. */
.foto-pegada {
  --giro: -2.5deg;
  position: relative;
  margin: 0 auto;
  max-width: 30rem;
  padding: clamp(8px, 1vw, 12px) clamp(8px, 1vw, 12px) clamp(28px, 3.5vw, 44px);
  background: #fffdf8;
  box-shadow: 0 2px 3px rgba(33, 29, 24, 0.1), 0 22px 44px -18px rgba(33, 29, 24, 0.45);
  transform: rotate(var(--giro));
  transition: transform var(--dur-lenta) var(--curva);
}
.foto-pegada--derecha { --giro: 2deg; }
.foto-pegada img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--dur-lenta) var(--curva-suave);
}
.foto-pegada--vertical img { aspect-ratio: 4 / 5; }
/* La cinta */
.foto-pegada::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -14px;
  left: 50%;
  width: 34%;
  height: 28px;
  transform: translateX(-50%) rotate(calc(var(--giro) * -1.4));
  background: rgba(233, 222, 196, 0.72);
  box-shadow: 0 1px 2px rgba(33, 29, 24, 0.12);
  -webkit-mask-image: linear-gradient(90deg, transparent 0 2%, #000 2% 98%, transparent 98%);
          mask-image: linear-gradient(90deg, transparent 0 2%, #000 2% 98%, transparent 98%);
}
.foto-pegada figcaption {
  position: absolute;
  inset: auto 0 clamp(6px, 0.9vw, 12px) 0;
  text-align: center;
  font-family: var(--fuente-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--papel-tinta-suave);
}
.foto-pegada:hover { transform: rotate(0deg); }
.foto-pegada:hover img { filter: grayscale(0.15); }

.cita-destacada {
  margin: 0 0 var(--esp-4);
  font-family: var(--fuente-display);
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--luz-tinta);
}

.datos {
  display: grid;
  gap: var(--esp-2);
  margin: var(--esp-5) 0 0;
  padding: var(--esp-4) 0;
  border-block: 1px solid var(--papel-linea);
  max-width: 34rem;
}
.datos div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--esp-3); }
.datos dt {
  font-family: var(--fuente-ui);
  font-size: var(--t-xs);
  letter-spacing: var(--interletra-media);
  text-transform: uppercase;
  color: var(--papel-tinta-suave);
  padding-top: 0.25em;
}
.datos dd { margin: 0; }

.aval {
  margin-top: var(--esp-5);
  font-size: var(--t-sm);
  color: var(--papel-tinta-suave);
  padding-left: var(--esp-4);
  border-left: 2px solid var(--luz);
}

.cifras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-5);
  margin: var(--esp-5) 0 0;
  padding: var(--esp-4) 0 0;
  list-style: none;
  border-top: 1px solid var(--papel-linea);
}
.cifras li { display: grid; gap: 0.2rem; }
.cifras strong {
  font-family: var(--fuente-display);
  font-weight: 400;
  font-size: var(--t-xl);
  line-height: 1;
  color: var(--luz-tinta);
}
.cifras span {
  font-family: var(--fuente-ui);
  font-size: var(--t-xs);
  letter-spacing: var(--interletra-media);
  text-transform: uppercase;
  color: var(--papel-tinta-suave);
}

/* ---------- Franja de poesía ---------- */
/* Una banda oscura entre papeles: da ritmo a la portada y deja
   que dos versos se lean solos, con todo el aire alrededor. */

.verso-destacado {
  background: radial-gradient(ellipse 70% 80% at 50% 50%, var(--sala-700), var(--sala-900) 75%);
  color: var(--hueso);
  text-align: center;
}
.verso-destacado .envoltura { display: grid; justify-items: center; }
.verso-destacado__cita { margin: var(--esp-3) 0 0; }
.verso-destacado__cita p {
  margin: 0;
  max-width: none;
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.6rem);
  line-height: 1.4;
  color: var(--luz-clara);
  text-wrap: balance;
}
.verso-destacado__fuente {
  margin: var(--esp-4) 0 0;
  font-family: var(--fuente-ui);
  font-size: var(--t-xs);
  letter-spacing: var(--interletra-media);
  text-transform: uppercase;
  color: var(--hueso-tenue);
}
.verso-destacado .acciones { justify-content: center; }

.contacto__temas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-2) var(--esp-4);
  margin: var(--esp-5) 0 0;
  font-family: var(--fuente-ui);
  font-size: var(--t-xs);
  letter-spacing: var(--interletra-media);
  text-transform: uppercase;
}
.contacto__temas a { color: var(--hueso-apagado); border-bottom: 1px solid rgba(217, 177, 102, 0.35); padding-bottom: 2px; }
.contacto__temas a:hover { color: var(--luz-clara); border-color: var(--luz); }

/* Encuentros: la segunda puerta de los talleres, para programadores */
.encuentros {
  margin-top: var(--esp-6);
  padding: var(--esp-4) var(--esp-4) var(--esp-4) var(--esp-4);
  border-left: 2px solid var(--luz-tinta);
  background: rgba(255, 255, 255, 0.35);
  max-width: 38rem;
}
.encuentros__titulo {
  margin: 0 0 var(--esp-2);
  font-family: var(--fuente-display);
  font-weight: 400;
  font-size: var(--t-lg);
}
.encuentros__lista { margin: 0 0 var(--esp-3); padding-left: 1.1rem; }
.encuentros__lista li { margin-bottom: 0.25rem; }

/* Obra: dos puertas, poesía y narrativa, bajo el mismo foco */
.obra .envoltura { display: block; }
.obra__cabeza { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.obra__puertas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.puerta {
  display: grid;
  justify-items: center;
  align-content: start;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid rgba(217, 177, 102, 0.22);
  background: rgba(244, 239, 230, 0.02);
  transition: border-color var(--dur-lenta) var(--curva), background-color var(--dur-lenta) var(--curva), transform var(--dur-lenta) var(--curva);
}
.puerta:hover { border-color: rgba(217, 177, 102, 0.6); background: rgba(217, 177, 102, 0.05); transform: translateY(-4px); }
.puerta__genero {
  margin: 0 0 var(--esp-3);
  font-family: var(--fuente-display);
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--luz);
}
.puerta__titulo {
  margin: var(--esp-3) 0 0;
  font-family: var(--fuente-display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
  line-height: 1.05;
}
.puerta__texto { max-width: 26rem; margin: var(--esp-4) auto var(--esp-5); color: var(--hueso-apagado); }
@media (max-width: 860px) { .obra__puertas { grid-template-columns: 1fr; } }

/* ---------- 7. Contacto ---------- */

.contacto {
  text-align: center;
  background: var(--sala-900);
}
.contacto .envoltura { display: grid; justify-items: center; }
.contacto .bloque__entrada { color: var(--hueso-apagado); margin-inline: auto; max-width: 32rem; }

.contacto__correo {
  margin-top: var(--esp-5);
  font-family: var(--fuente-display);
  font-style: italic;
  font-size: clamp(1.4rem, 1rem + 2.2vw, 2.4rem);
  color: var(--luz-clara);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: rgba(217, 177, 102, 0.4);
  overflow-wrap: anywhere;
  transition: text-decoration-color var(--dur-instante);
}
.contacto__correo:hover { text-decoration-color: var(--luz); }

/* ---------- Pie ---------- */

.pie {
  display: grid;
  justify-items: center;
  gap: var(--esp-3);
  padding: var(--esp-6) var(--gutter) var(--esp-5);
  background: var(--sala-900);
  border-top: 1px solid rgba(244, 239, 230, 0.08);
  text-align: center;
  font-family: var(--fuente-ui);
  font-size: var(--t-xs);
  color: var(--hueso-tenue);
}
.pie__firma { margin: 0; font-family: var(--fuente-display); font-style: italic; font-size: 1.2rem; color: var(--hueso-apagado); }
.pie__firma span { color: var(--hueso-tenue); }
.pie__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-4); letter-spacing: var(--interletra-media); text-transform: uppercase; }
.pie__nav a:hover { color: var(--luz-clara); }
.pie__legal { margin: 0; }

/* ---------- Revelado al leer ---------- */

.js .revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1100ms var(--curva), transform 1100ms var(--curva);
}
.js .revelar.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .revelar { opacity: 1; transform: none; transition: none; }
  .portada__texto > * { opacity: 1; transform: none; animation: none; }
  .margarita, .margarita__marco { transition: none; }
  .margarita__marco { transform: none; }
  .margarita__marco img { animation: none; }
}

/* ============================================================
   Pantallas medianas y estrechas
   ============================================================ */

/* Dos cuadernos: una estantería corta, alineada con el texto */
.libros--dos {
  grid-template-columns: repeat(2, 1fr);
  max-width: 44rem;
}

@media (max-width: 1100px) {
  .libros { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .portada {
    grid-template-columns: 1fr;
    min-height: auto;
    /* En móvil la cabecera ocupa dos renglones (nombre + menú) */
    padding-top: 7.5rem;
  }
  /* Primero el nombre (es la marca), después el retrato */
  .portada__retrato { max-width: 26rem; width: 100%; justify-self: center; }
  .antetitulo { letter-spacing: 0.14em; }

  .dos-columnas,
  .dos-columnas--invertidas { grid-template-columns: 1fr; }
  .dos-columnas--invertidas .figura { order: 2; }


  /* En móvil, la navegación se desliza en horizontal bajo el nombre */
  .cabecera {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding-block: 0.6rem 0.3rem;
    background: rgba(10, 9, 7, 0.92);
    backdrop-filter: blur(8px);
  }
  .cabecera__nav {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 1.25rem;
    padding-right: 2rem;
    /* Fundido al final: indica que el menú sigue y se puede deslizar */
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
    mask-image: linear-gradient(to right, #000 82%, transparent);
  }
  .cabecera__nav::-webkit-scrollbar { display: none; }
  .cabecera__nav a { white-space: nowrap; }
  html { scroll-padding-top: 5.5rem; }
}

@media (max-width: 520px) {
  .libros { grid-template-columns: 1fr; }
  .libro__portada { aspect-ratio: auto; max-width: 16rem; margin-inline: auto; }
  .libro { text-align: left; }
  .datos div { grid-template-columns: 1fr; gap: 0; }
}