/* Diagrama de orquestación.
   La idea que sostiene el diseño: el nodo central no es una caja más, es el
   emisor, y las fichas de agente son las superficies donde aterriza esa luz.
   De ahí salen las tres piezas del holograma —halo que respira, líneas de
   barrido y un pase de luz por cada ficha— y la escena en tres dimensiones que
   se orienta hacia el puntero. */

.iaexp-orq {
	--iaexp-orq-color: var(--e-global-color-primary);
	--iaexp-orq-texto: var(--e-global-color-text);
	/* La luz de la proyección, separada del color de tinta: sobre la aurora
	   oscura es el celeste del Kit, sobre fondo claro es el azul principal. */
	--iaexp-orq-luz: var(--e-global-color-primary);
	position: relative;
	padding: clamp(1rem, 4vw, 2.5rem) 0;
	perspective: 1400px;
}

/* La columna se declara con minmax(0, 1fr) y no con el `auto` implícito: la
   rejilla de fichas de dentro pide 4 × 13rem de ancho máximo, y con una pista
   `auto` ese max-content ensancha la pista por encima del contenedor — así se
   salía la cuarta ficha del ancho del hero. Con el mínimo a 0 la pista nunca
   pasa del hueco disponible y las fichas se reparten en dos filas. */
.iaexp-orq__lienzo {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 3.5rem);
	justify-items: center;
	transform-style: preserve-3d;
}

/* La deriva ambiental: el lienzo entero se mece solo, sin esperar al cursor.
   Todo lo que hay dentro —conectores, emisor, fichas— vive en el mismo plano
   (z=0 en reposo) y gira como una sola pieza rígida, así que las curvas del
   SVG nunca se despegan de las cajas por mucho que incline: no hay dos planos
   a distinta profundidad que la perspectiva pueda proyectar de forma distinta. */
@media (prefers-reduced-motion: no-preference) {
	.iaexp-orq--visible .iaexp-orq__lienzo {
		animation: iaexp-orq-deriva 16s ease-in-out infinite;
	}
}

@keyframes iaexp-orq-deriva {
	0%   { transform: rotateX(1.3deg) rotateY(-2.4deg); }
	25%  { transform: rotateX(-0.9deg) rotateY(1.1deg); }
	50%  { transform: rotateX(-1.5deg) rotateY(2.2deg); }
	75%  { transform: rotateX(0.7deg) rotateY(-1.3deg); }
	100% { transform: rotateX(1.3deg) rotateY(-2.4deg); }
}

.iaexp-orq__conexiones {
	/* Desactivadas: el trazado de ramas no llegaba a verse bien en ningún
	   ensayo (curvas, luego bus con esquinas, luego bus recto) y no hay forma
	   de depurarlo a ciegas sin ver el render real. Oculto hasta rehacerlo
	   con calma; el JS sigue calculando las coordenadas por si se reactiva. */
	display: none;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 0;
}

.iaexp-orq__linea {
	fill: none;
	stroke: color-mix(in srgb, var(--iaexp-orq-luz) 52%, transparent);
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke 0.25s ease, stroke-width 0.25s ease;
}

.iaexp-orq__linea--activa {
	stroke: var(--iaexp-orq-color);
	stroke-width: 2.5;
}

/* El pulso es un trazo corto que recorre la misma curva que la línea: da la
   sensación de trabajo en marcha sin mover ningún elemento de la maqueta. */
.iaexp-orq__pulso {
	fill: none;
	stroke: var(--iaexp-orq-luz);
	stroke-width: 3;
	stroke-linecap: round;
	opacity: 0;
}

.iaexp-orq__emisor,
.iaexp-orq__ancla {
	fill: var(--iaexp-orq-luz);
	stroke: color-mix(in srgb, var(--iaexp-orq-luz) 28%, transparent);
	stroke-width: 6;
	vector-effect: non-scaling-stroke;
}

