/* Utilidades compartidas por los bloques de IA Experience.
   Se aplican desde el campo "CSS Classes" de Elementor, así que el contenido
   sigue siendo editable desde el panel y solo el comportamiento visual vive
   aquí. Ningún color literal: todo sale del Kit. */

.iaexp-icono {
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
}

/* --- Marca de icono ------------------------------------------------------ */

.iaexp-marca {
	display: inline-grid;
	place-items: center;
	color: var(--e-global-color-primary);
}

.iaexp-marca--grande .iaexp-icono {
	width: 1.9rem;
	height: 1.9rem;
}

.iaexp-marca--marco {
	width: 3.25rem;
	height: 3.25rem;
	border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 0.8rem;
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.iaexp-aurora .iaexp-marca {
	color: var(--e-global-color-4c06697);
}

/* --- Fichas ------------------------------------------------------------- */

.iaexp-card {
	--iaexp-tinta: var(--e-global-color-primary);
	--iaexp-borde: color-mix(in srgb, var(--e-global-color-primary) 22%, transparent);
	--iaexp-fondo: color-mix(in srgb, var(--e-global-color-primary) 4%, transparent);
	position: relative;
	/* La ficha trae su propio respiro: los contenedores a los que se aplica esta
	   clase no llevan relleno propio y sin esto el texto tocaría el borde. */
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border: 1px solid var(--iaexp-borde);
	border-radius: 1rem;
	background: var(--iaexp-fondo);
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

/* El filo superior es la única pieza cromática de la ficha: marca jerarquía
   sin pintar el fondo entero y desaparece en el estado de reposo. */
.iaexp-card::before {
	content: "";
	position: absolute;
	inset: -1px auto auto -1px;
	width: calc(100% + 2px);
	height: 2px;
	border-radius: 1rem 1rem 0 0;
	background: linear-gradient(90deg,
		var(--iaexp-tinta),
		color-mix(in srgb, var(--iaexp-tinta) 15%, transparent));
	opacity: 0;
	transition: opacity 0.25s ease;
}

@media (hover: hover) {
	.iaexp-card:hover {
		border-color: color-mix(in srgb, var(--iaexp-tinta) 55%, transparent);
		transform: translateY(-3px);
		box-shadow: 0 12px 30px -18px color-mix(in srgb, var(--e-global-color-secondary) 60%, transparent);
	}

	.iaexp-card:hover::before {
		opacity: 1;
	}
}

.iaexp-card:focus-within::before {
	opacity: 1;
}

/* Las fichas de "espacio reservado" no compiten con las que sí tienen
   contenido: mismo sistema, menos peso. */
.iaexp-card--reservada {
	border-style: dashed;
	background: transparent;
}

/* --- Ficha con relieve ---------------------------------------------------
   Para las fichas que sostienen una sección entera y no pueden leerse como un
   párrafo dentro de un rectángulo: mismo sistema, con volumen. El nombre de
   clase va doblado en todo el bloque porque Elementor resuelve el radio y el
   ::before de sus contenedores por variable (`.e-con { border-radius:
   var(--border-radius) }`, `.e-con:before { content: var(--background-overlay) }`)
   con una sola clase y su hoja carga después: con un nombre suelto el empate lo
   gana él y la ficha sale recta y sin filo. */

.iaexp-card--realce.iaexp-card--realce {
	overflow: hidden;
	border-radius: 1.4rem;
	border-color: color-mix(in srgb, var(--iaexp-tinta) 20%, transparent);
	background:
		linear-gradient(158deg,
			color-mix(in srgb, var(--iaexp-tinta) 9%, transparent) 0%,
			color-mix(in srgb, var(--iaexp-tinta) 2%, transparent) 55%,
			transparent 100%);
	box-shadow: 0 20px 45px -34px color-mix(in srgb, var(--e-global-color-secondary) 85%, transparent);
}

/* El filo ya no espera al hover: en una ficha con relieve es parte del reposo y
   solo gana intensidad al señalarla. */
.iaexp-card--realce.iaexp-card--realce::before {
	content: "";
	height: 3px;
	border-radius: 1.4rem 1.4rem 0 0;
	opacity: 0.55;
}

/* Resplandor tras el icono: la esquina de la que arranca la lectura. Va en el
   ::after de la ficha, detrás del contenido, para no añadir un div vacío. */
.iaexp-card--realce.iaexp-card--realce::after {
	content: "";
	position: absolute;
	inset: -30% 55% 45% -25%;
	z-index: 0;
	border-radius: 50%;
	background: radial-gradient(50% 50% at 50% 50%,
		color-mix(in srgb, var(--iaexp-tinta) 22%, transparent), transparent 70%);
	pointer-events: none;
}

.iaexp-card--realce > * {
	position: relative;
	z-index: 1;
}

@media (hover: hover) {
	.iaexp-card--realce.iaexp-card--realce:hover {
		transform: translateY(-6px);
		border-color: color-mix(in srgb, var(--iaexp-tinta) 45%, transparent);
		box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--e-global-color-secondary) 70%, transparent);
	}

	.iaexp-card--realce.iaexp-card--realce:hover::before {
		opacity: 1;
	}
}

