/* ==========================================================================
   DG Timeline para Elementor — DG DEV
   Todo se controla con variables CSS que el panel de Elementor sobrescribe.
   ========================================================================== */

.dgtl {
	--dgtl-accent: #e3151b;
	--dgtl-line: #d9d9d9;
	--dgtl-fill: var(--dgtl-accent);
	--dgtl-line-w: 3px;
	--dgtl-dot: 20px;
	--dgtl-dot-color: #2b2b2b;
	--dgtl-dot-bg: #fff;
	--dgtl-dot-top: 16px;
	--dgtl-label-w: 96px;
	--dgtl-marker-w: 52px;
	--dgtl-gap: 34px;
	--dgtl-card-bg: #fff;
	--dgtl-year: var(--dgtl-accent);
	--dgtl-sub: #8a8a8a;
	--dgtl-title: #111;
	--dgtl-text: #4d4d4d;
	--dgtl-badge-bg: #f2f2f2;
	--dgtl-badge: #555;
	--dgtl-badge-icon: var(--dgtl-accent);
	--dgtl-nav-bg: #fff;
	--dgtl-nav: #333;
	--dgtl-sticky: 20px;
	--dgtl-slides: 3;

	position: relative;
	width: 100%;
}

.dgtl *,
.dgtl *::before,
.dgtl *::after { box-sizing: border-box; }

.dgtl__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--dgtl-gap);
}

.dgtl__item { position: relative; margin: 0; }

/* ---------- Año ---------- */
.dgtl__label { grid-area: label; display: flex; flex-direction: column; }

.dgtl__year {
	display: block;
	color: var(--dgtl-year);
	font-size: 42px;
	font-weight: 700;
	line-height: .95;
	letter-spacing: -.01em;
	font-variant-numeric: lining-nums;
}

.dgtl__sub {
	display: block;
	margin-top: 6px;
	color: var(--dgtl-sub);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ---------- Punto ---------- */
.dgtl__marker {
	grid-area: marker;
	display: flex;
	justify-content: center;
	position: relative;
	z-index: 2;
}

.dgtl__dot {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--dgtl-dot);
	height: var(--dgtl-dot);
	border: 2px solid var(--dgtl-dot-color);
	border-radius: 50%;
	background: var(--dgtl-dot-bg);
	color: var(--dgtl-dot-color);
	transition: border-color .3s, color .3s, box-shadow .3s;
}

.dgtl__dot:not(.has-icon)::after {
	content: "";
	width: 42%;
	height: 42%;
	border-radius: 50%;
	background: currentColor;
}

.dgtl__dot.has-icon i { font-size: calc(var(--dgtl-dot) * .5); line-height: 1; }
.dgtl__dot.has-icon svg { width: 55%; height: 55%; fill: currentColor; }

.dgtl__item.is-highlight .dgtl__dot,
.dgtl__item.is-current .dgtl__dot {
	border-color: var(--dgtl-accent);
	color: var(--dgtl-accent);
}

.dgtl__item.is-current .dgtl__dot {
	box-shadow: 0 0 0 5px rgba(227, 21, 27, .14);
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--dgtl-accent) 16%, transparent);
}

/* ---------- Tarjeta ---------- */
.dgtl__card {
	grid-area: card;
	position: relative;
	min-width: 0;
	padding: 24px 28px;
	background: var(--dgtl-card-bg);
	border: 1px solid #e3e3e3;
	border-radius: 8px;
	transition: transform .35s ease, box-shadow .35s ease, opacity .6s ease;
}

.dgtl__item.is-highlight .dgtl__card::before {
	content: "";
	position: absolute;
	inset: -1px auto -1px -1px;
	width: 4px;
	border-radius: 8px 0 0 8px;
	background: var(--dgtl-accent);
}

.dgtl__media { margin: 0 0 16px; }
.dgtl__media img { display: block; width: 100%; height: auto; border-radius: 6px; }

.dgtl__title {
	margin: 0 0 .35em;
	color: var(--dgtl-title);
	font-size: 22px;
	line-height: 1.2;
}

.dgtl__text { color: var(--dgtl-text); line-height: 1.65; }
.dgtl__text > :first-child { margin-top: 0; }
.dgtl__text > :last-child { margin-bottom: 0; }

.dgtl__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin-top: 16px;
}

.dgtl__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: 5px;
	background: var(--dgtl-badge-bg);
	color: var(--dgtl-badge);
	font-size: 14px;
	line-height: 1.3;
}

.dgtl__badge-icon { display: inline-flex; color: var(--dgtl-badge-icon); }
.dgtl__badge-icon i { font-size: .9em; }
.dgtl__badge-icon svg { width: .9em; height: .9em; fill: currentColor; }

