/* ==========================================================================
   Cuaderno Josué — hoja de estilos principal
   Capas: reset → variables → base → layout → componentes → utilidades
   ========================================================================== */

@layer reset, variables, base, layout, componentes, utilidades;

/* --------------------------------------------------------------------------
   Fuentes (autoalojadas, OFL)
   -------------------------------------------------------------------------- */

@font-face {
	font-family: "Courier Prime";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/courier-prime-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Courier Prime";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/courier-prime-latin-400-italic.woff2") format("woff2");
}

@font-face {
	font-family: "Courier Prime";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/courier-prime-latin-700-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Special Elite";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/special-elite-latin-400-normal.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   reset
   -------------------------------------------------------------------------- */

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	body,
	h1,
	h2,
	h3,
	h4,
	p,
	figure,
	blockquote,
	ul,
	ol,
	dl,
	dd {
		margin: 0;
	}

	img,
	svg,
	video,
	iframe {
		display: block;
		max-width: 100%;
	}

	button,
	input,
	textarea,
	select {
		font: inherit;
		color: inherit;
	}
}

/* --------------------------------------------------------------------------
   variables
   -------------------------------------------------------------------------- */

@layer variables {
	:root {
		color-scheme: light;

		/* Tema claro (papel) */
		--color-papel: #f1ece2;
		--color-tinta: #1e1b17;
		--color-texto-suave: #5f584e;
		--color-linea: rgb(30 27 23 / 0.22);
		--color-rayado: rgb(30 27 23 / 0.1);
		--color-acento: oklch(0.52 0.17 29);
		--color-barra: rgb(241 236 226 / 0.92);
		--filtro-icono: none;

		/* Las fotografías se muestran en blanco y negro, como en el diseño.
		   Para conservar el color original: --filtro-foto: none; */
		--filtro-foto: grayscale(1) contrast(1.05);

		--textura-papel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

		/* Tipografía */
		--tipografia-base: "Courier Prime", "Courier New", monospace;
		--tipografia-titulos: "Special Elite", "Courier Prime", monospace;
		--texto-pequeno: 0.8125rem; /* 13px */
		--texto-menor: 0.9375rem; /* 15px */
		--texto-base: 1.125rem; /* 18px */
		--texto-lede: clamp(1.25rem, 1.9vw, 1.625rem);
		--titulo-portada: clamp(2.75rem, 7vw, 6.75rem);
		--titulo-1: clamp(2.5rem, 5.6vw, 5.25rem);
		--titulo-2: clamp(2.125rem, 4.4vw, 3.875rem);
		--titulo-3: clamp(1.25rem, 1.8vw, 1.5rem);
		--espaciado-letras: 0.14em;

		/* Espaciado */
		--alto-cabecera: 76px;
		--margen-lateral: clamp(20px, 7vw, 120px);
		--separacion: 22px;
		--separacion-grande: clamp(36px, 6vw, 96px);
		--ancho-maximo: 1180px;
		--ancho-lectura: 66ch;

		--transicion: 0.25s ease;
	}

	:root[data-theme="dark"] {
		color-scheme: dark;
		--color-papel: #171512;
		--color-tinta: #ebe5d8;
		--color-texto-suave: #a69e90;
		--color-linea: rgb(235 229 216 / 0.2);
		--color-rayado: rgb(235 229 216 / 0.08);
		--color-acento: oklch(0.7 0.14 32);
		--color-barra: rgb(23 21 18 / 0.92);
		--filtro-icono: invert(1);
	}

	@media (prefers-color-scheme: dark) {
		:root:not([data-theme="light"]) {
			color-scheme: dark;
			--color-papel: #171512;
			--color-tinta: #ebe5d8;
			--color-texto-suave: #a69e90;
			--color-linea: rgb(235 229 216 / 0.2);
			--color-rayado: rgb(235 229 216 / 0.08);
			--color-acento: oklch(0.7 0.14 32);
			--color-barra: rgb(23 21 18 / 0.92);
			--filtro-icono: invert(1);
		}
	}

	/* Alto contraste del sistema: negro y amarillo, sin texturas. */
	@media (prefers-contrast: more) {
		:root,
		:root[data-theme] {
			--color-papel: #000;
			--color-tinta: #ff0;
			--color-texto-suave: #ff0;
			--color-linea: #ff0;
			--color-rayado: transparent;
			--color-acento: #ff0;
			--color-barra: #000;
			--filtro-icono: invert(1) sepia(1) saturate(20) hue-rotate(5deg);
			--textura-papel: none;
		}
	}
}

