/* ==========================================================================
   La Heroica — Línea de tiempo (hitos)
   --------------------------------------------------------------------------
   Estilo del bloque dinámico `laheroica/timeline`. Lista vertical con una línea
   central a la izquierda, marcadores con el año y tarjetas a la derecha. Aislado
   a `.lht-timeline`, así que no afecta a otros bloques. Colores de marca con
   variables propias (con fallback) para no acoplarse a los tokens del theme.
   ========================================================================== */

.lht-timeline {
	--lht-tl-accent: #c3360e;
	--lht-tl-gold: #ba9e60;
	--lht-tl-line: #e2d9c4;
	--lht-tl-card-bg: #ffffff;
	--lht-tl-card-border: #ece6d8;
	--lht-tl-text: #2b2b2b;
	--lht-tl-muted: #7a7367;

	margin: 2rem 0;
}

.lht-timeline__list {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

/* Línea vertical continua. */
.lht-timeline__list::before {
	content: "";
	position: absolute;
	top: 0.4rem;
	bottom: 0.4rem;
	left: 5.5rem;
	width: 3px;
	background: var(--lht-tl-line);
	border-radius: 3px;
}

.lht-timeline__item {
	position: relative;
	min-height: 3rem;
	padding: 0 0 2.2rem 8.5rem;
}

.lht-timeline__item:last-child {
	padding-bottom: 0;
}

/* Año + nodo sobre la línea. */
.lht-timeline__marker {
	position: absolute;
	left: 0;
	top: 0;
	width: 5.5rem;
	text-align: right;
	padding-right: 1.6rem;
	box-sizing: border-box;
}

.lht-timeline__year {
	display: inline-block;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--lht-tl-accent);
	font-variant-numeric: tabular-nums;
}

.lht-timeline__node {
	position: absolute;
	left: 5.5rem;
	top: 0.35rem;
	width: 15px;
	height: 15px;
	margin-left: -6px;
	background: var(--lht-tl-card-bg);
	border: 3px solid var(--lht-tl-accent);
	border-radius: 50%;
	box-shadow: 0 0 0 4px var(--lht-tl-card-bg);
	z-index: 1;
}

/* Tarjeta del hito. */
.lht-timeline__card {
	background: var(--lht-tl-card-bg);
	border: 1px solid var(--lht-tl-card-border);
	border-left: 4px solid var(--lht-tl-gold);
	border-radius: 8px;
	padding: 1.1rem 1.3rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.lht-timeline__date {
	margin: 0 0 0.2rem;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--lht-tl-muted);
}

.lht-timeline__headline {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	line-height: 1.25;
	color: var(--lht-tl-text);
}

.lht-timeline__figure {
	margin: 0 0 0.8rem;
}

.lht-timeline__figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

/* Enlace «ampliar»: la imagen se acerca y oscurece un poco al pasar el cursor, y
   aparece una insignia con lupa indicando que se puede abrir en grande. */
.lht-timeline__zoom {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	line-height: 0;
	cursor: zoom-in;
}

.lht-timeline__zoom img {
	transition: transform 0.4s ease, filter 0.25s ease;
}

.lht-timeline__zoom:hover img,
.lht-timeline__zoom:focus-visible img {
	transform: scale(1.05);
	filter: brightness(0.82);
}

.lht-timeline__zoom-hint {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(46, 12, 4, 0.6);
	color: #FFFFFF;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.8);
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}

