/* =========================================================
   Invitarte – Itinerario Texto  |  itinerario-texto.css
   Timeline con dos bloques de texto por ítem (sin contenedores).

   .itx-layout es un CSS Grid de 3 columnas [izq | ícono | der].
   Los íconos y los slots llevan grid-column/grid-row inline desde PHP.
   Estructura idéntica en editor y frontend (content_template replica render).
   ========================================================= */

/* ── Estructura general ──────────────────────────────────── */
/*
 * Las variables --itx-* NO se declaran aquí a propósito.
 *
 * Los controles de Elementor las emiten sobre {{WRAPPER}}, que es el
 * .elementor-element-XXXX que envuelve a este div. Si las redeclaráramos aquí,
 * esa declaración local ganaría siempre sobre el valor heredado del padre y el
 * control no tendría ningún efecto. Los valores por defecto van en el fallback
 * de cada var(): var(--itx-icon-size, 60px).
 */
.invitarte-itinerario-texto {
	position: relative;
	padding: 20px 0;
}

/* ── Línea vertical central ──────────────────────────────── */
/* top/bottom/width son fallbacks: los controles line_offset_* y line_width los
 * sobreescriben con mayor especificidad.
 * El translateX(-50%) centra la línea sobre su punto de anclaje (left); el
 * --itx-line-shift del control se suma ahí para desplazarla, de modo que la
 * misma fórmula vale para el anclaje de escritorio y el de móvil. */
.itx-line {
	position: absolute;
	left: 50%;
	top: 30px;
	bottom: 30px;
	width: 2px;
	transform: translateX(calc(-50% + var(--itx-line-shift, 0px)));
	background-color: rgba(200, 169, 110, 0.2);
	pointer-events: none;
	z-index: 0;
}

.itx-line-fill {
	position: absolute;
	top: 0;
	width: 100%;
	height: 0;
	background-color: #c8a96e;
}

/* ── Grid ────────────────────────────────────────────────── */
.itx-layout {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 60px 1fr;
	column-gap: 20px;
	row-gap: 40px;
	min-height: 80px;
}

/* Nodo ícono: col 2, fila determinada por inline style.
 * Es el único grid item que se estira (stretch), así que su min-height es lo
 * que fija el alto mínimo de la fila — de ahí que el control item_min_height
 * apunte aquí y no a los slots. Si el min-height estuviera en el slot, el
 * texto quedaría pegado arriba dentro de él en vez de centrado con el ícono. */
.itx-icon-node {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
	z-index: 10;
}

/* ── Ícono central ───────────────────────────────────────── */
.itx-icon-wrap {
	flex-shrink: 0;
	position: relative;
	z-index: 10;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #1a1a1a;
	border: 2px solid #c8a96e;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	transition: background-color 0.5s ease, border-color 0.5s ease;
}

.itx-icon-wrap.is-active {
	background-color: #c8a96e;
	border-color: #ffffff;
}

.itx-icon-wrap i {
	font-size: 50%;
	line-height: 1;
	color: #c8a96e;
	transition: color 0.5s ease;
}

