.iaexp-sel {
	--iaexp-sel-color: var(--e-global-color-primary);
	--iaexp-sel-texto: var(--e-global-color-text);
	--iaexp-sel-tinta: var(--e-global-color-4c06697); /* Blanco del Kit: la tinta que va sobre el color fuerte */
	display: grid;
	gap: 1.5rem;
}

/* --- Pestañas ------------------------------------------------------------ */

.iaexp-sel__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.iaexp-sel__boton {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.2rem;
	border: 1px solid color-mix(in srgb, var(--iaexp-sel-color) 40%, transparent);
	border-radius: 999px;
	background: transparent;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-weight: 700;
	color: var(--iaexp-sel-color);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.iaexp-sel__boton .iaexp-icono {
	width: 1.15rem;
	height: 1.15rem;
}

.iaexp-sel__boton:hover {
	background: color-mix(in srgb, var(--iaexp-sel-color) 12%, transparent);
	border-color: var(--iaexp-sel-color);
}

.iaexp-sel__boton[aria-selected="true"] {
	background: var(--iaexp-sel-color);
	border-color: var(--iaexp-sel-color);
	color: var(--iaexp-sel-tinta);
}

/* El foco tiene que verse: se navega con teclado. */
.iaexp-sel__boton:focus-visible,
.iaexp-sel__cta:focus-visible {
	outline: 3px solid var(--iaexp-sel-color);
	outline-offset: 3px;
}

/* --- Panel de caso -------------------------------------------------------
   El panel es su propio grid. Antes no lo era, y el CTA — que declara
   `justify-self: start`, propiedad que solo existe dentro de un grid — se
   quedaba en flujo en línea: su relleno vertical invadía la última línea del
   párrafo. Con el grid, la separación la da `gap` y el solape no puede
   reaparecer por mucho que crezca el texto. */

.iaexp-sel__panel {
	display: grid;
	gap: 1.25rem;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid color-mix(in srgb, var(--iaexp-sel-color) 22%, transparent);
	border-radius: 1rem;
	background: color-mix(in srgb, var(--iaexp-sel-color) 5%, transparent);
}

/* `hidden` pierde ante `display: grid` por especificidad de propiedad: sin
   esto, los cuatro paneles se verían a la vez. */
.iaexp-sel__panel[hidden] {
	display: none;
}

.iaexp-sel__texto {
	margin: 0;
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	line-height: 1.6;
	color: var(--iaexp-sel-texto);
}

.iaexp-sel__flujo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	margin: 0;
}

.iaexp-sel__dato {
	display: grid;
	gap: 0.3rem;
	padding-left: 0.9rem;
	border-left: 2px solid color-mix(in srgb, var(--iaexp-sel-color) 45%, transparent);
}

.iaexp-sel__etiqueta {
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--iaexp-sel-color);
}

.iaexp-sel__valor {
	margin: 0;
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--iaexp-sel-texto);
}

.iaexp-sel .iaexp-chips {
	color: var(--iaexp-sel-color);
}

.iaexp-sel__cta {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	background: var(--iaexp-sel-color);
	color: var(--iaexp-sel-tinta);
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
	.iaexp-sel__cta:hover {
		transform: translateY(-2px);
		box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--e-global-color-secondary) 80%, transparent);
	}
}

/* En móvil el CTA ocupa el ancho: un botón a media línea es más difícil de
   acertar con el pulgar que uno de borde a borde. */
@media (max-width: 543px) {
	.iaexp-sel__cta {
		justify-self: stretch;
		justify-content: center;
	}
}

/* Cambio de pestaña: el panel entra, no aparece de golpe. */
@media (prefers-reduced-motion: no-preference) {
	.iaexp-sel__panel:not([hidden]) {
		animation: iaexp-sel-entrada 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	}
}

@keyframes iaexp-sel-entrada {
	from { opacity: 0; transform: translateY(0.5rem); }
	to   { opacity: 1; transform: none; }
}