/**
 * Página de IA (template-ia.php). Hereda el layout de template-producto.css;
 * aquí van solo las secciones propias. Mockup: Trello #1156.
 */

/* ---------- Encabezado alineado a la izquierda (columnas de texto) ---------- */

.runa-ia .runa-ia__head--izq {
	align-items: flex-start;
	text-align: left;
}

.runa-ia .runa-ia__head--izq .runa-producto__eyebrow {
	text-align: left;
}

/* Botón sobre fondo claro: pill con contorno morado, como en template-plataforma.css (DESIGN.md §8). */
.runa-ia a.runa-producto__head-cta.runa-ia__cta {
	border-color: var(--runa-accent-theme);
	background: transparent;
	color: var(--runa-accent-theme);
}

.runa-ia a.runa-producto__head-cta.runa-ia__cta:hover,
.runa-ia a.runa-producto__head-cta.runa-ia__cta:focus {
	background: var(--runa-accent-theme);
	border-color: var(--runa-accent-theme);
	color: #fff;
}

.runa-ia .runa-ia__split-copy a.runa-ia__cta {
	align-self: flex-start;
	margin-top: 32px;
}

/* ---------- Hero: bullets del tamaño del mockup ---------- */

@media (min-width: 768px) {
	.runa-ia .runa-producto__hero-bullets {
		gap: 20px;
	}

	.runa-ia .runa-producto__hero-bullets li {
		gap: 8px;
		font-size: 15px;
	}

	.runa-ia .runa-producto__hero-check {
		width: 18px;
		height: 18px;
	}
}

/* ---------- ¿Cómo funciona? ([runa_pasos tema="oscuro"]) ---------- */

.runa-ia__section--pasos {
	background: var(--runa-surface);
}

.runa-ia__section--pasos .runa-producto__title {
	color: #fff;
}

/* ---------- Columnas texto + imagen (arquitectura y seguridad) ---------- */

.runa-ia__section--arquitectura,
.runa-ia__section--seguridad {
	background: #f6f6f8;
}

.runa-ia__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 64px;
}

.runa-ia__split-copy {
	display: flex;
	flex-direction: column;
}

.runa-ia__split-media img {
	display: block;
	width: 100%;
	height: auto;
}

.runa-ia__section--arquitectura .runa-ia__split-media img {
	max-width: 420px;
	margin: 0 auto;
}

/* Cajones: chevron hacia abajo cerrado y hacia arriba abierto, como en [runa_zigzag]. */
.runa-ia__cajones {
	max-width: 420px;
	margin-top: 32px;
}

.runa-ia__cajones .runa-accordion-item__chevron {
	transform: rotate(180deg);
}

.runa-ia__cajones .runa-accordion-item[open] .runa-accordion-item__chevron {
	transform: rotate(0deg);
}

.runa-ia__cajones .runa-accordion-item__body p {
	margin: 0 0 16px;
}

/* ---------- En acción: el encabezado va sobre el acordeón ---------- */

.runa-ia__section--accion {
	background: #b0a9f5;
}

.runa-ia__accion {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas:
		"media head"
		"media acordeon";
	grid-template-rows: auto 1fr;
	column-gap: 64px;
	row-gap: 24px;
}

.runa-ia__accion .runa-ia-section {
	display: contents;
}

.runa-ia__accion .runa-producto__head {
	grid-area: head;
}

.runa-ia__accion .runa-ia-media-panel {
	grid-area: media;
	align-self: center;
}

.runa-ia__accion .runa-ia-accordion-panel {
	grid-area: acordeon;
}

/* ---------- Seguridad ---------- */

.runa-ia__checks {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 32px 0 0;
	padding: 0 0 0 40px;
	list-style: none;
}

.runa-ia__checks li {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 16px;
	color: var(--runa-ink);
}

.runa-ia__check {
	display: inline-flex;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--runa-check);
}

.runa-ia__check svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* ---------- Agentes: Swiper coverflow (template-ia.js) ---------- */

.runa-ia__section--agentes {
	overflow: hidden;
}

/* El coverflow aleja las laterales en 3D. El CSS de Swiper que carga Elementor
   no siempre trae las reglas de swiper-3d: van aquí. */
.runa-ia .runa-ia__agentes {
	--agente-w: 300px;
	padding: 24px 0 32px;
	perspective: 1200px;
}

.runa-ia .runa-ia__agentes .swiper-wrapper {
	align-items: center;
	transform-style: preserve-3d;
}

/* Flechas sobre fondo blanco: sombra para que el círculo se vea. */
.runa-ia .runa-ia__agentes-wrap .runa-swiper-nav {
	box-shadow: var(--runa-shadow-card);
}

.runa-ia .runa-ia__agente {
	width: var(--agente-w);
	border-radius: 28px;
	/* Fondo del color del agente: tapa el borde transparente de la imagen. */
	background: var(--agente-color);
	box-shadow: 0 0 0 0 var(--agente-color);
	transform-style: preserve-3d;
	/* Misma duración que el movimiento de Swiper (speed: 600). */
	transition-property: transform, box-shadow;
	transition-duration: 0.6s;
}

.runa-ia__agente-img {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
}

/* Activa: marco del color del agente y panel blanco con título y bullets sobre la etiqueta de la imagen. */
.runa-ia__agente.swiper-slide-active {
	box-shadow: 0 0 0 8px var(--agente-color), 0 20px 40px rgb(46 42 90 / 18%);
}

.runa-ia__agente-panel {
	position: absolute;
	right: 10px;
	bottom: 10px;
	left: 10px;
	padding: 20px 20px 22px;
	border-radius: 0 0 22px 22px;
	background: #fff;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.35s ease, transform 0.35s ease;
	pointer-events: none;
}

.runa-ia__agente.swiper-slide-active .runa-ia__agente-panel {
	opacity: 1;
	transform: none;
}

.runa-ia .runa-ia__agente-title {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: var(--runa-ink);
}

.runa-ia__agente-bullets {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0 0 0 18px;
	font-size: 13px;
	line-height: 1.35;
	color: var(--runa-ink);
}

/* ---------- Tablet y móvil ---------- */

@media (max-width: 1024px) {
	.runa-ia__split,
	.runa-ia__accion {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.runa-ia__accion {
		grid-template-areas:
			"head"
			"media"
			"acordeon";
		grid-template-rows: auto;
	}

	.runa-ia__cajones {
		max-width: none;
	}
}

@media (max-width: 767px) {
	.runa-ia__checks {
		padding-left: 0;
	}

	.runa-ia .runa-ia__agentes {
		--agente-w: 250px;
	}

	/* En móvil las tarjetas vecinas llegan al borde: las flechas van debajo, centradas.
	   Prefijo .runa-ia: runa-swiper-nav.css carga después y empata en especificidad. */
	.runa-ia .runa-ia__agentes-wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px;
		padding: 0;
	}

	.runa-ia .runa-ia__agentes {
		flex: 0 0 100%;
	}

	.runa-ia .runa-ia__agentes-wrap .runa-swiper-nav {
		position: static;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.runa-ia__agente-panel {
		transition: none;
	}
}