/* =========================================================================
   litex.es — «El pueblo que vuelve en agosto»
   Estilos exclusivos de el-pueblo-que-vuelve-en-agosto.html.
   Depende de style.css: aquí sólo va lo específico de esta página.
   ========================================================================= */

/* --- 0. Ajustes heredados ----------------------------------------------- */

/* Nota: el contraste de `.meta` y el plegado de la cabecera en pantallas
   estrechas se corrigieron en style.css, porque afectan a todo el sitio. */

/* style.css anula el aire superior de dos .section consecutivas. Cuando
   cambia el color de fondo hay que devolvérselo para que el bloque respire. */
.section.section--top { padding-top: var(--section); }

/* Botones nativos: el navegador les pone radio y tipografía propias. */
button.btn {
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  line-height: 1.3;
}

/* --- 1. Rejilla editorial de apoyo -------------------------------------- */

/* Rótulo a la izquierda, contenido a la derecha. */
.rail { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); }

.rail__head { align-self: start; }
.rail__head h2 { margin-bottom: 0; }
.rail__body > :first-child { margin-top: 0; }

@media (min-width: 56rem) {
  .rail {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    column-gap: clamp(2rem, 1rem + 4vw, 5rem);
  }
}

/* --- 2. Portada del libro (hero) ---------------------------------------- */

.book-hero {
  padding-top: clamp(2.25rem, 1.25rem + 4vw, 5rem);
  padding-bottom: var(--section);
}

.book-hero__inner {
  display: grid;
  gap: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
  align-items: center;
}

@media (min-width: 62rem) {
  .book-hero__inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    column-gap: clamp(3rem, 1rem + 5vw, 6rem);
  }
}

/* min-width: 0 evita que un título largo desborde la celda de la rejilla */
.book-hero__text { min-width: 0; }

/* En móvil la cubierta va delante; en pantalla ancha vuelve a su columna. */
.book-hero__cover { order: -1; margin: 0; }

.book-hero__cover img {
  width: 100%;
  max-width: 15rem;
  margin-inline: auto;
  border: 1px solid rgba(23, 26, 22, .10);
  box-shadow: 0 .7rem 1.9rem -.9rem rgba(23, 26, 22, .35);
}

@media (min-width: 40rem) {
  .book-hero__cover img { max-width: 20rem; }
}

@media (min-width: 62rem) {
  .book-hero__cover { order: 0; }
  .book-hero__cover img { max-width: 24rem; }
}

.book-hero__subtitle {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--t-h3);
  line-height: 1.32;
  color: var(--ink-soft);
  margin: 1.15rem 0 0;
}

.book-hero__author {
  font-family: var(--sans);
  font-size: var(--t-sm);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 1.35rem 0 0;
}

.book-hero__lede { margin-top: 1.9rem; }

.book-hero__meta { margin-top: 1.1rem; }

/* --- 3. Zona de compra --------------------------------------------------- */

.buy {
  max-width: 34rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}

.buy__status {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-sm);
  letter-spacing: .05em;
  color: var(--ink);
}

/* Punto sanguina, único ornamento del bloque */
.buy__status::before {
  content: "";
  flex: 0 0 auto;
  width: .45rem;
  height: .45rem;
  background: var(--sanguina);
  border-radius: 50%;
}

.buy .btn-row { margin-top: 1.35rem; align-items: center; }

.buy__note { margin-top: 1.4rem; max-width: 30rem; }

/* El botón de venta todavía no está activo. .btn--accent le da fondo sanguina
   y .btn[aria-disabled] sólo cambia texto y filete, así que el contraste se
   quedaría corto: lo vaciamos hasta que exista un enlace real de compra. */
.btn--accent[aria-disabled="true"] {
  background: transparent;
  border-color: var(--rule);
  color: var(--ink-mute);
}

@media (max-width: 26rem) {
  .buy .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding-inline: 1rem;
  }
  .buy .link { align-self: flex-start; }
}

/* --- 4. Sinopsis --------------------------------------------------------- */

.synopsis { margin-inline: auto; }

.synopsis p {
  font-size: var(--t-lede);
  line-height: 1.58;
  color: var(--ink-soft);
  text-wrap: balance;
}

/* «Pero en agosto todo cambia.» — el giro de la contracubierta, aislado */
.synopsis .synopsis__turn {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.55rem, 1.1rem + 2vw, 2.35rem);
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--sanguina);
  margin-block: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
}

