/* Hallmark · component: navegación entre capítulos · genre: playful · theme: fanzine (tokens de lmq-fanzine-chrome.css)
 * states: default · hover · focus · active
 * contrast: pass (tinta sobre cartulina)
 */

body .lmq-cap__nav { margin: var(--fz-space-xl, 48px) 0 0; }
body .lmq-cap__nav-lista {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fz-space-md, 24px);
	margin: 0; padding: 0; list-style: none;
}
body .lmq-cap__nav-item { min-width: 0; margin: 0; padding: 0; }
body .lmq-cap__nav-item--siguiente { grid-column: 2; }

body .lmq-cap__nav-enlace {
	display: flex; flex-direction: column; gap: var(--fz-space-2xs, 8px); height: 100%;
	padding: var(--fz-space-sm, 16px) var(--fz-space-md, 24px);
	color: var(--fz-ink) !important; background: var(--fz-card); text-decoration: none !important;
	border: var(--fz-rule, 2px) solid var(--fz-ink); border-radius: var(--fz-radius, 4px);
	box-shadow: var(--fz-shadow-hard, 4px 4px 0 var(--fz-ink));
	transition: transform var(--fz-dur, 180ms) var(--fz-ease, ease), box-shadow var(--fz-dur, 180ms) var(--fz-ease, ease);
}
body .lmq-cap__nav-item--siguiente .lmq-cap__nav-enlace { align-items: flex-end; text-align: right; }

body .lmq-cap__nav-etiqueta {
	font-family: var(--fz-font-display); font-weight: 800; font-size: var(--fz-text-md, 18px);
	line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap;
}
body .lmq-cap__nav-titulo {
	min-width: 0; font-family: var(--fz-font-body); font-weight: 600; font-size: var(--fz-text-md, 18px);
	line-height: 1.35; overflow-wrap: anywhere;
}
body .lmq-cap__nav-num {
	display: inline-block; margin-right: var(--fz-space-3xs, 4px); padding: 0 var(--fz-space-2xs, 8px);
	font-family: var(--fz-font-display); font-weight: 800; letter-spacing: 0.03em;
	background: var(--fz-seccion, var(--fz-butano)); border: var(--fz-rule, 2px) solid var(--fz-ink); border-radius: var(--fz-radius, 4px);
}

@media (hover: hover) and (pointer: fine) {
	body .lmq-cap__nav-enlace:hover { transform: translate(-3px, -3px); box-shadow: var(--fz-shadow-hard-lift, 7px 7px 0 var(--fz-ink)); }
}
body .lmq-cap__nav-enlace:focus-visible { outline: 3px solid var(--fz-accent-2); outline-offset: 4px; }
body .lmq-cap__nav-enlace:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--fz-ink); }

@media (max-width: 600px) {
	body .lmq-cap__nav-lista { grid-template-columns: minmax(0, 1fr); gap: var(--fz-space-sm, 16px); }
	body .lmq-cap__nav-item--siguiente { grid-column: auto; }
	body .lmq-cap__nav-enlace { padding: var(--fz-space-sm, 16px); }
}

@media (prefers-reduced-motion: reduce) {
	body .lmq-cap__nav-enlace { transition: none; }
}

/* ── Transcripción del capítulo ──────────────────────────────── */
body .lmq-trans {
	margin: var(--fz-space-xl, 48px) 0 0;
	padding: var(--fz-space-md, 24px);
	background: var(--fz-card);
	border: var(--fz-rule, 2px) solid var(--fz-ink);
	border-radius: var(--fz-radius, 4px);
	box-shadow: 8px 8px 0 var(--fz-seccion, var(--fz-butano));
}
body .lmq-trans__titulo {
	margin: 0 0 var(--fz-space-3xs, 4px);
	font-family: var(--fz-font-display); font-weight: 800; font-size: var(--fz-text-xl, 28px);
	line-height: 1; letter-spacing: 0.02em; text-transform: uppercase;
}
body .lmq-trans__nota { margin: 0 0 var(--fz-space-sm, 16px); font-size: var(--fz-text-sm, 14px); color: var(--fz-ink-2); }

