/**
 * Timeline Nexus — Estilos públicos del timeline.
 *
 * Diseño editorial:
 *  - Línea vertical central de 3px terracota (#A6492E) con puntos de 14px.
 *  - Tarjetas blancas alternadas izquierda/derecha, borde lateral terracota,
 *    esquinas de 16px y sombra suave cálida.
 *  - Tipografías: Fraunces (fechas) e Inter (texto).
 *  - Fondo transparente: hereda el fondo de la página.
 */

/* ── Contenedor general ────────────────────────────────────── */
.nexus-timeline {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	padding: 32px 0;
	background: transparent; /* Hereda el fondo de la página. */
}

/* Línea vertical central de 3px terracota. */
.nexus-timeline::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 3px;
	background: #A6492E;
	border-radius: 2px;
}

/* ── Evento: mitad izquierda o derecha del contenedor ──────── */
.nexus-event {
	position: relative;
	width: 50%;
	padding: 0 44px 56px;
	box-sizing: border-box;
}

/* Eventos pares: columna izquierda, texto alineado a la derecha
   (hacia la línea central, como en el diseño de referencia). */
.nexus-event--left {
	left: 0;
	text-align: right;
}

/* Eventos impares: columna derecha, texto alineado a la izquierda. */
.nexus-event--right {
	left: 50%;
	text-align: left;
}

/* ── Punto (dot) sobre la línea central ────────────────────── */
/* Círculo terracota de 14px con borde crema de 3px. */
.nexus-event::before {
	content: '';
	position: absolute;
	top: 32px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #A6492E;
	border: 3px solid #FDF6EC;
	box-sizing: content-box; /* 14px de círculo + 3px de borde por lado. */
	z-index: 2;
}

/* Posicionamos el punto centrado sobre la línea:
   el círculo completo mide 20px (14 + 3 + 3), así que lo desplazamos -10px. */
.nexus-event--left::before {
	right: -10px;
}

.nexus-event--right::before {
	left: -10px;
}

/* ── Tarjeta del evento ────────────────────────────────────── */
.nexus-card {
	background: #FFFFFF;
	border-radius: 16px;
	padding: 28px;
	box-shadow: 0 4px 16px rgba(74, 51, 40, 0.10); /* Sombra suave cálida. */
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	text-align: inherit; /* Hereda la alineación del lado que le toca. */
}

/* Borde lateral de 4px terracota: en el lado que mira a la línea central. */
.nexus-event--left .nexus-card {
	border-right: 4px solid #A6492E;
}

.nexus-event--right .nexus-card {
	border-left: 4px solid #A6492E;
}

/* ── Contenido de la tarjeta ───────────────────────────────── */

/* Imagen opcional: arriba del texto, ancho completo, esquinas de 10px. */
.nexus-card__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	margin: 0 0 18px;
}

/* Fecha en grande: Fraunces 28px, bold, terracota. */
.nexus-card__date {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: #A6492E;
	margin: 0 0 6px;
}

/* Nombre del evento: Inter 17px, semibold, casi negro cálido. */
.nexus-card__title {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: #1F1B16;
	margin: 0 0 10px;
}

/* Descripción: Inter 15px, interlineado amplio, marrón suave. */
.nexus-card__desc {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
	color: #6B5B4F;
}

.nexus-card__desc p {
	margin: 0 0 10px;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.nexus-card__desc p:last-child {
	margin-bottom: 0;
}

/* Enlace discreto al documento adjunto. */
.nexus-card__doc {
	display: inline-block;
	margin-top: 14px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #A6492E;
	text-decoration: none;
	border-bottom: 1px solid rgba(166, 73, 46, 0.35);
	transition: border-color 0.15s ease;
}

.nexus-card__doc:hover,
.nexus-card__doc:focus {
	color: #A6492E;
	border-bottom-color: #A6492E;
	text-decoration: none;
}

/* ── Animación de aparición (progresiva, controlada por JS) ──
   Por defecto las tarjetas son VISIBLES: si JavaScript no carga,
   el timeline se ve perfectamente. public.js añade la clase
   .nexus-anim al contenedor solo cuando IntersectionObserver
   está disponible; entonces las tarjetas parten ocultas y
   aparecen con fade-in + translateY al entrar en el viewport. */
.nexus-anim .nexus-event {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.nexus-anim .nexus-event.nexus-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Respetamos la preferencia de usuario de reducir movimiento. */
@media (prefers-reduced-motion: reduce) {
	.nexus-anim .nexus-event {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ── RESPONSIVE (< 768px) ──────────────────────────────────── */
/* La línea se mueve a la izquierda y todas las tarjetas pasan a
   una sola columna a la derecha de la línea, texto a la izquierda. */
@media (max-width: 767px) {
	.nexus-timeline::before {
		left: 10px;
		transform: none;
	}

	.nexus-event,
	.nexus-event--left,
	.nexus-event--right {
		width: 100%;
		left: 0;
		text-align: left;
		padding: 0 0 40px 40px;
	}

	/* El punto se centra sobre la línea (línea en left:10px, ancho 3px →
	   centro en 11.5px; el círculo mide 20px → left: 1.5px). */
	.nexus-event--left::before,
	.nexus-event--right::before {
		left: 1.5px;
		right: auto;
	}

	/* El borde de acento pasa siempre al lado izquierdo. */
	.nexus-event--left .nexus-card,
	.nexus-event--right .nexus-card {
		border-right: none;
		border-left: 4px solid #A6492E;
	}

	.nexus-card {
		padding: 22px;
	}

	.nexus-card__date {
		font-size: 24px;
	}
}