.dgtl__link {
	color: var(--dgtl-accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dgtl__link:focus-visible,
.dgtl__nav a:focus-visible,
.dgtl__arrow:focus-visible,
.dgtl__track:focus-visible {
	outline: 2px solid var(--dgtl-accent);
	outline-offset: 3px;
}

.dgtl-hover-yes .dgtl .dgtl__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .25);
}

/* ==========================================================================
   VERTICAL
   ========================================================================== */
.dgtl--v .dgtl__track { position: relative; }

.dgtl--v .dgtl__item {
	display: grid;
	align-items: start;
}

.dgtl--v .dgtl__marker { padding-top: var(--dgtl-dot-top); }
.dgtl--v .dgtl__label  { padding-top: calc(var(--dgtl-dot-top) - 8px); }

.dgtl__line {
	position: absolute;
	top: calc(var(--dgtl-dot-top) + var(--dgtl-dot) / 2);
	bottom: 0;
	width: var(--dgtl-line-w);
	background: var(--dgtl-line);
	border-radius: var(--dgtl-line-w);
	z-index: 1;
	overflow: hidden;
}

.dgtl__fill {
	display: block;
	width: 100%;
	height: var(--dgtl-progress, 0px);
	background: var(--dgtl-fill);
	border-radius: inherit;
}

/* Tarjetas a la derecha (como la referencia) */
.dgtl--left .dgtl__item {
	grid-template-columns: var(--dgtl-label-w) var(--dgtl-marker-w) minmax(0, 1fr);
	grid-template-areas: "label marker card";
}
.dgtl--left .dgtl__label { text-align: right; align-items: flex-end; }
.dgtl--left .dgtl__line {
	left: calc(var(--dgtl-label-w) + var(--dgtl-marker-w) / 2 - var(--dgtl-line-w) / 2);
}

/* Tarjetas a la izquierda */
.dgtl--right .dgtl__item {
	grid-template-columns: minmax(0, 1fr) var(--dgtl-marker-w) var(--dgtl-label-w);
	grid-template-areas: "card marker label";
}
.dgtl--right .dgtl__label { text-align: left; align-items: flex-start; }
.dgtl--right .dgtl__line {
	right: calc(var(--dgtl-label-w) + var(--dgtl-marker-w) / 2 - var(--dgtl-line-w) / 2);
}

/* Alternado */
.dgtl--both .dgtl__item {
	grid-template-columns: minmax(0, 1fr) var(--dgtl-marker-w) minmax(0, 1fr);
}
.dgtl--both .dgtl__item.is-odd  { grid-template-areas: "label marker card"; }
.dgtl--both .dgtl__item.is-even { grid-template-areas: "card marker label"; }
.dgtl--both .dgtl__item.is-odd  .dgtl__label { text-align: right; align-items: flex-end; }
.dgtl--both .dgtl__item.is-even .dgtl__label { text-align: left;  align-items: flex-start; }
.dgtl--both .dgtl__line { left: calc(50% - var(--dgtl-line-w) / 2); }

/* Franja del destacado del lado de la línea */
@media (min-width: 768px) {
	.dgtl--right .dgtl__item.is-highlight .dgtl__card::before,
	.dgtl--both .dgtl__item.is-even.is-highlight .dgtl__card::before {
		inset: -1px -1px -1px auto;
		border-radius: 0 8px 8px 0;
	}
}

/* Barra de años */
.dgtl__nav {
	position: sticky;
	top: var(--dgtl-sticky);
	z-index: 20;
	margin-bottom: calc(var(--dgtl-gap) * .8);
	padding: 6px;
	border: 1px solid #e3e3e3;
	border-radius: 8px;
	background: var(--dgtl-nav-bg);
}

.dgtl__nav ul {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}
.dgtl__nav ul::-webkit-scrollbar { display: none; }

.dgtl__nav a {
	display: block;
	padding: 6px 12px;
	border-radius: 5px;
	color: var(--dgtl-nav);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}

.dgtl__nav a:hover { background: rgba(0, 0, 0, .05); }

.dgtl__nav a.is-active {
	background: var(--dgtl-accent);
	color: #fff;
}

.dgtl--has-nav .dgtl__item { scroll-margin-top: calc(var(--dgtl-sticky) + 80px); }

