/**
 * @layer utilities — publicación individual: encabezado, imagen destacada,
 * contenido con estilos de bloques nativos (medida máx. 68ch), compartir,
 * relacionadas.
 *
 * `color`/`text-decoration` con !important: ver la nota en buttons.css.
 */

@keyframes santiago-progreso-lectura {
	to {
		transform: scaleX(1);
	}
}

@layer utilities {
	/* Barra de progreso de lectura (fila #11): atada 1:1 al scroll del
	   documento, sin duración fija — es un indicador funcional, no un
	   efecto de entrada. */
	/* z-index por encima del header (50, ver components/header.css): la
	   barra se pinta pegada al borde superior absoluto del viewport, sobre
	   el header, en vez de debajo — así no depende de que --header-height
	   coincida en píxeles con la altura real renderizada del header. */
	.progreso-lectura {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 3px;
		background: var(--c-accent-600);
		transform: scaleX(0);
		transform-origin: left;
		animation: santiago-progreso-lectura linear both;
		animation-timeline: scroll(root);
		z-index: 60;
	}

	@supports not (animation-timeline: scroll()) {
		.progreso-lectura {
			display: none;
		}
	}
	.publicacion-single__header {
		padding-block: var(--space-8) var(--space-6);
	}

	.publicacion-single__header-inner {
		max-width: var(--measure-max);
	}

	.publicacion-single__categoria {
		margin: 0 0 var(--space-3);
		font-size: var(--eyebrow-size);
		letter-spacing: var(--eyebrow-tracking);
		text-transform: uppercase;
	}

	.publicacion-single__categoria a {
		color: var(--c-accent-600) !important;
		text-decoration: none !important;
	}

	.publicacion-single__titulo {
		margin: 0 0 var(--space-5);
		font-size: var(--text-3xl) !important;
	}

	.publicacion-single__meta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-4);
		font-size: var(--text-sm);
		color: var(--c-ink-500);
	}

	.publicacion-single__meta a {
		color: var(--c-ink-700) !important;
		text-decoration: underline !important;
	}

	.publicacion-single__imagen {
		width: 100%;
		max-height: 520px;
		overflow: hidden;
		margin-bottom: var(--space-8);
	}

	.publicacion-single__imagen-foto {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		filter: grayscale(1);
	}

	.publicacion-single__layout {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-7);
		padding-bottom: var(--space-8);
	}

	@media (width >= 1024px) {
		.publicacion-single__layout {
			grid-template-columns: var(--measure-max) 1fr;
			align-items: start;
		}
	}

	.publicacion-single__compartir {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-3);
		font-size: var(--text-sm);
	}

	@media (width >= 1024px) {
		.publicacion-single__compartir {
			position: sticky;
			top: calc(var(--header-height) + var(--space-6));
		}
	}

	.publicacion-single__compartir p {
		margin: 0;
		text-transform: uppercase;
		letter-spacing: var(--eyebrow-tracking);
		font-size: var(--eyebrow-size);
		color: var(--c-ink-500);
	}

	.publicacion-single__compartir a,
	.publicacion-single__copiar {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		color: var(--c-ink-700) !important;
		text-decoration: none !important;
		border-bottom: 1px solid var(--c-ink-200);
		padding: 0 0 2px;
		background: none;
		border-inline: 0;
		border-top: 0;
		font: inherit;
		cursor: pointer;
	}

	.publicacion-single__compartir .icono {
		width: 18px;
		height: 18px;
	}

	.publicacion-single__compartir a:hover,
	.publicacion-single__copiar:hover {
		color: var(--c-accent-600) !important;
		border-color: var(--c-accent-600);
	}

	.publicaciones-relacionadas {
		background: var(--c-accent-050);
	}

	.publicacion-single .cta-contacto {
		margin-bottom: 48px;
	}
}