.lht-timeline__zoom:hover .lht-timeline__zoom-hint,
.lht-timeline__zoom:focus-visible .lht-timeline__zoom-hint {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.lht-timeline__zoom-hint svg {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.lht-timeline__zoom img,
	.lht-timeline__zoom-hint {
		transition: none;
	}
	.lht-timeline__zoom:hover img,
	.lht-timeline__zoom:focus-visible img {
		transform: none;
	}
}

/* Tamaño de las imágenes (lo fija el bloque; `full` = ancho de la tarjeta). El
   ancho real de la figura se limita; la imagen ocupa el 100% de la figura. */
.lht-timeline.is-img-small .lht-timeline__figure {
	max-width: 180px;
}

.lht-timeline.is-img-medium .lht-timeline__figure {
	max-width: 320px;
}

.lht-timeline.is-img-large .lht-timeline__figure {
	max-width: 520px;
}

.lht-timeline.is-img-full .lht-timeline__figure {
	max-width: 100%;
}

.lht-timeline__figure figcaption {
	margin-top: 0.4rem;
	font-size: 0.8rem;
	color: var(--lht-tl-muted);
}

.lht-timeline__text {
	color: var(--lht-tl-text);
	line-height: 1.6;
}

.lht-timeline__text p:last-child {
	margin-bottom: 0;
}

/* Justificado del texto del hito. La regla vive normalmente en el CSS del theme
   (justificado.css), que el theme encola por bloque vía wp_enqueue_block_style();
   pero como el contenido del hito va anidado dentro de este bloque dinámico, esa
   hoja puede no llegar (o purgarla un optimizador de CSS que no «ve» la clase en
   el contenido de la página). El bloque la aporta él mismo, acotada a su propio
   texto, para que el justificado funcione siempre. Cubre el justificado nativo
   (`has-text-align-justify`) y el block style del theme (`is-style-lh-justificado`).
   Con guionado para evitar «ríos», igual que el theme (requiere lang en <html>). */
.lht-timeline__text .has-text-align-justify,
.lht-timeline__text .is-style-lh-justificado,
.lht-timeline__text .is-style-lh-justificado p,
.lht-timeline__text .is-style-lh-justificado li {
	text-align: justify;
	text-justify: inter-word;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* Ubicación del texto AL LADO de la imagen (imagen izq. / texto der.). El ancho de
   la imagen lo fija la clase `is-img-*` (max-width de la figura); el texto ocupa el
   resto. En modo «debajo» (por defecto) `__body` es un bloque y no cambia nada. */
.lht-timeline.is-text-beside .lht-timeline__body {
	display: flex;
	gap: 1.2rem;
	align-items: flex-start;
}

.lht-timeline.is-text-beside .lht-timeline__figure {
	flex: 0 0 auto;
	margin: 0;
}

.lht-timeline.is-text-beside .lht-timeline__text {
	flex: 1 1 0%;
	min-width: 0;
}

.lht-timeline__empty {
	color: var(--lht-tl-muted);
	font-style: italic;
}

/* Aparición al hacer scroll (progressive enhancement: sin JS quedan visibles). */
.lht-timeline.is-js .lht-timeline__item {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.lht-timeline.is-js .lht-timeline__item.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.lht-timeline.is-js .lht-timeline__item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Móvil: línea pegada a la izquierda, año encima de la tarjeta. */
@media (max-width: 600px) {
	.lht-timeline__list::before {
		left: 0.5rem;
	}

	.lht-timeline__item {
		padding-left: 1.8rem;
	}

	.lht-timeline__marker {
		position: static;
		width: auto;
		text-align: left;
		padding: 0 0 0.3rem;
	}

	.lht-timeline__node {
		left: 0.5rem;
		top: 0.3rem;
	}

	/* «Al lado» por defecto se apila en móvil (imagen arriba, texto abajo). */
	.lht-timeline.is-text-beside:not(.is-beside-mobile) .lht-timeline__body {
		display: block;
	}

	.lht-timeline.is-text-beside:not(.is-beside-mobile) .lht-timeline__figure {
		margin-bottom: 0.8rem;
	}

	/* Salvo que se pida mantenerlo al lado: entonces la imagen se estrecha para
	   dejar sitio al texto. */
	.lht-timeline.is-text-beside.is-beside-mobile .lht-timeline__body {
		gap: 0.9rem;
	}

	.lht-timeline.is-text-beside.is-beside-mobile .lht-timeline__figure {
		max-width: 40%;
	}
}

/* ==========================================================================
   Lightbox — replicado del de la galería Flickr (clases `.lht-lb`) para que el
   visor sea visualmente idéntico. Autocontenido: el módulo Línea de tiempo no
   depende de que el CSS de Flickr esté cargado en la página.
   ========================================================================== */
.lht-lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(18, 5, 3, 0.92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.28s ease, visibility 0.28s ease;
}
.lht-lb.is-open {
	opacity: 1;
	visibility: visible;
}
.lht-lb__stage {
	position: relative;
	max-width: 92vw;
	max-height: 84vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
}
.lht-lb__img {
	max-width: 92vw;
	max-height: 78vh;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
	background: #2e0c04;
	opacity: 0;
	transform: scale(0.985);
	transition: opacity 0.35s ease, transform 0.35s ease;
}
.lht-lb__img.is-loaded {
	opacity: 1;
	transform: none;
}
.lht-lb.is-loading .lht-lb__stage::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 38px;
	height: 38px;
	margin: -19px 0 0 -19px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, 0.25);
	border-top-color: #FFFFFF;
	animation: lht-timeline-spin 0.7s linear infinite;
	pointer-events: none;
}
@keyframes lht-timeline-spin {
	to {
		transform: rotate(360deg);
	}
}
.lht-lb__caption {
	color: #FFFFFF;
	font-size: 0.95rem;
	text-align: center;
	max-width: 80vw;
	min-height: 1.2em;
	opacity: 0.92;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.lht-lb__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}
.lht-lb__btn:hover {
	background: #ba9e60;
	color: #2e0c04;
}
.lht-lb__prev {
	left: 1.2rem;
}
.lht-lb__next {
	right: 1.2rem;
}
.lht-lb__close {
	position: absolute;
	top: 1rem;
	right: 1.2rem;
	width: 2.6rem;
	height: 2.6rem;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}
.lht-lb__close:hover {
	background: #ba9e60;
	color: #2e0c04;
}
.lht-lb__counter {
	position: absolute;
	top: 1.2rem;
	left: 1.4rem;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.8rem;
	letter-spacing: 0.5px;
	font-variant-numeric: tabular-nums;
}
.lht-lb.is-single .lht-lb__prev,
.lht-lb.is-single .lht-lb__next,
.lht-lb.is-single .lht-lb__counter {
	display: none;
}
@media (max-width: 600px) {
	.lht-lb__prev {
		left: 0.4rem;
	}
	.lht-lb__next {
		right: 0.4rem;
	}
	.lht-lb__btn {
		width: 2.6rem;
		height: 2.6rem;
		font-size: 1.4rem;
	}
}