/* ============================================================
   Grupo Elis – Línea de Tiempo  v2  (Multi-year tabs)
   ─────────────────────────────────────────────────────────
   Layout constants (must match PHP):
     slide width  : 290 px
     spaceBetween : 20 px
     circle size  : 260 px
     dot-wrap top padding : 20px  → circle cy = 150px
     circle right edge    : 275px (145 + 130)
     arrow: left=275, top=142, 50×16 px
   ============================================================ */

/* ── Section shell ───────────────────────────────────────── */
.tl-timeline {
	--tl-red:    #8B1A2B;
	--tl-orange: #C97010;
	--tl-font:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

	font-family: var(--tl-font);
	background: #F2F2F2;
	padding: 60px 0 70px;
	width: 100%;
	box-sizing: border-box;
}

/* ── Header ──────────────────────────────────────────────── */
.tl-header {
	text-align: center;
	margin-bottom: 40px;
	padding: 0 24px;
}

.tl-timeline .sub-title {
	display: block;
	margin-bottom: 8px;
}

.tl-timeline .tl-titulo {
	font-size: 40px;
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
	color: var(--tl-red);
}

/* ── Year tabs ───────────────────────────────────────────── */
.tl-year-tabs {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 44px;
	padding: 0 24px;
}

.tl-year-tab {
	font-family: var(--tl-font);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #888;
	background: transparent;
	border: 2px solid #ccc;
	border-radius: 100px;
	padding: 8px 28px;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
	line-height: 1;
}

.tl-year-tab:hover {
	color: var(--tl-red);
	border-color: var(--tl-red);
}

.tl-year-tab.is-active {
	color: #fff;
	background: var(--tl-red);
	border-color: var(--tl-red);
	box-shadow: 0 4px 16px rgba(139, 26, 43, 0.28);
}

/* ── Outer swiper wrap ───────────────────────────────────── */
.tl-swiper-wrap {
	position: relative;
	max-width: 1010px;
	margin: 0 auto;
	padding: 30px 60px;
	overflow: hidden;
}

/* ── Swiper: allow vertical overflow for scale effect ─────── */
.tl-swiper {
	overflow: visible !important;
}

/* ── Each slide ──────────────────────────────────────────── */
.tl-slide {
	width: 290px !important;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	position: relative;
	opacity: 0.40;
	transition: opacity 0.4s ease;
}

.swiper-slide-prev.tl-slide,
.swiper-slide-next.tl-slide  { opacity: 0.72; }

.swiper-slide-active.tl-slide { opacity: 1; }