.iaexp-orq__ancla {
	fill: color-mix(in srgb, var(--iaexp-orq-luz) 75%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
	.iaexp-orq[data-animar="si"].iaexp-orq--visible .iaexp-orq__emisor,
	.iaexp-orq[data-animar="si"].iaexp-orq--visible .iaexp-orq__ancla {
		animation: iaexp-orq-ancla 3.2s ease-in-out infinite;
	}

	.iaexp-orq[data-animar="si"].iaexp-orq--visible .iaexp-orq__ancla {
		animation-delay: calc(var(--iaexp-indice) * 400ms);
	}
}

@keyframes iaexp-orq-ancla {
	0%, 100% { opacity: 0.45; }
	45%      { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
	.iaexp-orq[data-animar="si"].iaexp-orq--visible .iaexp-orq__pulso {
		animation: iaexp-orq-pulso 3.2s linear infinite;
		animation-delay: calc(var(--iaexp-indice) * 400ms);
	}
}

@keyframes iaexp-orq-pulso {
	0%        { opacity: 0; stroke-dashoffset: var(--iaexp-largo); }
	12%       { opacity: 0.9; }
	70%       { opacity: 0.9; }
	85%, 100% { opacity: 0; stroke-dashoffset: 0; }
}

/* --- El emisor ----------------------------------------------------------- */

.iaexp-orq__centro {
	position: relative;
	z-index: 1;
	isolation: isolate;
	display: grid;
	justify-items: center;
	gap: 0.3rem;
	max-width: 22rem;
	padding: 1.1rem 2rem;
	border: 2px solid var(--iaexp-orq-color);
	border-radius: 1.25rem;
	background: color-mix(in srgb, var(--iaexp-orq-color) 10%, transparent);
	text-align: center;
}

/* Halo volumétrico: es lo que convierte el nodo en fuente de luz en lugar de
   en un rectángulo que flota. Va detrás del propio nodo, que tiene fondo
   translúcido, así que se ve a través. */
.iaexp-orq__centro::after {
	content: "";
	position: absolute;
	inset: -70% -35%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(50% 50% at 50% 50%,
		color-mix(in srgb, var(--iaexp-orq-luz) 32%, transparent), transparent 70%);
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.iaexp-orq--visible .iaexp-orq__centro::after {
		animation: iaexp-orq-respirar 5.5s ease-in-out infinite alternate;
	}
}

@keyframes iaexp-orq-respirar {
	from { opacity: 0.65; transform: scale(0.94); }
	to   { opacity: 1; transform: scale(1.06); }
}

.iaexp-orq__centro-nombre {
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	font-size: clamp(1.1rem, 2.2vw, 1.4rem);
	font-weight: 800;
	line-height: 1.2;
	color: var(--iaexp-orq-color);
}

.iaexp-orq__centro-desc {
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--iaexp-orq-texto);
}

/* --- Las superficies ----------------------------------------------------- */

.iaexp-orq__agentes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
	gap: clamp(0.75rem, 2vw, 1.25rem);
	width: 100%;
	max-width: min(62rem, 100%);
	margin: 0;
	padding: 0;
	list-style: none;
	transform-style: preserve-3d;
}

.iaexp-orq__agente {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	align-content: start;
	gap: 0.5rem;
	padding: 1.1rem;
	border: 1px solid color-mix(in srgb, var(--iaexp-orq-color) 30%, transparent);
	border-radius: 0.9rem;
	background: color-mix(in srgb, var(--iaexp-orq-color) 6%, transparent);
	color: var(--iaexp-orq-color);
	transition: border-color 0.25s ease, transform 0.25s ease,
		background-color 0.25s ease, box-shadow 0.25s ease;
	will-change: transform;
}

/* Líneas de barrido: la textura que dice «esto está proyectado, no impreso».
   Muy tenues a propósito; a más contraste el texto se vuelve vibrante. */
.iaexp-orq__agente::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: repeating-linear-gradient(180deg,
		color-mix(in srgb, var(--iaexp-orq-luz) 10%, transparent) 0 1px,
		transparent 1px 3px);
	pointer-events: none;
}

/* El pase de luz que recorre la ficha de arriba abajo. Es el gesto que da el
   movimiento de holograma, y por eso es el único que se permite ser evidente. */
