/* Homiture — Style Quiz */
.homiture-quiz {
	max-width: 680px;
	margin: 0 auto;
	/* Tono de respaldo. Cada resultado lo sobrescribe con el de su colección
	   (homiture_collection_tones() → data-tone en el shortcode). */
	--hq-tone: var(--wp--preset--color--primary, #30877c);
	--hq-tone-dark: #24564f;
	--hq-tone-soft: var(--wp--preset--color--primary-soft, #e6f0ee);
}

.hq-card {
	background: var(--wp--preset--color--white, #fff);
	border: 1px solid var(--wp--preset--color--border, #e3e0d8);
	border-radius: var(--wp--custom--radius--lg, 16px);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	box-shadow: var(--shadow-warm-sm, 0 6px 22px rgba(74, 56, 41, 0.10));
}

/* Intro "minimal": la página ya pinta título y entradilla en el servidor, así
   que la tarjeta solo tiene un botón. Con el marco puesto quedaba una caja
   blanca enorme y vacía, que se veía peor que el problema que resolvía. Sin
   marco, el botón es lo único que hay — que es justo lo que se quiere. */
.hq-card--bare {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
}

/* La intro es una pantalla de ACCIÓN, no de lectura. La tarjeta ya iba centrada
   en la página (.homiture-quiz tiene margin auto), pero su contenido caía a la
   izquierda bajo una cabecera centrada: de ahí la sensación de descuadre. Las
   demás tarjetas —preguntas y resultado— siguen alineadas a la izquierda, que
   es donde se lee mejor. */
.hq-card--intro { text-align: center; }
.hq-card--intro .hq-lead { max-width: 46ch; margin-left: auto; margin-right: auto; }

.hq-progress {
	height: 4px;
	background: var(--wp--preset--color--border-light, #efece5);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 1.5rem;
}
.hq-progress__bar {
	height: 100%;
	width: 0;
	background: var(--wp--preset--color--primary, #30877c);
	transition: width 0.3s ease;
}

.hq-step { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--accent, #eba607); margin: 0 0 0.5rem; }

.hq-q {
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-size: clamp(1.4rem, 3vw, 1.75rem);
	line-height: 1.2;
	margin: 0 0 1.5rem;
	color: var(--wp--preset--color--ink, #222826);
}

.hq-options { display: grid; gap: 0.75rem; }

.hq-opt {
	box-sizing: border-box;
	text-align: left;
	padding: 1rem 1.25rem;
	border: 1px solid var(--wp--preset--color--border, #e3e0d8);
	border-radius: var(--wp--custom--radius--md, 8px);
	background: var(--wp--preset--color--white, #fff);
	color: var(--wp--preset--color--ink, #222826);
	font: inherit;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}
.hq-opt:hover { border-color: var(--wp--preset--color--primary, #30877c); background: var(--wp--preset--color--primary-soft, #e6f0ee); }
.hq-opt:focus-visible { outline: 3px solid var(--wp--preset--color--accent, #eba607); outline-offset: 2px; }

.hq-intro__title, .hq-result__title { font-family: var(--wp--preset--font-family--heading, sans-serif); font-size: clamp(1.6rem, 4vw, 2.25rem); margin: 0 0 0.75rem; }
.hq-lead { color: var(--wp--preset--color--muted, #6b736f); margin: 0 0 1.5rem; }

/* ---------------------------------------------------------------------------
 * Botones.
 *
 * El sólido no llevaba borde y el fantasma sí, sin `box-sizing: border-box`:
 * dos cajas de distinta altura que el flex del resultado estiraba a la mayor,
 * dejando el texto del sólido 1px descentrado. De ahí que "See the Collection"
 * se viera roto y "Start the quiz" no —ese está solo, sin nadie con quien
 * desalinearse—. El borde transparente iguala las métricas y el inline-flex
 * centra el texto pase lo que pase con la altura.
 * ------------------------------------------------------------------------- */
.hq-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 3rem;
	cursor: pointer;
	border: 1px solid transparent;
	/* Fondo con la variante OSCURA del tono, no la clara. Con texto blanco sobre
	   el tono claro, tres de las seis colecciones no llegan al 4.5:1 de WCAG AA
	   (Amber Coast 3.00, Azure Retreat 2.90, Calma 2.68). Con la oscura las seis
	   pasan de sobra (7.8:1 la peor). El tono claro sigue viéndose en la foto de
	   portada y en la píldora de la etiqueta. */
	background: var(--hq-tone-dark);
	color: #fff;
	font: inherit;
	font-weight: 500;
	line-height: 1.2;
	padding: 0.75rem 1.75rem;
	border-radius: var(--wp--custom--radius--md, 8px);
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
/* El hover no cambia el color: cualquier variante más clara volvería a bajar del
   umbral de contraste en las tres colecciones cálidas. Se eleva y proyecta. */
.hq-btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); }
.hq-btn:focus-visible { outline: 3px solid var(--wp--preset--color--accent, #eba607); outline-offset: 2px; }

.hq-btn--ghost { background: transparent; color: var(--hq-tone-dark); border-color: currentColor; }
.hq-btn--ghost:hover { background: var(--hq-tone-soft); color: var(--hq-tone-dark); box-shadow: none; }

.hq-btn--lg { min-height: 3.4rem; padding: 1rem 2.25rem; font-size: 1.05rem; }

/* ---------------------------------------------------------------------------
 * Resultado.
 * ------------------------------------------------------------------------- */
.hq-card--result { padding: 0; overflow: hidden; }
.hq-result__body { padding: clamp(1.5rem, 4vw, 2.5rem); }

/* La foto sale de la media library real (homiture_collection_cover_id). Si la
   colección todavía no tiene ninguna indexada, el degradado con su tonalidad
   sigue siendo un fondo válido: nunca queda un hueco roto. */
.hq-result__media {
	aspect-ratio: 16 / 7;
	background: linear-gradient(135deg, var(--hq-tone) 0%, var(--hq-tone-dark) 100%);
	position: relative;
	overflow: hidden;
}
.hq-result__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cabecera del resultado: eyebrow a la izquierda, "volver a empezar" a la
   derecha. `baseline` y no `center`: lo que tiene que cuadrar es la línea de
   texto de los dos, que no comparten tamaño. */
.hq-result__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.5rem;
}
.hq-result__top .hq-result__eyebrow { margin-bottom: 0; }

.hq-result__eyebrow { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hq-tone-dark); margin: 0 0 0.5rem; }
.hq-result__name {
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-size: clamp(2rem, 5vw, 2.75rem);
	line-height: 1.05;
	color: var(--hq-tone-dark);
	margin: 0 0 0.75rem;
}

/* La "firma material" de la colección (madera miel, azul océano…). Ya estaba en
   el diccionario y en las tarjetas del Shop; el resultado del quiz era el único
   sitio donde no se usaba. */
.hq-result__tag {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--hq-tone-dark);
	background: var(--hq-tone-soft);
	border-radius: 999px;
	padding: 0.3rem 0.85rem;
	margin: 0 0 1rem;
}

.hq-result__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.75rem; }

.hq-restart {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: none;
	border: 0;
	color: var(--wp--preset--color--muted, #6b736f);
	cursor: pointer;
	font: inherit;
	font-size: 0.92rem;
	text-decoration: none;
	margin-top: 0;
	padding: 0;
	white-space: nowrap;
	transition: color 0.2s ease;
}
/* Flecha circular, no "←": arriba a la derecha no se vuelve hacia atrás, se
   reinicia. El glifo dice lo que hace el botón. */
.hq-restart::before { content: "\21BB"; font-size: 1.1em; line-height: 1; }
.hq-restart:hover { color: var(--hq-tone-dark); text-decoration: underline; }
.hq-restart:focus-visible { outline: 3px solid var(--wp--preset--color--accent, #eba607); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 400px) {
	.hq-result__actions { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
	.hq-progress__bar, .hq-opt, .hq-btn { transition: none; }
	.hq-btn:hover { transform: none; }
}