/* --------------------------------------------------------------------------
   base
   -------------------------------------------------------------------------- */

@layer base {
	html {
		background: var(--color-papel);
		scroll-behavior: smooth;
		scroll-padding-top: var(--alto-cabecera);
		scroll-snap-type: y proximity;
	}

	body {
		min-height: 100vh;
		background-color: var(--color-papel);
		background-image: var(--textura-papel);
		color: var(--color-tinta);
		font-family: var(--tipografia-base);
		font-size: var(--texto-base);
		line-height: 1.7;
		-webkit-font-smoothing: antialiased;
		text-shadow: 0 0 0.4px currentColor;
		transition: background-color 0.4s, color 0.4s;
	}

	a {
		color: inherit;
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.22em;
	}

	a:hover {
		color: var(--color-acento);
	}

	:focus-visible {
		outline: 3px solid currentColor;
		outline-offset: 3px;
	}

	::selection {
		background: var(--color-acento);
		color: var(--color-papel);
	}

	h1,
	h2,
	h3 {
		font-family: var(--tipografia-titulos);
		font-weight: 400;
		line-height: 1.05;
		text-wrap: balance;
	}

	h1 {
		font-size: var(--titulo-1);
	}

	h2 {
		font-size: var(--titulo-2);
	}

	h3 {
		font-size: var(--titulo-3);
		line-height: 1.3;
	}

	/* El editor pone negritas y cursivas en títulos: aquí no cambian el peso. */
	:is(h1, h2, h3) :is(strong, b, em, i) {
		font-weight: inherit;
		font-style: inherit;
	}

	p,
	li {
		text-wrap: pretty;
	}

	button {
		cursor: pointer;
	}

	[hidden] {
		display: none !important;
	}
}

/* --------------------------------------------------------------------------
   layout
   -------------------------------------------------------------------------- */

