/**
 * Gaviota Timeline. Los valores por defecto de las custom properties los
 * sobrescriben los controles de estilo del widget.
 */

.gaviota-timeline {
	--gt-item: 273px;
	--gt-offset: 12px;
	--gt-label-gap: 56px;
	--gt-dot-size: 16px;
	--gt-label: var(--e-global-color-text, #7b7c7f);
	--gt-active: var(--e-global-color-accent, #e73744);
	--gt-dot: #c2c6cf;
	--gt-line: #a6a8ad;
	--gt-panel-gap: 128px;
	--gt-content: 440px;
}

/* -- Fila de años ------------------------------------------------------- */

.gaviota-timeline__nav {
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.gaviota-timeline__nav::-webkit-scrollbar {
	display: none;
}

.gaviota-timeline.is-dragging .gaviota-timeline__nav {
	scroll-behavior: auto;
	cursor: grabbing;
	user-select: none;
}

/* El reset de Hello Elementor pinta bordes, padding y fondo en los <button>. */
.gaviota-timeline .gaviota-timeline__tab,
.gaviota-timeline .gaviota-timeline__tab:hover,
.gaviota-timeline .gaviota-timeline__tab:focus {
	position: relative;
	display: flex;
	flex: 0 0 var(--gt-item);
	justify-content: flex-start;
	margin: 0;
	padding: 0 0 0 var(--gt-offset);
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--gt-label);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

/* Cada año pinta su tramo de línea: juntos forman una línea continua. */
.gaviota-timeline__tab::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: calc(var(--gt-dot-size) / 2);
	left: 0;
	height: 1px;
	background: var(--gt-line);
}

.gaviota-timeline__marker {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gt-label-gap);
}

.gaviota-timeline__label {
	white-space: nowrap;
	transition: color 0.25s ease;
}

.gaviota-timeline__dot {
	position: relative;
	width: var(--gt-dot-size);
	height: var(--gt-dot-size);
	border-radius: 50%;
	background: var(--gt-dot);
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.gaviota-timeline .gaviota-timeline__tab:hover .gaviota-timeline__dot {
	transform: scale(1.15);
}

.gaviota-timeline .gaviota-timeline__tab.is-active,
.gaviota-timeline .gaviota-timeline__tab.is-active:hover {
	color: var(--gt-active);
}

.gaviota-timeline__tab.is-active .gaviota-timeline__dot {
	background: var(--gt-active);
}

.gaviota-timeline .gaviota-timeline__tab:focus-visible {
	outline: 2px solid var(--gt-active);
	outline-offset: 4px;
}

/* -- Detalle ------------------------------------------------------------ */

.gaviota-timeline__panels {
	margin-top: var(--gt-panel-gap);
}

.gaviota-timeline__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--gt-content);
	gap: 24px 48px;
	align-items: start;
}

.gaviota-timeline__panel[hidden] {
	display: none;
}

.gaviota-timeline__panel.is-active {
	animation: gaviota-timeline-in 0.35s ease both;
}

.gaviota-timeline__panel:focus-visible {
	outline: 2px solid var(--gt-active);
	outline-offset: 8px;
}

.gaviota-timeline__title {
	margin: 0;
}

.gaviota-timeline__content > :first-child {
	margin-top: 0;
}

.gaviota-timeline__content > :last-child {
	margin-bottom: 0;
}

.gaviota-timeline__content p {
	margin: 0 0 8px;
}

@keyframes gaviota-timeline-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 767px) {
	.gaviota-timeline {
		--gt-offset: 0px;
		--gt-dot-size: 14px;
	}

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

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

	.gaviota-timeline__panel.is-active {
		animation: none;
	}

	.gaviota-timeline__label,
	.gaviota-timeline__dot {
		transition: none;
	}
}