/* Mi Sueño Americano — disciplina editorial de la página "libro".
   La columna compartida manda; el único eje secundario es el riel
   numerado del índice. */

.libro-hero {
  padding-bottom: var(--espacio-4);
  background:
    radial-gradient(80% 130% at 12% 100%, rgba(18, 43, 82, .7), transparent 68%),
    radial-gradient(70% 110% at 86% -10%, rgba(228, 198, 91, .1), transparent 62%),
    var(--noche);
}

.libro-hero .pagina-hero__titulo {
  max-width: 8ch;
  margin-bottom: var(--espacio-1);
  font-size: var(--paso-6);
}

.libro-hero .pagina-hero__lema {
  max-width: 30ch;
  text-align: left;
}

/* La presentación conserva sus tres piezas y su orden de lectura. */
.libro-presentacion {
  padding-top: var(--espacio-4);
  padding-bottom: var(--espacio-5);
  background:
    radial-gradient(85% 45% at 50% 38%, rgba(228, 198, 91, .15), transparent 68%),
    linear-gradient(180deg, var(--noche) 0%, var(--noche-2) 100%);
}

.libro-presentacion__composicion {
  display: grid;
  row-gap: var(--espacio-3);
}

.libro-presentacion__encabezado,
.libro-presentacion__cuerpo {
  max-width: var(--medida);
  text-align: left;
}

.libro-presentacion__encabezado .kicker {
  margin-bottom: var(--espacio-2);
}

.libro-presentacion__encabezado .titulo-grande {
  margin-bottom: 0;
  font-size: var(--paso-5);
}

.libro-presentacion__cuerpo {
  color: var(--texto);
}

.libro-presentacion__cuerpo strong {
  color: var(--crema);
}

.libro-presentacion__cuerpo .margen-3 {
  margin-bottom: 0;
}

.libro-presentacion .marco {
  width: min(100%, 20rem);
  margin: var(--espacio-2) 0 var(--espacio-3);
  padding: 0;
  isolation: isolate;
  border-radius: 0;
  background: transparent;
  /* libro.js still owns this hook; this pass intentionally leaves the
     cover static so the masked hero title is the page's single beat. */
  transform: none !important;
}

.libro-presentacion .marco::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -12% -24%;
  background: radial-gradient(ellipse, rgba(228, 198, 91, .24), rgba(18, 43, 82, .3) 46%, transparent 72%);
  filter: blur(var(--espacio-1));
  pointer-events: none;
}

.libro-presentacion .marco::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 18% 8% -4%;
  background: rgba(4, 7, 15, .58);
  filter: blur(var(--espacio-3));
  transform: translateY(var(--espacio-2));
  pointer-events: none;
}

.libro-presentacion .marco img {
  border-radius: var(--radio);
  box-shadow: 0 var(--espacio-3) var(--espacio-4) rgba(4, 7, 15, .78);
}

.libro-presentacion .marco__pie {
  padding-top: var(--espacio-2);
  color: var(--dorado-suave);
  line-height: 1.55;
  text-align: left;
}

/* Índice editorial: sólo los capítulos numerados cuelgan de un riel,
   siempre var(--riel). */
.libro-indice {
  padding-top: var(--espacio-5);
  padding-bottom: var(--espacio-5);
  background:
    radial-gradient(75% 42% at 6% 8%, rgba(18, 43, 82, .48), transparent 70%),
    radial-gradient(55% 38% at 94% 88%, rgba(201, 162, 39, .07), transparent 72%),
    var(--negro);
}

.libro-indice .seccion__encabezado {
  max-width: var(--medida);
  margin: 0 0 var(--espacio-4);
}

.libro-indice .seccion__encabezado .titulo-grande {
  font-size: var(--paso-5);
}

.libro-indice .seccion__encabezado .sub-seccion {
  max-width: 54ch;
  margin-inline: 0;
  text-align: left;
}

.libro-indice .capitulos {
  display: grid;
  row-gap: var(--espacio-4);
  max-width: var(--medida);
  margin: 0;
}

.capitulos__preludio,
.capitulos__nucleo,
.capitulos__cierre {
  min-width: 0;
}

.libro-indice .capitulo {
  align-items: start;
  padding: var(--espacio-3) 0;
  border: 0;
  border-top: 1px solid var(--borde-suave);
  border-radius: 0;
  background: transparent;
}

.libro-indice .capitulo:last-child {
  border-bottom: 1px solid var(--borde-suave);
}

.libro-indice .capitulos__nucleo .capitulo {
  display: grid;
  grid-template-columns: var(--riel) minmax(0, 1fr);
  gap: 0;
}

.libro-indice .capitulo__num {
  min-width: 0;
  padding-top: .08em;
  font-family: var(--fuente-display);
  font-size: var(--paso-5);
  line-height: 1;
  color: var(--dorado-claro);
}

.libro-indice .capitulo h3 {
  margin-bottom: var(--espacio-1);
  color: var(--crema);
  font-size: var(--paso-3);
}

