.estb-timeline-horizontal {
	--estb-th-line-color: #e0e3e8;
	--estb-th-line-thickness: 2px;
	--estb-th-marker-size: 52px;
	--estb-th-item-width: 200px;
	--estb-th-journey-orb-size: 64px;
	--estb-th-journey-gap: 32px;
	--estb-th-card-active-color: #1a1a1a;
	width: 100%;
}

.estb-timeline-horizontal .estb-th-row {
	display: flex;
	align-items: flex-start;
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.estb-timeline-horizontal .estb-th-item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: center;
}

.estb-timeline-horizontal .estb-th-marker-wrap {
	width: 100%;
	display: flex;
	align-items: center;
	margin-bottom: 18px;
}

/* La línea se dibuja como dos segmentos flexibles a cada lado del círculo,
   DENTRO del mismo contenedor que la propia alineación (.estb-th-marker-wrap).
   Al usar flexbox en vez de porcentajes calculados a mano, el segmento se
   ajusta solo tanto al espaciado entre etapas como a la alineación elegida
   (izquierda/centro/derecha) — sin huecos y sin depender del ancho de pantalla. */
.estb-timeline-horizontal .estb-th-line-seg {
	flex: 1 1 0;
	min-width: 0;
	height: var(--estb-th-line-thickness);
	background: var(--estb-th-line-color);
}

.estb-timeline-horizontal .estb-th-line-seg.estb-th-line-hidden {
	background: transparent;
}

/* Alineación izquierda: el círculo se pega al borde de "Espacio entre etapas",
   igual que el texto de abajo; el segmento sobrante absorbe el resto. */
.estb-timeline-horizontal.estb-th-text-align-left .estb-th-line-before {
	flex: 0 0 var(--estb-th-item-padding, 12px);
}

/* Alineación derecha: caso simétrico al de la izquierda. */
.estb-timeline-horizontal.estb-th-text-align-right .estb-th-line-after {
	flex: 0 0 var(--estb-th-item-padding, 12px);
}

