/* PF Timeline — elemento para Impreza */
.w-pftimeline {
	--pf-tl-accent: var(--color-content-primary, #3b8beb);
	--pf-tl-line: var(--color-content-border, #e5e5e5);
	--pf-tl-meta-width: 160px;
	--pf-tl-col-gap: 20px;
	--pf-tl-gap: 48px;
	--pf-tl-marker-size: 16px;
	--pf-tl-marker-border: 3px;
	position: relative;
	max-width: 100%;
}

.w-pftimeline .pf-timeline__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Cada hito es una rejilla de 2 filas:
 *   fila 1: periodo (h5) · marcador · título (h4)  → centrados verticalmente entre sí
 *   fila 2: empresa    ·   (vacío)  · descripción
 * Así el h5, el círculo y el h4 comparten el mismo eje horizontal sea cual sea su tamaño.
 */
.w-pftimeline .pf-timeline__item {
	display: grid;
	grid-template-columns: var(--pf-tl-meta-width) var(--pf-tl-marker-size) minmax(0, 1fr);
	grid-template-areas:
		"period  marker title"
		"company .      text";
	column-gap: var(--pf-tl-col-gap);
	align-items: start;
	position: relative;
	margin: 0;
	padding: 0 0 var(--pf-tl-gap);
	overflow: hidden; /* recorta la línea que dibuja cada marcador */
}

.w-pftimeline .pf-timeline__item:last-child {
	padding-bottom: 0;
}

/* El periodo es un h5: hereda fuente, peso y color del tema */
.w-pftimeline .pf-timeline__period {
	grid-area: period;
	align-self: center;
	margin: 0;
	padding: 0;
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.w-pftimeline .pf-timeline__company {
	grid-area: company;
	display: block;
	text-align: right;
	color: var(--color-content-faded, #a0a0a0);
}

/* Marcador: círculo + línea hacia arriba y hacia abajo (recortada por el <li>) */
.w-pftimeline .pf-timeline__marker {
	grid-area: marker;
	align-self: center;
	position: relative;
	display: block;
	width: var(--pf-tl-marker-size);
	height: var(--pf-tl-marker-size);
	border-radius: 50%;
	background: var(--color-content-bg, #fff);
	border: var(--pf-tl-marker-border) solid var(--pf-tl-accent);
	box-sizing: border-box;
}

.w-pftimeline.marker_filled .pf-timeline__marker {
	background: var(--pf-tl-accent);
}

.w-pftimeline .pf-timeline__marker::before,
.w-pftimeline .pf-timeline__marker::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 1px;
	height: 100vh;
	margin-left: -0.5px;
	background: var(--pf-tl-line);
	pointer-events: none;
}

.w-pftimeline .pf-timeline__marker::before {
	bottom: calc(100% + var(--pf-tl-marker-border));
}

.w-pftimeline .pf-timeline__marker::after {
	top: calc(100% + var(--pf-tl-marker-border));
}

.w-pftimeline .pf-timeline__item:first-child .pf-timeline__marker::before,
.w-pftimeline .pf-timeline__item:last-child .pf-timeline__marker::after {
	display: none;
}

/* El título es un h4: hereda el estilo del tema */
.w-pftimeline .pf-timeline__title {
	grid-area: title;
	align-self: center;
	margin: 0;
	padding: 0;
}

.w-pftimeline .pf-timeline__title a {
	color: inherit;
	text-decoration: none;
}

.w-pftimeline .pf-timeline__title a:hover {
	color: var(--pf-tl-accent);
}

/* La descripción no lleva estilos propios: hereda el <p> del tema */
.w-pftimeline .pf-timeline__text {
	grid-area: text;
	margin-top: 0.4em;
}

.w-pftimeline .pf-timeline__text > :last-child {
	margin-bottom: 0;
}

/* Animación de entrada (solo si está activada) */
.pf-timeline--animate .pf-timeline__item {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .6s ease, transform .6s ease;
}

.pf-timeline--animate .pf-timeline__item.is-visible {
	opacity: 1;
	transform: none;
}

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

/* Móvil: marcador a la izquierda, todo el texto a la derecha */
@media (max-width: 767px) {
	.w-pftimeline .pf-timeline__item {
		grid-template-columns: var(--pf-tl-marker-size) minmax(0, 1fr);
		grid-template-areas:
			"marker period"
			".      company"
			".      title"
			".      text";
	}

	.w-pftimeline .pf-timeline__period,
	.w-pftimeline .pf-timeline__company {
		text-align: left;
	}

	.w-pftimeline .pf-timeline__title {
		margin-top: 0.4em;
	}
}