/* Test de gustos (page-test-de-gustos.php) -----------------------------------
 * Sin JS: todas las preguntas seguidas y un botón al final.
 * Con JS (.is-js): una pregunta por pantalla, barra de progreso y avance al elegir.
 */

.tq { max-width: 900px; margin: 0 auto; }
.tq-last { max-width: 900px; margin: 0 auto 36px; padding: 14px 20px; border: 1px solid var(--line); border-radius: 14px; font-size: 14.5px; color: var(--muted); }
.tq-last b { color: var(--ink); font-weight: 600; }
.tq-last a { font-weight: 600; color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }

/* Progreso */
.tq-top { display: none; }
.tq.is-js .tq-top { display: flex; align-items: center; gap: 18px; margin-bottom: 34px; }
.tq-count { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tq-count b { color: var(--ink); }
.tq-bar { flex: 1; height: 4px; overflow: hidden; border-radius: 4px; background: var(--line); }
.tq-bar > span { display: block; width: 20%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--navy), var(--royal)); transition: width .45s var(--ease); }

/* Pregunta */
.tq-step { min-width: 0; margin: 0 0 64px; padding: 0; border: 0; }
.tq.is-js .tq-step { display: none; margin: 0; }
.tq.is-js .tq-step.is-current { display: block; animation: tq-in .5s var(--ease) both; }
@keyframes tq-in { from { opacity: 0; transform: translateY(14px); } }
.tq-q { display: block; margin: 0 0 28px; padding: 0; font-size: clamp(28px, 3.6vw, 44px); font-weight: 300; line-height: 1.08; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; outline: none; }
.tq.is-js .tq-num { display: none; } /* ya lo dice «1 de 5» */
.tq-num { display: inline-block; min-width: 1.6em; margin-right: 10px; font-size: .42em; font-weight: 600; letter-spacing: .04em; vertical-align: .55em; color: var(--gold-ink); }
.tq-hint { margin: -16px 0 24px; color: var(--muted); }