.estb-timeline-horizontal .estb-th-marker {
	position: relative;
	z-index: 1;
	width: var(--estb-th-marker-size);
	height: var(--estb-th-marker-size);
	line-height: var(--estb-th-marker-size);
	border-radius: 50%;
	text-align: center;
	font-weight: 700;
	flex-shrink: 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Icono opcional dentro del círculo (sustituye al número/etiqueta). Se apoya en
   currentColor, así que hereda el mismo color que el texto del número
   ("Color del texto del número"). */
.estb-timeline-horizontal .estb-th-marker i {
	font-size: calc(var(--estb-th-marker-size) * 0.42);
	line-height: 1;
}

.estb-timeline-horizontal .estb-th-marker svg {
	width: calc(var(--estb-th-marker-size) * 0.42);
	height: calc(var(--estb-th-marker-size) * 0.42);
	fill: currentColor;
}

/* Animación "grow" al pasar el cursor sobre la etapa (activable/desactivable, e
   intensidad ajustable, desde "Diseño"). Se anima el círculo entero, no el icono/número
   por separado, para que el borde y el fondo crezcan juntos; la sombra añade profundidad
   para que el efecto se note incluso a poca escala. */
.estb-timeline-horizontal.estb-th-hover-grow .estb-th-marker {
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.estb-timeline-horizontal.estb-th-hover-grow .estb-th-item:hover .estb-th-marker {
	transform: scale(var(--estb-th-hover-scale, 1.4));
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.estb-timeline-horizontal .estb-th-content {
	width: 100%;
	box-sizing: border-box;
}

.estb-timeline-horizontal .estb-th-title {
	font-weight: 600;
	margin-bottom: 6px;
}

.estb-timeline-horizontal .estb-th-subtitle {
	font-size: 0.9em;
	font-weight: 500;
	margin-bottom: 6px;
	opacity: 0.85;
}

.estb-timeline-horizontal .estb-th-description {
	font-size: 0.95em;
	line-height: 1.5;
}

.estb-timeline-horizontal .estb-th-button {
	display: inline-block;
	margin-top: 14px;
	border: 1px solid transparent;
	font-weight: 600;
	font-size: 0.9em;
	text-decoration: none;
	line-height: 1.4;
	box-sizing: border-box;
	transition: opacity 0.2s ease;
}

.estb-timeline-horizontal .estb-th-button:hover,
.estb-timeline-horizontal .estb-th-button:focus {
	opacity: 0.85;
}

.estb-timeline-horizontal-notice {
	padding: 20px;
	border: 1px dashed #ccc;
	text-align: center;
	color: #888;
}

/* Animación de entrada (fade-in escalonado al hacer scroll). El estado "oculto" solo se
   aplica cuando el script JS ha añadido la clase "estb-th-fade-pending" (ver
   assets/js/timeline.js): así, sin JavaScript, el timeline se ve siempre completo desde el
   principio, nunca invisible por error. El retraso de cada etapa (transition-delay) se
   calcula en PHP a partir de "Retraso entre etapas" y se aplica como estilo en línea por
   etapa, así que aquí solo hace falta declarar la transición y los dos estados.
   El apilado móvil hereda la misma animación sin necesidad de reglas aparte. */
.estb-timeline-horizontal .estb-th-item {
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.estb-timeline-horizontal.estb-th-fade-pending .estb-th-item {
	opacity: 0;
	transform: translateY(20px);
}

.estb-timeline-horizontal.estb-th-fade-pending.estb-th-in-view .estb-th-item {
	opacity: 1;
	transform: translateY(0);
}

/* Modo acordeón. El círculo y el bloque título+subtítulo se renderizan como <button> cuando
   este modo está activado (ver render() en el PHP) — aquí solo reseteamos el aspecto que un
   <button> trae por defecto (fondo, borde, tipografía) para que se sigan viendo igual que
   antes. Esta parte NO depende de JavaScript: aplica siempre que el modo esté activado,
   aunque el click todavía no haga nada (eso lo añade el script, ver más abajo). No tocamos
   "display" ni "margin" del círculo aquí: ya tiene sus propias reglas más arriba
   (.estb-th-marker-wrap) y no queremos pisarlas. */
.estb-timeline-horizontal.estb-th-accordion .estb-th-marker-wrap.estb-th-toggle,
.estb-timeline-horizontal.estb-th-accordion .estb-th-header-text.estb-th-toggle {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: inherit;
	text-align: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* El título+subtítulo, a diferencia del círculo, no tenía ninguna regla CSS propia antes de
   esta versión (era un div "normal", sin display/width/margin declarados) — como <button>
   por defecto es "inline-block" y trae su propio margen, aquí sí hace falta fijarlos a mano
   para que ocupe el 100% del ancho igual que antes. */
.estb-timeline-horizontal.estb-th-accordion .estb-th-header-text.estb-th-toggle {
	display: block;
	width: 100%;
	margin: 0;
}

.estb-timeline-horizontal.estb-th-accordion .estb-th-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 6px;
}

/* El plegado/desplegado en sí (ocultar el panel con texto/texto adicional/botón, y animar su
   apertura) SOLO se activa cuando el script consigue engancharse a los clics — ver
   initAccordion() en assets/js/timeline.js, que añade la clase "estb-th-collapsible" al
   widget. Mismo criterio que la animación de entrada: sin JavaScript el panel se queda
   visible siempre (los botones existen pero no hacen nada), porque perder el acceso al
   contenido sería mucho peor que perder la animación. */
.estb-timeline-horizontal.estb-th-collapsible .estb-th-panel {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.4s ease, opacity 0.3s ease;
}

.estb-timeline-horizontal.estb-th-collapsible .estb-th-panel.estb-th-panel-open {
	opacity: 1;
}

/* Diseño en cuadrícula. En vez de la fila horizontal conectada por una línea, las etapas se
   colocan en una rejilla CSS: 3 columnas (la primera algo más ancha, como en el diseño de
   referencia del cliente), la primera etapa ocupa la columna 1 abarcando tantas filas como
   necesite el resto para caber en 2 columnas (el "span" exacto se calcula en PHP, ver
   render() — así se generaliza más allá de exactamente 5 etapas), y las demás se reparten
   solas por las columnas 2 y 3 (flujo normal de grid, sin necesidad de posicionarlas a
   mano). No tiene sentido ninguna línea de conexión en una cuadrícula de tarjetas sueltas,
   así que se oculta. "Posición del timeline" / "Ancho de cada etapa" (sección Alineación)
   tampoco tienen efecto aquí: son propiedades de flexbox (flex-basis/width) que un
   navegador simplemente ignora cuando el padre es "display:grid", así que no hace falta
   anularlas a mano. */
.estb-timeline-horizontal.estb-th-grid .estb-th-row {
	display: grid;
	grid-template-columns: 1.15fr 1fr 1fr;
	grid-auto-rows: 1fr;
	/* v1.12.0: antes reutilizaba "--estb-th-item-padding" (el mismo "Espacio entre etapas"
	   del modo clásico), lo que impedía ajustar uno sin afectar al otro. Ahora usa su propia
	   variable ("Espacio entre tarjetas", sección Diseño en cuadrícula), con un valor por
	   defecto el TRIPLE del que tenía antes (12px → 36px), a petición de Carlotta. */
	gap: var(--estb-th-grid-gap, 36px);
}

.estb-timeline-horizontal.estb-th-grid .estb-th-item {
	background: var(--estb-th-grid-card-bg, #f7f8fa);
	border: 1px solid var(--estb-th-grid-card-border, #e0e3e8);
	border-radius: var(--estb-th-grid-card-radius, 8px);
	padding: var(--estb-th-card-padding, 28px);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.25s ease, border-color 0.25s ease;
}

.estb-timeline-horizontal.estb-th-grid .estb-th-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

/* La línea de conexión (segmentos + tramo vertical de móvil) no tiene cabida en la
   cuadrícula de tarjetas. */
.estb-timeline-horizontal.estb-th-grid .estb-th-line-seg,
.estb-timeline-horizontal.estb-th-grid .estb-th-item::before {
	display: none;
}

/* Sin los segmentos de línea, el círculo ya no se autocentra por flex-grow a los dos
   lados (ver comentario de v1.2.2 más arriba) — aquí se fija a mano según la MISMA
   "Alineación del texto" que ya gobierna el resto de la tarjeta, para no necesitar un
   control nuevo. */
.estb-timeline-horizontal.estb-th-grid.estb-th-text-align-left .estb-th-marker-wrap {
	justify-content: flex-start;
}

.estb-timeline-horizontal.estb-th-grid.estb-th-text-align-center .estb-th-marker-wrap {
	justify-content: center;
}

.estb-timeline-horizontal.estb-th-grid.estb-th-text-align-right .estb-th-marker-wrap {
	justify-content: flex-end;
}

/* Imagen de fondo opcional por etapa (nueva en v1.6.0, solo visible en este modo). Se
   dibuja "sangrando" hasta el borde exterior de la tarjeta (márgenes negativos igual al
   padding de la tarjeta) para que quede a página completa dentro de ella, como en el
   diseño de referencia; el texto de la tarjeta se queda siempre DEBAJO de la foto (nunca
   superpuesto), así no hace falta ningún degradado para garantizar que se lea bien
   encima, sea cual sea la imagen que suba el cliente. */
.estb-timeline-horizontal.estb-th-grid .estb-th-photo {
	position: relative;
	margin: calc(var(--estb-th-card-padding, 28px) * -1) calc(var(--estb-th-card-padding, 28px) * -1) 20px;
	aspect-ratio: 1.5;
	overflow: hidden;
}

.estb-timeline-horizontal.estb-th-grid .estb-th-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Etiqueta destacada sobre la foto (nueva en v1.8.0), opcional y por etapa — pensada sobre
   todo para la primera tarjeta ("destacado"), pero disponible en cualquier etapa con foto.
   Bilingüe: el texto principal siempre visible, la traducción más pequeña debajo, dentro de
   la misma cinta. Se ancla a la esquina superior izquierda de la foto. */
.estb-timeline-horizontal.estb-th-grid .estb-th-photo-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	max-width: calc(100% - 32px);
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 14px;
	background: var(--estb-th-card-active-color, #1a1a1a);
	color: #fff;
	border-radius: 6px;
	line-height: 1.3;
}

.estb-timeline-horizontal .estb-th-photo-badge-primary {
	font-size: 0.85em;
	font-weight: 700;
}

.estb-timeline-horizontal .estb-th-photo-badge-secondary {
	font-size: 0.75em;
	font-weight: 500;
	opacity: 0.85;
}

/* Navegación superior (v1.7.0, ajustada en v1.8.0). Fila de iconos a modo de índice, encima
   de la cuadrícula: cada uno es un enlace real a un ancla (el navegador ya salta hasta la
   tarjeta sin necesidad de JS); el script solo añade un scroll más suave y el resaltado
   visual de la tarjeta de destino (ver timeline.js → initJourneyNav e "is-active" más
   abajo). El icono reutiliza la misma clase ".estb-th-marker" que el círculo clásico (mismo
   color de fondo vía "Color de esta etapa"/"Color por defecto" y mismo color de icono), así
   no hace falta ningún control de color nuevo; solo el tamaño se pisa aparte con su propia
   variable.
   v1.8.0: en vez de centrarse dejando huecos a los lados, ahora ocupa todo el ancho
   disponible en tantas columnas como etapas (--estb-th-journey-cols, fijada en el PHP), y
   añade una línea horizontal decorativa detrás de los iconos (::before) — solo en
   escritorio/tablet: en móvil la fila sigue apilándose (ver el media query de abajo), donde
   una línea horizontal no tendría sentido. */
/* v1.13.0: la fila es SIEMPRE una sola fila en cuadrícula de N columnas (una por etapa),
   también en móvil — antes, por debajo de 768px, era un flex-wrap centrado que partía los
   iconos en varias filas y perdía la línea. Ahora en móvil se comporta igual que en el
   diseño de referencia del cliente: los 5 (o N) iconos caben en horizontal a lo ancho de
   la pantalla, más pequeños (ver el media query de móvil al final del archivo). */
.estb-timeline-horizontal .estb-th-journey {
	display: grid;
	grid-template-columns: repeat(var(--estb-th-journey-cols, 5), minmax(0, 1fr));
	gap: var(--estb-th-journey-gap, 32px);
	position: relative;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

.estb-timeline-horizontal .estb-th-journey::before {
	content: '';
	position: absolute;
	top: calc(var(--estb-th-journey-orb-size) / 2);
	left: calc(100% / (var(--estb-th-journey-cols, 5) * 2));
	right: calc(100% / (var(--estb-th-journey-cols, 5) * 2));
	height: 1px;
	background: var(--estb-th-line-color);
	z-index: 0;
}

.estb-timeline-horizontal .estb-th-journey-link {
	position: relative;
	z-index: 1;
	min-width: 0;
}

@media (min-width: 768px) {
	.estb-timeline-horizontal .estb-th-journey::before {
		content: '';
		position: absolute;
		top: calc(var(--estb-th-journey-orb-size) / 2);
		left: 8%;
		right: 8%;
		height: 1px;
		background: var(--estb-th-line-color);
		z-index: 0;
	}

	.estb-timeline-horizontal .estb-th-journey-link {
		position: relative;
		z-index: 1;
		margin: 0 auto;
	}
}

.estb-timeline-horizontal .estb-th-journey-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	max-width: 130px;
	text-align: center;
	text-decoration: none;
	color: inherit;
}

.estb-timeline-horizontal .estb-th-journey-orb {
	width: var(--estb-th-journey-orb-size);
	height: var(--estb-th-journey-orb-size);
	line-height: var(--estb-th-journey-orb-size);
}

/* Estas dos reglas pisan a ".estb-th-marker i/svg" (que usan el tamaño general del círculo,
   --estb-th-marker-size) porque van después en la hoja de estilos y tienen la misma
   especificidad: el icono del orbe de navegación debe escalar con SU PROPIO tamaño. */
.estb-timeline-horizontal .estb-th-journey-orb i {
	font-size: calc(var(--estb-th-journey-orb-size) * 0.42);
}

.estb-timeline-horizontal .estb-th-journey-orb svg {
	width: calc(var(--estb-th-journey-orb-size) * 0.42);
	height: calc(var(--estb-th-journey-orb-size) * 0.42);
}

.estb-timeline-horizontal .estb-th-journey-label-primary {
	display: block;
	font-weight: 600;
	font-size: 0.85em;
	line-height: 1.3;
}

.estb-timeline-horizontal .estb-th-journey-label-secondary {
	display: block;
	font-size: 0.75em;
	line-height: 1.3;
	opacity: 0.7;
	margin-top: 2px;
}

/* La misma animación "grow" del círculo clásico (ver más arriba), pero disparada desde el
   enlace de navegación (no existe ".estb-th-item" aquí) y también al recibir foco por
   teclado, no solo al pasar el cursor. */
.estb-timeline-horizontal.estb-th-hover-grow .estb-th-journey-link:hover .estb-th-marker,
.estb-timeline-horizontal.estb-th-hover-grow .estb-th-journey-link:focus-visible .estb-th-marker {
	transform: scale(var(--estb-th-hover-scale, 1.4));
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.estb-timeline-horizontal .estb-th-journey-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: 12px;
}

/* Insignia con icono de flecha sobre el icono de navegación (v1.11.0), replicando el detalle
   del diseño de referencia del cliente: oculta en reposo (opacity:0, ligeramente desplazada),
   aparece al pasar el cursor/foco por el enlace — o al marcar la tarjeta correspondiente desde
   el hover recíproco de v1.10.0 ("estb-th-journey-preview") — con el mismo color de acento por
   etapa que el resto del sistema (--estb-th-node-color). ".estb-th-journey-orb" ya tiene
   "position:relative" heredado de ".estb-th-marker", así que esta insignia se ancla
   correctamente a su esquina. */
.estb-timeline-horizontal .estb-th-journey-orb-arrow {
	position: absolute;
	top: 2px;
	right: 2px;
	width: calc(var(--estb-th-journey-orb-size) * 0.34);
	height: calc(var(--estb-th-journey-orb-size) * 0.34);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--estb-th-node-color, var(--estb-th-card-active-color));
	color: #fff;
	opacity: 0;
	transform: translate(-3px, 4px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}

.estb-timeline-horizontal .estb-th-journey-orb-arrow svg {
	width: 55%;
	height: 55%;
}

.estb-timeline-horizontal .estb-th-journey-link:hover .estb-th-journey-orb-arrow,
.estb-timeline-horizontal .estb-th-journey-link:focus-visible .estb-th-journey-orb-arrow,
.estb-timeline-horizontal .estb-th-journey-link.estb-th-journey-preview .estb-th-journey-orb-arrow {
	opacity: 1;
	transform: translate(0, 0);
}

/* Tarjeta resaltada: al hacer click en un elemento de la navegación superior, SOLO se marca
   la tarjeta correspondiente (borde + sombra) y se desplaza la vista hasta ella — nada de
   su contenido se oculta ni se despliega (por eso el modo acordeón se desactiva cuando la
   navegación superior está activa, ver render() en el PHP). */
.estb-timeline-horizontal.estb-th-grid .estb-th-item.estb-th-card-active {
	border-color: var(--estb-th-card-active-color);
	box-shadow: 0 0 0 2px var(--estb-th-card-active-color);
}

/* v1.8.0: al pasar el cursor (o el foco de teclado) por un elemento de la navegación
   superior, la tarjeta correspondiente se marca igual que al hacer click (borde + sombra),
   más una pequeña animación de "subir" un par de píxeles — pero es un estado totalmente
   aparte de ".estb-th-card-active": pasar el cursor por otra etapa nunca quita la tarjeta ya
   marcada por click, y quitar el cursor nunca la deja sin marcar (ver timeline.js →
   initJourneyNav). Reutiliza la misma transición ya declarada en ".estb-timeline-horizontal.
   estb-th-grid .estb-th-item" (transform incluido), así que no hace falta declarar una
   transición nueva aquí. */
.estb-timeline-horizontal.estb-th-grid .estb-th-item.estb-th-card-preview {
	border-color: var(--estb-th-card-active-color);
	box-shadow: 0 0 0 2px var(--estb-th-card-active-color);
	transform: translateY(-4px);
}

/* Anatomía de tarjeta "ecosistema" (v1.7.0), solo con "Navegación superior" activada: el
   círculo grande desaparece de dentro de la tarjeta (vive en la fila de navegación de
   arriba) y en su lugar se muestra una fila con la categoría (+ traducción opcional) y un
   icono pequeño, el título, el texto (+ traducción opcional), las etiquetas y el botón con
   flecha — replicando el diseño de referencia del cliente. El texto se alinea a la
   izquierda (no al centro, como el resto del widget), igual que en ese diseño. */
.estb-timeline-horizontal.estb-th-journey-on .estb-th-item {
	text-align: left;
	scroll-margin-top: 24px;
}

.estb-timeline-horizontal .estb-th-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.estb-timeline-horizontal .estb-th-card-category-primary {
	display: block;
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.estb-timeline-horizontal .estb-th-card-category-secondary {
	display: block;
	font-size: 0.9em;
	font-weight: 500;
	text-transform: none;
	opacity: 0.7;
	margin-top: 2px;
}

/* La etiqueta de categoría reutiliza la clase .estb-th-subtitle (misma clase que el
   subtítulo clásico) para heredar "Color del subtítulo"/"Tipografía del subtítulo" sin
   duplicar controles — ver card_tags_color en class-estb-timeline-widget.php. Aquí solo
   anulamos el margen y la opacidad propios de esa clase, que no encajan en este contexto
   (la categoría va pegada al icono dentro de .estb-th-card-top, no como bloque final). */
.estb-timeline-horizontal .estb-th-card-category-primary.estb-th-subtitle {
	margin-bottom: 0;
	opacity: 1;
}

.estb-timeline-horizontal .estb-th-card-icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.estb-timeline-horizontal .estb-th-card-icon i,
.estb-timeline-horizontal .estb-th-card-icon svg {
	font-size: 22px;
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.estb-timeline-horizontal .estb-th-card-title {
	font-size: 1.15em;
	margin-bottom: 10px;
}

.estb-timeline-horizontal .estb-th-card-copy {
	margin-bottom: 14px;
}

.estb-timeline-horizontal .estb-th-description-secondary {
	font-size: 0.85em;
	line-height: 1.5;
	opacity: 0.75;
	margin-top: 6px;
}

.estb-timeline-horizontal .estb-th-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.estb-timeline-horizontal .estb-th-tag {
	display: inline-flex;
	flex-direction: column;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 0.8em;
	line-height: 1.3;
	transition: background-color 0.25s ease;
}

.estb-timeline-horizontal .estb-th-tag-secondary {
	font-size: 0.85em;
	opacity: 0.7;
}

/* v1.10.0: botón a todo el ancho de la tarjeta, con el texto a la izquierda y el icono de
   flecha empujado al extremo derecho (justify-content:space-between) — antes el botón se
   ajustaba solo al contenido y el icono quedaba pegado al texto. El "text-decoration:none"
   se repite explícitamente (incluida la variante ":visited") con !important porque, sin él,
   el subrayado del tema del sitio ganaba al del plugin en algunos estados. */
.estb-timeline-horizontal .estb-th-card-cta {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 4px;
}

.estb-timeline-horizontal .estb-th-card-cta,
.estb-timeline-horizontal .estb-th-card-cta:hover,
.estb-timeline-horizontal .estb-th-card-cta:focus,
.estb-timeline-horizontal .estb-th-card-cta:visited {
	text-decoration: none !important;
}

.estb-timeline-horizontal .estb-th-card-cta-text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.3;
}

.estb-timeline-horizontal .estb-th-card-cta-secondary {
	font-size: 0.8em;
	opacity: 0.75;
}

/* El icono de flecha ahora es un SVG propio (antes un carácter de texto "↗", que en
   algunos sistemas se renderizaba como un emoji de color) — ver render() en el PHP. */
.estb-timeline-horizontal .estb-th-card-cta-arrow {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease;
}

.estb-timeline-horizontal .estb-th-card-cta:hover .estb-th-card-cta-arrow,
.estb-timeline-horizontal .estb-th-card-cta:focus .estb-th-card-cta-arrow {
	transform: translate(2px, -2px);
}

/* ================================================================
   Rediseño "editorial" (v1.8.0), SOLO con "Navegación superior"
   activada: réplica del diseño final que mandó el cliente para esta
   sección. La etapa destacada (primera) se convierte en una portada
   blanca con esquinas asimétricas; el resto pasa a verse como filas
   de lista sin caja (solo una línea superior); el icono de cada
   tarjeta y el de la navegación superior se rellenan con el color
   de esa etapa al interactuar, en vez de estar siempre coloreados.
   Generalización necesaria frente al mockup: el archivo del cliente
   fija los colores por nombre de área (Learn/Connect/Belong/Build/
   Partner, alternando dos tonos fijos); aquí se reutiliza el campo
   YA EXISTENTE "Color de esta etapa"/"Color por defecto" (variable
   --estb-th-node-color, fijada por esos mismos controles del PHP)
   en su lugar, para que funcione con cualquier número de etapas y
   cualquier paleta que configures, no solo con dos colores fijos. */

/* --- Etapas NO destacadas (v1.14.0, réplica del diseño actual del cliente) ---
   Antes (v1.9.0-v1.13.0) eran filas de lista sin caja, con una línea superior neutra.
   Ahora vuelven a ser tarjetas, pero muy sutiles: línea superior de 2px en el color de la
   etapa, esquinas inferiores redondeadas, y un velo diagonal muy tenue del color de la
   etapa como fondo. Los tonos derivados ("velo", "brillo", "halo") se calculan con
   color-mix() a partir de --estb-th-node-color (= "Color de esta etapa"/"Color por
   defecto"), en vez de fijarlos por nombre de área como hace el archivo del cliente. */
.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:not(:first-child) {
	--estb-th-node: var(--estb-th-node-color, var(--estb-th-card-active-color));
	--estb-th-area-wash: color-mix(in srgb, var(--estb-th-node) 6%, transparent);
	--estb-th-area-glow: color-mix(in srgb, var(--estb-th-node) 40%, transparent);
	--estb-th-area-halo: color-mix(in srgb, var(--estb-th-node) 18%, transparent);
	background: linear-gradient(135deg, var(--estb-th-area-wash), transparent 80%);
	border: 0;
	border-top: 2px solid var(--estb-th-node);
	border-radius: 0 0 12px 12px;
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04);
	padding: 23px 20px 20px;
}

/* Hover sobre la tarjeta: sin cambio de fondo ni desplazamiento (igual que el cliente),
   solo una línea inferior algo más visible. */
.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:not(:first-child):hover {
	background: linear-gradient(135deg, var(--estb-th-area-wash), transparent 80%);
	transform: none;
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.09);
}

/* Marcada desde la navegación superior (click o vista previa): velo más intenso, contorno
   de 1px y halo del color de la etapa. Sin "subir" (transform:none): el archivo del
   cliente la quita y ahora se replica tal cual (antes se mantenía por una petición previa). */
.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:not(:first-child).estb-th-card-active,
.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:not(:first-child).estb-th-card-preview {
	background: linear-gradient(135deg, var(--estb-th-area-glow), var(--estb-th-area-wash) 85%, transparent);
	border-color: var(--estb-th-node);
	box-shadow: inset 0 0 0 1px var(--estb-th-node), 0 0 24px var(--estb-th-area-halo);
	transform: none;
}

/* Icono de cada tarjeta sin destacar: SIEMPRE en el color de la etapa (trazo + borde) con
   el velo tenue de fondo — ya no está neutro en reposo ni se rellena al interactuar. */
.estb-timeline-horizontal.estb-th-journey-on .estb-th-card-icon {
	width: 42px;
	height: 42px;
	padding: 9px;
	box-sizing: border-box;
	border: 1px solid var(--estb-th-grid-card-border, #e0e3e8);
	border-radius: 50%;
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:not(:first-child) .estb-th-card-icon,
.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:not(:first-child):hover .estb-th-card-icon,
.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:not(:first-child).estb-th-card-active .estb-th-card-icon,
.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:not(:first-child).estb-th-card-preview .estb-th-card-icon {
	color: var(--estb-th-node);
	border-color: var(--estb-th-node);
	background: var(--estb-th-area-wash);
}

/* Flecha del botón: círculo con borde y flecha en el color de la etapa; se rellena con ese
   color (flecha en blanco) al pasar el cursor por el botón. */
.estb-timeline-horizontal.estb-th-journey-on .estb-th-card-cta-arrow {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--estb-th-grid-card-border, #e0e3e8);
	border-radius: 50%;
	transition: transform 0.2s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:not(:first-child) .estb-th-card-cta-arrow {
	color: var(--estb-th-node);
	border-color: var(--estb-th-node);
}

.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:not(:first-child) .estb-th-card-cta:hover .estb-th-card-cta-arrow,
.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:not(:first-child) .estb-th-card-cta:focus .estb-th-card-cta-arrow {
	background: var(--estb-th-node);
	border-color: var(--estb-th-node);
	color: #fff;
	transform: translate(3px, -3px);
}

/* Parte destacada del título (v1.14.0), p. ej. el ".B" de "EST.B Hub" en coral — ver
   "Texto a destacar en los títulos" en el panel. Solo en las tarjetas sin destacar (en la
   tarjeta destacada, el título del cliente va entero en tinta oscura). */
.estb-timeline-horizontal .estb-th-title-accent {
	color: inherit;
}

.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:not(:first-child) .estb-th-title-accent {
	color: var(--estb-th-title-accent-color, #dd5655);
}

/* --- Etapa destacada (primera): portada blanca con esquinas asimétricas ---
   Esto SUSTITUYE, solo en este modo, al truco de v1.6.0 que coloreaba la tarjeta
   destacada con "Color de esta etapa"/"Color por defecto" (ver esos controles en el PHP:
   ahí mismo se excluye esta combinación de clases para que no compitan). */
.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:first-child {
	background: #ffffff;
	border: 0;
	border-radius: 28px 28px 6px 6px;
	box-shadow: none;
	overflow: hidden;
}

.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:first-child:hover,
.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:first-child.estb-th-card-active,
.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:first-child.estb-th-card-preview {
	background: #ffffff;
	box-shadow: 0 0 0 2px var(--estb-th-node-color, var(--estb-th-card-active-color));
}

.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:first-child,
.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:first-child .estb-th-title,
.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:first-child .estb-th-card-category-primary,
.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:first-child .estb-th-card-category-secondary,
.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:first-child .estb-th-description,
.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:first-child .estb-th-description-secondary {
	color: #16333d;
}

.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:first-child .estb-th-photo-badge {
	border-radius: 999px;
}

/* v1.14.0: en el diseño actual del cliente, el icono de la tarjeta destacada va en coral
   aunque el acento de esa etapa (navegación) sea verde — por eso tiene su propio color
   ("Color del icono de la tarjeta destacada", coral por defecto) en vez de heredar
   "Color de esta etapa". Icono en tinta oscura sobre el círculo, como en el archivo. */
.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:first-child .estb-th-card-icon {
	background: var(--estb-th-featured-icon-bg, #dd5655);
	border-color: var(--estb-th-featured-icon-bg, #dd5655);
	color: #101617;
}

/* El botón de la tarjeta destacada se convierte en una píldora rellena (fondo oscuro +
   texto blanco), en vez del texto+flecha del resto de tarjetas. Va DESPUÉS de la regla de
   arriba que pone todo el texto en tinta oscura, para que gane en el empate de
   especificidad y el botón quede en blanco sobre su propio fondo oscuro. */
.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:first-child .estb-th-card-cta {
	background: #16333d;
	color: #ffffff;
	border-radius: 999px;
	padding: 12px 18px;
	margin-top: auto;
}

.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:first-child .estb-th-card-cta-secondary {
	color: #ffffff;
}

.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:first-child .estb-th-card-cta:hover {
	background: var(--estb-th-node-color, var(--estb-th-card-active-color));
}

.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:first-child .estb-th-card-cta-arrow {
	background: none;
	border: 0;
	color: #ffffff;
}

.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:first-child .estb-th-card-cta:hover .estb-th-card-cta-arrow {
	background: none;
	border: 0;
	transform: translate(2px, -2px);
}

/* --- Navegación superior: icono neutro en reposo, con un acento de color de etapa en el
   borde inferior; se rellena por completo con ese color al pasar el cursor, marcar por
   click, o recibir el foco de teclado. Ver "Fondo de los iconos de navegación (en
   reposo)" en la sección "Navegación superior" del panel. --- */
.estb-timeline-horizontal.estb-th-journey-on .estb-th-journey-orb {
	background: var(--estb-th-orb-rest-bg, #12242b);
	border: 1px solid rgba(255, 255, 255, 0.35);
	box-shadow: inset 0 -3px 0 var(--estb-th-node-color, var(--estb-th-card-active-color));
}

/* v1.10.0: el resaltado ahora funciona en los dos sentidos. Antes, solo pasar el cursor por
   el ICONO DE NAVEGACIÓN coloreaba la tarjeta correspondiente (vía "estb-th-card-preview",
   añadida por JS); ahora pasar el cursor por la TARJETA (en la cuadrícula) también colorea el
   icono de su navegación correspondiente, con la misma clase "estb-th-journey-preview"
   añadida por el mismo script (ver initJourneyNav en timeline.js). */
.estb-timeline-horizontal.estb-th-journey-on .estb-th-journey-link:hover .estb-th-journey-orb,
.estb-timeline-horizontal.estb-th-journey-on .estb-th-journey-link:focus-visible .estb-th-journey-orb,
.estb-timeline-horizontal.estb-th-journey-on .estb-th-journey-link.estb-th-journey-preview .estb-th-journey-orb {
	background: var(--estb-th-node-color, var(--estb-th-card-active-color));
	border-color: var(--estb-th-node-color, var(--estb-th-card-active-color));
	box-shadow: none;
}

/* Posición del timeline completo (solo escritorio/tablet; en móvil siempre es una
   lista vertical a todo el ancho, ver más abajo). Por defecto ("fill") las etapas
   se reparten para ocupar todo el ancho disponible, como en la v1.x. */
@media (min-width: 768px) {
	.estb-timeline-horizontal.estb-th-align-flex-start .estb-th-row,
	.estb-timeline-horizontal.estb-th-align-center .estb-th-row,
	.estb-timeline-horizontal.estb-th-align-flex-end .estb-th-row {
		width: auto;
	}

	.estb-timeline-horizontal.estb-th-align-flex-start .estb-th-row {
		justify-content: flex-start;
	}

	.estb-timeline-horizontal.estb-th-align-center .estb-th-row {
		justify-content: center;
	}

	.estb-timeline-horizontal.estb-th-align-flex-end .estb-th-row {
		justify-content: flex-end;
	}

	.estb-timeline-horizontal.estb-th-align-flex-start .estb-th-item,
	.estb-timeline-horizontal.estb-th-align-center .estb-th-item,
	.estb-timeline-horizontal.estb-th-align-flex-end .estb-th-item {
		flex: 0 0 var(--estb-th-item-width);
		max-width: var(--estb-th-item-width);
	}
}

/* Apilado vertical en pantallas pequeñas. */
@media (max-width: 767px) {
	.estb-timeline-horizontal .estb-th-row {
		flex-direction: column;
		align-items: stretch;
	}

	.estb-timeline-horizontal .estb-th-item {
		flex-direction: row;
		align-items: flex-start;
		padding: 0 0 28px 0;
	}

	.estb-timeline-horizontal .estb-th-item:last-child {
		padding-bottom: 0;
	}

	.estb-timeline-horizontal .estb-th-marker-wrap {
		width: auto;
		margin-bottom: 0;
		margin-right: 18px;
		flex-shrink: 0;
	}

	/* Los segmentos de línea horizontales (flex-grow) son solo para el layout de
	   escritorio; en móvil el timeline es vertical y usa su propia línea, ver abajo. */
	.estb-timeline-horizontal .estb-th-line-seg {
		display: none;
	}

	/* Línea vertical: se dibuja "después" de cada círculo (salvo el de la última etapa),
	   desde el borde inferior del círculo hasta el borde inferior de la propia etapa
	   (top/bottom en vez de una altura fija): así llega siempre hasta el círculo
	   siguiente, sea cual sea la altura del contenido de cada etapa (título + subtítulo +
	   texto + botón pueden ocupar mucho más que el propio círculo). */
	.estb-timeline-horizontal .estb-th-item:not(:last-child)::before {
		content: '';
		position: absolute;
		top: var(--estb-th-marker-size);
		bottom: 0;
		left: calc(var(--estb-th-marker-size) / 2 - var(--estb-th-line-thickness) / 2);
		width: var(--estb-th-line-thickness);
		background: var(--estb-th-line-color);
		z-index: 0;
	}

	.estb-timeline-horizontal .estb-th-content {
		padding-left: 0;
		padding-right: 0;
		padding-top: 4px;
	}

	/* Diseño en cuadrícula en móvil: se apila igual que el resto del widget (una tarjeta
	   debajo de otra, a todo lo ancho), pero manteniendo el aspecto de tarjeta — círculo
	   ARRIBA del título (no a su izquierda, como en el resto del widget) y sin línea de
	   ningún tipo, ni horizontal ni la vertical de móvil de arriba. */
	.estb-timeline-horizontal.estb-th-grid .estb-th-row {
		display: flex;
	}

	/* v1.13.0 — FIX tarjetas cortadas en móvil: cada tarjeta hereda "flex: 1 1 0" (base
	   cero) del modo fila, y además lleva "overflow:hidden" (para recortar la foto con las
	   esquinas redondeadas). Con overflow distinto de "visible", el navegador deja de
	   proteger la altura mínima del contenido (min-height:auto pasa a valer 0), así que en
	   la columna apilada cada tarjeta se encogía por debajo de su contenido y este quedaba
	   recortado. "flex: 0 0 auto" hace que cada tarjeta mida exactamente lo que ocupa.
	   También: "align-items: stretch" (el apilado móvil del modo fila fija flex-start, que
	   encogía cada bloque al ancho de su texto y pegaba el icono a la categoría en vez de
	   mandarlo a la derecha), y sin margin-bottom: el "gap" de la cuadrícula (Espacio entre
	   tarjetas) ya separa las tarjetas también cuando la fila pasa a flex en móvil, así que el
	   margen duplicaba el espacio entre ellas. */
	.estb-timeline-horizontal.estb-th-grid .estb-th-item {
		flex: 0 0 auto;
		flex-direction: column;
		align-items: stretch;
		padding: var(--estb-th-card-padding, 28px);
		margin-bottom: 0;
	}

	.estb-timeline-horizontal.estb-th-grid .estb-th-marker-wrap {
		width: 100%;
		margin-right: 0;
		margin-bottom: 18px;
	}

	.estb-timeline-horizontal.estb-th-grid .estb-th-content {
		padding-top: 0;
	}
}

/* v1.13.0 — Navegación superior en móvil: una sola fila horizontal que cabe en la pantalla,
   como en el diseño de referencia del cliente (su breakpoint de 520px: iconos de 48px,
   etiquetas pequeñas, línea detrás). El tamaño de los iconos y el espacio entre ellos vienen
   de los controles responsive "Tamaño de los iconos de navegación" (48px por defecto en
   móvil) y "Espacio entre iconos" (4px por defecto en móvil). */
@media (max-width: 767px) {
	.estb-timeline-horizontal .estb-th-journey {
		margin-bottom: 28px;
	}

	.estb-timeline-horizontal .estb-th-journey-link {
		max-width: none;
		width: 100%;
		gap: 8px;
	}

	.estb-timeline-horizontal .estb-th-journey-label {
		display: block;
		width: 100%;
		overflow-wrap: break-word;
		hyphens: auto;
	}

	.estb-timeline-horizontal .estb-th-journey-label-primary {
		font-size: 0.8em;
		line-height: 1.2;
	}

	.estb-timeline-horizontal .estb-th-journey-label-secondary {
		font-size: 0.7em;
		line-height: 1.25;
	}

	/* El efecto "crecer" del icono se suaviza en móvil: con la escala de escritorio (1.4 por
	   defecto) un icono pulsado invadiría a sus vecinos en una fila tan estrecha. */
	.estb-timeline-horizontal.estb-th-hover-grow .estb-th-journey-link:hover .estb-th-marker,
	.estb-timeline-horizontal.estb-th-hover-grow .estb-th-journey-link:focus-visible .estb-th-marker {
		transform: scale(1.12);
		box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
	}

	/* Filas de lista (tarjetas sin destacar) en móvil: mismo aire que el diseño del cliente. */
	.estb-timeline-horizontal.estb-th-journey-on .estb-th-item:not(:first-child) {
		padding: 20px 18px;
	}
}

/* v1.15.0 — Tablet (iPad, 768–1024px), con "Navegación superior" activada: igual que el
   diseño del cliente, la tarjeta destacada ocupa TODA la primera fila (foto a la izquierda,
   contenido a la derecha) y debajo las demás forman una cuadrícula de 2 columnas (2×2 con 5
   etapas). En escritorio (>1024px) sigue la columna alta a la izquierda + 2×2 a su lado.
   "grid-row" lleva !important porque el PHP fija "grid-row: span N" en línea en la primera
   tarjeta (para el diseño de escritorio). */
@media (min-width: 768px) and (max-width: 1024px) {
	.estb-timeline-horizontal.estb-th-grid.estb-th-journey-on .estb-th-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: auto;
	}

	.estb-timeline-horizontal.estb-th-grid.estb-th-journey-on .estb-th-item:first-child {
		grid-column: 1 / -1;
		grid-row: auto !important;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: min-content;
		column-gap: var(--estb-th-card-padding, 28px);
		align-content: start;
	}

	/* La foto ocupa toda la columna izquierda, de borde a borde de la tarjeta (sangrando
	   sobre el padding arriba, abajo y a la izquierda); el resto del contenido va en la
	   columna derecha, en su orden habitual. */
	.estb-timeline-horizontal.estb-th-grid.estb-th-journey-on .estb-th-item:first-child > * {
		grid-column: 2;
	}

	.estb-timeline-horizontal.estb-th-grid.estb-th-journey-on .estb-th-item:first-child > .estb-th-photo {
		grid-column: 1;
		grid-row: 1 / span 20;
		margin: calc(var(--estb-th-card-padding, 28px) * -1) 0 calc(var(--estb-th-card-padding, 28px) * -1) calc(var(--estb-th-card-padding, 28px) * -1);
		aspect-ratio: auto;
		min-height: 300px;
	}

	.estb-timeline-horizontal.estb-th-grid.estb-th-journey-on .estb-th-item:first-child .estb-th-card-cta {
		margin-top: 8px;
	}
}