/* --- 5. Fragmento -------------------------------------------------------- */

.section--cover { background: var(--paper-cover); }

/* Sobre el crema de cubierta los metadatos necesitan algo más de peso. */
.section--cover .meta { color: var(--ink-soft); }

.fragment {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  align-items: end;
}

@media (min-width: 62rem) {
  .fragment {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(2.5rem, 1rem + 4vw, 5rem);
  }
}

.fragment__figure { margin: 0; max-width: 38rem; }

.fragment__figure blockquote {
  margin: 0;
  font-size: var(--t-lede);
  line-height: 1.72;
  color: var(--ink);
}

.fragment__figure figcaption {
  margin-top: 1.9rem;
  font-family: var(--sans);
  font-size: var(--t-xs);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.fragment__figure cite { font-style: normal; }

/* Lámina de la silla de enea. El JPG trae el crema #EEE1D0 opaco, idéntico a
   --paper-cover: sólo funde sin costura dentro de un fondo de ese color. */
.plate {
  margin: 0 auto;
  max-width: 12.5rem;
  background: var(--paper-cover);
}

.plate img { width: 100%; }

.plate figcaption {
  margin-top: .9rem;
  max-width: 15rem;
  font-size: var(--t-xs);
  line-height: 1.5;
  text-align: center;
}

@media (min-width: 62rem) {
  .plate { margin: 0; }
  .plate figcaption { text-align: left; }
}

/* --- 6. Índice ----------------------------------------------------------- */

.toc {
  list-style: none;
  margin: clamp(1.75rem, 1.25rem + 2vw, 2.75rem) 0 0;
  padding: 0;
  counter-reset: capitulo;
}

@media (min-width: 48rem) {
  .toc { columns: 2; column-gap: clamp(2.5rem, 1rem + 5vw, 5rem); }
}

.toc > li {
  counter-increment: capitulo;
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--rule-soft);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.toc > li::before {
  content: counter(capitulo, decimal-leading-zero);
  flex: 0 0 2rem;
  font-family: var(--sans);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: var(--sanguina);
}

/* Fuera de la numeración */
.toc__extra {
  margin: 1.5rem 0 0;
  padding-left: 3.1rem;
  font-style: italic;
  color: var(--ink-soft);
}

/* --- 7. Ficha técnica ---------------------------------------------------- */

.specs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  border-top: 1px solid var(--rule-soft);
}

.specs dt {
  padding-top: .95rem;
  font-family: var(--sans);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.specs dd {
  margin: 0;
  padding-bottom: .95rem;
  border-bottom: 1px solid var(--rule-soft);
}

/* En pantalla ancha, término y definición comparten fila. Sin column-gap:
   la separación la da el padding del <dt>, así los filetes son continuos. */
@media (min-width: 40rem) {
  .specs { grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); }
  .specs dt {
    padding-block: .95rem;
    padding-right: clamp(1.5rem, 1rem + 3vw, 3rem);
    border-bottom: 1px solid var(--rule-soft);
  }
  .specs dd { padding-block: .95rem; }
}

.specs__note { margin-top: 1.5rem; }

/* --- 8. Presentaciones --------------------------------------------------- */

.dates__list {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
}

.dates__list li {
  padding: .8rem 0;
  border-top: 1px solid var(--rule);
}

.dates__list li strong {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sanguina);
  margin-bottom: .3rem;
}

/* --- 9. Cierre sobre fondo oscuro --------------------------------------- */

.section--dark .lede { color: #C9C2B4; }
.section--dark .meta { color: #A29A8A; }

.section--dark .link {
  color: var(--paper);
  border-bottom-color: rgba(247, 242, 232, .32);
}
.section--dark .link:hover { color: #D9A385; border-bottom-color: #D9A385; }

.section--dark .flourish { background: #C08A6B; opacity: 1; }

.closing__mail {
  font-family: var(--display);
  font-size: clamp(1.4rem, 1rem + 1.8vw, 2.25rem);
  line-height: 1.2;
  margin: 1.6rem 0 2.25rem;
  overflow-wrap: anywhere;
}

.closing__mail a {
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 242, 232, .3);
  padding-bottom: .15rem;
}
.closing__mail a:hover { border-bottom-color: #D9A385; }

/* --- 10. Impresión ------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .buy .btn-row { display: none; }
  .section--dark { background: #fff; color: #000; }
  .section--cover, .section--warm { background: #fff; }
  .toc { columns: 1; }
}