/* Dentro de una ficha con relieve el icono deja de ser un contorno suelto y
   pasa a tener cuerpo, que es lo que sostiene el volumen del conjunto. */
.iaexp-card--realce .iaexp-marca--marco {
	border-color: color-mix(in srgb, currentColor 30%, transparent);
	background: linear-gradient(150deg,
		color-mix(in srgb, currentColor 18%, transparent),
		color-mix(in srgb, currentColor 6%, transparent));
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--e-global-color-4c06697, #fff) 35%, transparent);
}

/* --- Ficha de rol -------------------------------------------------------
   Tres fichas que reparten un mismo proceso ("el modelo", "el código", "la
   persona"): el nombre es la etiqueta de una pieza, no el titular de una
   sección, así que va al tamaño de una etiqueta y con el mismo tratamiento en
   versalitas que los pasos del proceso al que acompaña. El !important es la
   única vía: Elementor escribe la tipografía del encabezado en un selector de
   cuatro clases con el id del elemento dentro, que cambia si la ficha se rehace
   en el editor. */
.iaexp-rol .elementor-heading-title {
	font-size: 0.95rem !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
}

.iaexp-rol .elementor-widget-text-editor {
	font-size: 1rem;
	line-height: 1.55;
}

/* --- Chips de herramientas --------------------------------------------- */

.iaexp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.iaexp-chip {
	padding: 0.2rem 0.65rem;
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	border-radius: 999px;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* --- Entrada escalonada ------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.iaexp-entrada > * {
		opacity: 0;
		transform: translateY(0.9rem);
	}

	/* El índice lo escribe el JS al montar: así el escalonado es correcto con
	   cualquier número de hijos, sin una regla nth-child por posición. */
	.iaexp-entrada--visible > * {
		animation: iaexp-aparecer 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
		animation-delay: calc(var(--iaexp-indice, 0) * 90ms);
	}
}

@keyframes iaexp-aparecer {
	to { opacity: 1; transform: none; }
}

/* --- Foco ---------------------------------------------------------------
   Un único criterio de foco para todo lo interactivo del plugin, para que
   navegar con teclado se vea igual en el hero que en el selector. */

.iaexp-card a:focus-visible,
.iaexp-foco:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
	border-radius: 0.4rem;
}

/* Sobre la aurora oscura las fichas invierten su paleta. */
.iaexp-aurora .iaexp-card {
	--iaexp-tinta: var(--e-global-color-4c06697);
	--iaexp-borde: color-mix(in srgb, var(--e-global-color-4c06697) 28%, transparent);
	--iaexp-fondo: color-mix(in srgb, var(--e-global-color-4c06697) 7%, transparent);
}