.transicion-actividad {
	max-width: 760px;
	margin: 24px auto;
	padding: clamp(16px, 4vw, 32px);
	border-radius: 16px;
	background: #fffdf8;
	box-shadow: 0 8px 24px rgba(23, 50, 77, 0.14);
}

.transicion-actividad h1 {
	text-align: center;
	font-size: clamp(1.5rem, 5vw, 2.3rem);
}

.transicion-instruccion {
	text-align: center;
	font-size: 1.1rem;
}

.transicion-secuencia {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(5px, 2vw, 14px);
	margin: 24px auto;
	padding: 0;
	list-style: none;
}

.transicion-numero {
	display: grid;
	min-width: 0;
	aspect-ratio: 1;
	place-items: center;
	border: 2px solid #b6d7d2;
	border-radius: 10px;
	background: #fff;
	color: #17324d;
	font-size: clamp(1.3rem, 7vw, 2.8rem);
	font-weight: 800;
}

.transicion-numero.faltante {
	border: 3px dashed #ee6c4d;
	background: #fff4ee;
	color: #c34e32;
}

.transicion-opciones {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
}

.transicion-opciones button {
	min-width: 64px;
	min-height: 52px;
	padding: 10px 18px;
	border: 2px solid #176b87;
	border-radius: 8px;
	background: #fff;
	color: #176b87;
	font-size: 1.3rem;
	font-weight: 700;
	cursor: pointer;
}

.transicion-opciones button:hover,
.transicion-opciones button:focus-visible {
	outline: 3px solid #ffd166;
	outline-offset: 2px;
	background: #eaf6f8;
}

.transicion-feedback {
	margin-top: 20px;
	text-align: center;
	font-size: 1.2rem;
	font-weight: 700;
}

.transicion-feedback.correcto { color: #25744f; }
.transicion-feedback.incorrecto { color: #b64132; }

.transicion-otra { margin-top: 16px; text-align: center; }

@media (max-width: 480px) {
	.transicion-actividad { margin: 12px auto; }
	.transicion-numero { border-radius: 7px; }
	.transicion-opciones { gap: 8px; }
}