/* ==========================================================================
   EVOX — Test "Encuentra tu silla ideal"
   Usa la paleta de tokens.css: cambiar la marca ahí lo cambia también aquí.
   ========================================================================== */

.evox-quiz {
	font-family: 'Manrope', sans-serif;
	max-width: 760px;
	margin: 0 auto;
}

/* -------- Cabecera -------- */
.evox-quiz__head {
	text-align: center;
	margin-bottom: 22px;
}
.evox-quiz__title {
	margin: 0 0 8px;
	font-size: 28px;
	font-weight: 800;
	color: var(--evox-tinta);
	text-wrap: balance;
}
.evox-quiz__subtitle {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--evox-cuerpo);
}

/* -------- Barra de progreso -------- */
.evox-quiz__progress {
	height: 4px;
	border-radius: 999px;
	background: var(--evox-borde);
	overflow: hidden;
	margin-bottom: 26px;
}
.evox-quiz__progress-bar {
	display: block;
	height: 100%;
	background: var(--evox-verde);
	transition: width 0.35s ease;
}

/* -------- Pasos -------- */
.evox-quiz__step {
	display: none;
	border: none;
	margin: 0;
	padding: 0;
}
.evox-quiz__step.is-active {
	display: block;
	animation: evox-quiz-in 0.3s ease;
}
@keyframes evox-quiz-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.evox-quiz__step-count {
	display: block;
	padding: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--evox-verde-texto);
	margin-bottom: 8px;
}
.evox-quiz__question {
	margin: 0 0 6px;
	font-size: 21px;
	font-weight: 700;
	color: var(--evox-tinta);
	text-wrap: balance;
}
.evox-quiz__help {
	margin: 0 0 20px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--evox-suave);
}

/* -------- Opciones -------- */
.evox-quiz__options {
	display: grid;
	gap: 10px;
}
.evox-quiz__option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid var(--evox-borde-fuerte);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.evox-quiz__option:hover {
	border-color: var(--evox-suave);
	transform: translateY(-1px);
}
.evox-quiz__option input[type='radio'] {
	margin: 2px 0 0;
	flex-shrink: 0;
	accent-color: var(--evox-azul);
}
.evox-quiz__option:has(input:checked) {
	border-color: var(--evox-azul);
	box-shadow: 0 0 0 1px var(--evox-azul) inset;
}
.evox-quiz__option-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.evox-quiz__option-label {
	font-size: 15px;
	font-weight: 700;
	color: var(--evox-tinta);
}
.evox-quiz__option-hint {
	font-size: 13px;
	line-height: 1.45;
	color: var(--evox-cuerpo);
}

/* -------- Navegación -------- */
.evox-quiz__nav {
	margin-top: 18px;
}
.evox-quiz__back {
	background: none;
	border: none;
	padding: 6px 0;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--evox-cuerpo);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.evox-quiz__back:hover {
	color: var(--evox-azul);
}

/* -------- Estados -------- */
.evox-quiz__loading,
.evox-quiz__error {
	text-align: center;
	padding: 28px 16px;
	font-size: 15px;
	color: var(--evox-cuerpo);
}
.evox-quiz__error {
	color: var(--evox-error);
}

/* -------- Resultado -------- */
.evox-quiz__result-title {
	margin: 0 0 22px;
	font-size: 22px;
	font-weight: 800;
	color: var(--evox-tinta);
	text-align: center;
	text-wrap: balance;
}
/*
 * Columnas con ancho MÁXIMO, no 1fr.
 *
 * Con 1fr, una sola recomendación se estiraba a los 760px del test y la foto
 * de la silla —cuadrada— ocupaba media pantalla. Acotando la columna a 230px
 * y centrando la fila, la tarjeta mide igual haya una o tres, y el resultado
 * se lee de un vistazo sin tener que hacer scroll.
 */
.evox-quiz__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 230px));
	justify-content: center;
	gap: 16px;
}
.evox-quiz__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--evox-borde);
	border-radius: 12px;
}
.evox-quiz__card-media img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	display: block;
	background: var(--evox-fondo-2);
}
.evox-quiz__card-title {
	margin: 4px 0 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}
.evox-quiz__card-title a {
	color: var(--evox-tinta);
	text-decoration: none;
}
.evox-quiz__card-title a:hover {
	color: var(--evox-azul);
}
.evox-quiz__card-price {
	font-size: 15px;
	font-weight: 700;
	color: var(--evox-tinta);
}
.evox-quiz__card-price del {
	font-weight: 500;
	color: var(--evox-suave);
	margin-right: 6px;
}

.evox-quiz__card-cta {
	margin-top: auto;
	display: block;
	padding: 11px 14px;
	background: var(--evox-azul);
	color: #fff;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background 0.2s ease;
}
.evox-quiz__card-cta:hover {
	background: var(--evox-azul-hover);
	color: #fff;
}

.evox-quiz__restart {
	display: block;
	margin: 24px auto 0;
	background: none;
	border: 1px solid var(--evox-borde-fuerte);
	border-radius: 999px;
	padding: 10px 20px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--evox-cuerpo);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.evox-quiz__restart:hover {
	border-color: var(--evox-azul);
	color: var(--evox-azul);
}

@media (max-width: 600px) {
	.evox-quiz__title {
		font-size: 23px;
	}
	.evox-quiz__question {
		font-size: 18px;
	}
	.evox-quiz__option {
		padding: 14px 15px;
	}
	/* En móvil sí a una columna completa: ahí el ancho disponible ya es
	   estrecho y la tarjeta se ve bien a todo lo ancho. */
	.evox-quiz__cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.evox-quiz__step.is-active,
	.evox-quiz__option,
	.evox-quiz__progress-bar {
		animation: none;
		transition: none;
	}
}

/* Aviso cuando no hubo coincidencia exacta y se muestran opciones cercanas. */
.evox-quiz__note {
	margin: -10px 0 20px;
	padding: 12px 16px;
	background: var(--evox-fondo);
	border-radius: 10px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--evox-cuerpo);
	text-align: center;
}