.libro-indice .capitulo p {
  max-width: 54ch;
  color: var(--texto-2);
}

.libro-indice .capitulo--frontmatter {
  display: block;
  padding: var(--espacio-2) 0;
}

.libro-indice .capitulo--frontmatter h3 {
  margin-bottom: calc(var(--espacio-1) / 2);
  font-family: var(--fuente-cuerpo);
  font-size: var(--paso-2);
  font-weight: 800;
}

.libro-indice .capitulo--frontmatter p {
  font-size: var(--paso-1);
  line-height: 1.6;
}

.capitulos__cierre .capitulo--frontmatter {
  border-top-color: var(--borde);
}

.capitulos__cierre .capitulo--frontmatter h3 {
  color: var(--dorado-suave);
}

/* Beneficios como una lectura continua: sin cajas ni nuevos rellenos. */
.libro-incluye {
  padding-top: var(--espacio-5);
  padding-bottom: var(--espacio-4);
  background:
    radial-gradient(85% 55% at 50% 0%, rgba(228, 198, 91, .12), transparent 66%),
    linear-gradient(180deg, var(--noche-2) 0%, var(--noche) 100%);
}

.libro-incluye .seccion__encabezado {
  max-width: var(--medida);
  margin: 0 0 var(--espacio-4);
}

.libro-incluye__lista {
  row-gap: 0;
  max-width: var(--medida);
}

.libro-incluye .tarjeta {
  display: block;
  padding: var(--relleno-tarjeta) 0;
  border: 0;
  border-top: 1px solid var(--borde-suave);
  border-radius: 0;
  background: transparent;
}

.libro-incluye .tarjeta:last-child {
  border-bottom: 1px solid var(--borde-suave);
}

.libro-incluye .tarjeta h3 {
  max-width: 22ch;
  font-size: var(--paso-4);
}

.libro-incluye .tarjeta:nth-child(2) h3 {
  color: var(--dorado-suave);
}

.libro-incluye .tarjeta p {
  max-width: 54ch;
  color: var(--texto);
}

.libro-incluye__nota {
  max-width: var(--medida);
  margin: var(--espacio-4) 0 0;
  padding-top: var(--espacio-2);
  border-top: 1px solid var(--borde-suave);
  color: var(--texto-2);
  font-size: var(--paso-2);
  line-height: 1.65;
  text-align: left;
}

/* El cierre también pertenece a la columna: título, apoyo y acción. */
.libro-cierre {
  padding-top: var(--espacio-4);
  padding-bottom: var(--espacio-4);
  background:
    radial-gradient(55% 100% at 82% 52%, rgba(228, 198, 91, .1), transparent 70%),
    var(--negro);
}

.libro-cierre .cta-suscripcion {
  display: grid;
  justify-items: start;
  max-width: var(--medida);
  margin: 0;
  padding: var(--espacio-3) 0 0;
  border: 0;
  border-top: 1px solid var(--borde);
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.libro-cierre .cta-suscripcion .titulo-grande {
  max-width: 18ch;
}

.libro-cierre .cta-suscripcion .sub-seccion {
  max-width: 48ch;
  margin-inline: 0;
  text-align: left;
}

.libro-presentacion .btn,
.libro-cierre .btn {
  text-align: left;
}

/* libro.js conserva el selector .capitulo; neutralizamos sus entradas
   repetidas sin tocar el JS compartido ni sus hooks. */
.libro-indice .capitulo {
  opacity: 1 !important;
  transform: none !important;
}

@media (min-width: 901px) {
  .libro-hero {
    padding-bottom: var(--espacio-5);
  }

  .libro-presentacion .marco {
    width: min(100%, 25rem);
  }
}

/* La rejilla compartida conserva una sola columna antes del punto de
   composición. Esto mantiene intacta la lectura móvil e intermedia. */
@media (max-width: 1023px) {
  .libro-presentacion__composicion,
  .libro-indice .capitulos,
  .libro-incluye__lista {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  /* Encabezado y lectura comparten siete tramos; la portada ocupa los
     cinco restantes y acompaña ambas filas sin alterar el DOM. */
  .libro-presentacion__encabezado {
    order: 1;
  }

  .libro-presentacion .marco {
    grid-row: span 2;
    order: 2;
    align-self: start;
    justify-self: start;
    margin-top: 0;
  }

  .libro-presentacion__cuerpo {
    order: 3;
  }

  /* Los preliminares orientan desde cuatro tramos mientras el núcleo
     numerado respira en ocho; el cierre cae después de ambos. */
  .libro-indice .capitulos,
  .libro-incluye__lista {
    max-width: none;
  }

}

@media (max-width: 430px) {
  .libro-hero {
    padding-top: calc(4.5rem + var(--espacio-4));
  }

  .libro-presentacion__encabezado .titulo-grande,
  .libro-indice .seccion__encabezado .titulo-grande {
    font-size: var(--paso-5);
  }

  .libro-incluye__nota {
    margin-top: var(--espacio-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .libro-presentacion .marco::after {
    transform: none;
  }
}