.iaexp-capas {
	--iaexp-capas-color: var(--e-global-color-primary);
	--iaexp-capas-texto: var(--e-global-color-text);
}

.iaexp-capas__capa {
	display: grid;
	gap: 0.6rem;
	padding: clamp(1rem, 2.5vw, 1.5rem);
	border: 1px solid color-mix(in srgb, var(--iaexp-capas-color) 35%, transparent);
	border-radius: 1rem;
	/* Cada capa hacia dentro se aclara un poco: el degradado de profundidad se
	   calcula desde el índice, así que funciona con tres capas o con cinco. */
	background: color-mix(in srgb,
		var(--iaexp-capas-color) calc(4% + var(--iaexp-indice) * 3%), transparent);
}

.iaexp-capas__capa .iaexp-capas__capa {
	margin-top: 0.4rem;
}

.iaexp-capas__cabecera {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--iaexp-capas-color);
}

.iaexp-capas__titulo {
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	font-size: clamp(0.98rem, 1.6vw, 1.1rem);
	font-weight: 800;
	line-height: 1.2;
}

.iaexp-capas__etiqueta {
	margin-left: auto;
	padding: 0.15rem 0.6rem;
	border: 1px solid color-mix(in srgb, var(--iaexp-capas-color) 40%, transparent);
	border-radius: 999px;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.iaexp-capas__texto {
	margin: 0;
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--iaexp-capas-texto);
}

/* En pantallas estrechas la etiqueta baja a su propia línea antes que
   estrujar el título de la capa. */
@media (max-width: 543px) {
	.iaexp-capas__cabecera {
		flex-wrap: wrap;
	}

	.iaexp-capas__etiqueta {
		margin-left: 0;
	}
}

.iaexp-aurora .iaexp-capas {
	--iaexp-capas-color: var(--e-global-color-4c06697);
	--iaexp-capas-texto: var(--e-global-color-329db06);
}