/* SAY · Historia — línea de tiempo

   Ajustes rápidos: sobrescribir las variables en .say-tl desde Page/Global CSS. */



.say-tl {

	--say-tl-color: #fff;

	--say-tl-acento: #e43d30;

	--say-tl-cap: 40px;          /* ancho reservado para las puntas */

	--say-tl-eje: 30%;           /* posición del rombo dentro de cada columna */

	--say-tl-tallo: 110px;       /* largo de la línea punteada */

	--say-tl-rombo-w: 12px;

	--say-tl-rombo-h: 22px;

	--say-tl-anio-size: 1.5em;

	--say-tl-hito-size: 0.75em;

	--say-tl-m-eje: 16px;        /* móvil: distancia de la línea vertical al borde */

	color: var(--say-tl-color);

}



/* ---------- Desktop / tablet: horizontal con scroll ---------- */



.say-tl__scroll {

	overflow-x: auto;

	overflow-y: hidden;

	container-type: inline-size;

	scrollbar-width: thin;

	scrollbar-color: rgba(255, 255, 255, .35) transparent;

	-webkit-overflow-scrolling: touch;

}

.say-tl.is-desborde .say-tl__scroll { cursor: grab; }

.say-tl.is-arrastrando .say-tl__scroll { cursor: grabbing; user-select: none; }



.say-tl__grid {

	display: grid;

	width: max-content;

	grid-template-columns: var(--say-tl-cap) repeat(var(--say-tl-n), 220px) var(--say-tl-cap);

	grid-template-columns: var(--say-tl-cap) repeat(var(--say-tl-n), calc((100cqi - 2 * var(--say-tl-cap)) / var(--say-tl-v))) var(--say-tl-cap);

	grid-template-rows: auto var(--say-tl-rombo-h) auto;

	padding: 8px 0 16px;

}



.say-tl__rail {

	grid-column: 1 / -1;

	grid-row: 2;

	align-self: center;

	position: relative;

	height: 0;

}

.say-tl__rail::before {

	content: "";

	position: absolute;

	top: 0;

	left: 17px;

	right: 17px;

	border-top: .5px solid currentColor;

}

.say-tl__cap {

	position: absolute;

	top: 0;

	width: 34px;

	height: 16px;

	overflow: visible;

}

.say-tl__cap--ini { left: 0; transform: translateY(-50%); }

.say-tl__cap--fin { right: 0; transform: translateY(-50%) scaleX(-1); }



.say-tl__item { display: contents; }

.say-tl__item > * { grid-column: var(--c); min-width: 0; }



.say-tl__rombo {

	grid-row: 2;

	align-self: center;

	justify-self: start;

	position: relative;

	z-index: 1;

	display: block;

	width: var(--say-tl-rombo-w);

	height: var(--say-tl-rombo-h);

	margin-left: var(--say-tl-eje);

	transform: translateX(-50%);

	color: var(--say-tl-acento);

}

.say-tl__rombo svg { display: block; width: 100%; height: 100%; }



.say-tl__anio {

	justify-self: start;

	margin-left: var(--say-tl-eje);

	transform: translateX(-50%);

	font-size: var(--say-tl-anio-size);

	font-weight: 600;

	letter-spacing: .08em;

	line-height: 1;

	white-space: nowrap;

}

.say-tl__item.is-arriba > .say-tl__anio { grid-row: 1; align-self: end; margin-bottom: 18px; }

.say-tl__item.is-abajo > .say-tl__anio  { grid-row: 3; align-self: start; margin-top: 18px; }



.say-tl__cuerpo { display: flex; }

.say-tl__item.is-arriba > .say-tl__cuerpo { grid-row: 3; align-self: start; flex-direction: column; padding-top: 10px; }

.say-tl__item.is-abajo > .say-tl__cuerpo  { grid-row: 1; align-self: end; flex-direction: column-reverse; padding-bottom: 10px; }



.say-tl__tallo {

	display: block;

	flex: none;

	width: 1px;

	height: var(--say-tl-tallo);

	margin-left: var(--say-tl-eje);

	background: repeating-linear-gradient(to bottom, currentColor 0 12px, transparent 12px 22px);

	opacity: .8;

}

.say-tl__item.is-arriba .say-tl__tallo { margin-bottom: 12px; }

.say-tl__item.is-abajo .say-tl__tallo  { margin-top: 12px; }



.say-tl__hitos {

	list-style: none;

	margin: 0 0 0 calc(var(--say-tl-eje) - 14px);

	padding: 0 16px 0 0;

	font-size: var(--say-tl-hito-size);

	font-weight: 300;

	line-height: 1.4;

}

.say-tl__hitos li { position: relative; margin: 0 0 1em; padding-left: 12px; }

.say-tl__hitos li:last-child { margin-bottom: 0; }

.say-tl__hitos li::before { content: "\2022"; position: absolute; left: 0; }



/* ---------- Móvil: vertical, línea a la izquierda ---------- */



@media (max-width: 768px) {

	.say-tl .say-tl__scroll { overflow: visible; container-type: normal; cursor: auto; }



	.say-tl .say-tl__grid { display: block; width: auto; position: relative; padding: 40px 0; }



	.say-tl .say-tl__rail { position: absolute; align-self: auto; top: 0; bottom: 0; left: var(--say-tl-m-eje); width: 0; height: auto; }

	.say-tl .say-tl__rail::before { top: 17px; bottom: 17px; left: 0; right: auto; border-top: 0; border-left: .5px solid currentColor; }

	.say-tl .say-tl__rail .say-tl__cap { left: -17px; right: auto; }

	.say-tl .say-tl__rail .say-tl__cap--ini { top: 9px; transform: rotate(90deg); }

	.say-tl .say-tl__rail .say-tl__cap--fin { top: auto; bottom: 9px; transform: rotate(90deg) scaleX(-1); }



	.say-tl .say-tl__item {

		display: grid;

		grid-template-columns: calc(var(--say-tl-m-eje) * 2 + 8px) 1fr;

		grid-template-areas: "rombo anio" ". cuerpo";

		align-items: center;

		margin: 0 0 28px;

	}

	.say-tl .say-tl__item:last-child { margin-bottom: 0; }



	.say-tl .say-tl__item > .say-tl__rombo  { grid-area: rombo; margin-left: var(--say-tl-m-eje); }

	.say-tl .say-tl__item > .say-tl__anio   { grid-area: anio; margin: 0; transform: none; font-size: 1.25em; }

	.say-tl .say-tl__item > .say-tl__cuerpo { grid-area: cuerpo; flex-direction: column; padding: 10px 0 0; }

	.say-tl .say-tl__tallo { display: none; }

	.say-tl .say-tl__hitos { margin-left: 0; padding-right: 0; }

}