/* Vertical en celular: todo a un lado, año arriba de la tarjeta */
@media (max-width: 767px) {
	.dgtl--v .dgtl__item,
	.dgtl--both .dgtl__item.is-odd,
	.dgtl--both .dgtl__item.is-even {
		grid-template-columns: 36px minmax(0, 1fr);
		grid-template-areas:
			"marker label"
			"marker card";
		row-gap: 10px;
	}
	.dgtl--v .dgtl__marker { grid-row: 1 / span 2; padding-top: 4px; }
	.dgtl--v .dgtl__label,
	.dgtl--both .dgtl__item .dgtl__label {
		padding-top: 0;
		text-align: left;
		align-items: flex-start;
		flex-direction: row;
		align-items: baseline;
		gap: 10px;
	}
	.dgtl--v .dgtl__line,
	.dgtl--right .dgtl__line,
	.dgtl--both .dgtl__line {
		left: calc(18px - var(--dgtl-line-w) / 2);
		right: auto;
		top: calc(4px + var(--dgtl-dot) / 2);
	}
	.dgtl__year { font-size: 32px; }
	.dgtl__sub { margin-top: 0; }
	.dgtl__card { padding: 18px 20px; }
}

/* ==========================================================================
   HORIZONTAL
   ========================================================================== */
.dgtl__arrows {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-bottom: 16px;
}

.dgtl__arrow {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid #dcdcdc;
	border-radius: 50%;
	background: var(--dgtl-nav-bg);
	color: var(--dgtl-nav);
	cursor: pointer;
	transition: border-color .2s, color .2s, opacity .2s;
}

.dgtl__arrow svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.dgtl__arrow:hover:not(:disabled) { border-color: var(--dgtl-accent); color: var(--dgtl-accent); }
.dgtl__arrow:disabled { opacity: .35; cursor: default; }

.dgtl--h .dgtl__track {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	padding-bottom: 10px;
	overscroll-behavior-x: contain;
}

.dgtl--h .dgtl__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
	user-select: none;
}

.dgtl--h .dgtl__list { flex-direction: row; gap: 0; }

.dgtl--h .dgtl__item {
	flex: 0 0 calc(100% / var(--dgtl-slides));
	display: flex;
	flex-direction: column;
	padding: 0 calc(var(--dgtl-gap) / 2);
	scroll-snap-align: start;
}

.dgtl--h .dgtl__label { min-height: 1em; }

.dgtl--h .dgtl__marker {
	justify-content: flex-start;
	margin: 14px 0 18px;
}

.dgtl--h .dgtl__marker::before {
	content: "";
	position: absolute;
	top: calc(50% - var(--dgtl-line-w) / 2);
	left: calc(var(--dgtl-gap) / -2);
	right: calc(var(--dgtl-gap) / -2);
	height: var(--dgtl-line-w);
	background: var(--dgtl-line);
	z-index: -1;
}

.dgtl--h .dgtl__item:first-child .dgtl__marker::before { left: 0; }
.dgtl--h .dgtl__item:last-child  .dgtl__marker::before { right: calc(100% - var(--dgtl-dot)); }

.dgtl--h .dgtl__card { flex: 1; }

/* ==========================================================================
   ANIMACIONES (solo con JS activo)
   ========================================================================== */
.dgtl.is-ready.dgtl--anim-fade  .dgtl__item:not(.is-visible) .dgtl__card { opacity: 0; transform: translateY(18px); }
.dgtl.is-ready.dgtl--anim-zoom  .dgtl__item:not(.is-visible) .dgtl__card { opacity: 0; transform: scale(.95); }
.dgtl.is-ready.dgtl--anim-slide .dgtl__item:not(.is-visible) .dgtl__card { opacity: 0; transform: translateX(28px); }
.dgtl.is-ready.dgtl--anim-slide.dgtl--right .dgtl__item:not(.is-visible) .dgtl__card,
.dgtl.is-ready.dgtl--anim-slide.dgtl--both  .dgtl__item.is-even:not(.is-visible) .dgtl__card { transform: translateX(-28px); }

.dgtl.is-ready .dgtl__item:not(.is-visible) .dgtl__label { opacity: 0; }
.dgtl.is-ready.dgtl--anim-none .dgtl__item .dgtl__label { opacity: 1; }
.dgtl__label { transition: opacity .6s ease .1s; }

@media (prefers-reduced-motion: reduce) {
	.dgtl .dgtl__card,
	.dgtl .dgtl__label,
	.dgtl .dgtl__dot { transition: none !important; }
	.dgtl.is-ready .dgtl__item .dgtl__card,
	.dgtl.is-ready .dgtl__item .dgtl__label { opacity: 1 !important; transform: none !important; }
	.dgtl--h .dgtl__track { scroll-behavior: auto; }
}

.dgtl-empty {
	padding: 20px;
	border: 1px dashed #ccc;
	border-radius: 6px;
	text-align: center;
	color: #777;
}

/* La animación de entrada de Elementor (elementor-invisible) oculta todo el widget
   y a veces nunca se libera. El widget ya anima cada hito por su cuenta. */
.elementor-widget-dg-timeline.elementor-invisible { visibility: visible; }