.iaexp-orq__agente::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	z-index: -1;
	height: 45%;
	background: linear-gradient(180deg,
		transparent,
		color-mix(in srgb, var(--iaexp-orq-luz) 24%, transparent),
		transparent);
	transform: translateY(-140%);
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.iaexp-orq[data-animar="si"].iaexp-orq--visible .iaexp-orq__agente::after {
		animation: iaexp-orq-barrido 6.5s linear infinite;
		animation-delay: calc(var(--iaexp-indice) * 800ms);
	}

	.iaexp-orq[data-animar="si"].iaexp-orq--visible .iaexp-orq__agente {
		animation:
			iaexp-orq-entrada 0.55s ease-out backwards,
			iaexp-orq-flotar 8s ease-in-out infinite;
		animation-delay:
			calc(var(--iaexp-indice) * 110ms),
			calc(0.7s + var(--iaexp-indice) * 650ms);
	}
}

/* El pase ocupa la primera mitad del ciclo y la otra mitad descansa fuera de
   la ficha: sin esa pausa las cuatro fichas parpadean sin parar. */
@keyframes iaexp-orq-barrido {
	0%        { transform: translateY(-140%); }
	55%, 100% { transform: translateY(320%); }
}

/* El levantamiento hacia el visitante es deliberadamente pequeño: es una
   ficha, no la escena entera, la que se separa de su plano, y cuanto más se
   aleje del resto más se nota que la curva de conexión —coplanar con el
   resto— se queda un poco atrás. A esta magnitud se lee como «la ficha
   responde», no como una desconexión. */
.iaexp-orq__agente:hover,
.iaexp-orq__agente:focus-visible {
	border-color: var(--iaexp-orq-color);
	background: color-mix(in srgb, var(--iaexp-orq-color) 14%, transparent);
	transform: translateZ(16px) translateY(-3px);
	box-shadow: 0 16px 34px -24px color-mix(in srgb, var(--e-global-color-secondary) 90%, transparent),
		0 0 22px -8px color-mix(in srgb, var(--iaexp-orq-luz) 55%, transparent);
	animation-play-state: paused;
}

.iaexp-orq__agente:focus-visible {
	outline: 3px solid var(--iaexp-orq-color);
	outline-offset: 3px;
}

.iaexp-orq__cabecera {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.iaexp-orq__nombre {
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--iaexp-orq-color);
}

.iaexp-orq__desc {
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--iaexp-orq-texto);
}

.iaexp-orq__agente .iaexp-chips {
	margin-top: 0.15rem;
}

/* La entrada escalonada de las fichas se mantiene: es lo que hace que el
   sistema parezca arrancar en vez de aparecer de golpe. `backwards` aplica el
   estado inicial solo mientras dura la espera, así que si el JS no llegara a
   cargar el hero se ve igualmente. */
@keyframes iaexp-orq-entrada {
	from { opacity: 0; filter: blur(4px); }
	to   { opacity: 1; filter: blur(0); }
}

@keyframes iaexp-orq-flotar {
	0%, 100% {
		transform: translate3d(0, 0, 0);
	}
	25% {
		transform: translate3d(0.18rem, -0.35rem, 0);
	}
	50% {
		transform: translate3d(-0.12rem, 0.18rem, 0);
	}
	75% {
		transform: translate3d(0.1rem, -0.18rem, 0);
	}
}

/* Debajo de este ancho las tarjetas se apilan y las curvas dejan de aportar:
   se ocultan para no dibujar líneas que cruzan el bloque entero. La escena se
   aplana también —sin perspectiva, el translateZ deja de tener efecto— porque
   en una pantalla que se sujeta con la mano el volumen solo estorba. */
@media (max-width: 543px) {
	.iaexp-orq {
		perspective: none;
	}

	/* Sin perspectiva, rotar el lienzo dejaría de foreshortening y pasaría a
	   aplastarlo en ortográfico: mejor quitar la deriva entera en vez de que
	   se vea una rareza que nadie pidió. */
	.iaexp-orq__lienzo {
		animation: none !important;
		gap: 1.25rem;
	}

	.iaexp-orq__conexiones {
		display: none;
	}
}