@layer layout {
	/* Cabecera fija */
	.cabecera-sitio {
		position: fixed;
		inset: 0 0 auto;
		z-index: 20;
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: 16px;
		height: var(--alto-cabecera);
		padding: 0 clamp(18px, 4vw, 48px);
		background: var(--color-barra);
		border-bottom: 1px solid var(--color-linea);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
	}

	.cabecera-sitio__inicio {
		justify-self: start;
		display: flex;
		color: var(--color-tinta);
	}

	.cabecera-sitio__logo {
		width: auto;
		height: 46px;
	}

	.cabecera-sitio__estado {
		min-width: 0;
		overflow: hidden;
		color: var(--color-texto-suave);
		font-size: var(--texto-pequeno);
		letter-spacing: var(--espaciado-letras);
		text-overflow: ellipsis;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.boton-indice {
		justify-self: end;
	}

	/* Capítulo: sucesión de hojas */
	.contenido:focus {
		outline: none;
	}

	.hoja {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 100vh;
		min-height: 100svh;
		padding: clamp(112px, 15vh, 150px) var(--margen-lateral) 128px;
		border-bottom: 1px dashed var(--color-linea);
		scroll-snap-align: start;
	}

	.hoja:focus {
		outline: none;
	}

	.hoja--compacta {
		min-height: auto;
		scroll-snap-align: none;
	}

	.hoja__cuerpo {
		width: 100%;
		max-width: var(--ancho-maximo);
		margin: 0 auto;
	}

	.hoja__rejilla {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
		align-items: center;
		gap: var(--separacion-grande);
	}

	.hoja__rejilla--sola {
		grid-template-columns: minmax(0, 1fr);
	}

	.hoja__pie {
		position: absolute;
		right: var(--margen-lateral);
		bottom: 34px;
		left: var(--margen-lateral);
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: baseline;
		gap: 16px;
	}

	/* Pie del sitio */
	.pie-sitio {
		display: grid;
		gap: 28px;
		padding: 56px var(--margen-lateral) 48px;
		color: var(--color-texto-suave);
		font-size: var(--texto-menor);
	}

	.pie-sitio__capitulos:focus {
		outline: none;
	}

	.pie-sitio__lista {
		display: flex;
		flex-wrap: wrap;
		gap: 8px 28px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.pie-sitio__lista a {
		text-decoration: none;
	}

	.pie-sitio__lista a[aria-current] {
		color: var(--color-acento);
	}

	.pie-sitio__legal {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 16px 32px;
		padding-top: 18px;
		border-top: 1px solid var(--color-linea);
	}

	.pie-sitio__enlaces {
		display: flex;
		flex-wrap: wrap;
		gap: 10px 24px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
}

/* --------------------------------------------------------------------------
   componentes
   -------------------------------------------------------------------------- */

@layer componentes {
	/* Enlaces de salto */
	.saltos__enlace {
		position: fixed;
		top: 8px;
		left: 8px;
		z-index: 60;
		padding: 10px 16px;
		background: var(--color-tinta);
		color: var(--color-papel);
		text-decoration: none;
		transform: translateY(-200%);
	}

	.saltos__enlace:focus-visible {
		transform: none;
	}

	/* Botones de línea */
	.boton-indice,
	.boton-linea {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		padding: 9px 14px;
		background: none;
		border: 1px solid var(--color-linea);
		color: var(--color-tinta);
		font-size: 0.875rem;
		letter-spacing: 0.12em;
		line-height: 1.2;
		text-decoration: none;
		text-transform: uppercase;
		transition: border-color var(--transicion);
	}

	.boton-indice:hover,
	.boton-linea:hover {
		border-color: var(--color-tinta);
		color: var(--color-tinta);
	}

	.boton-indice__icono {
		width: auto;
		height: 20px;
		filter: var(--filtro-icono);
	}

	.boton-tema {
		padding: 6px 0;
		background: none;
		border: 0;
		color: var(--color-tinta);
		font-size: 0.875rem;
		letter-spacing: 0.08em;
	}

	.boton-tema:hover {
		color: var(--color-acento);
	}

	/* Antetítulo y títulos de hoja */
	.hoja__antetitulo {
		color: var(--color-acento);
		font-size: var(--texto-pequeno);
		letter-spacing: 0.2em;
		line-height: 1.4;
		text-transform: uppercase;
	}

	.hoja__titulo {
		margin-bottom: 6px;
	}

	/* Portada */
	.portada {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 28px;
		min-width: 0;
	}

	.portada__titulo {
		font-size: var(--titulo-portada);
		line-height: 1;
		letter-spacing: -0.01em;
	}

	/* Efecto de tecleo: el texto real queda para lectores de pantalla y
	   para reservar el espacio; encima se escribe la copia animada. */
	.portada__titulo[data-tecleando] {
		display: grid;
	}

	.portada__titulo[data-tecleando] > * {
		grid-area: 1 / 1;
	}

	/* Transparente (no oculto) para que los lectores de pantalla lo lean. */
	.portada__titulo[data-tecleando] .tecleo__real {
		color: transparent;
		text-shadow: none;
	}

	.tecleo__cursor {
		display: inline-block;
		width: 0.08em;
		height: 0.82em;
		margin-left: 0.06em;
		background: var(--color-acento);
		vertical-align: -0.06em;
		animation: cursor 1s steps(1) infinite;
	}

	@keyframes cursor {
		0%,
		49% {
			opacity: 1;
		}

		50%,
		100% {
			opacity: 0;
		}
	}

	.portada__subtitulo {
		font-size: clamp(1rem, 1.5vw, 1.25rem);
		letter-spacing: 0.24em;
		line-height: 1.4;
		text-transform: uppercase;
	}

	/* Sello (aviso de próximo concierto) */
	.sello {
		display: inline-flex;
		transform: rotate(-1.2deg);
	}

	.sello a {
		display: inline-flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 4px 12px;
		padding: 8px 14px;
		border: 1.5px solid var(--color-acento);
		color: var(--color-acento);
		font-size: var(--texto-pequeno);
		letter-spacing: 0.12em;
		line-height: 1.5;
		text-decoration: none;
		text-transform: uppercase;
		transition: background-color var(--transicion), color var(--transicion);
	}

	.sello a:hover {
		background: var(--color-acento);
		color: var(--color-papel);
	}

	.sello a::after {
		content: " →";
	}

	.sello br {
		display: none;
	}

	.sello strong {
		font-weight: 700;
	}

	/* Lámina (imagen en marco rayado) */
	.lamina {
		justify-self: center;
		width: min(100%, 58vh);
		min-width: 0;
	}

	.lamina__marco {
		position: relative;
		overflow: hidden;
		aspect-ratio: var(--proporcion, 4 / 5);
		background: repeating-linear-gradient(135deg, var(--color-rayado) 0 1px, transparent 1px 9px);
		border: 1px solid var(--color-linea);
	}

	.lamina__etiqueta {
		position: absolute;
		bottom: 10px;
		left: 12px;
		color: var(--color-texto-suave);
		font-size: 11px;
		letter-spacing: 0.1em;
	}

	.lamina__imagen {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		filter: var(--filtro-foto);
	}

	.hoja--pistas .lamina {
		width: min(100%, 52vh);
	}

	.hoja--pistas .hoja__texto + .lamina .lamina__marco {
		aspect-ratio: 1;
	}

	/* Texto de hoja */
	.hoja__texto {
		display: flex;
		flex-direction: column;
		gap: var(--separacion);
		min-width: 0;
		max-width: var(--ancho-lectura);
	}

	.hoja__rejilla--sola .hoja__texto,
	.hoja__texto--ancho {
		max-width: none;
	}

	.hoja__rejilla--sola .hoja__texto > :is(p, h1, h2, h3) {
		max-width: var(--ancho-lectura);
	}

	.hoja__texto > p {
		text-indent: 3ch;
	}

	.hoja__texto > :is(h1, h2, h3, .hoja__antetitulo) + p,
	.hoja__texto > p:first-child,
	.hoja__texto > p[class] {
		text-indent: 0;
	}

	/* Entrada: primer párrafo tras el título, o al abrir la hoja */
	.hoja--apertura .hoja__titulo + p:not([class]) {
		font-size: var(--texto-lede);
		line-height: 1.5;
	}

	/* Listas */
	.hoja__texto ul,
	.hoja__texto ol {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.hoja__texto ul:has(> li:nth-child(8)) {
		column-gap: 48px;
		columns: 2 20rem;
	}

	.hoja__texto li {
		display: grid;
		grid-template-columns: 2ch minmax(0, 1fr);
		gap: 10px;
		padding: 8px 0;
		font-size: 1.0625rem;
		line-height: 1.5;
		break-inside: avoid;
	}

	.hoja__texto li::before {
		content: "—";
		color: var(--color-acento);
	}

	.hoja__texto li > * {
		grid-column: 2;
	}

	/* Cronologías (elementos que empiezan con el año en negrita) */
	.cronologia {
		border-top: 1px solid var(--color-tinta);
	}

	.hoja__texto .cronologia li {
		display: block;
		padding: 12px 0;
		border-bottom: 1px dashed var(--color-linea);
	}

	.hoja__texto .cronologia li::before {
		content: none;
	}

	.cronologia li > strong:first-child {
		display: inline-block;
		min-width: 6ch;
		color: var(--color-acento);
		font-family: var(--tipografia-titulos);
		font-weight: 400;
	}

	/* Títulos de grupo dentro de listas largas (p. ej. «2025 conciertos») */
	.hoja__texto h2 + ul {
		margin-top: -8px;
	}

	/* Pistas de audio */
	.hoja--pistas .hoja__texto ul {
		counter-reset: pista;
	}

	.hoja--pistas .hoja__rejilla--sola .hoja__texto {
		max-width: 56rem;
	}

	.hoja--pistas .hoja__texto li {
		grid-template-columns: 3.2ch minmax(0, 1fr);
		gap: 4px 12px;
		padding: 9px 0;
		border-bottom: 1px dashed var(--color-linea);
		counter-increment: pista;
	}

	.hoja--pistas .hoja__texto li::before {
		content: counter(pista, decimal-leading-zero);
		padding-top: 2px;
		color: var(--color-texto-suave);
		font-size: 0.875rem;
	}

	.hoja--pistas .hoja__texto h3 {
		font-family: var(--tipografia-base);
		font-size: var(--texto-menor);
		line-height: 1.6;
		color: var(--color-texto-suave);
	}

	.hoja--pistas .hoja__texto h3 a {
		color: var(--color-acento);
	}

	/* Reproductor */
	.reproductor {
		display: block;
		margin-top: 6px;
	}

	.reproductor__audio {
		width: 100%;
		max-width: 28rem;
		height: 36px;
	}

	.reproductor--mejorado .reproductor__audio {
		display: none;
	}

	.reproductor__controles {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px 14px;
		font-size: 0.875rem;
	}

	.reproductor__boton {
		padding: 4px 10px;
		background: none;
		border: 1px solid currentColor;
		color: var(--color-tinta);
		font-size: var(--texto-pequeno);
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.reproductor[data-sonando] .reproductor__boton {
		color: var(--color-acento);
	}

	.reproductor__barra {
		padding: 0;
		background: none;
		border: 0;
		color: var(--color-texto-suave);
		letter-spacing: 0.04em;
		white-space: nowrap;
		user-select: none;
	}

	.reproductor__barra:disabled {
		cursor: default;
	}

	.reproductor__tiempo {
		color: var(--color-texto-suave);
		font-variant-numeric: tabular-nums;
	}

	/* Cita */
	.hoja__rejilla--invertida .lamina {
		width: min(100%, 62vh);
	}

	.cita {
		display: flex;
		flex-direction: column;
		gap: 28px;
	}

	.cita__comilla {
		color: var(--color-acento);
		font-family: var(--tipografia-titulos);
		font-size: 96px;
		line-height: 0.5;
	}

	.cita h2 {
		font-size: clamp(1.875rem, 3.6vw, 3.375rem);
		line-height: 1.15;
	}

	.cita p {
		color: var(--color-texto-suave);
		font-size: 0.875rem;
		letter-spacing: 0.2em;
		text-transform: uppercase;
	}

	.cita p em {
		font-style: normal;
	}

	.cita p::before {
		content: "— ";
	}

	/* Párrafos formados por un enlace */
	.enlace-correo a {
		color: var(--color-acento);
		font-size: clamp(1.25rem, 2.2vw, 1.875rem);
		word-break: break-all;
	}

	.enlace-fila {
		display: grid;
		grid-template-columns: 2ch minmax(0, 1fr);
		gap: 10px;
		font-size: 1.0625rem;
		line-height: 1.5;
	}

	.enlace-fila::before {
		content: "—";
		color: var(--color-acento);
	}

	.hoja__texto > .enlace-fila + .enlace-fila {
		margin-top: calc(var(--separacion) * -0.6);
	}

	/* Documentos PDF */
	.hoja__texto {
		counter-reset: documento;
	}

	.hoja__texto > .enlace-doc + .enlace-doc {
		margin-top: calc(var(--separacion) * -1);
	}

	.hoja__texto > :not(.enlace-doc) + .enlace-doc {
		border-top: 1px solid var(--color-tinta);
	}

	.enlace-doc {
		counter-increment: documento;
	}

	.enlace-doc a {
		display: grid;
		grid-template-columns: 5ch minmax(0, 1fr) auto;
		align-items: baseline;
		gap: 16px;
		padding: 20px 0;
		border-bottom: 1px dashed var(--color-linea);
		font-size: clamp(1.125rem, 1.8vw, 1.5rem);
		line-height: 1.3;
		text-decoration: none;
	}

	.enlace-doc a::before {
		content: counter(documento, decimal-leading-zero);
		color: var(--color-texto-suave);
		font-size: 0.875rem;
	}

	.enlace-doc a::after {
		content: "PDF ↓";
		color: var(--color-acento);
		font-size: var(--texto-pequeno);
		letter-spacing: var(--espaciado-letras);
	}

	/* Vídeos e incrustaciones */
	.incrustado {
		display: block;
		width: 100%;
		max-width: 960px;
		aspect-ratio: 16 / 9;
		background: repeating-linear-gradient(135deg, var(--color-rayado) 0 1px, transparent 1px 9px);
		border: 1px solid var(--color-linea);
	}

	.incrustado iframe,
	.incrustado__video {
		width: 100%;
		height: 100%;
		border: 0;
	}

	.incrustado--video {
		aspect-ratio: auto;
	}

	.incrustado__video {
		height: auto;
	}

	/* Pie de hoja */
	.hoja__titulillo {
		overflow: hidden;
		color: var(--color-texto-suave);
		font-size: 0.75rem;
		letter-spacing: 0.16em;
		text-overflow: ellipsis;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.hoja__folio {
		color: var(--color-texto-suave);
		font-size: 0.875rem;
		font-variant-numeric: tabular-nums;
	}

	.hoja__siguiente {
		justify-self: end;
		padding: 8px 0;
		color: var(--color-acento);
		font-size: var(--texto-menor);
		letter-spacing: 0.04em;
		text-align: right;
		text-decoration: none;
	}

	.hoja__siguiente:hover {
		text-decoration: underline;
	}

	/* Marcas laterales (páginas del capítulo) */
	.marcas {
		display: none;
	}

	.marcas__lista {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 2px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.marcas__marca {
		display: flex;
		justify-content: flex-end;
		padding: 5px 0;
	}

	.marcas__marca::before {
		content: "";
		display: block;
		width: 14px;
		height: 2px;
		background: var(--color-texto-suave);
		transition: width var(--transicion), background-color var(--transicion);
	}

	.marcas__marca[aria-current]::before,
	.marcas__marca:hover::before {
		width: 30px;
		background: var(--color-acento);
	}

	/* Índice (diálogo) */
	.indice {
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: none;
		margin: 0;
		padding: 0;
		overflow: auto;
		background-color: var(--color-papel);
		background-image: var(--textura-papel);
		border: 0;
		color: var(--color-tinta);
	}

	.indice[open] {
		animation: indice-entra 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.indice::backdrop {
		background: var(--color-papel);
	}

	@keyframes indice-entra {
		from {
			opacity: 0;
			transform: translateY(-24px);
		}
	}

	.indice__contenido {
		display: flex;
		flex-direction: column;
		gap: clamp(28px, 5vh, 56px);
		min-height: 100%;
		padding: 24px clamp(20px, 6vw, 96px) 40px;
	}

	.indice__barra {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}

	.indice__logo {
		width: auto;
		height: 46px;
	}

	.indice__cuerpo {
		flex: 1;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
		align-items: center;
		gap: clamp(32px, 6vw, 96px);
	}

	.indice__cabeza {
		display: flex;
		flex-direction: column;
		gap: 18px;
	}

	.indice__titulo {
		font-size: clamp(3.5rem, 9vw, 8.75rem);
		line-height: 0.95;
	}

	.indice__autor {
		color: var(--color-texto-suave);
		font-size: var(--texto-menor);
		letter-spacing: 0.2em;
		line-height: 1.6;
		text-transform: uppercase;
	}

	.indice__lista {
		margin: 0;
		padding: 0;
		border-top: 1px solid var(--color-tinta);
		list-style: none;
	}

	.indice__entrada {
		display: grid;
		grid-template-columns: 3.4rem minmax(0, auto) 1fr auto;
		align-items: baseline;
		gap: 14px;
		padding: 14px 0;
		border-bottom: 1px dashed var(--color-linea);
		color: var(--color-tinta);
		text-decoration: none;
	}

	.indice__entrada[aria-current],
	.indice__entrada:hover {
		color: var(--color-acento);
	}

	.indice__romano {
		color: var(--color-acento);
		font-size: 0.875rem;
	}

	.indice__nombre {
		font-family: var(--tipografia-titulos);
		font-size: clamp(1.5rem, 2.6vw, 2.25rem);
		line-height: 1.1;
	}

	.indice__puntos {
		border-bottom: 2px dotted var(--color-linea);
		transform: translateY(-6px);
	}

	.indice__paginas {
		color: var(--color-texto-suave);
		font-size: 0.875rem;
		white-space: nowrap;
	}

	.indice__pie {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 16px 32px;
		padding-top: 18px;
		border-top: 1px solid var(--color-linea);
		color: var(--color-texto-suave);
		font-size: 0.875rem;
	}

	.indice__legal {
		display: flex;
		flex-wrap: wrap;
		gap: 10px 24px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	html:has(.indice[open]) {
		overflow: hidden;
	}

	/* ------------------------------------------------------------------
	   Hojas del modelo «hojas» (layouts ACF del diseño)
	   ------------------------------------------------------------------ */

	.hoja__encabezado {
		font-size: var(--titulo-2);
		line-height: 1.02;
	}

	.hoja__entradilla {
		font-size: var(--texto-lede);
		line-height: 1.5;
	}

	.hoja__bloque {
		display: flex;
		flex-direction: column;
		gap: 26px;
	}

	.hoja__bloque--estrecho {
		max-width: 860px;
	}

	.hoja__intro,
	.portada__intro {
		max-width: var(--ancho-lectura);
		line-height: 1.7;
	}

	.portada__intro {
		max-width: 60ch;
	}

	.hoja__nota {
		max-width: var(--ancho-lectura);
		color: var(--color-texto-suave);
		font-size: 1rem;
		font-style: italic;
		line-height: 1.65;
	}

	.hoja__cabecera-doble {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
	}

	.hoja__rotulo {
		color: var(--color-texto-suave);
		font-size: var(--texto-pequeno);
		letter-spacing: 0.16em;
		text-transform: uppercase;
	}

	.hoja__rejilla--ancha {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
		gap: clamp(36px, 6vw, 88px);
	}

	.hoja__rejilla--arriba {
		align-items: start;
	}

	/* Cita (modelo nuevo) */
	.cita__texto p {
		font-family: var(--tipografia-titulos);
		font-size: clamp(1.875rem, 3.6vw, 3.375rem);
		line-height: 1.15;
		text-wrap: balance;
	}

	.cita__autor {
		color: var(--color-texto-suave);
		font-size: 0.875rem;
		letter-spacing: 0.2em;
		text-transform: uppercase;
	}

	/* Disco / pistas */
	.disco {
		display: flex;
		flex-direction: column;
		gap: 26px;
		min-width: 0;
	}

	.disco__cabecera {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.disco__meta {
		color: var(--color-texto-suave);
		font-size: 0.875rem;
		letter-spacing: var(--espaciado-letras);
		text-transform: uppercase;
	}

	.disco__pie {
		color: var(--color-texto-suave);
		font-size: var(--texto-menor);
		line-height: 1.6;
	}

	.disco__pie a {
		color: var(--color-acento);
	}

	.lamina--disco {
		width: min(100%, 52vh);
	}

	.pistas {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.pistas--columnas {
		column-gap: 40px;
		columns: 2 17rem;
	}

	.pistas__pista {
		display: grid;
		grid-template-columns: 3.2ch minmax(0, 1fr);
		gap: 4px 12px;
		padding: 9px 0;
		border-bottom: 1px dashed var(--color-linea);
		break-inside: avoid;
	}

	.pistas__numero {
		padding-top: 2px;
		color: var(--color-texto-suave);
		font-size: 0.875rem;
	}

	.pistas__datos {
		display: flex;
		flex-direction: column;
		gap: 4px;
		min-width: 0;
	}

	.pistas__titulo {
		font-size: 1.0625rem;
		line-height: 1.4;
	}

	.pistas__nota {
		color: var(--color-texto-suave);
		font-size: 0.875rem;
		font-style: italic;
		line-height: 1.45;
	}

	/* Lista */
	.lista {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.lista--columnas {
		column-gap: 48px;
		columns: 2 20rem;
	}

	.lista__elemento {
		display: grid;
		grid-template-columns: 2ch minmax(0, 1fr);
		gap: 10px;
		padding: 8px 0;
		font-size: 1.0625rem;
		line-height: 1.5;
		break-inside: avoid;
	}

	.lista__elemento::before {
		content: "—";
		color: var(--color-acento);
	}

	.lista__meta {
		color: var(--color-texto-suave);
	}

	/* Registro (cronología por años) */
	.registro {
		display: grid;
		grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
		align-items: start;
		gap: 8px clamp(16px, 3vw, 40px);
	}

	.registro__etiqueta {
		position: sticky;
		top: calc(var(--alto-cabecera) + 20px);
		color: var(--color-acento);
		font-size: clamp(1.875rem, 3.4vw, 2.875rem);
		line-height: 1;
	}

	.registro__filas {
		margin: 0;
		padding: 0;
		border-top: 1px solid var(--color-tinta);
		list-style: none;
	}

	.registro__fila {
		display: flex;
		flex-wrap: wrap;
		gap: 2px 24px;
		padding: 12px 0;
		border-bottom: 1px dashed var(--color-linea);
	}

	.registro__fecha {
		flex: 0 0 13.5rem;
		padding-top: 2px;
		color: var(--color-texto-suave);
		font-size: var(--texto-menor);
	}

	.registro__datos {
		display: flex;
		flex: 1 1 18rem;
		flex-direction: column;
		gap: 3px;
		min-width: 0;
	}

	.registro__texto {
		font-size: 1.0625rem;
		line-height: 1.45;
	}

	.registro__detalle {
		color: var(--color-texto-suave);
		font-size: var(--texto-pequeno);
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	/* Hoja de contactos (galería) */
	.contactos {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
		gap: 22px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.contactos__foto {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.contactos__pie {
		color: var(--color-texto-suave);
		font-size: var(--texto-pequeno);
		letter-spacing: 0.1em;
	}

	/* Vídeos */
	.videos {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
		gap: 28px 22px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.videos__video {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.videos__titulo {
		font-size: var(--texto-menor);
		line-height: 1.45;
	}

	.incrustado--enlace {
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--color-acento);
		font-size: var(--texto-menor);
		letter-spacing: 0.08em;
		text-decoration: none;
		text-transform: uppercase;
	}

	.incrustado--enlace:hover {
		text-decoration: underline;
	}

	/* Documentos */
	.documentos {
		margin: 0;
		padding: 0;
		border-top: 1px solid var(--color-tinta);
		list-style: none;
	}

	.documentos__enlace {
		display: grid;
		grid-template-columns: 5ch minmax(0, 1fr) auto;
		align-items: baseline;
		gap: 16px;
		padding: 20px 0;
		border-bottom: 1px dashed var(--color-linea);
		text-decoration: none;
	}

	.documentos__numero {
		color: var(--color-texto-suave);
		font-size: 0.875rem;
	}

	.documentos__titulo {
		font-size: clamp(1.125rem, 1.8vw, 1.5rem);
		line-height: 1.3;
	}

	.documentos__tipo {
		color: var(--color-acento);
		font-size: var(--texto-pequeno);
		letter-spacing: var(--espaciado-letras);
		text-transform: uppercase;
	}

	/* Contacto y formulario */
	.contacto {
		display: flex;
		flex-direction: column;
		gap: var(--separacion);
		min-width: 0;
	}

	.contacto__titulo {
		font-size: clamp(2.5rem, 5.6vw, 5.25rem);
		line-height: 1;
	}

	.contacto__intro {
		max-width: 44ch;
	}

	.contacto__correo a {
		color: var(--color-acento);
		font-size: clamp(1.25rem, 2.2vw, 1.875rem);
		word-break: break-all;
	}

	.formulario {
		display: flex;
		flex-direction: column;
		gap: 22px;
		min-width: 0;
	}

	.formulario__campo {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.formulario__etiqueta {
		color: var(--color-texto-suave);
		font-size: var(--texto-pequeno);
		letter-spacing: var(--espaciado-letras);
		text-transform: uppercase;
	}

	.formulario__control {
		padding: 8px 0;
		background: transparent;
		border: 0;
		border-bottom: 1px solid var(--color-tinta);
		border-radius: 0;
		color: var(--color-tinta);
		font-size: var(--texto-base);
	}

	.formulario__control--texto {
		padding: 4px 0;
		background: repeating-linear-gradient(transparent 0 31px, var(--color-linea) 31px 32px);
		line-height: 32px;
		resize: vertical;
	}

	.formulario__control:focus-visible {
		outline: 3px solid currentColor;
		outline-offset: 4px;
	}

	.formulario__aviso {
		color: var(--color-texto-suave);
		font-size: var(--texto-menor);
		line-height: 1.5;
	}

	.formulario__enviar {
		align-self: flex-start;
		padding: 14px 26px;
		background: var(--color-tinta);
		border: 0;
		color: var(--color-papel);
		font-size: 0.875rem;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		transition: background-color var(--transicion);
	}

	.formulario__enviar:hover {
		background: var(--color-acento);
	}
}

/* --------------------------------------------------------------------------
   utilidades
   -------------------------------------------------------------------------- */

@layer utilidades {
	.visualmente-oculto {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
	.marcas {
		position: fixed;
		top: 50%;
		right: 22px;
		z-index: 15;
		display: block;
		transform: translateY(-50%);
	}
}

@media (max-width: 640px) {
	:root {
		--alto-cabecera: 64px;
	}

	.cabecera-sitio {
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: 10px;
		padding: 0 16px;
	}

	.cabecera-sitio__estado {
		text-align: center;
	}

	.cabecera-sitio__logo {
		height: 38px;
	}

	.cabecera-sitio__estado {
		font-size: 0.6875rem;
		letter-spacing: 0.08em;
	}

	.boton-indice {
		gap: 6px;
		padding: 8px 10px;
		letter-spacing: 0.06em;
	}

	.hoja {
		padding-top: 104px;
		padding-bottom: 112px;
	}

	.hoja__pie {
		grid-template-columns: auto 1fr;
		bottom: 24px;
	}

	.hoja__titulillo {
		display: none;
	}

	.indice__entrada {
		grid-template-columns: 2.6rem minmax(0, 1fr) auto;
	}

	.indice__puntos {
		display: none;
	}

	.registro {
		grid-template-columns: minmax(0, 1fr);
	}

	.registro__etiqueta {
		position: static;
	}

	.registro__fecha {
		flex-basis: 100%;
	}
}

/* --------------------------------------------------------------------------
   Movimiento reducido y colores forzados
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

@media (forced-colors: active) {
	.lamina__marco,
	.incrustado {
		background: none;
	}

	.marcas__marca::before {
		background: CanvasText;
	}

	.marcas__marca[aria-current]::before {
		background: Highlight;
	}
}