/* Encuentra tu semilla (page-encuentra-tu-semilla.php, finder.js). Una pregunta por pantalla sobre negro: titular
   grande con tracking negativo, opciones en baldosas que responden al pulsar (no al soltar), el turquesa de Bluedog
   como único color de acción. Las pantallas entran por la derecha y vuelven por el mismo camino; con menos movimiento,
   solo fundido. */

.bd-finder {
	--bd-ease: cubic-bezier(.32, .72, 0, 1); /* muelle críticamente amortiguado, como el de las hojas de iOS */
	--bd-tile: #1c1c1e;
	--bd-tile-hover: #242426;
	--bd-muted: #86868b;
	--bd-text: #f5f5f7;
	--bd-accent: var(--bluedogBlue, #3dd3cf);
	position: relative;
	min-height: calc(100svh - var(--headerHeight));
	padding: 0 0 96px !important;
	color: var(--bd-text);
	-webkit-font-smoothing: antialiased;
}
.bd-finder button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
.bd-finder :focus-visible { outline: 2px solid var(--bd-accent); outline-offset: 3px; }
.bd-finder [tabindex="-1"]:focus { outline: none; }

/* ── Barra: atrás, progreso por pasos y cuántas encajan. Material translúcido pegado bajo la cabecera. ── */
.bd-finder__bar {
	position: sticky; top: var(--headerHeight); z-index: 6;
	display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 16px;
	max-width: 1100px; margin: 0 auto; padding: 14px var(--horizontalPadding);
	background: rgba(0, 0, 0, .72);
	-webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
	-webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent);
}
.bd-finder__bar[hidden] { display: none; }
.bd-finder__back {
	display: grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .1); color: var(--bd-text); cursor: pointer; transition: background-color .15s ease, transform .1s ease;
}
.bd-finder__back:hover { background: rgba(255, 255, 255, .16); }
.bd-finder__back:active { transform: scale(.92); }
.bd-finder__back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bd-finder__progress { display: flex; gap: 4px; }
.bd-finder__progress i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .14); transition: background-color .4s ease; }
.bd-finder__progress i.is-now { background: rgba(255, 255, 255, .7); }
.bd-finder__progress i.is-done { background: var(--bd-accent); }
.bd-finder__count {
	display: flex; align-items: baseline; gap: 5px; margin: 0; padding: 7px 14px; border-radius: 999px;
	background: color-mix(in srgb, var(--bd-accent) 14%, transparent); color: var(--bd-accent);
	font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; transition: color .3s ease, background-color .3s ease;
}
.bd-finder__count b { font-variant-numeric: tabular-nums; font-size: 15px; }
.bd-finder__count.is-zero { background: rgba(255, 159, 10, .14); color: #ff9f0a; }
.bd-finder.is-results .bd-finder__count { visibility: hidden; }

/* ── Escenario: todas las pantallas en la misma celda; entra una y sale otra a la vez. ── */
.bd-finder__stage { display: grid; max-width: 1100px; margin: 0 auto; padding: 0 var(--horizontalPadding); }
.bd-finder__stage > * {
	grid-area: 1 / 1; min-width: 0;
	transition: transform .5s var(--bd-ease), opacity .32s ease;
}
.bd-finder__stage > [hidden] { display: none; }
.bd-finder__stage > .is-from-right { transform: translateX(64px); opacity: 0; transition: none; }
.bd-finder__stage > .is-from-left { transform: translateX(-64px); opacity: 0; transition: none; }
.bd-finder__stage > .is-leaving-left { transform: translateX(-64px); opacity: 0; pointer-events: none; }
.bd-finder__stage > .is-leaving-right { transform: translateX(64px); opacity: 0; pointer-events: none; }
.bd-finder.no-anim .bd-finder__stage > * { transition: none; }

/* ── Pregunta ── */
.bd-fq { display: flex; flex-direction: column; align-items: center; padding: 40px 0 0; text-align: center; }
.bd-fq__head { max-width: 760px; margin: 0 0 40px; }
.bd-fq__kicker { margin: 0 0 12px; color: var(--bd-accent); font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.bd-finder .bd-fq__title, .bd-finder .bd-results__title {
	margin: 0; color: var(--bd-text);
	font-size: clamp(32px, 4.6vw, 56px) !important; font-weight: 700 !important; line-height: 1.07 !important; letter-spacing: -.028em;
	text-wrap: balance;
}
.bd-fq__help { margin: 14px 0 0; color: var(--bd-muted); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.35; letter-spacing: -.01em; text-wrap: balance; }

/* Opciones: baldosas. Pulsar = se hunde al instante; elegida = anillo turquesa, tinte y marca. */
.bd-fq__options { display: grid; gap: 14px; width: 100%; }
.bd-fq__options.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
.bd-fq__options.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 960px; }
.bd-fq__options.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1040px; }
.bd-fq__options.is-effects { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 960px; }
.bd-fq__option {
	position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 196px; margin: 0; padding: 26px 24px 24px;
	border: 0; border-radius: 24px; background: var(--bd-tile); color: var(--bd-text); text-align: left; cursor: pointer;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
	transition: transform .4s var(--bd-ease), background-color .2s ease, box-shadow .2s ease;
}
.bd-fq__option:hover { background: var(--bd-tile-hover); }
.bd-fq__option:active { transform: scale(.97); transition-duration: .1s; }
.bd-fq__option[aria-checked="true"] {
	background: color-mix(in srgb, var(--bd-accent) 12%, var(--bd-tile));
	box-shadow: inset 0 0 0 2px var(--bd-accent), 0 12px 40px -12px color-mix(in srgb, var(--bd-accent) 45%, transparent);
}
.bd-fq__visual { display: flex; align-items: flex-end; height: 48px; margin-bottom: auto; padding-bottom: 18px; color: var(--bd-muted); transition: color .2s ease; }
.bd-fq__option[aria-checked="true"] .bd-fq__visual { color: var(--bd-accent); }
.bd-fq__icon { width: auto; height: 40px; max-width: 52px; }
.bd-fq__label { font-size: 21px; font-weight: 600; line-height: 1.15; letter-spacing: -.015em; }
.bd-fq__detail { color: var(--bd-muted); font-size: 15px; line-height: 1.35; letter-spacing: -.005em; }
.bd-fq__option.is-any .bd-fq__icon { height: 34px; }

