/* Tapa, lomo y contratapa. Mismos valores que el interior (tokens.css).
   Este archivo lo usan el desplegado (tapa.html) y el libro (index.html): solo reglas de las piezas. */
:root { --spine: 7mm; /* provisorio: depende del papel */ --line: var(--baseline); }
.back, .front, .spine { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.back *, .front *, .spine * { box-sizing: border-box; }
.back p, .front p, .front h1, .spine p { margin: 0; font-weight: 400; }
.back, .front { position: relative; width: var(--page-width); height: var(--page-height); flex: none; overflow: hidden; box-sizing: border-box; color: var(--blue-deep); }

/* Recorrido: la misma línea de 15 marcas de la portadilla */
.route { display: block; overflow: visible; }
.route path { fill: none; stroke: currentColor; stroke-width: 0.25; vector-effect: non-scaling-stroke; }
.route circle { fill: currentColor; }

/* ── Contratapa: papel ── */
.back { background: var(--paper); display: grid; padding: var(--margin-top) var(--margin-inner) var(--margin-bottom) var(--margin-outer);
  grid-template-columns: repeat(6, 1fr); column-gap: var(--column-gap); grid-template-rows: repeat(28, var(--line)); }
.back__quote { grid-column: 1 / 5; grid-row: 2 / 6; font-family: var(--font-display); font-size: 22pt; line-height: calc(var(--line) * 2); letter-spacing: -0.005em; }
.back__source { grid-column: 1 / 5; grid-row: 10; font-family: var(--font-ui); font-size: var(--meta-size); line-height: var(--line); }
.tag { display: inline-block; border: var(--rule-fine) solid currentColor; font-weight: 600; font-size: 5.5pt; line-height: 1; padding: 0.45mm 0.8mm; margin-right: 1.4mm; vertical-align: 0.2mm; }
.back__text { grid-column: 1 / 4; grid-row: 9 / 18; font-family: var(--font-reading); font-size: var(--body-size); line-height: var(--line); text-align: justify; text-align-last: left; hyphens: auto; }
.back__plate { grid-column: 4 / 7; grid-row: 6 / 21; background: url(../assets/images/tapa-megatherium.jpg) center / contain no-repeat; }
.route--back { grid-column: 1 / 6; grid-row: 22 / 24; width: 100%; height: 100%; }
.back__stops { grid-column: 1 / 5; grid-row: 24; font-family: var(--font-ui); font-size: var(--meta-small-size); line-height: var(--line); }
.back__credit { grid-row: 26 / 29; font-family: var(--font-ui); font-size: var(--meta-small-size); line-height: var(--data-leading); border-top: var(--rule-fine) solid currentColor; padding-top: 1.2mm; }
.back__credit--a { grid-column: 1 / 3; }
.back__credit--b { grid-column: 3 / 5; }
.back__qr { position: absolute; right: var(--margin-inner); bottom: var(--margin-bottom); width: 22mm; height: 22mm; background: url(../assets/images/qr-mapa-digital.svg) center / contain no-repeat; }

/* ── Lomo: azul ── */
.spine { width: var(--spine); height: var(--page-height); flex: none; background: var(--blue-deep); color: var(--paper); display: flex; align-items: center; justify-content: center; }
.spine p { writing-mode: vertical-rl; white-space: nowrap; display: flex; gap: 6mm; align-items: baseline; font-size: 7.5pt; line-height: 1; }
.spine b { font-family: var(--font-display); font-weight: 400; font-size: 9pt; }
.spine span { font-family: var(--font-ui); font-size: 6.5pt; letter-spacing: 0.02em; }

/* ── Tapa A: panel azul + imagen a sangre ── */
.front { background: var(--blue-deep); color: var(--paper); }
.front__image { position: absolute; top: 0; bottom: 0; right: 0; width: 102mm; background: url(../assets/images/086-san-julian.jpg?v=2) center / cover no-repeat; }
.front__panel { position: absolute; top: 0; bottom: 0; left: 0; right: 102mm; padding: var(--margin-top) 8mm var(--margin-bottom) var(--margin-inner);
  display: grid; grid-template-rows: repeat(28, var(--line)); }
.front__mark { grid-row: 1 / 3; width: calc(var(--line) * 2); height: calc(var(--line) * 2); }
.front__mark circle, .front__mark path { fill: none; stroke: currentColor; stroke-width: 0.25; }
.front__mark .dot { fill: currentColor; stroke: none; }
.front__author { grid-row: 6; font-family: var(--font-ui); font-size: var(--label-size); line-height: var(--line); letter-spacing: 0.01em; }
.front__title { grid-row: 8 / 14; font-family: var(--font-display); font-size: var(--opening-size); line-height: calc(var(--line) * 3); letter-spacing: -0.01em; white-space: nowrap; }
.front__subtitle { grid-row: 15 / 19; font-family: var(--font-display); font-style: italic; font-size: var(--subtitle-size); line-height: calc(var(--line) * 1.5); }
.route--front { grid-row: 24 / 26; width: 100%; height: 100%; }
.front__range { grid-row: 26; display: flex; justify-content: space-between; font-family: var(--font-ui); font-size: var(--meta-small-size); line-height: var(--line); }

/* ── Tapa B: tipográfica, azul pleno ── */
body[data-v="b"] .front__image { display: none; }
body[data-v="b"] .front__panel { right: 0; padding-right: var(--margin-outer); }
body[data-v="b"] .front__title { font-size: 52pt; line-height: calc(var(--line) * 4.5); grid-row: 8 / 17; }
body[data-v="b"] .front__subtitle { grid-row: 18 / 21; }
body[data-v="b"] .front__subtitle br { display: none; }