/* Páginas de las paradas (010 en adelante): componentes de lectura y composición por página. */

/* ── Componentes de lectura ── */
/* Título de página narrativa: Playfair 20 pt, interlínea de 2 líneas de base */
.t-pagetitle { font-family: var(--font-display); font-size: var(--page-title-size); line-height: calc(var(--baseline) * 2); }
/* Texto de Darwin en bloque: alineado a la izquierda, con corte de palabras */
/* Cuerpo de texto: justificado con la última línea a la izquierda. El corte de palabras usa los guiones
   opcionales que inserta el build (tools/silabas.mjs). Sin viudas ni huérfanas al pasar de columna. */
.t-darwin.body, .p006__text, .p007__text {
  text-align: justify;
  text-align-last: left;
  hyphens: manual;
  text-wrap: pretty;
  widows: 2;
  orphans: 2;
}
.t-darwin.body p { widows: 2; orphans: 2; }
.t-darwin--2col { column-count: 2; column-gap: var(--column-gap); column-fill: balance; align-self: start; /* alto libre: las dos columnas se equilibran solas */ }
/* Corte editorial […] : visible, en una tinta más clara */
.cut { color: var(--blue-60); }
/* Topónimos en mapas de tramo */
.map__place { font-family: var(--font-ui); font-size: 2.29px; font-weight: 500; fill: var(--blue-deep); }        /* 6,5 pt */
.map__place--water { font-style: italic; font-weight: 400; }
.map__labelname { font-weight: 500; }
.map__scale { fill: none; stroke: var(--blue-deep); stroke-width: 0.2; }
/* Imagen pendiente a sangre */
.placeholder--dark { background: var(--blue-10); }

/* ── 010 · Apertura – Bahía del Buen Suceso ── */
/* Franja superior: imagen a sangre hasta la línea 17. Franja inferior: título y entrada narrativa. */
.p010__image { position: absolute; top: 0; left: 0; width: 100%; height: calc(var(--margin-top) + var(--baseline) * 17); object-fit: cover; display: block; }
.p010__meta { grid-column: 1 / 4; grid-row: 19; }
.p010__title { grid-column: 1 / 4; grid-row: 20 / 26; }
.p010__text { grid-column: 4 / 7; grid-row: 20 / 29; }

/* ── 011 · Llegar a un paisaje distinto ── */
.p011__map { grid-column: 1 / 7; grid-row: 1 / 18; }
.p011__title { grid-column: 1 / 3; grid-row: 20 / 26; }
.p011__text { grid-column: 3 / 7; grid-row: 20 / 29; }

/* ── 012 · Encuentro y entrada al bosque ── */
/* La imagen ocupa las columnas 4–6 a sangre y sigue en 013 a través del lomo. */
.p012__image { position: absolute; top: 0; bottom: 0; right: 0; width: calc(var(--margin-inner) + (var(--page-width) - var(--margin-inner) - var(--margin-outer) + var(--column-gap)) / 2 - var(--column-gap)); border-right: 0; }
.p012__title { grid-column: 1 / 4; grid-row: 2 / 6; }
.p012__text { grid-column: 1 / 4; grid-row: 7 / 17; }
.p012__note-e { grid-column: 1 / 4; grid-row: 18 / 24; }
.p012__note-ed { grid-column: 1 / 4; grid-row: 25 / 28; }

/* ── 013 · Penetrar el bosque ── */
.p013__image { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--margin-inner) + (var(--page-width) - var(--margin-inner) - var(--margin-outer) + var(--column-gap)) / 3 - var(--column-gap)); border-left: 0; }
.p013__title { grid-column: 3 / 7; grid-row: 2 / 4; }
.p013__text { grid-column: 3 / 7; grid-row: 7 / 22; }