/* Marca: círculo vacío → turquesa con ✓ negro (crece desde el centro). */
.bd-fq__check {
	position: absolute; top: 18px; right: 18px; width: 24px; height: 24px; border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); transition: box-shadow .2s ease;
}
.bd-fq__check::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--bd-accent) center / 13px no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1.5 6.5 5 10l7.5-8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	transform: scale(.4); opacity: 0; transition: transform .35s var(--bd-ease), opacity .15s ease;
}
.bd-fq__option[aria-checked="true"] .bd-fq__check { box-shadow: none; }
.bd-fq__option[aria-checked="true"] .bd-fq__check::after { transform: none; opacity: 1; }
.bd-fq__option[role="radio"] .bd-fq__check { display: none; } /* una sola: avanza al tocar */

/* Visuales propios: € por tramos, plantas de tres alturas sobre el suelo y semanas en una regla de 16. */
.bd-fq__euro { color: rgba(255, 255, 255, .2); font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.bd-fq__euro b { color: var(--bd-muted); font-weight: inherit; transition: color .2s ease; }
.bd-fq__option[aria-checked="true"] .bd-fq__euro b { color: var(--bd-accent); }
.bd-fq__plant { display: flex; align-items: flex-end; justify-content: center; width: 64px; height: 48px; border-bottom: 2px solid rgba(255, 255, 255, .14); }
.bd-fq__plant .bd-fq__icon { height: var(--h); max-width: none; }
.bd-fq__weeks { position: relative; display: block; width: 120px; height: 8px; margin-bottom: 6px; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.bd-fq__weeks i {
	position: absolute; top: 0; bottom: 0; border-radius: 4px; background: currentColor;
	left: calc((var(--from) - 4) / 12 * 100%); right: calc((16 - var(--to)) / 12 * 100%);
}

/* Efectos: emoji grande, centrado. */
.bd-fq__effect { align-items: center; justify-content: center; gap: 12px; min-height: 148px; padding: 24px 12px 20px; text-align: center; }
.bd-fq__emoji { display: grid; place-items: center; height: 48px; font-family: var(--emojiFont); font-size: 44px; line-height: 1; transition: transform .45s var(--bd-ease); }
.bd-fq__effect[aria-checked="true"] .bd-fq__emoji { transform: scale(1.12) translateY(-2px); }
.bd-fq__effect .bd-fq__label { font-size: 17px; }
.bd-fq__effect .bd-fq__icon { height: 34px; color: var(--bd-muted); }
.bd-fq__effect .bd-fq__check { top: 12px; right: 12px; width: 20px; height: 20px; }
.bd-fq__effect .bd-fq__check::after { background-size: 11px; }

/* Sabores: nube de píldoras con el color de su familia; el tamaño dice cuántas semillas lo tienen. */
.bd-fq__cloud { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; max-width: 980px; }
.bd-fq__flavour {
	display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0 18px; height: 44px; border: 0; border-radius: 999px;
	background: var(--bg); color: rgba(255, 255, 255, .82); font-size: 16px; font-weight: 500; letter-spacing: -.01em; cursor: pointer;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
	transition: transform .4s var(--bd-ease), background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.bd-fq__flavour.is-l { height: 54px; padding: 0 24px; font-size: 20px; font-weight: 600; }
.bd-fq__flavour.is-s { height: 38px; padding: 0 15px; font-size: 14px; }
.bd-fq__flavour:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.bd-fq__flavour:active { transform: scale(.94); transition-duration: .1s; }
.bd-fq__flavour[aria-checked="true"] { background: var(--bd-accent); color: #000; box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--bd-accent) 60%, transparent); }
.bd-fq__ficon {
	width: 1.15em; height: 1.15em; flex: none; background: currentColor; opacity: .55;
	-webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.bd-fq__flavour[aria-checked="true"] .bd-fq__ficon { opacity: .8; }

/* Pie: «Continuar» (turquesa; gris hasta que se elige algo) y el atajo. */
.bd-fq__foot { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 40px; }
.bd-fq__next, .bd-fq__start, .bd-compare__cta, .bd-results__restart {
	display: inline-flex; align-items: center; justify-content: center; min-width: 220px; height: 52px; margin: 0; padding: 0 32px; border: 0; border-radius: 999px;
	background: var(--bd-accent); color: #000 !important; font-size: 17px; font-weight: 600; letter-spacing: -.01em; text-decoration: none !important; cursor: pointer;
	transition: transform .4s var(--bd-ease), background-color .2s ease, color .2s ease, opacity .2s ease;
}
.bd-fq__next:hover, .bd-fq__start:hover, .bd-compare__cta:hover { background: color-mix(in srgb, var(--bd-accent) 85%, #fff); }
.bd-fq__next:active, .bd-fq__start:active, .bd-compare__cta:active, .bd-results__restart:active { transform: scale(.96); transition-duration: .1s; }
.bd-fq__next:disabled { background: #2c2c2e; color: #6e6e73 !important; cursor: default; transform: none; }
.bd-fq__skip { margin: 0; padding: 8px 12px; border: 0; background: none; color: var(--bd-accent); font-size: 17px; cursor: pointer; }
.bd-fq__skip:hover { text-decoration: underline; }

/* Las opciones suben escalonadas al entrar (solo la primera vez que se pinta cada pantalla). */
@keyframes bd-fq-rise { from { opacity: 0; transform: translateY(14px); } }
.bd-fq.is-current .bd-fq__option, .bd-fq.is-current .bd-fq__flavour { animation: bd-fq-rise .55s var(--bd-ease) both; }
.bd-fq.is-current :is(.bd-fq__option, .bd-fq__flavour):nth-child(2) { animation-delay: .035s; }
.bd-fq.is-current :is(.bd-fq__option, .bd-fq__flavour):nth-child(3) { animation-delay: .07s; }
.bd-fq.is-current :is(.bd-fq__option, .bd-fq__flavour):nth-child(4) { animation-delay: .105s; }
.bd-fq.is-current :is(.bd-fq__option, .bd-fq__flavour):nth-child(5) { animation-delay: .14s; }
.bd-fq.is-current :is(.bd-fq__option, .bd-fq__flavour):nth-child(n+6) { animation-delay: .175s; }
.bd-fq.is-current .bd-fq__flavour:nth-child(n+16) { animation-delay: .23s; }
.bd-fq.is-current .bd-fq__flavour:nth-child(n+30) { animation-delay: .28s; }

/* ── Portada: titular de marca con un halo turquesa. ── */
.bd-fq--intro { position: relative; isolation: isolate; justify-content: center; min-height: calc(100svh - var(--headerHeight) - 160px); padding: 72px 0 40px; }
.bd-fq__glow {
	position: absolute; inset: -10% -20% auto; z-index: -1; height: 80%; pointer-events: none;
	background: radial-gradient(50% 60% at 50% 40%, color-mix(in srgb, var(--bd-accent) 26%, transparent), transparent 70%);
	filter: blur(20px);
}
.bd-finder .bd-fq__hero {
	margin: 0; color: #fff; font-family: Allenoire, -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: clamp(52px, 9vw, 112px) !important; font-weight: 400 !important; line-height: .98 !important; letter-spacing: -.01em; text-wrap: balance;
}
.bd-fq__lede { max-width: 600px; margin: 24px 0 36px; color: #a1a1a6; font-size: clamp(19px, 2vw, 24px); line-height: 1.3; letter-spacing: -.015em; text-wrap: balance; }
.bd-fq__start { height: 56px; min-width: 200px; font-size: 19px; }
.bd-fq__note { margin: 16px 0 0; color: var(--bd-muted); font-size: 14px; }

/* ── Resultados ── */
.bd-results { padding: 40px 0 0; }
.bd-finder__stage > .bd-results { margin: 0 calc(-1 * var(--horizontalPadding)); }
.bd-results__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.bd-results__lede { max-width: 640px; margin: 14px 0 0; color: var(--bd-muted); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.35; text-wrap: balance; }
.bd-results__answers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 900px; margin: 24px 0 0; }
.bd-results__answer {
	display: inline-flex; align-items: center; gap: 6px; height: 32px; margin: 0; padding: 0 14px; border: 0; border-radius: 999px;
	background: var(--bd-tile); color: #d1d1d6; font-size: 14px; cursor: pointer; transition: background-color .15s ease, transform .1s ease;
}
.bd-results__answer::after { content: ""; width: 10px; height: 10px; background: currentColor; opacity: .5;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 9l1.6-.4L8.7 2.5 7.5 1.3 1.4 7.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 9l1.6-.4L8.7 2.5 7.5 1.3 1.4 7.4z'/%3E%3C/svg%3E") center / contain no-repeat; }
.bd-results__answer:hover { background: var(--bd-tile-hover); color: #fff; }
.bd-results__answer:active { transform: scale(.96); }

/* Todas / solo Bluedog Genetics: control segmentado de cristal con el indicador que se desliza. */
.bd-results__scope {
	position: relative; display: inline-flex; gap: 2px; margin: 32px 0 0; padding: 4px; border-radius: 999px;
	background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.bd-results__scope button {
	position: relative; z-index: 1; height: 40px; margin: 0; padding: 0 20px; border: 0; border-radius: 999px; background: none;
	color: rgba(245, 245, 247, .72); font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color .3s ease;
}
.bd-results__scope button:hover { color: #fff; }
.bd-results__scope button[aria-checked="true"] { color: #000; }
.bd-results__thumb { position: absolute; top: 4px; left: 4px; height: 40px; border-radius: 999px; background: var(--bd-accent); pointer-events: none; }
.bd-results__thumb.is-ready { transition: transform .5s var(--bd-ease), width .5s var(--bd-ease); }

.bd-results__body { min-height: 400px; transition: opacity .2s ease; }
.bd-results__body.is-loading { opacity: .35; transition-delay: .12s; }
.bd-results__again { margin: 64px 0 0; text-align: center; }
.bd-results__restart { background: rgba(255, 255, 255, .1); color: var(--bd-text) !important; }
.bd-results__restart:hover { background: rgba(255, 255, 255, .16); }

/* Comparativa: tres columnas con las mismas filas (subgrid). La primera, con anillo y halo. */
.bd-compare { max-width: 1100px; margin: 64px auto 0; }
.bd-finder .bd-compare__title { margin: 0 0 28px; color: var(--bd-muted); font-size: clamp(21px, 2vw, 28px) !important; font-weight: 600 !important; line-height: 1.15; letter-spacing: -.015em; }
.bd-compare__title b { color: var(--bd-text); font-weight: inherit; }
.bd-compare__grid {
	display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), auto);
	column-gap: 20px;
}
.bd-compare__col {
	display: grid; grid-row: span var(--rows); grid-template-rows: subgrid; padding: 24px 24px 12px; border-radius: 28px;
	background: #111113; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
	opacity: 0; transform: translateY(18px);
	transition: opacity .5s ease calc(var(--i) * .08s), transform .7s var(--bd-ease) calc(var(--i) * .08s);
}
.is-in .bd-compare__col { opacity: 1; transform: none; }
.bd-compare__col.is-best {
	background: radial-gradient(120% 50% at 50% 0%, color-mix(in srgb, var(--bd-accent) 16%, transparent), transparent 70%), #111113;
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bd-accent) 70%, transparent);
}
.bd-compare__top { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 20px; }
.bd-compare__rank { margin: 0 0 16px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #d1d1d6; font-size: 13px; font-weight: 600; }
.is-best .bd-compare__rank { background: var(--bd-accent); color: #000; }
.bd-compare__media { position: relative; display: block; width: 100%; max-width: 260px; margin-bottom: 20px; }
.bd-compare__media .bd-compare__photo { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1; object-fit: cover; border-radius: 20px; transition: transform .6s var(--bd-ease); }
.bd-compare__col:hover .bd-compare__photo { transform: scale(1.02); }
.bd-compare__sticker { position: absolute; right: -10px; bottom: -14px; width: 84px !important; height: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
.bd-compare__brand { margin: 6px 0 4px; color: var(--bd-accent); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bd-finder .bd-compare__name { margin: 0; font-size: 24px !important; font-weight: 700 !important; line-height: 1.12 !important; letter-spacing: -.02em; text-wrap: balance; }
.bd-compare__name a { color: var(--bd-text) !important; text-decoration: none !important; }
.bd-compare__match { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; color: var(--bd-muted); font-size: 14px; }
.bd-compare__match b { color: var(--bd-text); font-variant-numeric: tabular-nums; }
.bd-compare__match svg { width: 26px; height: 26px; transform: rotate(-90deg); }
.bd-compare__match circle { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 3.5; }
.bd-compare__match .bd-compare__arc {
	stroke: var(--bd-accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100;
	transition: stroke-dashoffset 1.1s var(--bd-ease) calc(.3s + var(--i, 0) * .08s);
}
.is-in .bd-compare__arc { stroke-dashoffset: calc(100 - var(--pct, 0)); }
.bd-compare__price { margin: 10px 0 18px; color: var(--bd-text); font-size: 17px; font-weight: 600; }
.bd-compare__price .woocommerce-Price-amount { color: inherit; }
.bd-compare__cta { min-width: 0; height: 44px; padding: 0 24px; font-size: 15px; }
.bd-compare__spec { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .08); text-align: center; }
.bd-compare__label { color: var(--bd-muted); font-size: 12px; letter-spacing: .01em; }
.bd-compare__value { color: var(--bd-text); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.bd-compare__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; color: var(--bd-muted); }
.bd-compare__chip {
	padding: 5px 10px; border-radius: 999px; background: var(--bg, rgba(255, 255, 255, .08)); color: rgba(255, 255, 255, .75);
	font-family: var(--emojiFont); font-size: 13px; line-height: 1.2;
}
.bd-compare__chip.is-hit { color: #fff; box-shadow: inset 0 0 0 1.5px var(--bd-accent); }

/* Estantería de las siguientes. El fundido del borde (.productCollectionCarousel::after de site.css) se coloca con
   100vw, pensado para la estantería a todo el ancho de la portada; aquí va en la columna de resultados y caía en mitad
   de las tarjetas (a 1920 px, a 360 px del borde). Aquí, carril y fundido atados al ancho de la columna. Por debajo de
   1245 px site.css quita el fundido y lleva el carril de borde a borde, como en la portada. */
.bd-shelf--finder { padding-top: 80px !important; }
@media (min-width: 1245px) {
	.bd-shelf--finder.productCollectionCarousel::after { right: var(--horizontalPadding); width: 72px; }
	/* contain: el ancho del contenedor no depende de las tarjetas (con min-width: 22 % se estiraba a sí mismo). */
	.bd-shelf--finder .carousel { width: 100%; contain: inline-size; }
	.bd-shelf--finder .carousel > ul { max-width: 100%; }
}

/* Tableta y móvil */
@media (max-width: 1023px) {
	.bd-fq__options.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
	.bd-fq__options.is-effects { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.bd-finder__bar { gap: 12px; padding: 10px var(--horizontalPadding); }
	.bd-fq { padding-top: 24px; }
	.bd-fq__head { margin-bottom: 28px; }
	.bd-fq__options { gap: 10px; }
	.bd-fq__options.is-2, .bd-fq__options.is-3 { grid-template-columns: 1fr; }
	.bd-fq__options.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bd-fq__options.is-effects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* En una columna, baldosas en fila: visual a la izquierda, texto a la derecha. */
	.bd-fq__options:is(.is-2, .is-3) .bd-fq__option { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; row-gap: 2px; align-items: center; min-height: 0; padding: 20px 52px 20px 20px; }
	.bd-fq__options:is(.is-2, .is-3) .bd-fq__visual { grid-row: span 2; height: auto; margin: 0; padding: 0; justify-content: center; }
	.bd-fq__options:is(.is-2, .is-3) .bd-fq__icon { height: 34px; }
	.bd-fq__options:is(.is-2, .is-3) .bd-fq__check { top: 50%; margin-top: -12px; }
	.bd-fq__options.is-4 .bd-fq__option { min-height: 168px; padding: 20px 16px 18px; border-radius: 20px; }
	.bd-fq__options.is-4 .bd-fq__check { top: 14px; right: 14px; }
	.bd-fq__label { font-size: 19px; }
	.bd-fq__detail { font-size: 14px; }
	.bd-fq__effect { min-height: 118px; padding: 18px 8px 14px; }
	.bd-fq__emoji { font-size: 36px; height: 40px; }
	.bd-fq__effect .bd-fq__label { font-size: 15px; }
	.bd-fq__cloud { gap: 8px; }
	.bd-fq__flavour.is-l { height: 48px; font-size: 18px; padding: 0 20px; }
	.bd-fq__foot { position: sticky; bottom: 0; z-index: 3; margin: 24px calc(-1 * var(--horizontalPadding)) 0; padding: 16px var(--horizontalPadding) calc(16px + env(safe-area-inset-bottom));
		box-sizing: border-box; background: linear-gradient(transparent, #000 30%); width: calc(100% + 2 * var(--horizontalPadding)); }
	.bd-fq__next { width: 100%; }
	.bd-fq--intro { min-height: calc(100svh - var(--headerHeight) - 80px); }

	/* Comparativa: las columnas se deslizan (una y un poco de la siguiente). */
	.bd-compare__grid {
		grid-template-columns: repeat(var(--cols), 80%); column-gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
		margin: 0 calc(-1 * var(--horizontalPadding)); padding: 0 var(--horizontalPadding) 4px; scroll-padding-inline: var(--horizontalPadding); scrollbar-width: none;
	}
	.bd-compare__grid::-webkit-scrollbar { display: none; }
	.bd-compare__col { scroll-snap-align: start; padding: 20px 18px 8px; }
	.bd-results__scope button { padding: 0 14px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.bd-finder__stage > *, .bd-finder__stage > .is-leaving-left, .bd-finder__stage > .is-leaving-right,
	.bd-finder__stage > .is-from-right, .bd-finder__stage > .is-from-left { transform: none; }
	.bd-finder__stage > * { transition: opacity .2s ease; }
	.bd-fq.is-current .bd-fq__option, .bd-fq.is-current .bd-fq__flavour { animation: none; }
	.bd-compare__col { transform: none; transition: opacity .2s ease; }
	.bd-fq__emoji, .bd-fq__check::after, .bd-results__thumb.is-ready, .bd-compare__arc { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
	.bd-finder__bar { background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; }
	.bd-results__scope { background: #1c1c1e; }
}

/* La Bluedog que entra en las tres: etiqueta «Genética de la casa» en turquesa suave (el anillo es de la primera). */
.bd-compare__rank.is-house { background: color-mix(in srgb, var(--bd-accent) 18%, transparent); color: var(--bd-accent); }