/* Composición de cada página sobre la retícula. Un bloque por página, en orden. */

/* ── 002 · Portadilla ─────────────────────────────────────────── */
.p002__title { grid-column: 1 / 6; grid-row: 8 / 14; }
.p002__route { grid-column: 1 / -1; grid-row: 21 / 23; width: 100%; height: 100%; display: block; overflow: visible; }
.p002__route path { fill: none; stroke: var(--blue-deep); stroke-width: 0.25; }
.p002__route circle { fill: var(--blue-deep); }
.p002__from { grid-column: 1 / 2; grid-row: 23; }
.p002__to { grid-column: 6 / 7; grid-row: 23; text-align: right; }

/* ── 003 · Título y datos de la edición ───────────────────────── */
/* Título y subtítulo comparten línea de base con las dos líneas del título de 001. */
.p003__mark { grid-column: 6 / 7; grid-row: 1 / 3; justify-self: end; width: calc(var(--baseline) * 2); height: calc(var(--baseline) * 2); }
.p003__mark circle, .p003__mark path { fill: none; stroke: var(--blue-deep); stroke-width: 0.25; }
.p003__mark .p003__mark-dot { fill: var(--blue-deep); stroke: none; }
.p003__author { grid-column: 1 / 7; grid-row: 6; }
.p003__title { grid-column: 1 / 7; grid-row: 8 / 11; --size: var(--title-size); }
.p003__subtitle { grid-column: 1 / 7; grid-row: 11 / 14; --size: var(--subtitle-size); font-style: italic; }
.p003__edition, .p003__project { grid-row: 21 / 25; border-top: var(--rule-fine) solid var(--blue-deep); padding-top: calc(var(--baseline) - var(--rule-fine)); }
.p003__edition { grid-column: 1 / 3; }  /* portadilla alineada al margen izquierdo (14 oct. 2026) */
.p003__project { grid-column: 3 / 5; }

/* ── 006 · Introducción – El recorte argentino ────────────────── */
.p006__map { position: absolute; top: 0; height: 100%; right: 13mm; opacity: var(--tenue); }
.p006__kicker { grid-column: 1 / 4; grid-row: 6; }
.p006__title { grid-column: 1 / 4; grid-row: 8 / 11; --size: var(--title-size); }
.p006__text { grid-column: 1 / 4; grid-row: 12 / 24; }

/* ── 007 · Introducción – Qué va a encontrar el lector ────────── */
.p007__kicker { grid-column: 1 / 4; grid-row: 6; }
.p007__title { grid-column: 1 / 7; grid-row: 8 / 11; --size: var(--title-size); }
.p007__text { grid-column: 1 / 5; grid-row: 12 / 19; text-wrap: pretty; }
/* Tira de fragmentos: una pieza por columna, 7 líneas de alto, rótulo en la última línea de la caja */
.p007__mosaic { grid-column: 1 / 7; grid-row: 20 / 29; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
.p007__mosaic .tile { margin: 0; grid-row: span 9; display: grid; grid-template-rows: subgrid; }
.p007__mosaic .tile .foto { grid-row: span 7; outline: var(--rule-fine) solid var(--blue-deep); outline-offset: calc(var(--rule-fine) * -1); }
.p007__mosaic .tile figcaption { grid-row: 9; align-self: end; }
.tile__fill { fill: var(--paper); }
.tile__line { fill: none; stroke: var(--paper); stroke-width: 0.45; stroke-linecap: round; }
.tile__line--bold { stroke-width: 0.9; }
.tile__cut { fill: none; stroke: var(--blue-deep); stroke-width: 0.4; stroke-linecap: round; }

/* ── 004 · Cómo leer el libro I ───────────────────────────────── */
/* Página densa: el título sube a las líneas 2–4. Seis tarjetas de 2 columnas × 9 líneas. */
.p004__title { grid-column: 1 / 7; grid-row: 2 / 5; --size: var(--title-size); }
.p004__key { grid-column: 1 / 7; grid-row: 7 / 25; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
.key-card { grid-column: span 2; grid-row: span 9; display: grid; grid-template-rows: subgrid; background: linear-gradient(var(--blue-deep), var(--blue-deep)) top / 100% var(--rule-fine) no-repeat; }
.key-sample { grid-row: 2 / 5; }
.key-sample--record { display: flex; gap: 2.5mm; }
.key-card h2 { grid-row: 5; }
.key-card > p { grid-row: 6 / 9; }
.miniroute { display: block; width: 100%; height: calc(var(--baseline) * 2); }

/* ── 005 · Cómo leer el libro II ──────────────────────────────── */
.p005__title { grid-column: 1 / 7; grid-row: 2 / 5; --size: var(--title-size); }
.p005__pieces { grid-column: 1 / 7; grid-row: 7 / 20; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
.piece { grid-column: span 2; grid-row: span 13; display: grid; grid-template-rows: subgrid; background: linear-gradient(var(--blue-deep), var(--blue-deep)) top / 100% var(--rule-fine) no-repeat; }
.piece svg { grid-row: 2 / 9; width: 100%; height: 100%; display: block; }
.piece .foto { grid-row: 2 / 9; background-size: contain; background-position: left bottom; }
.piece h2 { grid-row: 10; }
.piece > p { grid-row: 11 / 14; }
.p005__rule { grid-column: 1 / 7; grid-row: 21; align-self: start; margin: 0; border: 0; border-top: var(--rule-fine) solid var(--blue-deep); }
.p005__shared { grid-column: 1 / 4; grid-row: 22 / 28; text-wrap: pretty; }
.p005__qr { grid-column: 6 / 7; grid-row: 22 / 28; }