.itx-icon-wrap.is-active i { color: #ffffff; }

.itx-icon-wrap svg {
	width: 50%;
	height: 50%;
	fill: #c8a96e;
	stroke: #c8a96e;
	transition: fill 0.5s ease, stroke 0.5s ease;
}

.itx-icon-wrap.is-active svg { fill: #ffffff; stroke: #ffffff; }

/* ── Slots de texto ──────────────────────────────────────── */
/* El slot es el grid item y controla las dos alineaciones:
 *   - horizontal: text-align  (controles g_align_* / align_*)
 *   - vertical:   align-self  (controles g_valign_* / valign_*), centro por
 *     defecto, de modo que el texto queda a la altura del ícono.
 * El slot se ajusta a su contenido (no se estira), así que .itx-text puede ser
 * inline-block: el fondo/borde abrazan el texto y respetan la alineación en
 * vez de ocupar toda la columna. */
.itx-slot {
	align-self: center;
	z-index: 1;
}

/* Fallback: los controles g_align_* lo sobreescriben con mayor especificidad */
.itx-slot-izq { text-align: right; }
.itx-slot-der { text-align: left; }

.itx-text {
	display: inline-block;
	max-width: 100%;
	box-sizing: border-box;
}

/* Reset de los márgenes que TinyMCE añade a <p> */
.itx-text > *:first-child { margin-top: 0; }
.itx-text > *:last-child  { margin-bottom: 0; }
.itx-text img { max-width: 100%; height: auto; }

/* Slot sin texto: sigue ocupando su celda del grid para no descuadrar las
 * filas, pero sin pintar el fondo ni el borde del bloque de texto. */
.itx-slot-empty .itx-text { display: none; }

/* ── Animación de entrada (solo frontend) ────────────────── */
.itx-animated .itx-slot {
	opacity: 0;
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.itx-animated .itx-slot-izq { transform: translateX(-14px); }
.itx-animated .itx-slot-der { transform: translateX(14px); }

/* El JS añade is-active a cada .itx-slot — sin combinador hermano ~ para
 * que cada ítem anime por separado (no todos a la vez). */
.itx-animated .itx-slot.is-active {
	opacity: 1;
	transform: translateX(0);
}

/* ── Móvil: 2 columnas [ícono | contenido] ──────────────── */
/*
 * Todas las reglas del layout móvil se restringen con :not(.itx-mob-desktop).
 * Así, cuando el control «Igual a escritorio» está activo, no hay ninguna
 * regla !important que sobreescribir: el layout de 3 columnas y las
 * alineaciones de los controles siguen aplicándose tal cual.
 */
@media (max-width: 767px) {
	/* Línea: centrada sobre el ícono (col1 = icon-size de ancho).
	 * El transform repite el --itx-line-shift porque esta regla sobreescribe
	 * la de la base; sin él, el desplazamiento se perdería en móvil. */
	.invitarte-itinerario-texto:not(.itx-mob-desktop) .itx-line {
		left: calc(var(--itx-icon-size, 60px) / 2);
		transform: translateX(calc(-50% + var(--itx-line-shift, 0px)));
	}

	/*
	 * Necesita !important para superar la mayor especificidad del control
	 * icon_size:  {{WRAPPER}} .itx-layout { grid-template-columns: … }  ← 0,2,0
	 * frente a    .itx-layout { … }                                     ← 0,1,0
	 */
	.invitarte-itinerario-texto:not(.itx-mob-desktop) .itx-layout {
		grid-template-columns: var(--itx-icon-size, 60px) 1fr !important;
		column-gap: var(--itx-icon-gap, 20px) !important;
		row-gap: 0 !important; /* el JS aplica grid-template-rows explícitas */
	}

	/*
	 * El JS (applyMobileGridPositions) asigna 3 filas por ítem —
	 * slot A / slot B / spacing — y hace que el ícono abarque solo las filas
	 * con contenido visible, para que quede centrado con el texto aunque un
	 * lado esté vacío u oculto. Estas reglas son el fallback si el JS no llega
	 * a ejecutarse.
	 */
	.invitarte-itinerario-texto:not(.itx-mob-desktop) .itx-icon-node {
		grid-column: 1 !important;
		grid-row: span 2 !important;
		align-self: center;
		justify-self: center;
	}

	/* Solo la posición en el grid. La alineación del texto en móvil la fija el
	 * mobile_default de los controles g_align_*, para que sigan siendo
	 * editables desde la vista móvil de Elementor. */
	.invitarte-itinerario-texto:not(.itx-mob-desktop) .itx-slot {
		grid-column: 2 !important;
		grid-row: auto !important;
	}

	/* Animación móvil: desde abajo */
	.itx-animated:not(.itx-mob-desktop) .itx-slot-izq,
	.itx-animated:not(.itx-mob-desktop) .itx-slot-der {
		transform: translateY(10px);
	}

	.itx-animated:not(.itx-mob-desktop) .itx-slot.is-active {
		transform: translateY(0);
	}

	/* Ocultar un lado en móvil (control global o por ítem) */
	.itx-slot-mob-hide { display: none !important; }
}

/* ── Accesibilidad ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.itx-line-fill,
	.itx-icon-wrap,
	.itx-icon-wrap i,
	.itx-icon-wrap svg,
	.itx-animated .itx-slot {
		transition: none;
	}
}