body .lmq-trans__abrir {
	display: inline-flex; align-items: center; gap: var(--fz-space-2xs, 8px);
	padding: var(--fz-space-2xs, 8px) var(--fz-space-sm, 16px);
	font-family: var(--fz-font-display); font-weight: 800; font-size: var(--fz-text-lg, 22px);
	letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; list-style: none;
	color: var(--fz-ink); background: var(--fz-lima);
	border: var(--fz-rule, 2px) solid var(--fz-ink); border-radius: var(--fz-radius, 4px);
	box-shadow: var(--fz-shadow-hard, 4px 4px 0 var(--fz-ink));
}
body .lmq-trans__abrir::-webkit-details-marker { display: none; }
body .lmq-trans__abrir::after { content: "▾"; font-size: 16px; }
body .lmq-trans__caja[open] .lmq-trans__abrir { background: var(--fz-mostaza); }
body .lmq-trans__caja[open] .lmq-trans__abrir::after { content: "▴"; }
body .lmq-trans__abrir:focus-visible { outline: 3px solid var(--fz-accent-2); outline-offset: 4px; }
body .lmq-trans__palabras { font-size: var(--fz-text-sm, 14px); letter-spacing: 0; text-transform: none; font-weight: 600; }

/* enlace para saltarse el texto (útil con teclado): se ve al enfocarlo */
body .lmq-trans__saltar { margin: var(--fz-space-sm, 16px) 0 0; font-size: var(--fz-text-sm, 14px); }
body .lmq-trans__saltar a {
	position: absolute; left: -9999px;
	color: var(--fz-ink) !important; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--fz-accent-2);
}
body .lmq-trans__saltar a:focus-visible {
	position: static; display: inline-block; padding: 4px 10px;
	background: var(--fz-lima); border: var(--fz-rule, 2px) solid var(--fz-ink); border-radius: var(--fz-radius, 4px);
	outline: 3px solid var(--fz-accent-2); outline-offset: 3px;
}
body .lmq-trans__fin { margin: 0; height: 0; }

body .lmq-trans__texto { margin-top: var(--fz-space-md, 24px); }
body .lmq-trans__p { margin: 0 0 var(--fz-space-sm, 16px); font-size: 17px; line-height: 1.65; color: var(--fz-ink); }
body .lmq-trans__p.is-buscado { background: var(--fz-mostaza); padding: var(--fz-space-2xs, 8px); border-radius: var(--fz-radius, 4px); }
body .lmq-trans__p.is-sonando { background: var(--fz-lima); padding: var(--fz-space-2xs, 8px); border-radius: var(--fz-radius, 4px); }
body .lmq-trans__p.is-sonando .lmq-trans__t { background: var(--fz-ink); color: var(--fz-paper); }

@media print {
	body .lmq-trans__abrir, body .lmq-trans__saltar { display: none; }
	body .lmq-trans { box-shadow: none; }
	body .lmq-trans__t { background: none; border: 0; padding: 0; }
}
body .lmq-trans__t {
	display: inline-block; margin: 0 var(--fz-space-2xs, 8px) 0 0; padding: 0 var(--fz-space-2xs, 8px);
	font-family: var(--fz-font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.03em; line-height: 1.5;
	color: var(--fz-ink); background: var(--fz-accent);
	border: var(--fz-rule, 2px) solid var(--fz-ink); border-radius: var(--fz-radius, 4px);
	cursor: pointer; vertical-align: 1px;
}
@media (hover: hover) and (pointer: fine) { body .lmq-trans__t:hover { background: var(--fz-lima); } }
body .lmq-trans__t:focus-visible { outline: 3px solid var(--fz-accent-2); outline-offset: 2px; }

@media (max-width: 600px) {
	body .lmq-trans { padding: var(--fz-space-sm, 16px); }
	body .lmq-trans__abrir { font-size: var(--fz-text-md, 18px); }
	body .lmq-trans__p { font-size: 16px; }
}