/* ── Dot wrap — only this scales, arrow stays fixed ─────── */
.tl-dot-wrap {
	padding: 20px 0 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: scale(0.68);
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.swiper-slide-prev  .tl-dot-wrap,
.swiper-slide-next  .tl-dot-wrap { transform: scale(0.86); }

.swiper-slide-active .tl-dot-wrap { transform: scale(1.14); }

/* ── Circle ──────────────────────────────────────────────── */
.tl-dot {
	width:  260px;
	height: 260px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	box-shadow: 0 6px 24px rgba(0,0,0,0.16);
	transition: box-shadow 0.4s ease;
}

.tl-dot-red {
	background: linear-gradient(145deg, #6D1322 0%, #B22234 55%, #C0392B 100%);
}

.tl-dot-orange {
	background: linear-gradient(145deg, #A85C08 0%, #D4810F 55%, #E8921A 100%);
}

/* Active glow ring */
.swiper-slide-active .tl-dot-red {
	box-shadow:
		0 14px 44px rgba(139, 26, 43, 0.40),
		0 0 0 6px rgba(255,255,255,0.95),
		0 0 0 11px rgba(139, 26, 43, 0.22);
}

.swiper-slide-active .tl-dot-orange {
	box-shadow:
		0 14px 44px rgba(201, 112, 16, 0.40),
		0 0 0 6px rgba(255,255,255,0.95),
		0 0 0 11px rgba(201, 112, 16, 0.22);
}

/* ── Text inside the circle ──────────────────────────────── */
.tl-dot-month {
	display: block;
	color: #ffffff;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
	line-height: 1;
}

.tl-dot-days {
	display: block;
	color: rgba(255,255,255,0.88);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-align: center;
	text-transform: uppercase;
	line-height: 1;
}

.tl-name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	color: #ffffff;
	padding: 0 20px;
	word-break: break-word;
	hyphens: auto;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	line-clamp: 4;
	overflow: hidden;
}

.tl-dot-sep {
	width: 36px;
	height: 1px;
	background: rgba(255,255,255,0.40);
	margin: 6px auto;
	flex-shrink: 0;
}

.tl-link { color: inherit; text-decoration: none; }
.tl-link:hover { text-decoration: underline; }

/* ── Arrow SVG connector ─────────────────────────────────── */
.tl-arrow-svg {
	position: absolute;
	left:  275px;
	top:   142px;
	pointer-events: none;
	z-index: 2;
	opacity: 0.55;
	transition: opacity 0.4s ease;
}

.swiper-slide-active .tl-arrow-svg,
.swiper-slide-prev   .tl-arrow-svg {
	opacity: 1;
}

/* ── Navigation buttons ──────────────────────────────────── */
.tl-prev,
.tl-next {
	/* Reset Swiper defaults */
	--swiper-navigation-size: 0;
	position: absolute;
	top:    50%;
	transform: translateY(-50%);
	margin-top: 0;
	z-index: 10;

	width:  40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid var(--tl-red);
	background: #fff;
	color: var(--tl-red);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background 0.2s, color 0.2s, box-shadow 0.2s;
	box-shadow: 0 2px 10px rgba(139,26,43,0.15);
}

.tl-prev { left: 8px; }
.tl-next { right: 8px; }

.tl-prev svg,
.tl-next svg {
	width:  18px;
	height: 18px;
	display: block;
	flex-shrink: 0;
}

.tl-prev::after,
.tl-next::after {
	display: none !important;
}

.tl-prev:hover,
.tl-next:hover {
	background: var(--tl-red);
	color: #fff;
	box-shadow: 0 4px 16px rgba(139,26,43,0.30);
}

.tl-prev.swiper-button-disabled,
.tl-next.swiper-button-disabled {
	opacity: 0.25;
	pointer-events: none;
}

/* ── Error ───────────────────────────────────────────────── */
.tl-error {
	color: #c0392b;
	font-style: italic;
	padding: 10px 20px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1010px) {
	.tl-swiper-wrap { max-width: 100%; padding: 30px 56px; }
}

@media (max-width: 900px) {
	.tl-timeline .tl-titulo   { font-size: 34px; }
	.tl-header                { margin-bottom: 32px; }
	.tl-year-tabs             { margin-bottom: 36px; }
	.tl-swiper-wrap           { padding: 28px 54px; }
	.tl-slide                 { width: 240px !important; }
	.tl-dot                   { width: 210px; height: 210px; }
	.tl-dot-wrap              { transform: scale(0.70); }
	.swiper-slide-prev .tl-dot-wrap,
	.swiper-slide-next .tl-dot-wrap  { transform: scale(0.87); }
	.swiper-slide-active .tl-dot-wrap { transform: scale(1.08); }
	.tl-name                  { font-size: 13px; }
	.tl-dot-month             { font-size: 18px; }
	.tl-dot-days              { font-size: 12px; }
	.tl-arrow-svg             { left: 225px; top: 117px; }
}

@media (max-width: 600px) {
	.tl-timeline              { padding: 36px 0 48px; }
	.tl-timeline .tl-titulo   { font-size: 28px; }
	.tl-header                { margin-bottom: 24px; padding: 0 16px; }
	.tl-year-tabs             { margin-bottom: 28px; gap: 6px; }
	.tl-year-tab              { font-size: 14px; padding: 7px 22px; }
	.tl-swiper-wrap           { padding: 22px 52px; }
	.tl-slide                 { width: 190px !important; }
	.tl-dot                   { width: 170px; height: 170px; }
	.tl-dot-wrap              { padding: 14px 0 18px; transform: scale(0.72); }
	.swiper-slide-prev .tl-dot-wrap,
	.swiper-slide-next .tl-dot-wrap  { transform: scale(0.88); }
	.swiper-slide-active .tl-dot-wrap { transform: scale(1.04); }
	.swiper-slide-active .tl-dot-red {
		box-shadow:
			0 8px 28px rgba(139,26,43,0.38),
			0 0 0 4px rgba(255,255,255,0.95),
			0 0 0 7px rgba(139,26,43,0.20);
	}
	.swiper-slide-active .tl-dot-orange {
		box-shadow:
			0 8px 28px rgba(201,112,16,0.38),
			0 0 0 4px rgba(255,255,255,0.95),
			0 0 0 7px rgba(201,112,16,0.20);
	}
	.tl-name                  { font-size: 12px; padding: 0 16px; -webkit-line-clamp: 3; line-clamp: 3; }
	.tl-dot-sep               { width: 28px; margin: 4px auto; }
	.tl-dot-month             { font-size: 16px; }
	.tl-dot-days              { font-size: 11px; }
	.tl-arrow-svg             { left: 180px; top: 97px; }
	.tl-prev, .tl-next        { width: 34px; height: 34px; }
	.tl-prev svg, .tl-next svg { width: 15px; height: 15px; }
}

@media (max-width: 380px) {
	.tl-timeline .tl-titulo   { font-size: 24px; }
	.tl-slide                 { width: 165px !important; }
	.tl-dot                   { width: 148px; height: 148px; }
	.tl-name                  { font-size: 11px; }
	.tl-dot-month             { font-size: 14px; }
	.tl-arrow-svg             { left: 157px; top: 91px; }
}