/* Respuestas */
.tq-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tq-opts--tipo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tq-opts--precio { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tq-opt {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 96px;
	padding: 20px 22px;
	border: 1px solid var(--line-strong);
	border-radius: 18px;
	background: var(--paper);
	cursor: pointer;
	transition: border-color var(--t), box-shadow var(--t), transform var(--t), background-color var(--t);
}
.tq-opt:hover { border-color: var(--navy); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.tq-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tq-opt:has(input:checked) { border-color: var(--navy); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--navy); }
.tq-opt:has(input:focus-visible) { outline: 2px solid var(--royal); outline-offset: 3px; }
.tq-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tq-txt b { font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.tq-txt small { font-size: 13.5px; line-height: 1.4; color: var(--muted); }

.tq-art { display: grid; flex: none; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-ink); font-size: 23px; }
.tq-opt:has(input:checked) .tq-art:not(.tq-wine):not(.tq-oak) { background: var(--navy); color: #fff; }

/* Tipo: el color del vino */
.tq-opts--tipo .tq-opt { flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 156px; }
.tq-wine { width: 46px; height: 46px; box-shadow: inset 0 -9px 14px rgba(10, 10, 12, .2), inset 0 6px 10px rgba(255, 255, 255, .28); }
.tq-wine--tinto { background: #6E1A2E; }
.tq-wine--blanco { background: #E9DA9A; }
.tq-wine--rosado { background: #EFA6A0; }
.tq-wine--espumoso { background: radial-gradient(circle at 34% 42%, #fff 0 2px, transparent 3px), radial-gradient(circle at 60% 66%, #fff 0 1.6px, transparent 2.6px), radial-gradient(circle at 64% 30%, #fff 0 1.4px, transparent 2.4px), #E7D49A; }
.tq-wine--dulce { background: #BF7E2A; }
.tq-wine--sorpresa { background: conic-gradient(from 200deg, #6E1A2E, #EFA6A0, #E9DA9A, #BF7E2A, #6E1A2E); color: #fff; font-size: 20px; }

/* Estilo: cuánta madera (1, 2 o 3 barras) */
.tq-oak { display: flex; align-items: flex-end; justify-content: center; gap: 4px; padding-bottom: 13px; }
.tq-oak i { width: 7px; border-radius: 3px; background: #E3D6BB; }
.tq-oak i:nth-child(1) { height: 10px; }
.tq-oak i:nth-child(2) { height: 17px; }
.tq-oak i:nth-child(3) { height: 24px; }
.tq-oak--joven i:nth-child(-n+1),
.tq-oak--madera i:nth-child(-n+2),
.tq-oak--larga i { background: var(--gold); }

/* Precio: casillas compactas */
.tq-opts--precio .tq-opt { justify-content: center; min-height: 84px; padding: 16px 12px; text-align: center; }
.tq-opts--precio .tq-txt b { font-size: 16px; }

/* Uvas y zonas */
.tq-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 26px; }
.tq-chips-l { width: 100%; margin-bottom: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.tq-chip { position: relative; cursor: pointer; }
.tq-chip input { position: absolute; opacity: 0; pointer-events: none; }
.tq-chip span { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--paper); font-size: 14.5px; transition: background-color var(--t), border-color var(--t), color var(--t); }
.tq-chip:hover span { border-color: var(--navy); }
.tq-chip input:checked + span { border-color: var(--navy); background: var(--navy); color: #fff; }
.tq-chip input:focus-visible + span { outline: 2px solid var(--royal); outline-offset: 2px; }
.tq-chip input:disabled + span { opacity: .45; cursor: not-allowed; }
.tq-chip.is-off { display: none; }
.tq-skip { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.tq-skip:hover { color: var(--ink); }

/* Navegación */
.tq-nav { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.tq.is-js .tq-nav { justify-content: space-between; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.tq-back { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; }
.tq-back .i { transform: scaleX(-1); }
.tq-back:hover { color: var(--ink); }
.tq-nav-r { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.tq [hidden] { display: none !important; } /* .btn y .tq-back fijan su display */
.tq-nav .btn:disabled { opacity: .35; cursor: default; transform: none; }
.tq.is-sending .tq-submit { opacity: .65; pointer-events: none; }

/* Resultados */
.tq-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 36px; margin-bottom: 34px; padding: 26px 30px; border: 1px solid #EFE6D0; border-radius: 22px; background: linear-gradient(120deg, var(--gold-soft), #FBF8F1 60%, var(--paper)); }
.tq-sum-ey { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.tq-sum-txt { margin: 6px 0 0; font-size: clamp(19px, 2vw, 25px); font-weight: 300; line-height: 1.3; letter-spacing: -.015em; color: var(--ink); }
.tq-sum-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.tq-more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--navy); }
.tq-more .i { transition: transform var(--t); }
.tq-more:hover .i { transform: translateX(3px); }
.tq-note { margin: -14px 0 26px; font-size: 14.5px; color: var(--muted); }
.tq-grid { margin-bottom: 44px; }
.tq-saved { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); }
.tq-saved .i { color: var(--ok); }
.tq-saved a { font-weight: 600; color: var(--navy); }
.tq-join { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: clamp(28px, 4vw, 44px); border-radius: 24px; background: radial-gradient(60% 150% at 100% 0%, rgba(218, 191, 137, .3), transparent 62%), var(--navy); color: #fff; }
.tq-join h2 { margin: 0 0 8px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 300; letter-spacing: -.025em; color: #fff; }
.tq-join p { max-width: 52ch; margin: 0; color: rgba(255, 255, 255, .78); }
.tq-join-acts { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 900px) {
	.tq-opts--precio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.tq-opts, .tq-opts--tipo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.tq-opts--para, .tq-opts--estilo { grid-template-columns: minmax(0, 1fr); }
	.tq-opts--precio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tq-opt { gap: 14px; min-height: 78px; padding: 16px; border-radius: 16px; }
	.tq-opts--tipo .tq-opt { min-height: 124px; }
	.tq-art { width: 44px; height: 44px; font-size: 20px; }
	.tq-wine { width: 40px; height: 40px; }
	.tq-sum { padding: 22px; }
	.tq-join-acts, .tq-join-acts > * { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.tq.is-js .tq-step.is-current { animation: none; }
	.tq-bar > span { transition: none; }
}