/* ==========================================================================
   Quiz Motor — Base + BetterMe-Dark template
   ========================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ── SISTEMA DE ESPAÇAMENTO (1 fonte de verdade — vale p/ TODAS as etapas) ──
   Mudar aqui = muda o ritmo do quiz inteiro. Desvios só onde é FUNCIONAL
   (result page, folga do rodapé fixo, reserva da imagem). */
:root {
	/* Cor de DESTAQUE (.qm-hl, anel do loader, barra do analyzing). O mesmo default que o
	   full-page.php injeta. Existe aqui porque quando o tema do quiz não traz a chave
	   `highlight` — e nenhum dos nossos traz — o full-page.php ainda assim escrevia o
	   default no <style> da página publicada, enquanto o PREVIEW do construtor chamava
	   removeProperty e ficava sem token nenhum: `color: var(--qm-highlight)` virava
	   inválido e o texto destacado saía sem cor no construtor e laranja no site. Como
	   tanto o full-page.php quanto o applyThemeVars escrevem no style do <html>, quem
	   definir o tema continua vencendo isto aqui. */
	--qm-highlight: #F88E28;
	--qm-highlight-2: #ffb45f;
	--qm-highlight-strong: #e07e1c;
	/* Cor do ÍCONE. Separada do `--qm-primary` porque nem todo tema quer o ícone da mesma cor
	   do botão: o Shadow Boxing usa botão creme (#EBE1D3, medido no print do BetterMe) e
	   ícone laranja. Sem este token, pintar o botão de creme levava o ícone junto. O default
	   é o próprio primary, então quem não declarar `theme.icon` não muda de aparência. */
	--qm-icon: var(--qm-primary);
	--qm-space-top: 24px;      /* topo do conteúdo */
	--qm-space-top-wide: clamp(20px, 5vh, 56px); /* topo das telas largas (afirmação/transição) no desktop.
	   Era clamp(24px,8vh,88px): em monitor alto dava 88px e, somado aos 40px do próprio
	   .qm-affirmation--side_by_side, o conteúdo nascia ~128px abaixo do topo. */
	--qm-space-side: 20px;     /* laterais */
	--qm-gap-title: 30px;      /* título/subtítulo → conteúdo (igual em toda etapa) */
	--qm-space-bottom: 40px;   /* respiro inferior do conteúdo (sem rodapé) */
	--qm-footer-reserve: 80px; /* folga extra p/ a barra fixa do botão "Próxima" */
	--qm-shell-top: 80px;      /* altura do header (72) + barra de progresso (~7) → topo do .qm-main.
	                              Usado p/ CONTER a figura "Better me" dentro da seção (não sangrar p/ cima). */
	/* RESULT PAGE — coluna padrão única (todas as seções alinham) + ritmo vertical entre seções. */
	--qm-result-w: 860px;
	--qm-result-gap: 44px;
	--qm-result-title: clamp(29px, 3.4vw, 36px); /* tamanho ÚNICO p/ todo título de seção do result (min↑ p/ mobile) */
	--qm-result-title-gap: 32px; /* distância ÚNICA título de seção → conteúdo abaixo (anti-frankenstein) */
	/* RITMO ÚNICO do miolo (pergunta/input/content centralizados) — anti-frankenstein.
	   Regra: topo→título > sub→conteúdo > título→sub. NÃO é usado por afirmação/transição
	   (que são a referência aprovada e seguem o próprio ritmo) nem por split (usa --qm-gap-title). */
	--qm-r-top: 10px;    /* margin-top do título (soma com --qm-space-top) */
	--qm-r-title: 10px;  /* título → subtítulo */
	--qm-r-gap: 24px;    /* título/subtítulo → conteúdo */
}
@media (max-width: 720px) {
	:root { --qm-space-top: 8px; --qm-space-side: 16px; --qm-gap-title: 20px; --qm-space-bottom: 24px; --qm-footer-reserve: 68px; }
	:root { --qm-r-top: 16px; --qm-r-title: 8px; --qm-r-gap: 15px; }
}
.qm-body {
	background: var(--qm-bg);
	color: var(--qm-text);
	font-family: var(--qm-font);
	min-height: 100dvh;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	font-size: 16px;
	line-height: 1.5;
}
#qm-root { min-height: 100dvh; min-height: 100vh; display: flex; flex-direction: column; }

/* Header ----------------------------------------------------------------- */
.qm-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	gap: 12px;
	position: sticky;
	top: 0;
	background: var(--qm-bg);
	z-index: 10;
}
.qm-header-back, .qm-header-menu {
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 1px solid var(--qm-border, rgba(255,255,255,.15));
	background: transparent;
	color: var(--qm-text);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	font-size: 18px;
	transition: background .15s;
}
.qm-header-back:hover, .qm-header-menu:hover { background: var(--qm-border, rgba(255,255,255,.05)); }
.qm-header-back.is-hidden { visibility: hidden; }
/* seta maior + glyph centrado (line-height:1 mata o desalinho vertical do caractere ←). */
.qm-header-back { font-size: 23px; line-height: 1; padding: 0; flex-shrink: 0; }
.qm-header-back svg { width: 22px; height: 22px; display: block; }
.qm-header-title {
	/* EM FLUXO (não absoluto): ocupa só o espaço ENTRE a seta e a marca → NUNCA sobrepõe o "Alcateia",
	   independente do tamanho do texto (antes era absoluto centrado no header e invadia a marca).
	   Título centralizado no vão; textos longos quebram em até 2 linhas e depois cortam com "…". */
	flex: 1 1 auto; min-width: 0;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	color: var(--qm-text);
	letter-spacing: .02em;
	line-height: 1.2;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.qm-header-brand { font-weight: 700; font-size: 18px; flex-shrink: 0; }
.qm-header-burger {
	width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
	border: 1px solid var(--qm-border, rgba(255,255,255,.15)); background: transparent;
	color: var(--qm-text); font-size: 18px; cursor: pointer;
	display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.qm-header-burger:hover { background: var(--qm-border, rgba(255,255,255,.05)); }

/* Progress segmentado ---------------------------------------------------- */
/* z-index ENTRE a figura do split (z1) e o header (z10): cobre a figura ampliada (>100%) sem ficar
   na frente da barra de menu do topo. */
.qm-progress { display: flex; gap: 4px; padding: 0 20px 4px; position: relative; z-index: 5; background: var(--qm-bg); }
.qm-progress-seg {
	flex: 1;
	height: 3px;
	background: var(--qm-border, rgba(255,255,255,.12));
	border-radius: 2px;
	overflow: hidden;
}
.qm-progress-seg-fill {
	height: 100%;
	background: var(--qm-text);
	width: 0;
	transition: width .4s ease;
}

/* Main area -------------------------------------------------------------- */
.qm-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--qm-space-top) var(--qm-space-side) calc(var(--qm-space-bottom) + var(--qm-footer-reserve));
	max-width: 720px;
	width: 100%;
	margin: 0 auto;
}
/* Result page — sem padding/max-width do .qm-main (qm-result controla próprio layout) */
.qm-root--result .qm-main {
	padding: 0;
	max-width: none;
	align-items: stretch;
}
/* Etapas que avançam sozinhas (sem botão "Próxima") → rodapé fica vazio: remove a reserva de
   120px embaixo (espaço morto) + esconde a barra vazia. Etapas com botão mantêm a folga. */
.qm-root--no-cta .qm-main { padding-bottom: var(--qm-space-bottom); }
.qm-root--no-cta .qm-footer { display: none; }
/* D1: afirmação side_by_side escapa o cap de 720px (era a causa do "achatada") → 1280px.
   No desktop centra o bloco verticalmente (justify-content:center) → respiro acima/abaixo igual BetterMe. */
.qm-main--wide { max-width: 1280px; }
@media (min-width: 768px) {
	/* ANTES era justify-content:center. Como .qm-main é flex:1 (ocupa a viewport), centralizar
	   fazia o vão do topo virar (altura disponível − altura do conteúdo)/2 — ou seja, VARIÁVEL
	   por tela: conteúdo curto = vão enorme, conteúdo longo = vão pequeno. Duas telas do mesmo
	   tipo apareciam em alturas diferentes. Ancorar no topo dá o MESMO respiro em todas e
	   encurta o vão, que estava exagerado no desktop. */
	.qm-main--wide { justify-content: flex-start; padding-left: 40px; padding-right: 40px; }
	.qm-main--wide { padding-top: var(--qm-space-top-wide); }
}
/* D2: steps de escolha c/ imagem escapam o cap de 720px → grid de cards (max 1200) respira.
   SEM justify-content:center → título fica no topo (não centraliza vertical como afirmação). */
.qm-main--wide-grid { max-width: 1280px; }
/* PARTE 1 (retrabalho) — Pergunta com IMAGEM LATERAL (split), DOIS layouts fiéis ao BetterMe:
   • background = figura FURA o cap (100vw), encosta na borda+base e dissolve no fundo (age 01 / flexão 19)
   • card = figura enquadrada em card arredondado ao lado (sono 40 / água 41)
   Controles Elementor: size (full/lg/md/sm → var --fig-w), align h/v (object-position),
   fit (cover/contain), blend (máscara que dissolve JPG-com-fundo no fundo da página). */
/* Seções largura-total (100vw) + barra de rolagem vertical deixam uma sobra horizontal de
   ~15px → trava a rolagem horizontal da página (padrão de mercado p/ full-bleed). */
/* O `body` entra JUNTO: só no `html` a trava não pegava, porque quem rola nesta página é o body —
   o carrossel de telas do app (`width: min(100vw, 1280px)`) sobrava 8px e a página andava para o
   lado de verdade, não só no cálculo. Medido no navegador, empurrando a rolagem e lendo o
   `scrollX`: com a trava só no html, 8px; com as duas, zero.
   `clip` antes de `hidden` é de propósito — `clip` não cria contexto de rolagem e por isso não
   quebra `position: sticky`; `hidden` fica de reserva para quem não conhece `clip`. */
html, body { overflow-x: hidden; overflow-x: clip; }

.qm-step--split { width: 100%; }
/* título/subtítulo SEMPRE por cima da figura fixa (z-index 2, igual as opções) — senão a
   figura (fixed, z1) cobre o título em fotos largas no layout Fundo. */
.qm-split-section > .qm-title,
.qm-split-section > .qm-subtitle { text-align: center; position: relative; z-index: 2; }
/* No split o gap título→conteúdo vem do padding-top do split-opts (= --qm-gap-title). Zerar a
   margin-bottom do cabeçalho aqui evita SOMAR com esse padding (no não-split elas colapsam) →
   gap fica IGUAL ao das demais etapas. Título↔subtítulo via margin-top do subtítulo. */
.qm-split-section > .qm-title { margin-bottom: 0; }
.qm-split-section > .qm-subtitle { margin: 10px 0 0; }

/* tamanho da figura (background) — vmin trava no MENOR lado do viewport → escala c/ zoom (causa-raiz
   resolvida: era PX fixo → zoom-out fazia figura "encolher no canto"). clamp(min,vmin,max) limita
   range pra não ficar minúscula em monitor estreito nem gigante em ultrawide. --fig-w-px (largura
   da caixa Preencher) e --card-basis (card) seguem PX/% — não têm o bug do zoom. */
.qm-split-size-full { --fig-size: clamp(380px, 70vmin, 760px); --fig-w-px: 300px; --card-basis: 50%; }
.qm-split-size-lg   { --fig-size: clamp(340px, 60vmin, 660px); --fig-w-px: 260px; --card-basis: 44%; }
.qm-split-size-md   { --fig-size: clamp(300px, 50vmin, 560px); --fig-w-px: 220px; --card-basis: 38%; }
.qm-split-size-sm   { --fig-size: clamp(260px, 40vmin, 460px); --fig-w-px: 180px; --card-basis: 30%; }

/* object-position p/ o card e p/ a foto-com-fundo (cutout natural ignora) */
/* ---- Mapa muscular (PNG por zona) ----
   Cada zona é um PNG transparente no MESMO quadro da figura de base. Como ele entra como
   <img> irmão dentro da .qm-split-img, as regras de object-fit/object-position dela valem
   igual pros dois → o desenho cai exatamente sobre o corpo em qualquer tamanho de tela.
   Só a posição vira absoluta, pra sobrepor em vez de empilhar. */
.qm-muscle-png {
	position: absolute; inset: 0; z-index: 2; pointer-events: none;
	animation: qm-muscle-png-in .22s ease-out;
}
@keyframes qm-muscle-png-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .qm-muscle-png { animation: none; } }

/* ---- Mapa muscular ANTIGO (manchas de CSS) — só para templates que ainda não têm PNG ----
   As manchas ficam em % do quadro, então valem para qualquer avatar no enquadramento
   padrão 501x792 (cabeça 159px). O recorte é feito pelo ALPHA da própria figura via
   mask-image — sem isso o brilho vazaria para fora do corpo. */
.qm-muscle-layer {
	position: absolute; inset: 0; pointer-events: none; z-index: 2;
	-webkit-mask-image: var(--muscle-mask); mask-image: var(--muscle-mask);
	-webkit-mask-size: contain; mask-size: contain;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	/* posição espelha o object-position da figura (regras logo abaixo) — se divergir, o
	   recorte sai deslocado do corpo */
	-webkit-mask-position: right bottom; mask-position: right bottom;
}
.qm-split-left .qm-muscle-layer { -webkit-mask-position: left bottom; mask-position: left bottom; }
.qm-muscle-zone {
	position: absolute; border-radius: 50%;
	background: var(--qm-highlight, #D42B2C);
	opacity: .55; filter: blur(14px); mix-blend-mode: screen;
	animation: qm-muscle-in .22s ease-out;
}
@keyframes qm-muscle-in { from { opacity: 0; transform: scale(.85); } to { opacity: .55; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qm-muscle-zone { animation: none; } }
/* Posições medidas no avatar padrão: cabeça no topo, corte no meio da coxa. */
.qm-mz-peitoral { left: 27%; top: 30%; width: 46%; height: 11%; }
.qm-mz-barriga  { left: 33%; top: 44%; width: 34%; height: 15%; }
.qm-mz-pernas   { left: 27%; top: 80%; width: 46%; height: 18%; }
/* Braços e costas são DOIS focos cada (esquerdo e direito) — feitos com ::before/::after
   porque o motor emite um único elemento por zona. */
.qm-mz-bracos, .qm-mz-costas { left: 0; top: 0; width: 100%; height: 100%; background: none; filter: none; opacity: 1; }
.qm-mz-bracos::before, .qm-mz-bracos::after,
.qm-mz-costas::before, .qm-mz-costas::after {
	content: ''; position: absolute; border-radius: 50%;
	background: var(--qm-highlight, #D42B2C); opacity: .55; filter: blur(14px);
}
.qm-mz-bracos::before { left: 10%; top: 34%; width: 15%; height: 26%; }
.qm-mz-bracos::after  { right: 10%; top: 34%; width: 15%; height: 26%; }
/* Costas de frente = o alargamento do dorsal nas laterais do tronco. */
.qm-mz-costas::before { left: 24%; top: 32%; width: 13%; height: 16%; }
.qm-mz-costas::after  { right: 24%; top: 32%; width: 13%; height: 16%; }
/* corpo inteiro: um brilho só, cobrindo o tronco todo */
.qm-mz-corpo_inteiro { left: 20%; top: 26%; width: 60%; height: 60%; opacity: .38; filter: blur(26px); }

.qm-split-h-left   .qm-split-img img { --op-x: left; }
.qm-split-h-center .qm-split-img img { --op-x: center; }
.qm-split-h-right  .qm-split-img img { --op-x: right; }
.qm-split-v-top    .qm-split-img img { --op-y: top; }
.qm-split-v-center .qm-split-img img { --op-y: center; }
.qm-split-v-bottom .qm-split-img img { --op-y: bottom; }

/* ── BACKGROUND (Better me) — DESKTOP = commit135 (figura fixa ao viewport, grande) ─────────────
   Regra única, sem combinatória: a figura é SEMPRE
     • fixa ao viewport (não rola junto)   • presa na BASE
     • no canto (direita ou esquerda — único controle que resta)
     • proporção 960×1400 (retrato), preenchendo (cover)   • dissolvida no fundo (blend)
   Sem presets de tamanho, sem encaixe, sem ancoragem vertical, sem refino → responsivo
   por construção (tudo relativo ao viewport). Só o layout CARD mantém os controles finos.
   OBS: o MOBILE (no @media abaixo) tem os ajustes do commit136 (contida + flush na borda). */
/* full-bleed via margem (NÃO transform): transform em ancestral quebraria o position:fixed. */
.qm-split-layout-background .qm-split-body {
	position: relative; width: 100vw; margin-left: calc(50% - 50vw);
	display: flex; align-items: flex-start;
}
/* opções centralizadas no viewport + topo-alinhadas; a figura fixa fica atrás (z menor). */
.qm-split-layout-background .qm-split-opts {
	position: relative; z-index: 2; width: 100%; max-width: 660px;
	margin: 0 auto; box-sizing: border-box; padding: var(--qm-gap-title) 24px 0;
	display: flex; flex-direction: column; justify-content: flex-start;
}
.qm-split-layout-background .qm-split-opts .qm-options { width: 100%; margin-top: 0; }
/* PAINEL DA FIGURA: caixa fixa, base, canto. Proporção 960/1400; altura = tela inteira;
   largura segue a proporção (cap p/ não dominar). img cover ancorada na base → pés colados,
   sangra suave o topo; o ::after (blend) dissolve a borda interna no fundo da página. */
.qm-split-layout-background .qm-split-img {
	/* DOIS BLOCOS INDEPENDENTES (estilo BetterMe): a faixa do botão é uma barra opaca colada na
	   base, e o quiz — pergunta E figura — vive INTEIRO acima dela. Por isso a figura ancora no
	   TOPO da faixa (--qm-foot-h, medida pelo JS no fitFooterReserve), não na base da janela.
	   Sem isso os dois disputam o mesmo espaço e o fundo do rodapé apaga a base do avatar: era
	   daí o "dissolver mais forte" da etapa de zonas, a única das oito que tem botão.
	   Sem rodapé (as outras sete avançam sozinhas) a var não existe → cai no 0px e nada muda. */
	position: fixed; bottom: var(--qm-foot-h, 0px); z-index: 1; pointer-events: none;
	aspect-ratio: 960 / 1400; height: auto;
	/* A LARGURA comanda; a altura deriva da proporção → 960×1400 NUNCA quebra (sem crop/deform).
	   O min() pega o MENOR entre o teto (46vw) e a largura que daria altura = ALTURA DA SEÇÃO
	   (viewport − header/progresso, via --qm-shell-top): com bottom:0, o topo da figura cai
	   EXATAMENTE no topo do .qm-main → contida na seção, sem sangrar p/ cima nem cobrir o header.
	   Em telas estreitas o teto 46vw assume e ela encolhe junto, sem cropar nem invadir o conteúdo. */
	/* --split-bg-scale-d (preset do construtor, só desktop) aumenta a figura. Multiplica AMBOS os
	   termos: o teto de largura (46vw) E o teto de altura — assim a figura cresce, mas a parte que
	   passa do topo da seção é o RESPIRO transparente do PNG (contain), que some atrás do header sem
	   cortar o corpo. Default 1 = tamanho atual. */
	/* BASE em vh — funciona em qualquer navegador. O dvh entra no @supports logo abaixo.
	   NÃO trocar isto por duas declarações width seguidas (vh e depois dvh): o truque clássico de
	   fallback NÃO funciona aqui porque a fórmula usa var(). Com var(), o navegador só descobre que
	   `100dvh` é inválido na hora de COMPUTAR, e nesse ponto a regra vira "inválida em tempo de
	   computação" — o CSS descarta a propriedade INTEIRA em vez de cair na declaração anterior.
	   Resultado: a figura fica sem teto de largura e estoura a tela.
	   Medido em 25/07/2026 (Incogniton, base Chromium 104 mascarada de 149): janela 885x781,
	   figura 885x1291, topo em -510px. Chrome atual e mobile não reproduzem.
	   Por isso .qm-body e #qm-root podem usar o fallback simples: lá não há var(). */
	/* A altura disponível agora desconta TAMBÉM a faixa do botão — senão a figura continuaria
	   dimensionada para a tela cheia e, subida pelo bottom, sangraria por cima do header. */
	width: min(calc(46vw * var(--split-bg-scale-d, 1)), calc((100vh - var(--qm-shell-top) - var(--qm-foot-h, 0px)) * 960 / 1400 * var(--split-bg-scale-d, 1)));
}
/* dvh onde existir (Chrome 108+): idêntico ao vh no desktop, melhor no mobile com barra dinâmica.
   @supports é resolvido na LEITURA do CSS, então não sofre o problema do var() descrito acima. */
@supports (height: 100dvh) {
	.qm-split-layout-background .qm-split-img {
		width: min(calc(46vw * var(--split-bg-scale-d, 1)), calc((100dvh - var(--qm-shell-top) - var(--qm-foot-h, 0px)) * 960 / 1400 * var(--split-bg-scale-d, 1)));
	}
}
.qm-split-layout-background .qm-split-img img {
	width: 100%; height: 100%; display: block;
	object-fit: cover; object-position: center bottom;   /* default (foto-com-fundo, se houver) */
}
/* FUNDO do split = `contain` (estilo Elementor): mostra a imagem INTEIRA, respeitando o respiro
   nativo do topo do PNG (não cola a cabeça na borda, nunca corta). A box já está na proporção
   960/1400 da imagem (desktop+mobile) → contain preenche sem letterbox/vão lateral. */
.qm-split-bgfit-contain .qm-split-img img { object-fit: contain; }
.qm-split-right.qm-split-bgfit-contain .qm-split-img img { object-position: right bottom; }
.qm-split-left.qm-split-bgfit-contain  .qm-split-img img { object-position: left bottom; }
.qm-split-right.qm-split-layout-background .qm-split-img { right: 0; }
.qm-split-left.qm-split-layout-background  .qm-split-img { left: 0; }
/* split: entrada só-fade (deslocamento em ancestral quebraria o fixed) */
.qm-step.qm-step--split { animation-name: qm-step-in-fade; }
@keyframes qm-step-in-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
/* blend = dissolve a figura no fundo da página: degradê na borda interna + topo */
.qm-split-blend .qm-split-img::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* O degradê é medido em % da LARGURA DA FIGURA: quanto maior o avatar da tela, mais pixels
   ele come. Por isso a tela de zonas-alvo (figura grande) parecia dissolver mais que as
   outras, com a mesma regra. Suavizado: sólido só até 2% e transparente já em 30% (era 4/44). */
/* DESKTOP: só o degradê LATERAL. O antigo `to top` (opaco na base) existia para suavizar a
   borda inferior, mas o quanto ele aparece depende de onde o corpo termina DENTRO do PNG:
   no avatar em pé (zonas-alvo) o corpo vai até 99% da altura, então o fade comia os pés;
   nas figuras deitadas o corpo acaba aos ~75% e o mesmo fade caía em área vazia, invisível.
   Daí a impressão (correta) de que aquela tela dissolvia mais que as outras. */
.qm-split-right.qm-split-blend .qm-split-img::after {
	background: linear-gradient(to right, var(--qm-bg) 0, var(--qm-bg) 2%, transparent 30%);
}
.qm-split-left.qm-split-blend .qm-split-img::after {
	background: linear-gradient(to left, var(--qm-bg) 0, var(--qm-bg) 2%, transparent 30%);
}

/* ── CARD (lado-a-lado enquadrado) ─────────────────────────────────── */
.qm-split-layout-card .qm-split-body {
	display: flex; align-items: stretch; gap: 28px;
	max-width: 980px; margin: var(--qm-gap-title) auto 0; width: 100%;
}
.qm-split-left.qm-split-layout-card .qm-split-body { flex-direction: row-reverse; }
.qm-split-layout-card .qm-split-opts {
	flex: 1 1 auto; min-width: 0;
	display: flex; flex-direction: column; justify-content: flex-start;
}
.qm-split-layout-card .qm-split-opts .qm-options { margin-top: 0; }
/* Card emoldurado (modelo BetterMe img 40): largura = preset (--card-basis) + ajuste fino
   (--card-w-d); altura = piso 340 (mais presença vertical, fiel à img40) que ESTICA com as
   opções (align-items:stretch) + ajuste fino (--card-h-d). Ajustável no construtor. */
.qm-split-layout-card .qm-split-img {
	flex: 0 0 calc(var(--card-basis) + var(--card-w-d, 0px)); position: relative; overflow: hidden;
	min-height: calc(340px + var(--card-h-d, 0px)); background: var(--qm-card); margin: 0;
	border-radius: var(--side-radius, 22px); padding: var(--side-pad, 0px);
}
.qm-split-layout-card .qm-split-img img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: var(--op-x, center) var(--op-y, center); display: block;
	border-radius: var(--side-radius, 22px);
}

/* ── MOBILE ────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
	/* ── BACKGROUND no CELULAR — a imagem é o FUNDO da SEÇÃO (qm-split-section), estilo Elementor ──
	   Estrutura (user): seção(bg img) = título + perguntas(coluna esq) + imagem + coluna direita vazia.
	   O DISCLAIMER é uma SEÇÃO SEPARADA, irmã, FORA da seção da imagem → nunca tem figura atrás, e a
	   figura PARA na base da seção (acima do disclaimer). `contain` → avatar inteiro, nunca corta. */
	/* .qm-main é align-items:center → SEM isto a etapa split encolhe p/ a largura do conteúdo e a
	   figura (ancorada nela) não alcança a borda real → sobra vão lateral. width:100% = largura cheia. */
	.qm-step--split { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; }
	.qm-split-layout-background .qm-split-section {
		position: relative;                           /* ÂNCORA da figura = só a seção (sem o disclaimer) */
		flex: 1; display: flex; flex-direction: column;
		min-height: clamp(320px, 96vw, 460px);        /* piso p/ telas curtas */
	}
	.qm-split-layout-background .qm-split-body {
		display: block; position: static;            /* não-âncora → a figura ancora na qm-split-section */
		width: 100%; margin-left: 0; flex: 1;         /* desfaz o full-bleed do desktop; estica */
	}
	.qm-split-layout-background .qm-split-opts {       /* perguntas: coluna à ESQUERDA, por cima do fundo */
		position: relative; z-index: 2;
		width: var(--bg-opts-col, 56%); max-width: none; margin: 0;
		padding: var(--qm-gap-title) 0 0;            /* gap padronizado título→perguntas (não zerar!) */
	}
	.qm-split-right.qm-split-layout-background .qm-split-opts { margin-right: auto; } /* figura à direita → perguntas à esquerda */
	.qm-split-left.qm-split-layout-background  .qm-split-opts { margin-left: auto; }  /* figura à esquerda → perguntas à direita */
	/* FIGURA = fundo da seção: do topo real (atrás do título) à BASE DA SEÇÃO; sangra nas laterais reais.
	   Sem disclaimer → a base sangra até o fim da tela (fura o padding). Com disclaimer → bottom:0 da
	   seção = topo do disclaimer (a figura para ali). contain → nunca corta. */
	.qm-split-layout-background .qm-split-img {
		position: absolute; z-index: 1; pointer-events: none;
		top: calc(-1 * var(--qm-space-top));
		bottom: calc(-1 * var(--qm-space-bottom));
		/* RATIO-BOX ancorada no LADO da figura (NÃO full-width) → cover PREENCHE exato (corpo inteiro,
		   sem letterbox/vão na direita), sangra na borda real e o blend dissolve o lado interno. Mesma
		   lógica do desktop. O lado oposto fica `auto` p/ a largura sair da proporção (não esticar). */
		/* max-width generoso (120vw) → a box mantém a PROPORÇÃO da imagem e PREENCHE a altura da seção
		   (contain enche exato, sem vão em cima); sangra pra esquerda atrás das opções (z-index 2 + blend
		   dissolvem). Antes 92vw encolhia a figura em telas altas → sobrava o vazio que o user reportou. */
		width: auto; height: auto; aspect-ratio: 960 / 1400; max-width: 120vw;
		/* Tamanho no CELULAR (preset do construtor, campo side_image_scale_m). Escala via transform —
		   NÃO mexe nas âncoras top/bottom/lado, então a figura só encolhe/cresce a partir do canto
		   externo-inferior (pés no chão, colada na borda). Default 1 = idêntico ao legado. */
		transform: scale(var(--split-bg-scale-m, 1));
	}
	.qm-split-right.qm-split-layout-background .qm-split-img { transform-origin: right bottom; }
	.qm-split-left.qm-split-layout-background  .qm-split-img { transform-origin: left bottom; }
	.qm-split-layout-background.qm-split-has-foot .qm-split-img { bottom: 0; } /* há disclaimer → figura para no topo dele */
	/* Sangramento lateral até a borda REAL da tela. Especificidade (0,3,0) p/ VENCER a regra desktop
	   `.qm-split-right.qm-split-layout-background .qm-split-img{right:0}` (que não está em @media e,
	   por ser mais específica que .qm-split-layout-background, sobrescrevia o -16px aqui → era o vão). */
	.qm-split-right.qm-split-layout-background .qm-split-img { right: calc(-1 * var(--qm-space-side)); left: auto; }
	.qm-split-left.qm-split-layout-background  .qm-split-img { left: calc(-1 * var(--qm-space-side)); right: auto; }
	.qm-split-layout-background .qm-split-img img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
	.qm-split-right.qm-split-layout-background .qm-split-img img { object-position: right bottom; } /* avatar à direita */
	.qm-split-left.qm-split-layout-background  .qm-split-img img { object-position: left bottom; }
	/* TOPO derrete no fundo (mobile): troca o fade-de-baixo (feet sangram off-screen, não precisa) por
	   um fade-de-cima → a parte superior da figura dissolve no preto = sem CORTE SECO, estilo BetterMe. */
	.qm-split-right.qm-split-blend .qm-split-img::after {
		background: linear-gradient(to right, var(--qm-bg) 0, var(--qm-bg) 2%, transparent 30%),
		            linear-gradient(to bottom, var(--qm-bg) 0, transparent 8%);
	}
	.qm-split-left.qm-split-blend .qm-split-img::after {
		background: linear-gradient(to left, var(--qm-bg) 0, var(--qm-bg) 2%, transparent 30%),
		            linear-gradient(to bottom, var(--qm-bg) 0, transparent 8%);
	}
	/* card: empilha com a IMAGEM EM CIMA (pedido do user) */
	.qm-split-layout-card .qm-split-body,
	.qm-split-left.qm-split-layout-card .qm-split-body { flex-direction: column; gap: 16px; }
	.qm-split-layout-card .qm-split-img { flex-basis: auto; width: 100%; min-height: calc(230px + var(--card-h-m, 0px)); order: -1; }
	.qm-split-layout-card .qm-split-opts { flex-basis: auto; width: 100%; }
}
/* Transição entre telas — fade + slide-up suave (easing elegante). */
.qm-step { width: 100%; animation: qm-step-in .42s cubic-bezier(.22,.61,.36,1) both; }
@keyframes qm-step-in {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Presets de tamanho de texto (P/M/G/GG, config por step/afirmação no builder).
   Escala multiplica o font-size BASE de cada elemento → 1 var cobre título+subtítulo+afirmação. */
.qm-fs-p  { --qm-fs-scale: 0.8; }
.qm-fs-m  { --qm-fs-scale: 1; }
.qm-fs-g  { --qm-fs-scale: 1.25; }
.qm-fs-gg { --qm-fs-scale: 1.5; }
/* Override SÓ-mobile (config separada no construtor). Vem DEPOIS dos qm-fs-* → mesma especificidade,
   vence no <=720px. Sem qm-fsm-* no elemento → mobile herda o tamanho do desktop. */
@media (max-width: 720px) {
	.qm-fsm-p  { --qm-fs-scale: 0.8; }
	.qm-fsm-m  { --qm-fs-scale: 1; }
	.qm-fsm-g  { --qm-fs-scale: 1.25; }
	.qm-fsm-gg { --qm-fs-scale: 1.5; }
}

.qm-title {
	/* U6: clamp p/ títulos longos não quebrarem layout; word-wrap p/ palavras gigantes */
	font-size: calc(clamp(20px, 4.5vw, 30px) * var(--qm-fs-scale, 1));
	font-weight: 700;
	text-align: center;
	/* max-width fixo (não 100%) + margin auto → no desktop o título quebra em ~2 linhas em vez de
	   esticar até a largura do main (720/1280). Padroniza a quebra em TODAS as etapas. */
	max-width: 560px;
	margin: var(--qm-r-top) auto var(--qm-r-title);
	line-height: 1.25;
	letter-spacing: -.01em;
	/* SEM hyphens:auto — a quebra deve ser na palavra inteira, nunca no meio com hífen
	   ("per-sonalizado" ficava feio). overflow-wrap só quebra palavra gigante como último recurso. */
	overflow-wrap: break-word;
	hyphens: manual;
}
/* D10: destaque de texto estratégico (estilo BetterMe) — usar <span class="qm-hl"> nas
   palavras-chave de títulos/afirmações/benefícios. Cor de destaque do projeto. */
.qm-hl { color: var(--qm-highlight); font-weight: 700; }
/* Destaque na cor do ÍCONE, não na do texto. Existe porque o Shadow Boxing tem os dois: o
   destaque de texto é creme (`--qm-highlight`) e o laranja ficou reservado ao grafismo. O nome do
   cliente na página de resultado pede o laranja. Onde o tema não separa os dois, `--qm-icon` cai
   no destaque e a classe não muda nada. */
.qm-hl-ico { color: var(--qm-icon, var(--qm-highlight)); font-weight: 700; }
/* Dentro de título o destaque HERDA o peso. O 700 fixo servia para dar corpo ao trecho colorido
   no meio de texto normal (400), mas nos títulos do resultado, que são 800, ele fazia o
   contrário: o pedaço destacado saía MAIS FINO que o resto da frase — "4 semanas" mais leve
   que "Tenha resultados visíveis em". */
:is(h1, h2, h3, h4, .qm-title, .qm-block-heading, [class*="-title"]) .qm-hl { font-weight: inherit; }
/* <br class="qm-br-d"> = quebra APENAS no desktop. No mobile some e o texto flui normal
   (a largura já quebra sozinha). Usar em heading/título que fica melhor em 2 linhas no desktop. */
.qm-br-d { display: none; }
@media (min-width: 768px) { .qm-br-d { display: initial; } }
/* <br class="qm-br-m"> = o oposto: quebra APENAS no celular. Serve p/ título de venda que no
   desktop cabe numa linha só, mas no celular precisa quebrar em ponto escolhido (senão o
   navegador corta em lugar ruim, tipo deixar "em 12" numa linha e "semanas" na outra). */
.qm-br-m { display: initial; }
@media (min-width: 768px) { .qm-br-m { display: none; } }
.qm-subtitle {
	text-align: center;
	/* Refino legibilidade: meio-termo entre o cinza antigo e o branco (texto translúcido) + um pouco
	   mais bold. .68 = menos puxado p/ branco que o .82 anterior, próximo do cinza original. */
	color: var(--qm-text);
	opacity: .68;
	font-weight: 500;
	font-size: calc(14px * var(--qm-fs-scale, 1));
	margin: 0 0 var(--qm-r-gap);
	letter-spacing: .02em;
	/* SEM max-width/margin auto aqui: em etapas split o override `.qm-step--split > .qm-subtitle`
	   zerava as margens laterais → subtítulo capado "estourava p/ esquerda". Centra via text-align
	   + align do flex pai. overflow-wrap/hyphens evitam quebra no meio da palavra. */
	overflow-wrap: break-word;
	hyphens: manual;
}
/* Nota de rodapé da etapa (termos/disclaimer estilo BetterMe) — abaixo das opções */
.qm-step-footnote {
	border-top: 1px solid var(--qm-border, rgba(255,255,255,.10));
	margin: 28px auto 0; padding-top: 14px; max-width: 660px;
	font-size: 14px; font-weight: 600; line-height: 1.55; color: var(--qm-muted); text-align: center;
}
.qm-step-footnote a { color: var(--qm-text); text-decoration: underline; }
/* Consentimento (LGPD) — checkbox + texto abaixo das opções (estilo BetterMe img42). */
.qm-consent { display: flex; align-items: flex-start; gap: 10px; margin: 18px 2px 4px; cursor: pointer; }
.qm-consent input { margin: 2px 0 0; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--qm-primary); cursor: pointer; }
.qm-consent-txt { font-size: 13px; color: var(--qm-text); opacity: .85; line-height: 1.45; text-align: left; }
/* Chamada de atenção quando o visitante tenta avançar sem marcar: a caixa é trazida pra tela
   e pisca uma vez. Sem isto (no celular a caixa fica abaixo da dobra) o botão parecia travado. */
.qm-consent--chama { animation: qm-consent-pisca 1.1s ease-out 1; border-radius: 10px; }
@keyframes qm-consent-pisca {
	0%, 100% { background: transparent; }
	20%, 60% { background: color-mix(in srgb, var(--qm-warning, #f59e0b) 22%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .qm-consent--chama { animation: none; outline: 2px solid var(--qm-warning, #f59e0b); outline-offset: 3px; } }
.qm-consent-txt a { color: var(--qm-text); text-decoration: underline; }
/* Aviso vermelho quando tenta continuar sem marcar o consentimento obrigatório. */
/* A folga embaixo é o que permite a rolagem subir a caixa e o aviso ACIMA do rodapé fixo. Sem
   ela o conteúdo terminava colado no limite: rolando tudo, sobravam 4px entre o aviso e o
   rodapé — de olho nu, o botão em cima do aviso. */
.qm-consent { margin-bottom: 32px; }
.qm-consent-warn { color: #ff5a5a; font-size: 13px; font-weight: 600; margin: 6px 2px 32px; text-align: left; line-height: 1.4; }
/* no split a nota é seção própria abaixo do conjunto — fica ACIMA da figura fixa se encostarem */
/* margin-top:0 → a figura (que vai até a base do canvas) ENCOSTA na linha do disclaimer (intenção do
   user). Antes 22px deixava um vão preto. */
.qm-step--split .qm-step-footnote { position: relative; z-index: 2; margin-top: 0; }
/* Bloco A G4: no DESKTOP o disclaimer fica ABAIXO das opções (figura é lateral) → precisa de respiro
   entre as opções e o disclaimer (estilo BetterMe). No mobile mantém 0 (figura encosta na linha). */
@media (min-width: 721px) { .qm-step--split .qm-step-footnote { margin-top: 28px; } }
@media (max-width: 720px) {
	.qm-step-footnote { padding-left: 16px; padding-right: 16px; }
}

/* Espaço entre header dos steps (title+subtitle) e o conteúdo abaixo — PADRONIZADO p/ TODO
   tipo de etapa (escolha, inputs, content/diagnóstico) ter o mesmo respiro (--qm-gap-title).
   Antes só cobria .qm-options* → inputs (idade/peso/altura) ficavam apertados (frankenstein).
   Escopo exclui split/afirmação, que gerenciam o próprio gap (padding-top) e dobrariam o espaço. */
.qm-step:not(.qm-step--split):not(.qm-affirmation) > .qm-title + :not(.qm-subtitle),
.qm-step:not(.qm-step--split):not(.qm-affirmation) > .qm-subtitle + * { margin-top: var(--qm-r-gap); }

/* === Bloco 3 — refinos globais (estilo BetterMe) ============================
   (1) subtítulo maior no DESKTOP (14→16); (2) MOBILE +respiro abaixo do subtítulo
   (15→18, colapsa com o margin-bottom 15 do subtítulo → 18); (4) opções DESKTOP
   menos largas (720→560, centradas) + mais altas (pad 18→21, preservando o aditivo
   --opt-pad-d do controle "Altura das opções"). Escopo exclui split/2col/grid. */
@media (max-width: 720px) {
	.qm-step:not(.qm-step--split):not(.qm-affirmation) > .qm-subtitle + * { margin-top: calc(var(--qm-r-gap) + 7px); }
}
@media (min-width: 768px) {
	.qm-subtitle { font-size: calc(16px * var(--qm-fs-scale, 1)); }
	.qm-step:not(.qm-step--split) > .qm-options:not(.qm-options--2col) {
		max-width: 560px; margin-left: auto; margin-right: auto;
	}
	.qm-step:not(.qm-step--split) > .qm-options:not(.qm-options--2col) .qm-option {
		padding-top: calc(21px + var(--opt-pad-d, 0px));
		padding-bottom: calc(21px + var(--opt-pad-d, 0px));
	}
	/* A MESMA caixa nas etapas com imagem lateral. Antes a coluna de opções do split herdava
	   a largura do painel (612px no layout de fundo, o que sobrasse ao lado do card no outro)
	   e o padding base de 18px — ou seja, opção mais larga e mais baixa que a da etapa "só a
	   pergunta" (560 × 21). Duas telas seguidas mudavam de proporção no meio do quiz.
	   Só no desktop: no mobile a diferença é de propósito, a coluna do split é estreita. */
	.qm-split-layout-background .qm-split-opts > .qm-options:not(.qm-options--2col) {
		max-width: 560px; margin-left: auto; margin-right: auto;
	}
	/* A altura vale para os DOIS layouts de split. A largura, só para o de fundo: no layout de
	   card a coluna já nasce mais estreita que 560 (divide a linha com a figura), então limitar
	   ali não aproxima nada — e qualquer margem `auto` tira o stretch do flex e encolhe a caixa
	   para o conteúdo (medido: 462 → 232px). */
	.qm-step--split .qm-split-opts > .qm-options:not(.qm-options--2col) .qm-option {
		padding-top: calc(21px + var(--opt-pad-d, 0px));
		padding-bottom: calc(21px + var(--opt-pad-d, 0px));
	}
}

/* Options (single/multi choice) ----------------------------------------- */
.qm-options { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; } /* Bloco 3: +respiro entre opções (12→14) */
/* Layout em 2 colunas (estilo BetterMe dieta) — ativado por step.options_columns==2.
   column-count distribui grupos/opções (masonry) nas 2 colunas no desktop; mobile = 1.
   Grupos (subtítulos) funcionam em 1 OU 2 colunas — o nº de colunas é independente. */
.qm-options--2col { display: block; }
@media (min-width: 768px) {
	.qm-options--2col {
		column-count: 2; column-gap: 40px;
		max-width: 1040px; margin-left: auto; margin-right: auto;
	}
}
.qm-options--2col .qm-option { margin-bottom: 16px; break-inside: avoid; }
.qm-options--grouped .qm-option { width: 100%; }
.qm-option-group { break-inside: avoid; margin-bottom: 18px; }
.qm-option-group-label {
	font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--qm-muted); margin: 4px 2px 12px;
}
/* Título (bold) + descrição (menor, cinza) dentro de um botão de opção — split por "—". */
.qm-option-text { flex: 1; min-width: 0; }
/* Ícone por opção (estilo BetterMe): largura fixa pra os rótulos alinharem entre si mesmo
   com emojis de larguras diferentes. `flex: none` impede que ele encolha em texto longo. */
.qm-option-icon {
	flex: none; width: 32px; min-width: 32px;
	font-size: 24px; line-height: 1;
	display: inline-flex; align-items: center; justify-content: center;
}
/* --- Ícone que ACOMPANHA A COR DO TEMA -------------------------------------
   Duas variantes, uma regra só para as duas, e servem a qualquer contexto: opção,
   lista de features do resultado, o que vier. O emoji NÃO acompanha o tema — quem
   colore é a fonte do sistema, e o desenho ainda muda por aparelho.
   `qm-ico--*` é modificador puro: quem define TAMANHO é a classe do contexto
   (.qm-option-icon, .qm-feature-item-icon...), por isso o svg/máscara herda 100%. */
.qm-ico--svg { color: var(--qm-icon, var(--qm-primary)); }
.qm-ico--svg svg { width: 100%; height: 100%; display: block; }
.qm-ico--mask {
	background-color: var(--qm-icon, var(--qm-primary));
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: contain; mask-size: contain;
}
/* Nos contextos em que o ícone vive dentro de um botão que muda de fundo ao ser
   marcado, ele passa a acompanhar o texto para não brigar com o estado ativo. */
.qm-option.is-selected .qm-ico--svg,
.qm-option[aria-pressed="true"] .qm-ico--svg { color: currentColor; }
.qm-option.is-selected .qm-ico--mask,
.qm-option[aria-pressed="true"] .qm-ico--mask { background-color: currentColor; }
/* O tamanho do ícone da OPÇÃO. A caixa tem 32px de coluna; o desenho ocupa 30. */
.qm-option-icon.qm-ico--svg, .qm-option-icon.qm-ico--mask { width: 30px; height: 30px; display: block; }
/* Quebra de PARÁGRAFO dentro de um texto corrido. Existe porque `<br><br>` abre uma
   linha inteira (line-height cheia): medido ao vivo, 30px de vão contra 5px do fluxo
   normal — respiro demais. Este marcador abre 0,6em, ~14px no corpo de 16px, e como é
   em `em` acompanha os presets de tamanho P/M/G/GG e o mobile.
   Regra global, mas só age onde o marcador existe — não mexe em nada que já estava lá. */
.qm-par { display: block; height: 0.6em; }
.qm-option-text--split { display: flex; flex-direction: column; gap: 3px; }
.qm-option-title { font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--qm-text); }
/* Peso 500, não 400: a descrição já sai em --qm-muted, e com o peso normal por cima ficava
   fina demais para ler a lista de equipamentos ("esteira, máquinas de cabo…") nas etapas em
   que o subtítulo mora DENTRO da opção. O corpo subiu de 13 para 15px pelo mesmo motivo — o
   contraste com o título de 700/16px continua claro, então a hierarquia não se perde.
   No mobile fica em 14: os 15px encostavam demais no título na largura estreita. */
.qm-option-desc { font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--qm-muted); }
@media (max-width: 767px) {
	.qm-option-desc { font-size: 14px; }
}
/* Altura das opções — PRESET GLOBAL (config no construtor → Design → classe no <html>). Define as vars
   --opt-pad-d/-m que TODOS os paddings de opção somam (desktop single/2col/base + mobile). Aditivo;
   Pequeno (atual) = sem classe (vars não setadas = 0). Valores afináveis. Substitui o controle por-etapa. */
html.qm-opt-h-m { --opt-pad-d: 4px;  --opt-pad-m: 3px; }   /* Médio: padrão um pouco maior */
html.qm-opt-h-g { --opt-pad-d: 10px; --opt-pad-m: 7px; }   /* Grande */
/* Em 2 colunas, cards um pouco mais altos pra respirar (não achatado). */
/* `center`, não `flex-start`: o ícone tem 30px e o rótulo de uma linha tem 21, então topá-los
   deixava o texto 4px acima do centro do ícone — medido em todas as 8 opções da tela de eventos.
   Com rótulo de duas linhas, centrar põe o ícone no meio do bloco de texto, que é a convenção
   (o ícone representa a opção inteira, não a primeira linha). */
.qm-options--2col .qm-option { padding: calc(16px + var(--opt-pad-d, 0px)) 18px; align-items: center; }
.qm-options--2col .qm-option .qm-option-radio,
.qm-options--2col .qm-option .qm-option-check { margin-top: 2px; }
/* LINHA DE OPÇÃO COM FOTO (`options_layout: "row"`) — estilo BetterMe et.11, "Selecione suas
   áreas com problema". Medido no print `_bm5614/shots/10.png` a 1440px: cartão 551×80, faixa
   da foto 84px (15% da largura), a foto encostando no topo E na base, recortada pelo cartão.
   NÃO tem bolinha de seleção: a foto ocupa aquele lugar, e quem diz o que está marcado é a
   borda e o fundo — o que `.qm-option.is-selected` já faz.
   A receita de recorte é a mesma do `.qm-arg-expert .qm-block-argument-item`: o `overflow`
   é o que faltava em `.qm-option` para a foto não vazar pelo canto arredondado. */
.qm-options--foto .qm-option {
	position: relative;
	overflow: hidden;
	min-height: 80px;
	/* O padding da direita some: quem ocupa aquele lado é a foto, posicionada por cima. */
	padding-right: 0;
}
/* A folga do texto é a LARGURA DA FOTO mais um respiro — sem ela o rótulo passa por baixo da
   foto em vez de parar antes. Vem de uma var para os dois números não divergirem. */
.qm-options--foto { --qm-optfoto-w: 15%; --qm-optfoto-min: 72px; }
.qm-options--foto .qm-option > .qm-option-text {
	padding-right: calc(var(--qm-optfoto-min) + 16px);
}
.qm-option-foto {
	position: absolute; right: 0; top: 0; bottom: 0;
	width: var(--qm-optfoto-w, 15%);
	min-width: var(--qm-optfoto-min, 72px);
	max-width: 96px;
	pointer-events: none;   /* o clique é do botão inteiro */
}
.qm-option-foto img {
	width: 100%; height: 100%; display: block;
	/* `cover` e não `contain`: no BM a foto sangra e é recortada pela linha. As artes são PNG
	   com transparência, então o fundo do cartão aparece atrás sem caixa visível. */
	object-fit: cover; object-position: center;
}
@media (max-width: 767px) {
	/* Proporção medida no anexo do celular: a linha encolhe junto com a faixa da foto. */
	.qm-options--foto { --qm-optfoto-min: 60px; }
	.qm-options--foto .qm-option { min-height: 72px; }
}
.qm-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px; /* respiro entre o texto e o radio/check — senão label longo (ex "Academia em casa") encosta */
	/* --opt-pad-d/-m = "Altura das opções" do construtor (aditivo; 0 = padrão) */
	padding: calc(18px + var(--opt-pad-d, 0px)) 20px;
	background: var(--qm-card);
	border: 1px solid var(--qm-border, rgba(255,255,255,.08));
	border-radius: 16px;
	color: var(--qm-text);
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: all .15s;
	width: 100%;
	text-align: left;
	font-family: inherit;
}
.qm-option:hover { background: var(--qm-surface-raised, #1c1c1c); border-color: var(--qm-border, rgba(255,255,255,.18)); }
/* selecionado: PREENCHIDO (laranja Alcateia) + texto claro + ✓ no indicador — estilo BetterMe. */
.qm-option.is-selected {
	border-color: var(--qm-primary);
	box-shadow: 0 0 0 1px var(--qm-primary);
	background: var(--qm-primary);
	color: var(--qm-primary-text);
}
.qm-option.is-selected .qm-option-title { color: var(--qm-primary-text); }
.qm-option.is-selected .qm-option-desc { color: var(--qm-primary-text); opacity: .85; }
.qm-option-radio, .qm-option-check {
	width: 20px; height: 20px;
	border-radius: 50%;
	border: 2px solid var(--qm-border, rgba(255,255,255,.25));
	flex-shrink: 0;
	position: relative;
}
.qm-option-check { border-radius: 5px; }
/* indicador selecionado = círculo claro com ✓ (cor laranja Alcateia no check). */
.qm-option.is-selected .qm-option-radio,
.qm-option.is-selected .qm-option-check {
	background: var(--qm-primary-text); border-color: var(--qm-primary-text);
}
.qm-option.is-selected .qm-option-radio::after,
.qm-option.is-selected .qm-option-check::after {
	content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	color: var(--qm-primary); font-size: 13px; font-weight: 800;
}
/* Modo "Transparente" (escolhido no Design → theme.option_select_style='outline'): contorno +
   bolinha, sem preenchimento (estilo antigo). Aplicado via classe na <html> pelo engine. */
html.qm-opt-outline .qm-option.is-selected {
	background: color-mix(in srgb, var(--qm-primary) 12%, transparent);
	color: var(--qm-text);
}
html.qm-opt-outline .qm-option.is-selected .qm-option-title { color: var(--qm-text); }
html.qm-opt-outline .qm-option.is-selected .qm-option-desc { color: var(--qm-muted); opacity: 1; }
html.qm-opt-outline .qm-option.is-selected .qm-option-radio { background: transparent; border-color: var(--qm-primary); }
html.qm-opt-outline .qm-option.is-selected .qm-option-radio::after { content: ''; inset: 3px; border-radius: 50%; background: var(--qm-primary); }
html.qm-opt-outline .qm-option.is-selected .qm-option-check { background: var(--qm-primary); border-color: var(--qm-primary); }
html.qm-opt-outline .qm-option.is-selected .qm-option-check::after { color: var(--qm-primary-text); }

/* Image choice ----------------------------------------------------------- */
/* Mobile: 2 por linha. Tablet/desktop: 4 fixos por linha (estilo BetterMe);
   se houver mais de 4 opções, quebram em nova linha de 4. */
.qm-options-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-top: 16px;
}
@media (min-width: 768px) {
	.qm-options-grid {
		/* ANTES era repeat(4, 1fr): 4 trilhas SEMPRE, mesmo com 3 opções — a 4ª ficava vazia
		   e o bloco encostava à esquerda em vez de centralizar. auto-fit descarta a trilha
		   vazia, e o teto de 235px mantém o card do mesmo tamanho independente da contagem. */
		grid-template-columns: repeat(auto-fit, minmax(200px, 235px));
		justify-content: center;
		gap: 24px;
		/* D2: cards expandidos (estilo BetterMe) — ~1040px com respiro lateral. */
		max-width: 1040px;
		margin-left: auto; margin-right: auto;
	}
}
.qm-option-img {
	background: var(--qm-card);
	border: 1px solid var(--qm-border, rgba(255,255,255,.08));
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
	/* B6: anima só props que não deslocam layout → seleção uniforme em todos os cards. */
	transition: border-color .15s, box-shadow .15s, transform .15s;
	font-family: inherit;
	padding: 0;
	color: var(--qm-text);
	display: flex;
	flex-direction: column;
}
.qm-option-img:hover { border-color: var(--qm-border, rgba(255,255,255,.18)); transform: translateY(-2px); }
/* B6: ring consistente (box-shadow não desloca layout) + borda — visível em qualquer imagem. */
.qm-option-img.is-selected { border-color: var(--qm-primary); box-shadow: 0 0 0 2px var(--qm-primary); }
/* Indicador (radio p/ single, check p/ multi) preenche ao selecionar — igual BetterMe.
   B6: como o label fica cream (--qm-primary) ao selecionar e o indicador vive DENTRO dele,
   o indicador usa --qm-primary-text (escuro) p/ NÃO sumir no fundo cream — consistente em todos os cards. */
.qm-option-img.is-selected .qm-option-radio { border-color: var(--qm-primary-text); }
.qm-option-img.is-selected .qm-option-radio::after {
	content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--qm-primary-text);
}
.qm-option-img.is-selected .qm-option-check { border-color: var(--qm-primary-text); background: var(--qm-primary-text); }
.qm-option-img.is-selected .qm-option-check::after {
	content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	color: var(--qm-primary); font-size: 14px; font-weight: 700;
}
/* Card de imagem selecionado destaca o label (fundo claro), igual ao print do BetterMe. */
.qm-option-img.is-selected .qm-option-img-label { background: var(--qm-primary); color: var(--qm-primary-text); }
/* D2: aspect ratio da imagem é configurável por step no builder (qm-ar-* no grid).
   Default = portrait (4/5, estilo BetterMe). cover preenche o card sem distorcer; escala
   junto com a largura. `auto` deixa a img no ratio natural (grid pode ficar irregular).
   object-position: center bottom → ancora PÉS na base (avatares de corpo inteiro retrato
   não perdem cabeça quando cover precisa cortar o ar de cima). Auto não precisa (contain). */
/* `flex: 1 1 auto` faz a IMAGEM absorver a sobra de altura do card. Sem isso o card
   mais alto da linha (o que tem rótulo de 2 linhas — "Alguns tamanhos menores" contra
   "Atlético") esticava todos os outros, e o `margin-top: auto` do rótulo empurrava esse
   excedente para uma FAIXA de fundo entre a base da imagem e o rótulo: 7px medidos ao
   vivo em "Qual é a sua meta de corpo?". Onde não há sobra, nada muda. */
.qm-option-img img { width: 100%; aspect-ratio: 4/5; height: auto; flex: 1 1 auto; min-height: 0; object-fit: cover; object-position: center top; display: block; }
.qm-options-grid.qm-ar-portrait  .qm-option-img img { aspect-ratio: 4/5; object-fit: cover; object-position: center top; }
.qm-options-grid.qm-ar-square    .qm-option-img img { aspect-ratio: 1/1; object-fit: cover; object-position: center top; }
.qm-options-grid.qm-ar-landscape .qm-option-img img { aspect-ratio: 3/2; object-fit: cover; object-position: center top; }
.qm-options-grid.qm-ar-auto      .qm-option-img img { aspect-ratio: auto; object-fit: contain; }
.qm-option-img-label {
	display: flex; align-items: center; justify-content: space-between;
	gap: 8px;
	padding: 12px 16px;
	/* B6: altura uniforme → highlight cream idêntico em todos os cards, mesmo com label de 1 ou 2 linhas. */
	min-height: 52px;
	box-sizing: border-box;
	font-size: 14px; font-weight: 600; line-height: 1.25;
	transition: background .15s, color .15s;
	margin-top: auto; /* gruda o label na base mesmo se a imagem variar */
}

/* Rótulo PREENCHIDO — variante `option_label_style: filled` (qm-optlabel-filled no grid).
   É a primeira tela do BetterMe, a da faixa etária: a pílula já vem em cor cheia flutuando
   sobre a foto, com um botão redondo de seta, e só troca para a cor da marca quando o card
   é escolhido. No padrão a faixa nasce transparente e o preenchimento É o sinal de seleção.
   Como é o único caso do acervo com esse layout, vive aqui numa variante ligada por step no
   construtor: toda regra abaixo está presa a .qm-optlabel-filled, então nenhuma outra tela,
   nenhum outro template e nenhum outro bloco enxergam essa mudança.
   As cores saem do TEMA (--qm-text / --qm-bg), então cada template usa a sua paleta sem
   nenhum valor fixo aqui dentro. */
.qm-optlabel-filled .qm-option-img { position: relative; }
.qm-optlabel-filled .qm-option-img-label {
	position: absolute; left: 8px; right: 8px; bottom: 8px;
	margin: 0;
	background: var(--qm-text);
	color: var(--qm-bg);
	border-radius: 12px;
	min-height: 46px;
	padding: 10px 8px 10px 14px;
}
.qm-optlabel-filled .qm-option-img.is-selected .qm-option-img-label {
	background: var(--qm-primary); color: var(--qm-primary-text);
}
/* O indicador vira botão redondo com seta: no BM é ele que diz "clique aqui".
   Herda o tamanho de .qm-option-radio (20px) e só troca borda/miolo. */
.qm-optlabel-filled .qm-option-radio {
	border: 0; background: var(--qm-bg); width: 26px; height: 26px;
}
.qm-optlabel-filled .qm-option-radio::after,
.qm-optlabel-filled .qm-option-img.is-selected .qm-option-radio::after {
	content: '›'; position: absolute; inset: 0; border-radius: 0; background: none;
	display: flex; align-items: center; justify-content: center;
	color: var(--qm-text); font-size: 17px; font-weight: 700; line-height: 1;
	padding-bottom: 3px;
}
.qm-optlabel-filled .qm-option-img.is-selected .qm-option-radio { background: var(--qm-primary-text); }
.qm-optlabel-filled .qm-option-img.is-selected .qm-option-radio::after { color: var(--qm-primary); }
/* Grid de imagem com seleção MÚLTIPLA: ali o indicador é o quadradinho de check, não o
   radinho. A borda dele é branca translúcida — sobre a pílula creme ela sumiria. Escurece.
   (Hoje nenhum template usa esta combinação; está aqui para a variante não ter um canto
   quebrado esperando quem escolher "pílula preenchida" numa etapa de múltipla escolha.) */
.qm-optlabel-filled .qm-option-check { border-color: var(--qm-bg); }
.qm-optlabel-filled .qm-option-img.is-selected .qm-option-check {
	background: var(--qm-primary-text); border-color: var(--qm-primary-text);
}
.qm-optlabel-filled .qm-option-img.is-selected .qm-option-check::after { color: var(--qm-primary); }

/* Number input ----------------------------------------------------------- */
.qm-number-wrap {
	background: var(--qm-card);
	border-radius: 20px;
	padding: 32px 24px;
	margin-top: 12px;
	text-align: center;
}
.qm-number-display {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 16px;
	border-bottom: 2px solid var(--qm-text);
	padding-bottom: 12px;
	max-width: 320px;
	margin: 0 auto;
}
.qm-number-value {
	font-size: 56px;
	font-weight: 700;
	background: transparent;
	border: none;
	color: var(--qm-text);
	text-align: right;
	width: 160px;
	font-family: inherit;
	outline: none;
	-moz-appearance: textfield;
}
.qm-number-value::-webkit-outer-spin-button,
.qm-number-value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Placeholder proporcional à unidade. Em modo vazio o campo alarga + centraliza
   (:placeholder-shown) p/ o texto-guia não cortar na fonte grande; ao digitar volta
   a 160px à direita. */
.qm-number-value::placeholder { font-size: 30px; font-weight: 600; opacity: .5; }
.qm-number-value:placeholder-shown { width: 210px; text-align: center; }
.qm-number-unit { font-size: 32px; font-weight: 400; color: var(--qm-muted); }

/* Slider ----------------------------------------------------------------- */
.qm-slider-wrap { padding: 24px 8px; }
.qm-slider-value {
	text-align: center;
	font-size: 56px;
	font-weight: 700;
	margin-bottom: 16px;
}
.qm-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	background: var(--qm-border, rgba(255,255,255,.15));
	border-radius: 3px;
	outline: none;
}
.qm-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--qm-primary);
	cursor: pointer;
	border: 4px solid var(--qm-bg);
	box-shadow: 0 0 0 1px var(--qm-primary);
}
.qm-slider::-moz-range-thumb {
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--qm-primary);
	cursor: pointer;
	border: 4px solid var(--qm-bg);
}
.qm-slider-marks { display: flex; justify-content: space-between; margin-top: 8px; color: var(--qm-muted); font-size: 12px; }

/* Text input ------------------------------------------------------------- */
.qm-text-wrap { padding: 24px 0; }
.qm-text-input {
	width: 100%;
	background: var(--qm-card);
	border: 1px solid var(--qm-border, rgba(255,255,255,.1));
	border-radius: 16px;
	padding: 18px 20px;
	font-size: 18px;
	color: var(--qm-text);
	font-family: inherit;
	outline: none;
	transition: border-color .15s;
}
.qm-text-input:focus { border-color: var(--qm-primary); }
/* Variante underline (estilo BetterMe et.71): só borda inferior, centralizado, grande. */
.qm-text-input--underline {
	background: transparent;
	border: 0;
	border-bottom: 2px solid var(--qm-border, rgba(255,255,255,.22));
	border-radius: 0;
	padding: 14px 8px;
	font-size: 26px;
	font-weight: 600;
	text-align: center;
	/* Teto de largura: sem ele o campo esticava ate a largura inteira do corpo (~690px no
	   computador) para receber UMA palavra, e a linha ficava larga demais para o texto que
	   recebe. Centralizado, acompanha o titulo. No celular a tela ja e mais estreita que
	   isto, entao la nada muda. */
	display: block;
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
	transition: border-color .15s;
}
.qm-text-input--underline:focus { border-bottom-color: var(--qm-primary); }
.qm-text-input--underline::placeholder { color: var(--qm-faint-text, rgba(255,255,255,.32)); font-weight: 500; }
/* Aviso de privacidade abaixo do campo de e-mail (et.70). */
.qm-privacy-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; font-size: 13px; color: var(--qm-muted); line-height: 1.5; }
.qm-privacy-note-ic { flex-shrink: 0; opacity: .8; }
.qm-privacy-note a { color: var(--qm-primary); text-decoration: underline; }

/* Info box --------------------------------------------------------------- */
.qm-infobox {
	margin-top: 20px;
	padding: 16px 18px;
	background: var(--qm-card);
	border-radius: 16px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	width: 100%;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}
/* Quando o infobox segue um input de medida (number/height/weight = card 460px), iguala a largura
   ao card (senão o infobox 640 fica mais largo que o input acima). */
.qm-measure-bm ~ .qm-infobox { max-width: 460px; }
/* Variantes de cor: success=verde · warning=âmbar · error=vermelho.
   Caixa (borda+fundo) + ícone + título coloridos → sinal de cor óbvio. */
.qm-infobox.is-success { border: 1px solid rgba(34, 197, 94, .40); background: rgba(34, 197, 94, .08); }
.qm-infobox.is-warning { border: 1px solid rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .10); }
.qm-infobox.is-error   { border: 1px solid rgba(239, 68, 68, .45); background: rgba(239, 68, 68, .10); }
.qm-infobox-icon { font-size: 18px; line-height: 1; padding-top: 2px; flex-shrink: 0; }
.qm-infobox-icon.is-success { color: var(--qm-accent, #22c55e); }
.qm-infobox-icon.is-warning { color: #f59e0b; }
.qm-infobox-icon.is-error   { color: #ef4444; }
.qm-infobox-title { font-weight: 700; font-size: 14px; margin: 0 0 4px; }
.qm-infobox.is-success .qm-infobox-title { color: var(--qm-accent, #22c55e); }
.qm-infobox.is-warning .qm-infobox-title { color: #f59e0b; }
.qm-infobox.is-error   .qm-infobox-title { color: #ef4444; }
.qm-infobox-body { font-size: 13px; color: var(--qm-muted); margin: 0; line-height: 1.5; }
.qm-infobox-body small { opacity: .8; }

/* CTA footer ------------------------------------------------------------- */
.qm-footer {
	position: fixed;
	bottom: 0; left: 0; right: 0;
	padding: 16px 20px 24px;
	background: linear-gradient(to top, var(--qm-bg) 70%, transparent);
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	z-index: 20;
}
/* Etapa com figura de fundo: DOIS BLOCOS INDEPENDENTES, como o BetterMe faz.
   A faixa do botão é opaca e ocupa a largura toda; o quiz (pergunta + figura) termina no topo
   dela. Nada se sobrepõe, então não há mais o que "dissolver": o degradê existia justamente
   para disfarçar a faixa em cima do avatar, e agora não há sobreposição para disfarçar.
   Quem tira a figura de baixo da faixa é o `bottom: var(--qm-foot-h)` lá na .qm-split-img.
   Histórico, para não voltar atrás: q_zonas é a única das oito com botão (as outras são de
   escolha única e avançam sozinhas, footer com altura 0). Medido em 1366x768, a faixa com
   degradê de 70% apagava os últimos 10,8% do corpo do avatar — do pé ao joelho — contra 0 nas
   sete vizinhas. Duas tentativas de amansar o degradê falharam porque o problema nunca foi a
   força dele, e sim o fato de a faixa e a figura ocuparem o mesmo lugar. */
/* Só no computador: aqui a figura é `fixed` e obedece ao --qm-foot-h, então ela termina no topo
   da faixa e a faixa opaca não cobre nada. No CELULAR a figura é `absolute` dentro da seção e
   ainda avança 122px por baixo da faixa (medido em 360x640) — lá um fundo opaco cortaria o
   avatar em linha reta, pior que o degradê. Celular segue com o degradê de sempre. */
@media (min-width: 721px) {
	.qm-root--split .qm-footer { background: var(--qm-bg); }
}
/* O "Pular" não precisa mais de fundo próprio: a faixa inteira é opaca, então ele nunca lê em
   cima do avatar. Nenhum sample usa ainda — fica registrado para não nascer quebrado. */
/* Link "Pular" (pergunta opcional) — destacado abaixo do CTA, estilo BetterMe (SKIP THIS QUESTION). */
.qm-btn-skip { background: none; border: 0; color: var(--qm-text); font-size: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; cursor: pointer; padding: 8px 16px; }
.qm-btn-skip:hover { color: var(--qm-primary); }
.qm-btn-primary {
	background: var(--qm-primary);
	color: var(--qm-primary-text);
	border: none;
	border-radius: var(--qm-radius);
	padding: 18px 48px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	min-width: 240px;
	max-width: 480px;
	width: 100%;
	font-family: inherit;
	letter-spacing: .04em;
	transition: opacity .15s;
}
.qm-btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.qm-btn-primary:not(:disabled):hover { opacity: .9; }
/* O caixa-alta do "Continuar" saiu daqui em 16/08/2026: como regra de CSS ele pegava TODO botão
   do rodapé, inclusive o CTA das telas de afirmação ("Sim, quero meu plano de 28 dias" virava
   ALL CAPS). Agora quem normaliza é `rotuloCta()` no quiz-engine.js, e só a palavra "continuar". */

/* Affirmation / transition ----------------------------------------------- */
.qm-affirmation { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 8px; gap: 8px; }
.qm-affirmation-img { max-width: 420px; width: 100%; border-radius: 18px; margin-bottom: 36px; }
.qm-affirmation-title { font-size: calc(27px * var(--qm-fs-scale, 1)); font-weight: 700; line-height: 1.2; margin: 0 0 18px; max-width: 560px; }
/* margin:0 OBRIGATÓRIO — sem isso o <p> herda o default do navegador (1em = 16px topo+base) e
   as telas com subtítulo via `body` (transições/imagem) ficam +16px mais largas que as com
   `.qm-block-text` (gráficos, já zerado). Era a causa-raiz do frankenstein de espaçamento. */
.qm-affirmation-body { color: var(--qm-muted); font-size: calc(17px * var(--qm-fs-scale, 1)); line-height: 1.6; max-width: 520px; margin: 0; }
.qm-affirmation-text { display: flex; flex-direction: column; align-items: inherit; }

/* Layout side-by-side (estilo BetterMe desktop — texto à esquerda, imagem à direita) */
.qm-affirmation--side_by_side {
	flex-direction: row;
	align-items: center; justify-content: space-between;
	gap: 72px; text-align: left;
	padding: 40px 0;
	max-width: none;        /* .qm-main--wide controla a largura externa (1280) */
	width: 100%;
	margin: 0 auto;
}
.qm-affirmation--side_by_side .qm-affirmation-text { flex: 1 1 50%; max-width: 600px; align-items: flex-start; }
.qm-affirmation--side_by_side .qm-affirmation-img {
	/* A moldura ABRAÇA a imagem: sem aspect-ratio fixo, sem padding, sem bg duplo → a imagem
	   aparece no tamanho natural (nada de "quadro dentro do quadro" nem vão/letterbox).
	   Cantos arredondados na própria imagem. max-height segura retrato extremo. */
	flex: 0 0 auto; width: auto; max-width: 46%; height: auto; max-height: 72vh;
	object-fit: contain; margin-bottom: 0; border-radius: 20px;
}
/* Alinhamento vertical da imagem dentro do quadro (config no builder) — resolve o "vão"
   inferior quando object-fit:contain centraliza e sobra espaço. Default center. */
.qm-affirmation-img.qm-imgpos-top    { object-position: top; }
.qm-affirmation-img.qm-imgpos-center { object-position: center; }
.qm-affirmation-img.qm-imgpos-bottom { object-position: bottom; }
/* PARTE 2: fit cover → imagem PREENCHE o card (sem padding/vão). Mata o "espaço inferior"
   do PNG largo (3 atletas) que com object-fit:contain centralizava e sobrava espaço. */
.qm-affirmation-img--cover { object-fit: cover !important; padding: 0 !important; }
/* aff_below:'text' — faixa "DESTAQUE EM + logos" DENTRO da coluna de texto, abaixo do
   subtítulo, separada por um fio (estilo BetterMe "As featured in"). Rótulo e logos na
   MESMA linha; no mobile a faixa acompanha o alinhamento escolhido para a tela. */
.qm-aff-featured {
	display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%;
	margin-top: 22px; padding-top: 18px;
	border-top: 1px solid var(--qm-border, rgba(255,255,255,.12));
}
.qm-aff-featured .qm-block-text {
	margin: 0; text-align: left;
	font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--qm-text);
}
.qm-aff-featured .qm-block-image-wrap { margin: 0; width: 100%; }
.qm-aff-featured .qm-block-image { width: 100%; max-width: 380px; border-radius: 0; }
/* O bloco `featured_in` nasceu para a PÁGINA DE RESULTADO, onde é um cartão: fundo, borda,
   cantos de 20px e 28px de recheio. Dentro da afirmação isso vira uma caixa opaca pendurada
   embaixo do subtítulo — o que o Iago viu e chamou de "não está de acordo". Aqui ele volta a
   ser o que o BetterMe desenha: um fio, um rótulo em caixa-alta e a fileira de logos. Mesmo
   resultado do par texto+imagem que o musculação usa, mas lendo os 3 arquivos separados. */
.qm-aff-featured .qm-featured {
	background: none; border: 0; border-radius: 0; padding: 0; margin: 0;
	max-width: none; width: 100%;
}
.qm-aff-featured .qm-featured-title {
	margin: 0 0 14px; color: var(--qm-text);
	font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.qm-aff-featured .qm-featured-logos { gap: 28px; }
@media (max-width: 720px) {
	.qm-aff-featured .qm-featured-title { margin-bottom: 10px; font-size: 13px; }
	.qm-aff-featured .qm-featured-logos { gap: 18px; }
}
@media (max-width: 720px) {
	.qm-aff-featured { gap: 10px; margin-top: 18px; padding-top: 14px; }
	.qm-aff-alm-center .qm-aff-featured { align-items: center; }
	.qm-aff-alm-center .qm-aff-featured .qm-block-text { text-align: center; }
	.qm-aff-alm-center .qm-aff-featured .qm-block-image { margin: 0 auto; }
}
/* aff_below='text' vira GRID de áreas: mesmo DOM, dois layouts. Desktop empilha
   texto+faixa na coluna esquerda com a imagem à direita; mobile faz texto → IMAGEM
   → faixa (imagem no MEIO, estilo BetterMe). Especificidade 2 classes → vence o flex
   de .qm-affirmation--side_by_side (1 classe). */
.qm-affirmation--side_by_side.qm-aff-stack {
	display: grid; align-items: center; gap: 0 72px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
	grid-template-areas: "text image" "featured image";
}
.qm-affirmation--side_by_side.qm-aff-stack.qm-affirmation--img-left {
	grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
	grid-template-areas: "image text" "image featured";
}
.qm-aff-stack > .qm-affirmation-text { grid-area: text; }
/* A imagem ocupa as DUAS linhas do grid, então uma figura alta esticava as duas e o texto
   (centralizado na linha 1) ficava com um vão enorme até a faixa de logos — 130px na tela de
   prova social. Colando o texto no FIM da linha 1 (a faixa já nasce no início da linha 2), os
   dois viram um bloco só: o vão entre eles vira a margem da faixa e a sobra se divide igual
   em cima e embaixo, centralizando o conjunto ao lado da imagem. */
.qm-affirmation--side_by_side.qm-aff-stack > .qm-affirmation-text { align-self: end; }
/* A imagem carrega max-width:46% pensado no FLEX (46% do wrap inteiro). Dentro do grid a
   coluna JÁ é 46%, então aquele limite passava a valer sobre a coluna (46% de 46% ≈ 21%) e
   a figura encolhia sozinha. Aqui ela volta a ocupar a coluna inteira — mesmo tamanho de antes. */
.qm-aff-stack > .qm-affirmation-img,
.qm-aff-stack > .qm-aff-imgcol { grid-area: image; margin: 0; max-width: 100%; width: 100%; }
.qm-aff-stack > .qm-aff-featured { grid-area: featured; align-self: start; margin-top: 22px; align-items: center; }
/* desktop: "DESTAQUE EM" centralizado e logos maiores no espaço da coluna. */
.qm-aff-stack > .qm-aff-featured .qm-block-text { text-align: center; align-self: center; }
.qm-aff-stack > .qm-aff-featured .qm-block-image { max-width: 520px; margin: 0 auto; }
@media (max-width: 720px) {
	.qm-affirmation--side_by_side.qm-aff-stack,
	.qm-affirmation--side_by_side.qm-aff-stack.qm-affirmation--img-left {
		grid-template-columns: 1fr; gap: 18px; padding: 16px 16px;
		grid-template-areas: "text" "image" "featured";
	}
	/* mobile: volta ao teto de 380px de antes (a regra de 100% acima é só p/ o desktop). */
	.qm-aff-stack > .qm-affirmation-img { justify-self: center; max-width: 380px; }
}
/* Blocos full_width abaixo da linha texto|imagem (logos "DESTAQUE EM" da prova social). */
.qm-aff-below { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 28px; width: 100%; }
.qm-aff-below .qm-block-text { margin: 0; }
/* "Destaque em / Como visto em" (estilo BetterMe "As featured in"). PLACEHOLDER — trocar "Mídia 1/2/3"
   por logos reais (imagens) e o texto do rótulo. Cinza/translúcido como referência. */
.qm-featured { text-align: center; }
.qm-featured-cap { display: block; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--qm-muted); font-weight: 700; margin-bottom: 12px; }
.qm-featured-row { display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; opacity: .6; }
.qm-featured-row span { font-size: 17px; font-weight: 800; color: var(--qm-muted); letter-spacing: .02em; }
.qm-featured-row img { height: 26px; width: auto; filter: grayscale(1) brightness(1.6); opacity: .9; }
/* Coluna da direita = imagem + "Destaque em" ABAIXO dela (toma o lugar da imagem na linha). */
.qm-affirmation--side_by_side .qm-aff-imgcol { display: flex; flex-direction: column; align-items: center; gap: 16px; flex: 0 0 auto; max-width: 46%; }
.qm-affirmation--side_by_side .qm-aff-imgcol .qm-affirmation-img { max-width: 100%; }
/* Barra de logos "DESTAQUE EM": largura total da coluna (acompanha a imagem de cima) + sem borda arredondada (PNG transparente). */
.qm-affirmation--side_by_side .qm-aff-imgcol .qm-block-image-wrap { margin: 0; width: 100%; }
.qm-affirmation--side_by_side .qm-aff-imgcol .qm-block-image { width: 100%; max-width: 100%; border-radius: 0; }
.qm-affirmation--side_by_side .qm-aff-imgcol .qm-block-text { margin: 4px 0 -4px; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--qm-muted); }
@media (max-width: 720px) {
	.qm-affirmation--side_by_side .qm-aff-imgcol { max-width: 100%; width: 100%; gap: 12px; }
}

/* Elemento lateral genérico (gráfico chart_compare ao lado do texto, estilo IMG 27). */
.qm-affirmation--side_by_side .qm-affirmation-side { flex: 0 0 46%; max-width: 600px; width: 46%; }
.qm-affirmation--side_by_side .qm-affirmation-side .qm-chart-compare { margin: 0; }
/* Título grande estilo BetterMe (~48px) — antes 34px ficava pequeno/achatado. */
.qm-affirmation--side_by_side .qm-affirmation-title { font-size: calc(clamp(30px, 3.6vw, 50px) * var(--qm-fs-scale, 1)); font-weight: 800; line-height: 1.08; letter-spacing: -.01em; margin-bottom: 16px; }
.qm-affirmation--side_by_side .qm-affirmation-body { max-width: 480px; font-size: calc(clamp(17px, 1.4vw, 20px) * var(--qm-fs-scale, 1)); line-height: 1.55; color: var(--qm-text); opacity: .85; }
/* PADRONIZAÇÃO (anti-frankenstein de espaçamento): um bloco `text` usado como subtítulo DENTRO da
   coluna de texto da afirmação se comporta IGUAL ao .qm-affirmation-body — sem a margem extra de
   16px, mesma cor/tamanho, e seguindo o alinhamento do layout (não o `align` inline do bloco).
   Resolve transition (usa `body`) × content step (usa bloco `text`, ex q_cortisol/q_grafico_massa). */
.qm-affirmation-text > .qm-block-text { margin: 0; text-align: inherit !important; }
/* rule-slot VAZIO dentro da coluna de texto não consome o gap do flex (senão content step
   ganha respiro extra antes da imagem que a transition não tem → frankenstein secundário). */
.qm-affirmation-text > .qm-rule-slot:empty { display: none; }
.qm-affirmation--side_by_side .qm-affirmation-text > .qm-block-text { max-width: 480px; font-size: calc(clamp(17px, 1.4vw, 20px) * var(--qm-fs-scale, 1)); line-height: 1.55; color: var(--qm-text); opacity: .85; }
.qm-affirmation--side_by_side.qm-affirmation--img-left { /* ordem natural já é text-then-img — img-left inverte */ }
@media (max-width: 720px) {
	.qm-affirmation--side_by_side {
		/* DEFAULT mobile = texto à ESQUERDA em todas as afirmações (pedido do user); o controle
		   "Alinhamento (mobile)" por-tela (qm-aff-alm-center/right) sobrescreve por especificidade. */
		flex-direction: column !important; gap: 18px; text-align: left; padding: 16px 16px;
	}
	.qm-affirmation--side_by_side .qm-affirmation-text { flex: none; align-items: flex-start; text-align: left; max-width: 100%; gap: 4px; }
	.qm-affirmation--side_by_side .qm-affirmation-img { flex: none; width: 100%; max-width: 380px; height: auto; max-height: none; margin-bottom: 4px; }
		.qm-affirmation--side_by_side .qm-affirmation-side { flex: none; width: 100%; max-width: 460px; }
	/* BUG REAL (tamanho do título/subtítulo MOBILE não funcionava nas TELAS DE AFIRMAÇÃO publicadas):
	   estes font-size eram FIXOS no mobile (25/16px) → ignoravam o --qm-fs-scale que o controle
	   "Tamanho (mobile)" (qm-fsm-*) define. Desktop usava escala (por isso desktop funcionava e mobile
	   não). Agora multiplicam pela escala → o preset mobile P/M/G/GG funciona nas afirmações. */
	.qm-affirmation--side_by_side .qm-affirmation-title { font-size: calc(25px * var(--qm-fs-scale, 1)); line-height: 1.2; margin-bottom: 8px; }
	.qm-affirmation--side_by_side .qm-affirmation-body { font-size: calc(16px * var(--qm-fs-scale, 1)); line-height: 1.6; }
	.qm-affirmation--side_by_side .qm-affirmation-text > .qm-block-text { font-size: calc(16px * var(--qm-fs-scale, 1)); line-height: 1.6; }
	/* Afirmação CENTRALIZADA (não side_by_side) — mesma compactação no mobile (propaga geral). */
	.qm-affirmation:not(.qm-affirmation--side_by_side) { padding: 16px 8px; }
	.qm-affirmation:not(.qm-affirmation--side_by_side) .qm-affirmation-title { margin-bottom: 8px; }
	.qm-affirmation:not(.qm-affirmation--side_by_side) .qm-affirmation-img { margin-bottom: 16px; }
	.qm-aff-below { margin-top: 16px; }
}

/* Alinhamento da AFIRMAÇÃO inteira (coluna título+corpo) — config no builder, desktop+mobile SEPARADOS.
   qm-aff-al-* = desktop (≥721px) · qm-aff-alm-* = mobile (≤720px, casa o breakpoint de colapso do
   side_by_side). Move a COLUNA (align-items no container, que é flex-column) E o texto (text-align) —
   text-align sozinho não desloca o bloco na afirmação centralizada/colapsada.
   ⚠️ DESKTOP: o align-items do container só vale p/ CENTERED (`:not(--side_by_side)`); no side_by_side
   o container é flex-ROW (align-items = vertical) → ali só ajustamos a coluna .qm-affirmation-text.
   No MOBILE tudo vira coluna (side_by_side colapsa) → align-items no container é horizontal, seguro.
   As regras no .qm-affirmation-text (3 classes) vencem `.qm-affirmation--side_by_side .qm-affirmation-text`
   (2 classes) por especificidade. */
@media (min-width: 721px) {
	.qm-affirmation:not(.qm-affirmation--side_by_side).qm-aff-al-left   { align-items: flex-start; }
	.qm-affirmation:not(.qm-affirmation--side_by_side).qm-aff-al-center { align-items: center; }
	.qm-affirmation:not(.qm-affirmation--side_by_side).qm-aff-al-right  { align-items: flex-end; }
	.qm-affirmation.qm-aff-al-left   .qm-affirmation-text { align-items: flex-start; text-align: left; }
	.qm-affirmation.qm-aff-al-center .qm-affirmation-text { align-items: center; text-align: center; }
	.qm-affirmation.qm-aff-al-right  .qm-affirmation-text { align-items: flex-end; text-align: right; }
}
@media (max-width: 720px) {
	.qm-affirmation.qm-aff-alm-left   { align-items: flex-start; }
	.qm-affirmation.qm-aff-alm-center { align-items: center; }
	.qm-affirmation.qm-aff-alm-right  { align-items: flex-end; }
	.qm-affirmation.qm-aff-alm-left   .qm-affirmation-text { align-items: flex-start; text-align: left; }
	.qm-affirmation.qm-aff-alm-center .qm-affirmation-text { align-items: center; text-align: center; }
	.qm-affirmation.qm-aff-alm-right  .qm-affirmation-text { align-items: flex-end; text-align: right; }
}

/* Analyzing screen ------------------------------------------------------- */
.qm-analyzing { padding: 20px 0; }
.qm-analyzing-title { text-align: center; font-size: 22px; font-weight: 700; margin-bottom: 18px; }
/* D9: anel de progresso circular */
.qm-analyzing-ring { position: relative; width: 120px; height: 120px; margin: 4px auto 22px; }
.qm-analyzing-ring svg { width: 100%; height: 100%; display: block; }
.qm-analyzing-ring .qm-ring-track { fill: none; stroke: var(--qm-border, rgba(255,255,255,.10)); stroke-width: 9; }
.qm-analyzing-ring .qm-ring-prog { fill: none; stroke: var(--qm-highlight); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .12s linear; }
.qm-analyzing-ring-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; }
.qm-analyzing-list { display: flex; flex-direction: column; gap: 16px; max-width: 460px; margin: 0 auto; }
.qm-analyzing-row .qm-analyzing-label { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 8px; font-weight: 600; }
.qm-analyzing-row.is-done .qm-analyzing-label { color: var(--qm-text); }
.qm-analyzing-pct.is-check { color: var(--qm-highlight); font-weight: 800; }
.qm-analyzing-bar { height: 4px; background: var(--qm-border, rgba(255,255,255,.12)); border-radius: 2px; overflow: hidden; }
.qm-analyzing-bar-fill { height: 100%; background: linear-gradient(90deg, var(--qm-highlight), var(--qm-highlight-2, #ffb45f)); width: 0; }
/* D9: prova social rotativa */
.qm-analyzing-cred { margin-top: 24px; min-height: 56px; display: flex; justify-content: center; text-align: center; }
.qm-analyzing-cred-item { opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; max-width: 440px; }
.qm-analyzing-cred-item.is-in { opacity: 1; transform: translateY(0); }
.qm-analyzing-cred-text { font-size: 15px; font-weight: 600; color: var(--qm-text); line-height: 1.5; }
.qm-analyzing-cred-sub { font-size: 12px; color: var(--qm-muted); margin-top: 4px; }
/* PARTE 5: menos robótico — anel "respira" (pulse sutil), seção ATIVA ilumina (resto dim),
   barra preenche com easing suave em vez de saltar a cada tick. */
.qm-analyzing-ring { animation: qm-breathe 2.6s ease-in-out infinite; }
@keyframes qm-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.qm-analyzing-row { opacity: .42; transition: opacity .4s ease; }
.qm-analyzing-row.is-active, .qm-analyzing-row.is-done { opacity: 1; }
.qm-analyzing-bar-fill { transition: width .22s ease; }
@media (prefers-reduced-motion: reduce) { .qm-analyzing-ring { animation: none; } }

/* Loading circular (et.65-69) — anel grande de % + review rotativo (ref BetterMe img65) */
.qm-loadc { padding: 20px 0 28px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.qm-loadc-ring { position: relative; width: 168px; height: 168px; margin: 8px auto 24px; }
.qm-loadc-ring svg { width: 100%; height: 100%; display: block; }
/* O anel reusa as classes qm-ring-track/prog (estavam sem stroke → invisível). */
.qm-loadc-ring .qm-ring-track { fill: none; stroke: var(--qm-border, rgba(255,255,255,.10)); stroke-width: 8; }
.qm-loadc-ring .qm-ring-prog { fill: none; stroke: var(--qm-highlight); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .12s linear; }
.qm-loadc-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 800; color: var(--qm-text); letter-spacing: -1px; }
.qm-loadc-pct .qm-loadc-num { font-variant-numeric: tabular-nums; }
.qm-loadc-divider { width: 100%; max-width: 880px; height: 1px; background: var(--qm-border, rgba(255,255,255,.10)); margin: 0 auto 22px; }
.qm-loadc-headline { font-size: 26px; font-weight: 800; margin: 0 0 6px; line-height: 1.2; }
.qm-loadc-sub { font-size: 15px; color: var(--qm-muted); margin: 0 0 8px; }
.qm-loadc-review { background: var(--qm-card); border: 1px solid var(--qm-border, rgba(255,255,255,.06)); border-radius: 16px; padding: 16px 18px; margin-top: 20px; max-width: 480px; width: 100%; text-align: left; opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
.qm-loadc-review.is-in { opacity: 1; transform: translateY(0); }
.qm-loadc-review-stars { color: var(--qm-accent, #22c55e); font-size: 15px; letter-spacing: 2px; margin-bottom: 8px; }
.qm-loadc-review-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.qm-loadc-review-title { font-size: 15px; font-weight: 700; color: var(--qm-text); }
.qm-loadc-review-author { font-size: 13px; color: var(--qm-muted); white-space: nowrap; }
.qm-loadc-review-text { font-size: 14px; color: var(--qm-muted); line-height: 1.5; margin: 0; }
/* PARTE 5: frases de construção rotativas abaixo do anel ("Criando o seu plano..."). */
.qm-loadc-phases { min-height: 28px; margin-top: 6px; display: flex; justify-content: center; }
.qm-loadc-phase { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; color: var(--qm-text); opacity: 0; transform: translateY(6px); }
.qm-loadc-phase.is-in { animation: qm-loadc-phase-in .45s ease forwards; }
@keyframes qm-loadc-phase-in { to { opacity: 1; transform: translateY(0); } }
.qm-loadc-phase-ic { color: var(--qm-highlight); font-weight: 800; font-size: 15px; }
/* Loaders responsivos no mobile — anel menor + tipografia compacta. */
@media (max-width: 600px) {
	.qm-loadc-ring { width: 132px; height: 132px; margin-bottom: 18px; }
	.qm-loadc-pct { font-size: 34px; }
	.qm-loadc-headline { font-size: 21px; }
	.qm-loadc-phase { font-size: 14px; }
	.qm-analyzing-ring { width: 104px; height: 104px; }
	.qm-analyzing-ring-pct { font-size: 24px; }
	.qm-analyzing-title { font-size: 19px; }
}

/* Result page ------------------------------------------------------------ */
/* padding-top = respiro da 1ª seção abaixo da barra de escassez (senão o título cola/esmaga no topo);
   mesmo ritmo do gap entre seções (padronização superior/inferior). */
.qm-result { padding: var(--qm-result-gap) 0 0; max-width: var(--qm-result-w); width: 100%; margin: 0 auto; }
.qm-result-block { padding: 24px 20px; }
/* Ritmo vertical ÚNICO entre as seções do result (padronização). Os :not sobem a especificidade
   (0,3,0) p/ VENCER o `margin: 0 auto` das seções (senão o gap não aplica) e excluem os full-bleed
   (hero/garantia mantêm o próprio espaçamento). */
.qm-result > * + *:not(.qm-hero-compare):not(.qm-guarantee) { margin-top: var(--qm-result-gap); }

.qm-timer-bar {
	position: sticky;
	top: 0;
	background: var(--qm-warning);
	color: #fff;
	text-align: center;
	padding: 12px 16px;
	font-weight: 600;
	font-size: 14px;
	display: flex; align-items: center; justify-content: center; gap: 8px;
	z-index: 30;
}
.qm-timer-clock { font-variant-numeric: tabular-nums; font-weight: 700; }

.qm-diagnostic { text-align: center; padding: 32px 20px; }
.qm-diagnostic-title { font-size: 28px; font-weight: 700; margin: 0 0 8px; line-height: 1.2; }
.qm-diagnostic-subtitle { color: var(--qm-muted); margin: 0 0 24px; font-size: 14px; }
.qm-diagnostic-stats {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 24px 0;
}
.qm-stat-card { background: var(--qm-card); border-radius: 14px; padding: 16px 12px; text-align: center; }
.qm-stat-card-label { font-size: 11px; color: var(--qm-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.qm-stat-card-value { font-size: 18px; font-weight: 700; }

/* feature_list — card único com linhas separadas por divisória (estilo BetterMe et.72). */
.qm-feature-list { max-width: 480px; margin: 14px auto 0; padding: 0; background: var(--qm-card); border: 1px solid var(--qm-border, rgba(255,255,255,.07)); border-radius: 14px; overflow: hidden; }
.qm-feature-list h3 { font-size: 16px; font-weight: 700; margin: 0; padding: 14px 18px 0; }
.qm-feature-item {
	display: flex; align-items: center; gap: 12px;
	padding: 15px 18px;
	font-size: 14.5px; text-align: left; line-height: 1.4;
}
.qm-feature-item + .qm-feature-item { border-top: 1px solid var(--qm-border, rgba(255,255,255,.07)); }
.qm-feature-item-icon { width: 22px; flex-shrink: 0; color: var(--qm-primary); font-size: 18px; text-align: center; }
/* Mesma armadilha do icone do perfil de bem-estar: a regra acima nasceu para EMOJI, que traz
   a altura no proprio texto. Mascara e SVG sao caixa vazia — sem `height` nascem 22x0. Hoje
   nenhum modelo usa icone por URL nesta variante (so na de cartoes, que ja define 30px logo
   abaixo e ganha por vir depois), mas a armadilha ficava armada. */
.qm-feature-item-icon.qm-ico--mask,
.qm-feature-item-icon.qm-ico--svg { height: 22px; }
/* Lista seguida de parágrafo (só a tela de contraste do Budokon usa esse par): dá respiro
   entre os dois — sem isso o texto encosta na borda de baixo do quadro. Em todos os outros
   quizzes o feature_list é o ÚLTIMO bloco do step, então esta regra não os alcança. */
.qm-feature-list + .qm-block-text { margin-top: 20px; }
/* Ícone no topo (em vez de centralizado) só faz sentido quando os itens têm 2+ linhas —
   hoje, apenas a lista de contraste do Budokon. Escopado pelo mesmo par lista+parágrafo,
   senão o q_plano_pronto de TODOS os templates (itens de 1 linha) mudaria de alinhamento
   sem necessidade. Se :has() não existir, cai no center de sempre. */
.qm-feature-list:has(+ .qm-block-text) .qm-feature-item { align-items: flex-start; }
.qm-feature-list:has(+ .qm-block-text) .qm-feature-item-icon { line-height: 1.4; }

/* variant:"cards" — cada feature = card próprio (ícone-quadrado + título + subtítulo), BetterMe seção app */
/* checklist de entregáveis = coluna ESTREITA centralizada (lista vertical lê melhor estreita, BetterMe img75) — exceção intencional à largura padrão. */
.qm-feature-list--cards { max-width: 640px; margin-left: auto; margin-right: auto; background: none; border: none; border-radius: 0; overflow: visible; padding: 0; }
.qm-feature-list--cards .qm-feature-item {
	background: var(--qm-card); border: 1px solid var(--qm-border, rgba(255,255,255,.07)); border-radius: 16px;
	margin-bottom: 16px; padding: 22px 24px; align-items: center; gap: 20px;
}
.qm-feature-list--cards .qm-feature-item + .qm-feature-item { border-top: 1px solid var(--qm-border, rgba(255,255,255,.07)); }
/* O quadrado tintado é do CHIP, não do ícone. Ícone por URL é máscara — o background
   dele É o desenho — então pintar o fundo do próprio ícone apagava a arte. */
.qm-feature-list--cards .qm-feature-item-chip {
	width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
	background: var(--qm-border, rgba(255,255,255,.06));
	display: flex; align-items: center; justify-content: center;
}
.qm-feature-list--cards .qm-feature-item-icon {
	width: 30px; height: 30px; flex: none;
	color: var(--qm-primary); font-size: 24px; line-height: 1;
	display: flex; align-items: center; justify-content: center;
}
.qm-feature-item-text { min-width: 0; }
.qm-feature-item-title { font-weight: 700; font-size: 19px; line-height: 1.25; }
.qm-feature-item-sub { font-size: 15px; color: var(--qm-muted); line-height: 1.45; margin-top: 4px; }

.qm-card-grid { padding: 32px 20px; }
/* Como CONTEÚDO de etapa, o padding-top de 32px somava com o gap do título (15px) = 47px
   ("escolha confiável" ficava grande). Zera o topo aqui → o ritmo do título manda. Não afeta
   o card_grid da result page (lá não é filho direto de .qm-step). */
.qm-step > .qm-card-grid { padding-top: 8px; }
.qm-card-grid h3 { font-size: 20px; font-weight: 700; margin: 0 0 16px; text-align: center; }
.qm-card-grid-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; max-width: var(--qm-result-w); margin: 0 auto; }
.qm-card-grid-card { background: var(--qm-card); border: 1px solid var(--qm-border, rgba(255,255,255,.06)); border-radius: 18px; padding: 34px 24px; text-align: center; }
/* ícone num quadrado arredondado tintado (estilo IMG64 "trusted choice") + cards maiores/mais presentes */
.qm-card-grid-card-icon { width: 72px; height: 72px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; font-size: 38px; background: var(--qm-border, rgba(255,255,255,.05)); border-radius: 16px; }
.qm-card-grid-card-title { font-size: 19px; font-weight: 700; margin-bottom: 8px; line-height: 1.3; }
.qm-card-grid-card-subtitle { font-size: 14.5px; color: var(--qm-muted); line-height: 1.5; }
/* Em content step "wide" (ex.: "escolha confiável"), o grid EXPANDE horizontal + cards maiores (IMG64). */
.qm-main--wide-grid .qm-card-grid-items { max-width: 900px; gap: 20px; }
.qm-main--wide-grid .qm-card-grid-card { padding: 40px 30px; }
.qm-main--wide-grid .qm-card-grid-card-icon { width: 84px; height: 84px; font-size: 44px; margin-bottom: 22px; }
.qm-main--wide-grid .qm-card-grid-card-title { font-size: 21px; }
.qm-main--wide-grid .qm-card-grid-card-subtitle { font-size: 15px; }

.qm-testimonials { padding: 8px 20px; max-width: var(--qm-result-w); margin: 0 auto; }
.qm-testimonials h3 { font-size: var(--qm-result-title); font-weight: 800; margin: 0 0 var(--qm-result-title-gap); text-align: center; line-height: 1.2; }
.qm-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
/* Recado do treinador (fecha a tela de projeção, estilo BetterMe): foto redonda centralizada
   + fala em itálico. Sem estrelas, sem nome — é conselho, não depoimento. */
.qm-coach-note {
	background: var(--qm-card); border: 1px solid var(--qm-border, rgba(255,255,255,.07));
	border-radius: 18px; padding: 26px 26px 28px; margin: 22px auto 0; max-width: 520px;
	display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.qm-coach-note-photo { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; object-position: center top; flex: none; }
.qm-coach-note-text { font-style: italic; font-size: 15px; line-height: 1.55; color: var(--qm-text); align-self: stretch; }
.qm-coach-note-text b { font-style: italic; font-weight: 700; }

.qm-testimonial-card { background: var(--qm-card); border: 1px solid var(--qm-border, rgba(255,255,255,.07)); border-radius: 16px; padding: 18px; }
.qm-testimonial-card-rating { color: var(--qm-primary); font-size: 15px; letter-spacing: 1px; margin-bottom: 10px; }
.qm-testimonial-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.qm-testimonial-card-title { font-weight: 700; font-size: 15px; }
.qm-testimonial-card-name { font-size: 13px; color: var(--qm-muted); flex-shrink: 0; }
.qm-testimonial-card-text { font-size: 14px; color: var(--qm-muted); line-height: 1.5; margin: 0; }
@media (max-width: 900px) { .qm-testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .qm-testimonials-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }

.qm-plans { padding: 8px 20px; max-width: var(--qm-result-w); margin: 0 auto; }
.qm-plans h3 { font-size: var(--qm-result-title); font-weight: 800; margin: 0 0 var(--qm-result-title-gap); text-align: center; line-height: 1.25; }
/* 3 cards VERTICAIS lado-a-lado (BetterMe sales). Mobile = 1 coluna. */
.qm-plans-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
/* O cartão é um BOTÃO (alcançável por teclado), então precisa desfazer o que o navegador põe de
   fábrica: fonte própria, texto centralizado e largura de conteúdo. Sem estes quatro resets o
   cartão desmonta ao virar `<button>`. */
.qm-plan-card {
	display: flex; flex-direction: column;
	width: 100%; text-align: left; font: inherit; color: inherit; appearance: none; -webkit-appearance: none;
	background: var(--qm-card); border-radius: 16px; padding: 18px;
	border: 2px solid var(--qm-border, rgba(255,255,255,.08));
	cursor: pointer; transition: border-color .15s, background .15s; position: relative;
}
/* Foco visível: quem chega de teclado precisa VER onde está. */
.qm-plan-card:focus-visible { outline: 2px solid var(--qm-primary); outline-offset: 3px; }
/* accent: a caixa da oferta troca a primária (creme) pelo vermelho da marca. Redefinir a
   variável no escopo do bloco pega moldura, radio e banner de uma vez — nenhum botão do
   quiz é afetado, porque a troca não sai daqui. */
.qm-plans--accent { --qm-primary: var(--qm-highlight, #D42A21); --qm-primary-text: #fff; }
/* selecionado → moldura creme + fundo escuro (BetterMe) */
.qm-plan-card.is-selected { border-color: var(--qm-primary); background: var(--qm-surface-raised, #0e0f12); }
/* banner "MAIS POPULAR" — cap creme no topo do card */
.qm-plan-banner {
	margin: -18px -18px 14px; padding: 7px 10px;
	background: var(--qm-primary); color: var(--qm-primary-text);
	border-radius: 14px 14px 0 0; text-align: center;
	font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
/* topo: nome + radio */
.qm-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qm-plan-name { font-weight: 700; font-size: 18px; line-height: 1.2; }
.qm-plan-radio {
	width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
	border: 2px solid var(--qm-muted); position: relative; transition: border-color .15s;
}
.qm-plan-card.is-selected .qm-plan-radio { border-color: var(--qm-primary); }
.qm-plan-card.is-selected .qm-plan-radio::after {
	content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--qm-primary);
}
.qm-plan-tag { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--qm-muted); margin-top: 8px; }
.qm-plan-totals { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.qm-plan-old { font-size: 13px; color: var(--qm-muted); text-decoration: line-through; }
.qm-plan-now { font-size: 15px; font-weight: 700; color: var(--qm-text); }
.qm-plan-div { height: 1px; background: var(--qm-border, rgba(255,255,255,.10)); margin: 14px 0; }
/* base: per-day grande + label inline */
.qm-plan-perday { display: flex; align-items: baseline; gap: 6px; }
.qm-plan-per-value { font-weight: 800; font-size: 30px; line-height: 1; color: var(--qm-text); }
.qm-plan-per-label { font-size: 12px; color: var(--qm-muted); }
/* selecionado → per-day em LARANJA (acento da meta) */
.qm-plan-card.is-selected .qm-plan-per-value { color: var(--qm-highlight); }
/* selo abaixo do preço, à esquerda (ex: "SEM JUROS") — pílula contornada. A cor vem de
   --qm-highlight, então cada template pega a própria marca sem precisar de regra extra. */
.qm-plan-seal {
	/* align-self/width: o card é flex-column, então sem isto a pílula estica na largura toda. */
	display: inline-flex; align-items: center; gap: 6px;
	align-self: flex-start; width: fit-content; margin-top: 14px;
	padding: 4px 11px; border-radius: 999px;
	border: 1px solid var(--qm-muted); color: var(--qm-muted);
	font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	white-space: nowrap; transition: border-color .15s, color .15s;
}
.qm-plan-seal-ic { width: 12px; height: 12px; flex-shrink: 0; display: block; }
.qm-plan-card.is-selected .qm-plan-seal { border-color: var(--qm-highlight); color: var(--qm-highlight); }
/* CTA de venda forte = laranja sólido (acento), centralizado (não full-width) */
.qm-plans-cta {
	display: block; width: 100%; max-width: 360px; margin: 24px auto 0;
	font-weight: 800; letter-spacing: .03em;
	background: var(--qm-highlight); color: #fff; border: none;
}
.qm-plans-cta:hover { background: var(--qm-highlight-strong, #e07e1c); }
.qm-plans-note { text-align: center; font-size: 12px; color: var(--qm-muted); margin: 12px auto 0; max-width: 600px; }
/* linha de selos de segurança (estática) */
.qm-plans-trust { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.qm-plans-trust-lock { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--qm-muted); }
.qm-plans-trust-chip { font-size: 11px; color: var(--qm-muted); border: 1px solid var(--qm-border, rgba(255,255,255,.14)); border-radius: 6px; padding: 2px 8px; }
@media (max-width: 720px) {
	.qm-plans { max-width: 460px; }
	.qm-plans-list { grid-template-columns: 1fr; gap: 12px; }
	/* card 1-coluna no mobile → sobra largura → textos de preço um pouco maiores (legibilidade). */
	.qm-plan-name { font-size: 20px; }
	.qm-plan-now { font-size: 17px; }
	.qm-plan-old { font-size: 14px; }
	.qm-plan-per-value { font-size: 38px; }
	.qm-plan-per-label { font-size: 13px; }
	.qm-plan-tag { font-size: 11px; }
	.qm-plan-seal { font-size: 11px; padding: 4px 11px; }
}

/* Garantia — banda full-bleed (fura o cap do .qm-result) + escudo laranja + título grande (BetterMe). */
.qm-guarantee {
	width: 100vw; margin-left: 50%; transform: translateX(-50%);
	background: var(--qm-border, rgba(255,255,255,.02)); padding: 48px 20px; text-align: center;
}
/* Bloco D R5: vão GIGANTE entre a banda de garantia e o rodapé abaixo. A banda já tem padding interno;
   o result-gap (44px) incidia 2x (acima do spacer E acima do rodapé) → ~96px. Reduz: zera acima do
   elemento seguinte (spacer) e enxuga o do rodapé. */
/* O spacer entre a garantia e o rodapé recebia o result-gap (44px) E o rodapé também → vão DUPLO
   (o rodapé/CNPJ parecia bem maior que as outras seções). Zera SÓ o gap do spacer (!important pq a
   regra geral `.qm-result > * + *:not(...)` tem especificidade maior); o rodapé MANTÉM o result-gap
   padrão → fica consistente com as demais seções (sem zerar, boas práticas de espaçamento). */
.qm-guarantee + * { margin-top: 0 !important; }
.qm-guarantee-inner { max-width: 720px; margin: 0 auto; }
.qm-guarantee-icon { color: var(--qm-primary); margin-bottom: 14px; line-height: 0; }
.qm-guarantee-icon svg { display: inline-block; }
.qm-guarantee-title { font-weight: 800; font-size: var(--qm-result-title); color: var(--qm-text); margin-bottom: var(--qm-result-title-gap); line-height: 1.2; }
.qm-guarantee-body { font-size: 16px; color: var(--qm-muted); line-height: 1.6; margin: 0; }
.qm-guarantee-body p { margin: 0 0 12px; }
.qm-guarantee-link { font-size: 16px; color: var(--qm-muted); margin: 14px 0 0; }
.qm-guarantee-link a { color: var(--qm-primary); text-decoration: underline; }

/* FAQ — accordion LIMPO (BetterMe et.75): sem card, divisórias finas, chevron, 1º aberto. */
.qm-faq { padding: 8px 20px; max-width: var(--qm-result-w); margin: 0 auto; }
.qm-faq h3 { font-size: var(--qm-result-title); font-weight: 800; margin: 0 0 var(--qm-result-title-gap); text-align: center; line-height: 1.2; }
.qm-faq-item { border-bottom: 1px solid var(--qm-border, rgba(255,255,255,.10)); }
.qm-faq-q {
	padding: 20px 0; cursor: pointer; font-weight: 700; font-size: 17px;
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.qm-faq-q::after {
	content: '\203A'; flex-shrink: 0; font-size: 22px; color: var(--qm-muted);
	transition: transform .25s; transform: rotate(90deg);
}
.qm-faq-item.is-open .qm-faq-q::after { transform: rotate(-90deg); }
.qm-faq-a {
	padding: 0; max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease;
	font-size: 15px; color: var(--qm-muted); line-height: 1.6;
}
.qm-faq-item.is-open .qm-faq-a { max-height: 600px; padding: 0 0 20px; }

/* A PÁGINA DE RESULTADO troca a primária ----------------------------------- */
/* No quiz o botão é creme (achado 1 da 1ª rodada) e o laranja ficou no grafismo. Na página de
   venda o Iago quer o inverso: botão e moldura de plano em laranja, como no musculação — lá o
   `theme.primary` É laranja e sai de graça. Redefinir o token no ESCOPO da página pega botão,
   moldura, anel e CTA de uma vez, e não encosta em nenhuma tela do quiz.
   Só liga quando o tema separa ícone de botão; onde `--qm-icon` não existe, tudo continua como
   estava. */
.qm-root--result {
	--qm-primary: var(--qm-icon, var(--qm-primary));
	--qm-primary-text: #fff;
	--qm-highlight-strong: #e07e1c;
}
/* O CTA do quadro de planos lê `--qm-highlight`, não `--qm-primary` — nos demais templates o
   destaque JÁ é a cor forte da marca. Aqui não dá para virar o `--qm-highlight` inteiro: ele
   pinta todo `.qm-hl` da página, e "nenhum texto sai laranja" foi um achado da rodada passada.
   Então só este botão troca de token. */
.qm-root--result .qm-plans-cta { background: var(--qm-primary); color: var(--qm-primary-text); }

/* achado 5 da 3ª rodada — grafismo de venda em laranja */
/* No musculação estes lêem `--qm-highlight`, que lá JÁ é laranja. Aqui o destaque é creme e
   virar o token inteiro pintaria todo `.qm-hl` de laranja — o oposto do achado 2 da 1ª rodada.
   Então cada GRAFISMO troca de token no escopo da página de resultado, um por um. */
/* Quando o grafismo é TEXTO (preço, selo, resultado do depoimento), o tema claro pode pedir um
   tom mais escuro da mesma cor: `primary_ink`. Sem a chave, é o `--qm-primary` de sempre. */
.qm-root--result .qm-plan-card.is-selected .qm-plan-seal { border-color: var(--qm-primary-ink, var(--qm-primary)); color: var(--qm-primary-ink, var(--qm-primary)); }
.qm-root--result .qm-plan-card.is-selected .qm-plan-per-value { color: var(--qm-primary-ink, var(--qm-primary)); }
.qm-root--result .qm-seal-stars-fill { color: var(--qm-primary); }
.qm-root--result .qm-rgrid-result { color: var(--qm-primary-ink, var(--qm-primary)); }

/* Final CTA -------------------------------------------------------------- */
.qm-result-cta {
	padding: 32px 20px 80px;
	display: flex; flex-direction: column; gap: 12px;
	position: relative; z-index: 30; /* defensive — fica acima de footer/overlays */
	pointer-events: auto;
}
.qm-result-cta .qm-btn-primary { width: 100%; max-width: none; }
.qm-result-cta button { position: relative; z-index: 31; cursor: pointer; }
/* Footer fixed (CTA do quiz) cobre o restart na result_page → some no result. */
.qm-root--result .qm-footer { display: none !important; }

/* Transição raspadinha → result: overlay full-screen que dá fade-in, segura, e dissolve revelando o result. */
.qm-reveal {
	position: fixed; inset: 0; z-index: 9999;
	display: flex; align-items: center; justify-content: center;
	background: var(--qm-bg); opacity: 0; transition: opacity .45s ease;
}
.qm-reveal.is-in { opacity: 1; }
.qm-reveal.is-out { opacity: 0; }
.qm-reveal-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.qm-reveal-ring {
	width: 54px; height: 54px; border-radius: 50%;
	border: 3px solid var(--qm-border, rgba(255,255,255,.14)); border-top-color: var(--qm-primary);
	animation: qm-reveal-spin .9s linear infinite;
}
.qm-reveal-text { color: var(--qm-text); font-size: 16px; font-weight: 600; letter-spacing: .3px; }
@keyframes qm-reveal-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .qm-reveal-ring { animation: none; } }

/* Sales page (et.75) — polish das seções ------------------------------------ */
/* Headings de seção dentro do result: centralizados, respiro, fonte forte. */
.qm-result .qm-block-heading {
	text-align: center; padding: 0 16px; margin: 0 auto; max-width: var(--qm-result-w);
	font-size: var(--qm-result-title); font-weight: 800; line-height: 1.18;
}
/* título de seção huga o conteúdo logo abaixo (gap pequeno); o gap grande fica ACIMA do título.
   :not extra → especificidade (0,4,0) vence a regra de gap acima p/ o elemento após o título. */
.qm-result > .qm-block-heading + *:not(.qm-hero-compare):not(.qm-guarantee) { margin-top: var(--qm-result-title-gap); }
/* O carrossel marquee já tem padding:28px em cima → somado ao title-gap (32px) o vão abaixo do título
   ficava ~60px (maior que as demais seções). Desconta o padding p/ o gap total = title-gap, padronizado. */
.qm-result > .qm-block-heading + .qm-carousel-marquee { margin-top: calc(var(--qm-result-title-gap) - 28px); }
/* Título HERÓI do result (1º heading) — MAIOR só no desktop (o maior da página). Mobile mantém
   --qm-result-title (já perfeito). max-width garante quebra em ~2 linhas. */
@media (min-width: 768px) {
	.qm-result > .qm-block-heading:first-of-type { font-size: clamp(36px, 4vw, 44px); max-width: 760px; }
}
/* Texto/imagem base no result com padding lateral coerente. */
.qm-result .qm-block-text { padding: 0 18px; max-width: 560px; margin: 0 auto; text-align: center; }
.qm-result .qm-block-image-wrap { padding: 8px 16px; text-align: center; }
.qm-result .qm-block-image { margin: 0 auto; display: block; }
/* Divisor de seção sutil. */
.qm-result .qm-block-divider { opacity: .4; max-width: 480px; margin: 10px auto; }
/* before_after na result fica centrado e com respiro. */
.qm-result .qm-block-before-after { max-width: 460px; margin: 6px auto 4px; padding: 0 16px; }

/* hero_compare — réplica do hero BetterMe (et.75): abas Agora|Meta + 2 figuras
   + chevrons + painel 2 colunas com barras de 3 segmentos por atributo. */
.qm-hero-compare {
	background: var(--qm-surface-raised, #1b1b1e); border: 1px solid var(--qm-border, rgba(255,255,255,.06));
	border-radius: var(--hc-radius, 24px); padding: var(--hc-pad, 26px);
	/* full-bleed: fura o cap de 720px do .qm-result e centraliza no viewport.
	   Largura controlável (--hc-width); default ~840px (escala BetterMe). */
	width: var(--hc-width, min(900px, 94vw)); max-width: none;
	margin: var(--qm-result-title-gap) 0 6px; margin-left: 50%; transform: translateX(-50%); /* gap padronizado c/ as outras seções */
	box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
/* Cabeçalho: pílula dividida em 2 (Agora | Sua meta) — rótulos NEUTROS (BetterMe). */
.qm-hc-head {
	display: grid; grid-template-columns: 1fr 1fr;
	background: var(--qm-surface-raised, #16171a); border-radius: 12px; overflow: hidden;
}
.qm-hc-head-cell {
	text-align: center; padding: 15px 8px; font-size: var(--hc-tab-size, 15px); font-weight: 700;
	color: var(--qm-muted);
}
/* goal = mesmo estilo do now (só o divisor central muda), sem laranja — fiel BetterMe. */
.qm-hc-head-cell.is-goal { color: var(--qm-faint-text, rgba(255,255,255,.82)); border-left: 1px solid var(--qm-border, rgba(255,255,255,.08)); }
/* Figuras + chevrons. */
.qm-hc-figs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: var(--hc-fig-gap, 16px); padding: var(--hc-figs-pad-top, 14px) 6px 0; position: relative; z-index: 0; }
/* caixa ABRAÇA a imagem (height auto): com avatar quadrado limitado pela largura, sumiu o espaço morto
   acima da cabeça. --hc-fig-h vira só TETO (avatar muito alto não estoura). Bottom-align mantém os pés alinhados. */
.qm-hc-fig { height: auto; max-height: var(--hc-fig-h, 420px); display: flex; align-items: flex-end; justify-content: center; }
.qm-hc-fig img { max-height: var(--hc-fig-h, 420px); max-width: 100%; object-fit: contain; }
.qm-hc-fig.is-after img { filter: drop-shadow(0 6px 14px rgba(0,0,0,.22)); }
.qm-hc-arrow {
	align-self: center; color: var(--qm-primary); font-size: 68px; font-weight: 800;
	letter-spacing: 1px; line-height: 1;
	-webkit-text-stroke: 1px var(--qm-primary); /* mais grossa */
	transform: scaleY(1.4); transform-origin: center; /* maior só na vertical (pedido do user) */
	animation: qm-hc-arrow-slide 1.6s ease-in-out infinite;
}
@keyframes qm-hc-arrow-slide {
	0%   { transform: translateX(-6px) scaleY(1.4); opacity: .35; }
	50%  { transform: translateX(6px)  scaleY(1.4); opacity: 1;   }
	100% { transform: translateX(-6px) scaleY(1.4); opacity: .35; }
}
@media (prefers-reduced-motion: reduce) { .qm-hc-arrow { animation: none; opacity: .8; } }
/* Painel inferior: 2 colunas (Agora | Meta) com divisor central. */
.qm-hc-stats-panel {
	display: grid; grid-template-columns: 1fr 1fr; gap: 0;
	background: var(--qm-surface-raised, #0e0f12); border-radius: 16px; padding: var(--hc-panel-pad, 24px 28px);
	margin-top: var(--hc-panel-overlap, -18px); position: relative; z-index: 1; /* sobe sobre a base das figuras (BetterMe) */
}
.qm-hc-col-stats { padding: 0 24px; }
.qm-hc-col-stats.is-goal { border-left: 1px solid var(--qm-border, rgba(255,255,255,.08)); }
.qm-hc-metric + .qm-hc-metric { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--qm-border, rgba(255,255,255,.07)); }
.qm-hc-metric-label { font-size: 13px; color: var(--qm-muted); margin-bottom: 4px; }
.qm-hc-metric-val { font-size: var(--hc-val-size, 20px); font-weight: 800; margin-bottom: 10px; }
/* valor neutro nas 2 colunas — único acento (laranja) fica nos segmentos da meta. */
/* Barra de 3 segmentos. */
.qm-hc-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.qm-hc-seg { height: 8px; border-radius: 4px; background: var(--qm-border, rgba(255,255,255,.16)); }
/* preenchidos = laranja (primary) nos 2 lados (now 1/3, goal 3/3) — forma BetterMe, cor Alcateia. */
.qm-hc-seg.is-on { background: var(--qm-primary); }
/* Linha sem régua (gordura corporal, vide BetterMe). O valor perde a folga que existia
   só para separá-lo da barra; o filete entre linhas continua vindo do .qm-hc-metric +
   .qm-hc-metric acima, que é o mesmo separador que o BM usa ali. */
.qm-hc-metric--nobar .qm-hc-metric-val { margin-bottom: 0; }
/* No celular o valor de 20px encostava no tamanho do titulo da secao e empurrava o card
   para baixo — sao SEIS deles na tela, tres de cada lado. 16px mantem a hierarquia com o
   rotulo de 13px e devolve altura. Ajustavel por bloco em `val_size_mobile`. */
@media (max-width: 767px) {
	.qm-hc-metric-val { font-size: var(--hc-val-size-m, 16px); }
}
@media (max-width: 600px) {
	/* avatares MAIORES (ref BetterMe): card quase full-width + colunas largas (gap/seta/padding mínimos)
	   + teto de altura alto → as figuras crescem bem mais que os ~150px de antes. */
	.qm-hero-compare { padding: 12px; border-radius: 18px; width: 98vw; }
	.qm-hc-figs { gap: 6px; padding: 12px 2px 0; } /* respiro acima da cabeça dos avatares no mobile (afinado 14→12) */
	.qm-hc-fig { height: auto; max-height: 460px; }
	.qm-hc-fig img { max-height: 460px; }
	.qm-hc-arrow { font-size: 40px; letter-spacing: 0; padding: 0 2px; }
	.qm-hc-stats-panel { padding: 16px 8px; }
	.qm-hc-col-stats { padding: 0 10px; }
}

/* Header da página de vendas (logo + timer + CTA + menu) — fiel BetterMe. */
.qm-rheader {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	padding: 18px 44px; position: sticky; top: 0; z-index: 40;
	background: var(--qm-bg); border-bottom: 1px solid var(--qm-border, rgba(255,255,255,.06));
}
.qm-rheader-brand { font-weight: 800; font-size: 22px; color: var(--qm-text); }
.qm-rheader-right { display: flex; align-items: center; gap: 34px; }
/* Countdown estilo BetterMe: label inline + 2 blocos grandes (MM:SS) com unidade embaixo. */
.qm-rheader-timer { display: flex; flex-direction: row; align-items: center; gap: 22px; line-height: 1; }
.qm-rheader-timer-lbl { font-size: 14px; font-weight: 700; color: var(--qm-text); white-space: nowrap; }
.qm-rheader-clockwrap { display: flex; align-items: flex-start; gap: 11px; }
.qm-rheader-unit { display: flex; flex-direction: column; align-items: center; }
.qm-rheader-num { font-size: 34px; font-weight: 800; color: var(--qm-text); font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.qm-rheader-unit-lbl { font-size: 11px; font-weight: 600; color: var(--qm-muted); margin-top: 3px; letter-spacing: .2px; }
.qm-rheader-colon { font-size: 30px; font-weight: 800; color: var(--qm-text); padding-top: 1px; }
.qm-rheader-cta {
	position: relative;
	background: var(--qm-primary); color: var(--qm-primary-text); border: none;
	border-radius: 26px; padding: 14px 30px; font-size: 15px; font-weight: 800;
	cursor: pointer; white-space: nowrap;
}
/* Halo suave atrás do CTA — anel/glow ESTÁTICO que respira (só opacidade, sem expandir), estilo BetterMe. */
.qm-rheader-cta::after {
	content: ''; position: absolute; inset: -2px; border-radius: inherit; z-index: -1;
	box-shadow: 0 0 0 3px var(--qm-primary), 0 0 14px 2px var(--qm-primary);
	pointer-events: none; opacity: .28;
	animation: qm-cta-halo 2.4s ease-in-out infinite;
}
@keyframes qm-cta-halo { 0%, 100% { opacity: .15; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .qm-rheader-cta::after { animation: none; opacity: .28; } }
/* Acento da marca no cabeçalho de vendas: relógio e CTA em vermelho, no lugar do creme.
   Trocar --qm-primary aqui dentro pega o botão E o halo dele de uma vez; o relógio precisa
   de regra própria porque herda de --qm-text. Nada disso escapa do cabeçalho. */
.qm-rheader--accent { --qm-primary: var(--qm-highlight, #D42A21); --qm-primary-text: #fff; }
.qm-rheader--accent .qm-rheader-num,
.qm-rheader--accent .qm-rheader-colon { color: var(--qm-highlight, #D42A21); }
.qm-rheader-burger {
	width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%;
	border: 1px solid var(--qm-border, rgba(255,255,255,.22)); background: transparent;
	color: var(--qm-text); font-size: 20px; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
@media (max-width: 600px) {
	.qm-rheader { padding: 10px 14px; }
	.qm-rheader-timer-lbl { display: none; }
	/* Marca e menu SAEM do cabecalho do resultado no celular: em 375px eles comiam ~100px
	   dos 375 e espremiam o relogio e o botao, que sao o que decide a compra. Privacidade
	   e termos continuam no rodape da pagina (bloco result_footer) — nada de legal some. */
	.qm-rheader-brand, .qm-rheader-burger { display: none; }
	.qm-rheader-right { flex: 1; justify-content: space-between; gap: 12px; }
	.qm-rheader-cta { flex: 1 1 auto; max-width: 220px; padding: 12px 14px; font-size: 13px; }
	.qm-rheader-num { font-size: 26px; }
	.qm-rheader-colon { font-size: 21px; }
	/* Com o espaco livre, "minutos" e "segundos" voltam — e o desenho do BetterMe no
	   celular, e sem eles dois numeros soltos nao dizem se sao minutos ou horas. */
	.qm-rheader-unit-lbl { display: block; font-size: 10px; margin-top: 2px; }
	.qm-rheader-clockwrap { gap: 8px; }
}

/* Painel Docs (slide-in direita) acionado pelo menu hambúrguer. */
.qm-docs-overlay {
	position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 100;
	opacity: 0; pointer-events: none; transition: opacity .25s;
}
.qm-docs-overlay.is-open { opacity: 1; pointer-events: auto; }
.qm-docs-panel {
	position: absolute; top: 0; right: 0; height: 100%; width: min(360px, 86vw);
	background: var(--qm-bg); border-left: 1px solid var(--qm-border, rgba(255,255,255,.08));
	transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
	display: flex; flex-direction: column; padding: 22px 22px 28px; overflow-y: auto;
}
.qm-docs-overlay.is-open .qm-docs-panel { transform: translateX(0); }
.qm-docs-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.qm-docs-title { font-size: 22px; font-weight: 800; }
.qm-docs-close {
	width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--qm-border, rgba(255,255,255,.22));
	background: transparent; color: var(--qm-text); font-size: 15px; cursor: pointer;
}
.qm-docs-list { display: flex; flex-direction: column; }
.qm-docs-link {
	padding: 15px 4px; color: var(--qm-text); text-decoration: none; font-weight: 600; font-size: 15px;
	border-bottom: 1px solid var(--qm-border, rgba(255,255,255,.06));
}
.qm-docs-link:hover { color: var(--qm-primary); }
.qm-docs-foot { margin-top: auto; padding-top: 24px; font-size: 13px; color: var(--qm-muted); line-height: 1.6; }
.qm-docs-foot a { color: var(--qm-primary); text-decoration: none; }

/* Modal de restart — appended a document.body c/ z-index máximo p/ ficar acima de TUDO */
.qm-restart-modal-backdrop {
	position: fixed; inset: 0;
	background: rgba(0,0,0,0.72);
	display: flex; align-items: center; justify-content: center;
	z-index: 99999;
	padding: 20px;
	animation: qmFadeIn .15s ease;
}
@keyframes qmFadeIn { from { opacity: 0 } to { opacity: 1 } }
.qm-restart-modal-box {
	background: var(--qm-card); color: var(--qm-text);
	border-radius: 16px; padding: 28px 24px;
	max-width: 420px; width: 100%;
	box-shadow: 0 24px 80px rgba(0,0,0,0.5);
	border: 1px solid var(--qm-border, rgba(255,255,255,0.1));
}
.qm-restart-modal-title { font-size: 20px; font-weight: 800; margin-bottom: 8px; text-align: center; }
.qm-restart-modal-body { font-size: 14px; color: var(--qm-muted); margin-bottom: 20px; text-align: center; }
.qm-restart-modal-actions { display: flex; gap: 10px; }

/* Botão secondary genérico — usado por restart, future cancel/skip/etc. */
.qm-btn-secondary {
	background: transparent;
	border: 1px solid var(--qm-border, rgba(255,255,255,.2));
	color: var(--qm-muted);
	padding: 10px 16px;
	border-radius: var(--qm-radius);
	font-size: 13px;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
	font-family: inherit;
}
.qm-btn-secondary:hover { background: var(--qm-border, rgba(255,255,255,.05)); color: var(--qm-text); border-color: var(--qm-text); }
a.qm-btn-secondary { text-decoration: none; display: flex; align-items: center; justify-content: center; }
.qm-btn-restart { width: 100%; }

/* Display blocks (text, image, video, alert, spacer, charts, etc) ------ */
/* D1: font-size usa --qm-fs-scale (fallback 1 → tamanho padrão idêntico). O controle "Tamanho do
   texto" do bloco (qm-fs-*) passa a valer também nos blocos, não só no step.subtitle. */
.qm-block-text { font-size: calc(16px * var(--qm-fs-scale, 1)); line-height: 1.6; margin: 0 0 16px; color: var(--qm-text); }
.qm-block-text.qm-text-lead { font-size: calc(18px * var(--qm-fs-scale, 1)); color: var(--qm-muted); }
.qm-block-text.qm-text-small { font-size: calc(13px * var(--qm-fs-scale, 1)); color: var(--qm-muted); }
.qm-block-heading { font-size: 22px; font-weight: 700; margin: 16px 0 8px; }
.qm-block-image-wrap { margin: 16px 0; text-align: center; }
.qm-block-image { max-width: 100%; height: auto; border-radius: 16px; display: inline-block; }
/* Moldura (b.framed): fundo card + respiro → destaca PNG transparente (estilo BetterMe).
   display:block remove o gap de baseline do inline-block (espaço extra embaixo). */
.qm-block-image.is-framed { display: block; margin: 0 auto; background: var(--qm-card); padding: 14px 18px; border: 1px solid var(--qm-border, rgba(255,255,255,.06)); box-sizing: border-box; }
.qm-block-caption { font-size: 12px; color: var(--qm-muted); margin: 6px 0 0; }
.qm-block-video { margin: 16px 0; border-radius: 16px; overflow: hidden; aspect-ratio: 16/9; background: #000; }
.qm-block-video iframe, .qm-block-video video { width: 100%; height: 100%; border: 0; display: block; }
.qm-block-spacer { width: 100%; }
.qm-block-divider { border: 0; height: 1px; background: var(--qm-border, rgba(255,255,255,.08)); margin: 24px 0; }
.qm-block-html { margin: 16px 0; }

.qm-block-social { background: var(--qm-card); border-radius: 16px; padding: 20px; margin: 16px 0; text-align: center; }
.qm-block-social-rating { color: #fbbf24; font-size: 18px; margin-bottom: 8px; }
.qm-block-social-title { font-weight: 700; font-size: 18px; margin-bottom: 4px; }
.qm-block-social-body { font-size: 13px; color: var(--qm-muted); }

/* review_seal — selo de avaliação (estrelas fracionadas + números + prova social), BetterMe et.75 */
.qm-seal { background: var(--qm-card); border: 1px solid var(--qm-border, rgba(255,255,255,.07)); border-radius: 20px; max-width: 640px; margin: 0 auto; padding: 32px 24px; text-align: center; }
.qm-seal-stores { display: flex; justify-content: center; gap: 48px; margin-bottom: 22px; }
.qm-seal-store-icon { font-size: 26px; line-height: 1; color: var(--qm-text); }
.qm-seal-store-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--qm-muted); margin-top: 6px; }
/* estrelas: base cinza + camada laranja clipada pela largura (preenchimento fracionado, ex 4,8) */
.qm-seal-stars { position: relative; display: inline-block; font-size: 24px; line-height: 1; letter-spacing: 2px; }
.qm-seal-stars-base { color: var(--qm-border, rgba(255,255,255,.18)); }
.qm-seal-stars-fill { position: absolute; inset: 0; color: var(--qm-highlight); overflow: hidden; white-space: nowrap; }
.qm-seal-stats { display: flex; justify-content: center; gap: 44px; margin-top: 20px; }
.qm-seal-stat-value { font-size: 34px; font-weight: 800; line-height: 1.05; color: var(--qm-text); }
.qm-seal-stat-label { font-size: 13px; color: var(--qm-muted); margin-top: 4px; }
.qm-seal-award { margin-top: 22px; }
.qm-seal-award-title { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.qm-seal-award-sub { font-size: 12px; color: var(--qm-muted); margin-top: 4px; }
.qm-seal-note { font-size: 14px; color: var(--qm-muted); max-width: 420px; margin: 16px auto 0; line-height: 1.45; }
@media (max-width: 600px) {
	.qm-seal { padding: 26px 18px; }
	.qm-seal-stats { gap: 28px; }
	.qm-seal-stat-value { font-size: 28px; }
}

/* results_grid — cards de resultado antes/depois (BetterMe et.75). Prefixo rgrid p/ não colidir com .qm-result-*
   O bloco é SEMPRE carrossel (ver .qm-rgrid--carousel abaixo), então o que sobra aqui é só o card e o
   gap. Não existe mais modo grid estático: as regras de grid-template-columns que ficavam aqui eram
   letra morta desde que o --carousel passou a valer sempre (display:flex ignora grid-template). */
.qm-rgrid-wrap { padding: 8px 20px; max-width: 1040px; margin: 0 auto; box-sizing: border-box; }
.qm-rgrid { margin: 0 auto; gap: 20px; }
.qm-rgrid-card { background: var(--qm-card); border: 1px solid var(--qm-border, rgba(255,255,255,.07)); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.qm-rgrid-photo { width: 100%; height: auto; display: block; }
.qm-rgrid-head { padding: 14px 16px 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.qm-rgrid-name { font-weight: 700; font-size: 18px; }
.qm-rgrid-result { font-weight: 700; font-size: 16px; color: var(--qm-highlight); }
@media (min-width: 901px) { .qm-rgrid-name { font-size: 19px; } .qm-rgrid-result { font-size: 16px; } }
.qm-rgrid-text { padding: 8px 16px 18px; margin: 0; font-size: 14px; color: var(--qm-muted); line-height: 1.5; }
.qm-rgrid-disclaimer { max-width: var(--qm-result-w); margin: 12px auto 0; padding: 0 16px; font-size: 11px; color: var(--qm-muted); text-align: center; line-height: 1.4; }

/* results_grid é CARROSSEL sempre: trilho scroll-snap (swipe nativo no mobile) +
   setas ‹ › que rolam 1 card por clique + fade sutil nas bordas (padrão do modelo aprovado). */
.qm-rgrid-shell { position: relative; max-width: none; margin: 0 auto; }
.qm-rgrid.qm-rgrid--carousel { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 4px 4px 8px; max-width: none;
	-webkit-mask: linear-gradient(90deg, rgba(0,0,0,.55) 0, #000 1.5%, #000 98.5%, rgba(0,0,0,.55) 100%); mask: linear-gradient(90deg, rgba(0,0,0,.55) 0, #000 1.5%, #000 98.5%, rgba(0,0,0,.55) 100%); }
.qm-rgrid.qm-rgrid--carousel::-webkit-scrollbar { display: none; }
.qm-rgrid--carousel .qm-rgrid-card { scroll-snap-align: start; flex: 0 0 min(408px, 84vw); }
/* DESKTOP — 3 cards inteiros à vista. Mobile/tablet não entram aqui: seguem com card 84vw + espiada
   do próximo, que é o comportamento certo pra swipe. */
@media (min-width: 1001px) {
	/* O bloco FURA o cap do .qm-result (860px) de propósito, igual o .qm-carousel-marquee — sem isso
	   não há largura pra 3 cards. Só mexer no max-width daqui não adianta nada (foi o que falhou
	   antes): quem mandava era o 860 do .qm-result, então o width + margin-left/transform é que
	   escapam. 96vw em vez de 100vw: não encosta na borda em notebook e não briga com a barra de
	   rolagem vertical. */
	.qm-rgrid-wrap--carousel { max-width: none; width: min(1280px, 96vw); margin-left: 50%; transform: translateX(-50%); }
	/* Card fluido = exatamente 3 por trilho (descontando os 2 gaps de 20px). Largura fixa não serve:
	   408px só cabia 2, e qualquer outro valor fixo volta a quebrar na próxima resolução. */
	.qm-rgrid--carousel .qm-rgrid-card { flex-basis: calc((100% - 40px) / 3); }
}
.qm-rgrid-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--qm-border, rgba(0,0,0,.12)); background: var(--qm-card); color: var(--qm-text); font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 3px; box-shadow: 0 2px 12px rgba(0,0,0,.18); transition: transform .15s; }
.qm-rgrid-arrow:hover { transform: translateY(-50%) scale(1.08); }
.qm-rgrid-arrow--prev { left: -14px; }
.qm-rgrid-arrow--next { right: -14px; }
@media (max-width: 600px) { .qm-rgrid-arrow { top: 26%; } .qm-rgrid-arrow--prev { left: 2px; } .qm-rgrid-arrow--next { right: 2px; } }
/* Respiro lateral no MOBILE — blocos do result não colam nas bordas da tela (igual aos planos).
   Cards (selo, destaque) recuam via margin; listas/grids via padding. Full-bleed (garantia + carrossel
   de mockups, que usam width:100vw) NÃO é afetado — continua indo de ponta a ponta de propósito. */
@media (max-width: 720px) {
	.qm-result .qm-seal,
	.qm-result .qm-featured { margin-left: 16px; margin-right: 16px; }
	.qm-result .qm-feature-list--cards { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
	.qm-result .qm-rgrid-wrap { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
}

/* featured_in — card "Destaque na mídia" + logos de imprensa (BetterMe et.75) */
.qm-featured { background: var(--qm-card); border: 1px solid var(--qm-border, rgba(255,255,255,.07)); border-radius: 20px; max-width: var(--qm-result-w); margin: 0 auto; padding: 28px 24px; text-align: center; }
.qm-featured-title { font-size: clamp(20px, 3.4vw, 28px); font-weight: 800; margin: 0 0 20px; color: var(--qm-text); }
.qm-featured-strip { max-width: 760px; width: 100%; height: auto; opacity: .97; display: inline-block; }
.qm-featured-logos { display: flex; justify-content: center; align-items: center; gap: 36px; flex-wrap: wrap; }
/* Logos de imprensa MAIORES. Os 30px de antes vinham de quando este bloco só aparecia numa
   faixa estreita; nos demais templates a tira («qm-featured-strip») ocupa 760px, e ao lado dela
   estes logos soltos ficavam miúdos. O `max-width` por logo evita que um arquivo mais largo que
   os outros domine a linha. */
.qm-featured-logos img { height: 46px; width: auto; max-width: 30%; object-fit: contain; filter: grayscale(1) brightness(1.6); opacity: .7; }
@media (max-width: 600px) {
	.qm-featured-logos { gap: 20px; }
	.qm-featured-logos img { height: 32px; }
}

/* result_footer — rodapé da página de vendas (linha legal + links + disclaimer), BetterMe et.75 */
.qm-rfooter { max-width: var(--qm-result-w); margin: 0 auto; padding: 8px 20px 48px; text-align: center; }
.qm-rfooter-company { font-size: 13px; color: var(--qm-muted); line-height: 1.5; }
.qm-rfooter-div { height: 1px; background: var(--qm-border, rgba(255,255,255,.10)); max-width: var(--qm-result-w); margin: 18px auto; }
.qm-rfooter-links { display: flex; justify-content: center; align-items: center; gap: 14px; }
.qm-rfooter-links a { color: var(--qm-muted); text-decoration: underline; font-size: 14px; }
.qm-rfooter-links a:hover { color: var(--qm-text); }
.qm-rfooter-sep { color: var(--qm-muted); opacity: .5; }
.qm-rfooter-disclaimer { font-size: 11px; color: var(--qm-muted); max-width: 760px; margin: 18px auto 0; line-height: 1.5; }

.qm-block-chart { background: var(--qm-card); border-radius: 16px; padding: 20px; margin: 16px 0; }
.qm-block-chart-title { font-size: 14px; font-weight: 600; margin: 0 0 16px; color: var(--qm-muted); }

.qm-chart-bars { display: flex; flex-direction: column; gap: 12px; }
.qm-chart-bar-row { display: grid; grid-template-columns: 100px 1fr auto; gap: 12px; align-items: center; }
.qm-chart-bar-label { font-size: 13px; font-weight: 500; }
.qm-chart-bar-track { height: 10px; background: var(--qm-border, rgba(255,255,255,.08)); border-radius: 5px; overflow: hidden; }
.qm-chart-bar-fill { height: 100%; border-radius: 5px; transition: width .6s ease; }
.qm-chart-bar-value { font-size: 13px; font-weight: 700; min-width: 40px; text-align: right; }

.qm-chart-pie-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.qm-chart-pie { width: 140px; height: 140px; flex-shrink: 0; }
.qm-chart-legend { flex: 1; font-size: 13px; min-width: 140px; }
.qm-chart-legend-item { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.qm-chart-legend-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }

.qm-chart-line-wrap { width: 100%; }
.qm-chart-line { width: 100%; height: auto; }

/* D4/D6: chart_compare — card único com curvas suaves + pills (estilo BetterMe). */
.qm-chart-compare { margin: 16px auto; width: 100%; max-width: 520px; }
/* Como conteúdo de etapa (ex: plano pronto), um respiro a mais entre o título e o box do gráfico
   (congruente com o card_grid). Padding (não margin) → não conflita com a regra de gap do título. */
.qm-step > .qm-chart-compare { padding-top: 8px; }
/* No layout lado-a-lado o elemento lateral controla a largura → solta o cap. */
.qm-affirmation-side .qm-chart-compare { max-width: none; }
.qm-chart-compare-card {
	--qm-cc-padx: 16px;
	background: var(--qm-card);
	border-radius: 18px;
	padding: 16px var(--qm-cc-padx) 6px;
	overflow: hidden;
}
.qm-chart-compare-title { font-size: 15px; font-weight: 700; margin: 0 0 6px; color: var(--qm-text); }
/* Bloco D R3: o SVG estourava TODO o padding lateral (full-bleed ponta-a-ponta) → sem respiro nas
   laterais. Agora estoura SÓ 6px (em vez de 16) → sobra ~10px de respiro de cada lado (desk+mobile). */
.qm-chart-compare-svg { width: calc(100% + 12px); margin: 0 -6px; }
.qm-chart-compare-svg svg { width: 100%; height: auto; display: block; }
.qm-chart-compare-caption { font-size: 12px; color: var(--qm-muted); margin: 10px 2px 0; }
/* PARTE 4 — animação simples dos gráficos: desenha a linha (stroke-dashoffset) → fade no
   preenchimento → fade nas pills/pontos. Roda toda vez que o step renderiza. */
@keyframes qm-chart-draw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes qm-chart-fade { from { opacity: 0; } to { opacity: 1; } }
.qm-chart-compare.is-anim .qm-cc-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: qm-chart-draw 1.9s cubic-bezier(.4,0,.2,1) forwards; }
.qm-chart-compare.is-anim .qm-cc-area { opacity: 0; animation: qm-chart-fade .9s ease-out 1.35s forwards; }
.qm-chart-compare.is-anim .qm-cc-dot,
.qm-chart-compare.is-anim .qm-cc-pill { opacity: 0; animation: qm-chart-fade .5s ease-out 1.7s forwards; }
.qm-projection.is-anim .qm-proj-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: qm-chart-draw 1.4s cubic-bezier(.4,0,.2,1) forwards; }
.qm-projection.is-anim .qm-proj-dot,
.qm-projection.is-anim .qm-proj-mid-lbl { opacity: 0; animation: qm-chart-fade .45s ease-out 1.2s forwards; }
.qm-projection.is-anim .qm-projection-goal { opacity: 0; animation: qm-chart-fade .5s ease-out 1.3s forwards; }
@media (prefers-reduced-motion: reduce) {
	.qm-chart-compare.is-anim .qm-cc-line, .qm-chart-compare.is-anim .qm-cc-area,
	.qm-chart-compare.is-anim .qm-cc-dot, .qm-chart-compare.is-anim .qm-cc-pill,
	.qm-projection.is-anim .qm-proj-line, .qm-projection.is-anim .qm-proj-dot,
	.qm-projection.is-anim .qm-proj-mid-lbl,
		.qm-projection.is-anim .qm-projection-goal { animation: none; stroke-dashoffset: 0; opacity: 1; }
}

/* D5: score_card — diagnóstico de nível (IMG22) */
.qm-score-card {
	background: var(--qm-card);
	border: 1px solid var(--qm-border, rgba(255,255,255,.06));
	border-radius: 18px;
	padding: 22px;
	margin: 16px auto;
	max-width: 560px;
	text-align: left;
}
.qm-score-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.qm-score-card-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--qm-muted); text-transform: uppercase; }
.qm-score-card-value { font-size: 44px; font-weight: 800; line-height: 1; margin-top: 4px; color: var(--qm-text); }
.qm-score-card-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--qm-border, rgba(255,255,255,.06)); border: 1px solid var(--qm-border, rgba(255,255,255,.1)); color: var(--qm-text); font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 999px; white-space: nowrap; }
.qm-score-card-badge-ic { color: var(--qm-highlight); font-weight: 800; }
.qm-score-card-desc { color: var(--qm-muted); font-size: 14px; line-height: 1.5; margin: 14px 0 0; }
.qm-score-card-divider { height: 1px; background: var(--qm-border, rgba(255,255,255,.08)); margin: 18px 0; }
.qm-score-card-stats { display: flex; flex-direction: column; gap: 16px; }
.qm-score-stat-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.qm-score-stat-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--qm-muted); }
.qm-score-stat-val { font-size: 14px; font-weight: 700; color: var(--qm-text); }
.qm-score-stat-max { color: var(--qm-muted); font-weight: 600; }
.qm-score-stat-track { display: flex; gap: 4px; }
.qm-score-stat-seg { flex: 1; height: 8px; border-radius: 3px; background: var(--qm-border, rgba(255,255,255,.08)); transition: background .4s ease; }
/* D5: segmento preenchido com corzinha laranja (branding Alcateia) + leve gradiente,
   estilo IMG22 (antes era cream chapado). */
.qm-score-stat-seg.is-on { background: linear-gradient(90deg, var(--qm-highlight), var(--qm-highlight-2, #ffb45f)); }

/* D7: imc_scale — escala IMC com bandas + marcador */
.qm-imc-scale { background: var(--qm-card); border: 1px solid var(--qm-border, rgba(255,255,255,.06)); border-radius: 18px; padding: 22px; margin: 16px auto; width: 100%; max-width: 640px; box-sizing: border-box; }
.qm-imc-scale-title { font-size: 14px; font-weight: 700; color: var(--qm-muted); margin-bottom: 6px; }
.qm-imc-scale-value { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.qm-imc-scale-num { font-size: 40px; font-weight: 800; line-height: 1; }
.qm-imc-scale-class { font-size: 15px; font-weight: 700; }
/* Escala IMC (estilo BetterMe): faixas IGUAIS (piecewise), régua + conectores, bolha ligada à
   bolinha por uma linha, labels MAIÚSCULAS (ativa em negrito), bolinha animada deslizando. */
.qm-imc-track { position: relative; }
.qm-imc-bubble-row { position: relative; height: 28px; }
.qm-imc-bubble { position: absolute; bottom: 3px; transform: translateX(-50%); background: var(--qm-bubble, #f4ecdc); color: var(--qm-bubble-text, #1a1a1a); font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 8px; white-space: nowrap; box-shadow: 0 3px 10px rgba(0,0,0,.3); z-index: 3; }
.qm-imc-bubble::after { content: ''; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--qm-bubble, #f4ecdc); }
.qm-imc-ticks { position: relative; height: 16px; }
.qm-imc-tick { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--qm-muted); font-variant-numeric: tabular-nums; }
.qm-imc-tick:first-child { transform: translateX(0); }
.qm-imc-tick:last-child { transform: translateX(-100%); }
.qm-imc-ruler { height: 8px; }
.qm-imc-scale-bar { height: 14px; border-radius: 7px; position: relative; margin-top: 3px; }
.qm-imc-scale-marker { position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%; background: var(--qm-marker, #fff); border: 3px solid var(--qm-card, #1b1815); box-shadow: 0 1px 4px rgba(0,0,0,.4); z-index: 2; }
/* conector bolha→bolinha: tokenizado p/ o tema claro (no claro, o branco translúcido sumia).
   O fallback é o valor antigo → tema escuro fica idêntico sem tocar em nada. */
.qm-imc-connector { position: absolute; left: 0; top: 26px; bottom: 7px; width: 2px; transform: translateX(-50%); background: var(--qm-connector, rgba(255,255,255,.4)); border-radius: 1px; z-index: 1; }
.qm-imc-anim .qm-imc-bubble, .qm-imc-anim .qm-imc-connector, .qm-imc-anim .qm-imc-scale-marker { transition: left 1.1s cubic-bezier(.22, 1, .36, 1); }
/* D7: modo gauge (velocímetro) */
.qm-imc-scale--gauge { text-align: center; }
.qm-imc-gauge-svg { max-width: 300px; margin: 4px auto 0; }
.qm-imc-gauge-svg svg { width: 100%; height: auto; display: block; }
.qm-imc-gauge-value { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-top: -8px; }
.qm-imc-scale-labels { position: relative; height: 16px; margin-top: 12px; }
.qm-imc-scale-labels span { position: absolute; transform: translateX(-50%); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--qm-muted); white-space: nowrap; }
.qm-imc-scale-labels span.is-active { color: var(--qm-text); font-weight: 800; }

/* D8: bars_compare — barras horizontais comparativas (idade real × fitness) */
.qm-bars-compare { background: var(--qm-card); border: 1px solid var(--qm-border, rgba(255,255,255,.06)); border-radius: 18px; padding: 24px 22px; margin: 16px auto; max-width: 560px; }
.qm-bars-compare-row { margin-bottom: 18px; }
.qm-bars-compare-row:last-child { margin-bottom: 0; }
.qm-bars-compare-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; height: 52px; border-radius: 999px; padding: 0 20px; font-weight: 700; transition: width .6s ease; box-sizing: border-box; }
.qm-bars-compare-label { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qm-bars-compare-val { font-size: 14px; opacity: .85; white-space: nowrap; }
.qm-bars-compare-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--qm-highlight) 9%, transparent); color: var(--qm-text); font-size: 14px; font-weight: 600; line-height: 1.45; }
.qm-bars-compare-note-ic { color: var(--qm-highlight); flex-shrink: 0; }
/* D8: bullets simples + disclaimer abaixo do card (estilo IMG54) — sem caixas/ícones vazios. */
.qm-bars-compare-wrap { max-width: 560px; margin: 16px auto; }
.qm-bars-compare-wrap .qm-bars-compare { margin: 0; }
.qm-bars-compare-bullets { list-style: disc; margin: 26px 0 0; padding-left: 24px; color: var(--qm-text); }
.qm-bars-compare-bullets li { font-size: 15px; line-height: 1.55; margin-bottom: 14px; }
.qm-bars-compare-bullets li:last-child { margin-bottom: 0; }
.qm-bars-compare-disclaimer { text-align: center; color: var(--qm-muted); font-size: 13px; line-height: 1.5; margin: 22px 0 0; }

/* et.58 — perfil de bem-estar: lista de atributos (ícone + label + valor) ---- */
.qm-profile-attrs { display: flex; flex-direction: column; margin: 16px 0 0; }
.qm-profile-attr { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-top: 1px solid var(--qm-border, rgba(255,255,255,.07)); }
.qm-profile-attr:first-child { border-top: 0; }
.qm-profile-attr-ic { font-size: 20px; width: 28px; text-align: center; flex-shrink: 0; opacity: .9; }
.qm-profile-attr-body { min-width: 0; }
.qm-profile-attr-label { font-size: 12px; color: var(--qm-muted); letter-spacing: .02em; }
.qm-profile-attr-value { font-size: 16px; font-weight: 700; color: var(--qm-text); line-height: 1.3; margin-top: 1px; }

/* et.61 — projeção de peso (curva + ponto-meta + badge evento) -------------- */
.qm-projection { max-width: 560px; margin: 8px auto 0; }
/* Previsão à ESQUERDA, pill do evento à DIREITA, na mesma linha — vide BetterMe. A previsão
   cresce e a pill não encolhe; sem espaço, a pill desce (wrap) em vez de espremer a data. */
.qm-projection-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 16px; }
.qm-projection-head:has(> :only-child) { justify-content: center; }
.qm-projection-predict { text-align: left; font-size: 19px; color: var(--qm-muted); line-height: 1.4; margin: 0; flex: 1 1 240px; }
.qm-projection-predict b { color: var(--qm-text); font-weight: 800; }
.qm-projection-badge { text-align: center; background: color-mix(in srgb, var(--qm-highlight) 12%, transparent); color: var(--qm-text); border-radius: 999px; padding: 8px 18px; font-size: 14px; font-weight: 600; width: fit-content; margin: 0; flex: 0 0 auto; }
.qm-projection-badge b { color: var(--qm-highlight); }
.qm-projection-card { position: relative; background: var(--qm-card); border: 1px solid var(--qm-border, rgba(255,255,255,.06)); border-radius: 18px; padding: 18px 16px; }
.qm-projection-card-title { font-size: 14px; color: var(--qm-muted); font-weight: 600; margin-bottom: 8px; }
.qm-projection-evtag { position: absolute; top: 16px; right: 16px; background: var(--qm-border, rgba(255,255,255,.10)); color: var(--qm-text); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; }
.qm-projection-chart { position: relative; width: 100%; }
.qm-projection-svg { width: 100%; height: auto; display: block; }
/* Rótulo de mês do eixo X. O tamanho vive aqui, e não num atributo do <text>, porque o SVG
   escala com o cartão: o mesmo número sai maior no computador. 9 no computador (pedido do
   usuário em 08/09/2026), 10 no celular, onde o cartão é estreito e 9 ficaria apertado. */
.qm-proj-mes { font-size: 10px; }
@media (min-width: 721px) { .qm-proj-mes { font-size: 9px; } }
.qm-projection-goal { position: absolute; transform: translate(-50%, -130%); background: var(--qm-bubble, #f4ecdc); color: var(--qm-bubble-text, #1a1a1a); font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
/* Bubble "Hoje" no início (peso atual) — alinha à esquerda do ponto p/ não cortar na borda. */
.qm-projection-now { transform: translate(0, -130%); background: #3a3a3a; color: #fff; }
/* Balao do evento: fica EM CIMA do tracejado, entao centra no ponto em vez de sair pela
   esquerda como o da meta. */
.qm-projection-ev { transform: translate(-50%, -150%); background: #3a3a3a; color: #fff; }
/* Legenda dos marcos (1º mês / metade) — progresso palpável pelo caminho. */
.qm-projection-miles { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--qm-border, rgba(255,255,255,.08)); text-align: center; font-size: 13px; color: var(--qm-muted); line-height: 1.5; }
.qm-projection-miles b { color: var(--qm-text); font-weight: 800; }
.qm-projection-disclaimer { color: var(--qm-muted); font-size: 12px; line-height: 1.5; margin: 14px 0 0; text-align: center; }

/* et.58 — card de perfil de bem-estar (2 colunas, fiel BetterMe img58) ------ */
/* Grid: desktop = [IMC/atributos | avatar spanning]. Mobile = IMC full-width + [atributos | avatar]. */
.qm-wellness { display: grid; grid-template-columns: 58% 42%; grid-template-areas: "imc avatar" "attrs avatar"; background: var(--qm-card); border: 1px solid var(--qm-border, rgba(255,255,255,.07)); border-radius: 22px; overflow: hidden; max-width: 800px; margin: 8px auto 0; }
.qm-wellness-imc { grid-area: imc; min-width: 0; padding: 22px 22px 6px; display: flex; flex-direction: column; gap: 12px; }
.qm-wellness-attrs { grid-area: attrs; min-width: 0; padding: 6px 22px 22px; display: flex; flex-direction: column; gap: 12px; }
.qm-wellness-right { grid-area: avatar; min-width: 0; background: var(--qm-surface-raised, #0e0e0e); display: flex; align-items: flex-end; justify-content: center; padding: 34px 28px 0; overflow: hidden; }
/* contain (não cover) → mostra o avatar INTEIRO sem cortar os braços; o padding lateral do
   .qm-wellness-right dá o respiro. Mobile mantém cover (override @720 abaixo). */
.qm-wellness-avatar {
	width: 100%; height: 100%; object-fit: contain; object-position: bottom center; display: block;
	/* --wl-av-d/-m = "Tamanho do avatar" do construtor. Ancorado na base: a figura cresce
	   para cima em vez de afundar no card. */
	transform: scale(var(--wl-av-d, 1)); transform-origin: bottom center;
}
.qm-wellness .qm-imc-scale { background: transparent; border: 0; padding: 0; margin: 0; }
.qm-wellness-risk { background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.25); border-radius: 12px; padding: 14px 16px; }
.qm-wellness-risk-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.qm-wellness-risk-ic { color: #f59e0b; }
.qm-wellness-risk-title { font-weight: 700; font-size: 14px; }
.qm-wellness-risk-text { margin: 0; font-size: 13px; color: var(--qm-muted); line-height: 1.45; }
.qm-wellness-attr { display: flex; align-items: center; gap: 14px; background: var(--qm-border, rgba(255,255,255,.03)); border-radius: 12px; padding: 12px 16px; }
.qm-wellness-attr-ic { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; opacity: .85; }
/* `qm-ico--*` e modificador PURO: quem da tamanho e a classe do contexto. A regra acima
   nasceu para EMOJI, que traz a propria altura no texto; a mascara e um <span> vazio, entao
   sem `height` ela nasce 24x0 e o icone simplesmente some — foi o que apareceu no ar em
   08/09/2026, quando este bloco passou a aceitar icone por URL. */
.qm-wellness-attr-ic.qm-ico--mask,
.qm-wellness-attr-ic.qm-ico--svg { height: 24px; }
.qm-wellness-attr-body { min-width: 0; }
.qm-wellness-attr-label { font-size: 12px; color: var(--qm-muted); }
.qm-wellness-attr-value { font-size: 16px; font-weight: 700; color: var(--qm-text); line-height: 1.25; }
@media (max-width: 720px) {
	/* Mobile: IMC+risco full-width em cima; depois itens à esquerda | avatar AO LADO (não embaixo). */
	.qm-wellness { grid-template-columns: 56% 44%; grid-template-areas: "imc imc" "attrs avatar"; }
	/* Respiro ABAIXO do bloco de riscos: no celular ele encostava na linha dos atributos. */
	.qm-wellness-imc { padding: 16px 16px 16px; }
	.qm-wellness-attrs { padding: 8px 12px 16px 16px; gap: 8px; }
	/* Respiro ACIMA da cabeça do personagem. Com `object-fit: cover` + `object-position: center
	   top` a figura nascia colada no topo da célula — parecia recortada. O padding empurra a
	   imagem para baixo e o espaço aparece. Só no celular: no computador a coluna é `contain` e
	   já tem 34px de folga. */
	.qm-wellness-right { padding: 14px 0 0; }
	.qm-wellness-avatar { object-fit: cover; object-position: center top; transform: scale(var(--wl-av-m, var(--wl-av-d, 1))); }
	.qm-wellness-attr { padding: 9px 11px; gap: 10px; }
	.qm-wellness-attr-ic { font-size: 16px; width: 20px; }
	.qm-wellness-attr-ic.qm-ico--mask,
	.qm-wellness-attr-ic.qm-ico--svg { height: 20px; }
	.qm-wellness-attr-label { font-size: 11px; }
	.qm-wellness-attr-value { font-size: 13.5px; }
}

/* Mobile: comprime o espaçamento VERTICAL geral → cabe mais conteúdo sem scroll.
   (pedido do usuário — a maioria das perguntas deve aparecer completa na 1ª dobra). */
@media (max-width: 600px) {
	/* .qm-main padding + gap título→conteúdo agora vêm dos tokens (:root @720) — sem hardcode. */
	.qm-footer { padding: 12px 16px 16px; }
	.qm-btn-primary { padding: 15px 40px; }
	/* Ritmo título/subtítulo no mobile vem dos tokens --qm-r-* (override @720 no :root). */
	.qm-title { line-height: 1.2; }
	.qm-options { gap: 13px; margin-top: 4px; } /* Bloco A G1: +respiro entre opções no mobile (10→13) */
	.qm-text-wrap { padding: 14px 0; }
	/* Bloco A G3: opções um pouco mais altas no MOBILE p/ todos os presets (base 14→18; Médio/Grande
	   somam --opt-pad-m por cima). Desktop inalterado. */
	.qm-option { padding: calc(18px + var(--opt-pad-m, 0px)) 16px; }
	.qm-imc-scale { padding: 16px; margin: 10px auto; }
	.qm-infobox { margin-top: 14px; padding: 13px 15px; }
	.qm-projection-predict { font-size: 16px; margin: 0; }
	/* No celular a linha não cabe lado a lado sem quebrar a data no meio: a pill vai pra
	   baixo e as duas voltam a centrar, que é como a tela sempre foi no mobile. */
	/* `flex: 0 0 auto` desfaz o `flex: 1 1 240px` do desktop. Em coluna, aquele 240px vira
	   ALTURA: o paragrafo precisava de 68px e reservava 240, e sobrava um vazio de 172px
	   entre a previsao e o card do grafico. Medido no harness em 375px. */
	.qm-projection-head { flex-direction: column; align-items: center; gap: 10px; margin-bottom: 12px; }
	.qm-projection-head > .qm-projection-predict { flex: 0 0 auto; }
	.qm-projection-predict { text-align: center; }
	.qm-feature-list { margin-top: 8px; }
	.qm-scratch-top { min-height: 168px; }
}

/* Date input NATIVO (calendário, et.60) ----------------------------------- */
.qm-date-native-wrap { margin-top: 8px; }
.qm-date-native { width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 12px; background: var(--qm-card); border: 1px solid var(--qm-border, rgba(255,255,255,.12)); color: var(--qm-text); font-size: 16px; color-scheme: var(--qm-color-scheme, dark); font-family: inherit; }
.qm-date-native:focus { outline: 2px solid var(--qm-primary); outline-offset: 1px; }
/* (transição do .qm-step definida no topo: qm-step-in — fade + slide-up elegante) */

/* Display rules — visibility condicional --------------------------------- */
.qm-block-wrap { transition: opacity .25s ease; }
.qm-display-rule-hidden { display: none !important; }

/* Loading step — barra de progresso c/ auto-advance --------------------- */
.qm-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 60px 20px 80px;
	text-align: center;
	min-height: 60vh;
}
.qm-loading-title    { font-size: 22px; font-weight: 700; margin: 0; line-height: 1.3; }
.qm-loading-subtitle { color: var(--qm-muted); font-size: 14px; margin: 0; max-width: 460px; line-height: 1.5; }
.qm-loading-track {
	width: 100%;
	max-width: 360px;
	height: 8px;
	background: var(--qm-border, rgba(255,255,255,.1));
	border-radius: 4px;
	overflow: hidden;
	margin-top: 8px;
}
.qm-loading-fill {
	height: 100%;
	width: 0;
	background: var(--qm-primary);
	border-radius: 4px;
}
.qm-loading-pct {
	font-size: 14px;
	font-weight: 600;
	color: var(--qm-muted);
	font-variant-numeric: tabular-nums;
}

/* Email / phone inputs --------------------------------------------------- */
.qm-email-input, .qm-phone-input { font-size: 18px; }
.qm-input-error { color: var(--qm-warning); font-size: 12px; min-height: 16px; margin-top: 6px; }

/* Capture group --------------------------------------------------------- */
.qm-capture-group { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.qm-capture-field { display: flex; flex-direction: column; gap: 6px; }
.qm-capture-label { font-size: 13px; font-weight: 600; color: var(--qm-muted); text-transform: uppercase; letter-spacing: .04em; }
.qm-capture-field .qm-text-input { width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 12px; background: var(--qm-card); border: 1px solid var(--qm-border, rgba(255,255,255,.08)); color: var(--qm-text); font-size: 16px; }
.qm-capture-field .qm-text-input:focus { outline: 2px solid var(--qm-primary); outline-offset: 1px; }

/* Yes/No layout — duas opções lado a lado em desktop, empilhado mobile -- */
.qm-options.qm-yes-no { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .qm-options.qm-yes-no { grid-template-columns: 1fr; } }

/* Notification (popup prova social) ------------------------------------- */
.qm-notification {
	position: fixed;
	z-index: 9000;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--qm-card);
	color: var(--qm-text);
	border-radius: 14px;
	padding: 12px 16px;
	box-shadow: 0 8px 28px rgba(0,0,0,.45);
	max-width: 320px;
	min-width: 240px;
	font-size: 13px;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .35s ease, transform .35s ease;
	pointer-events: auto;
}
.qm-notification.is-in { opacity: 1; transform: translateY(0); }
.qm-notification--bottom-left  { left: 16px;  bottom: 16px; }
.qm-notification--bottom-right { right: 16px; bottom: 16px; }
.qm-notification--top-right    { right: 16px; top: 16px; }
.qm-notification--top-left     { left: 16px;  top: 16px; }
.qm-notification-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.qm-notification-body { flex: 1; min-width: 0; }
.qm-notification-text { font-weight: 600; line-height: 1.3; }
.qm-notification-sub { font-size: 11px; color: var(--qm-muted); margin-top: 2px; }
.qm-notification-close { background: transparent; border: 0; color: var(--qm-muted); font-size: 14px; cursor: pointer; padding: 0 4px; }
@media (max-width: 480px) {
	.qm-notification { max-width: calc(100vw - 32px); }
}

/* Height/Weight input (régua + display) --------------------------------- */
.qm-height-wrap, .qm-weight-wrap { padding: 16px 0 8px; user-select: none; }
.qm-measure-display {
	text-align: center;
	font-size: 56px;
	font-weight: 700;
	color: var(--qm-text);
	line-height: 1.1;
	margin-bottom: 16px;
	letter-spacing: -1px;
}
.qm-measure-toggles {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-bottom: 18px;
	flex-wrap: wrap;
}
.qm-toggle-btn {
	background: var(--qm-card);
	border: 1px solid var(--qm-border, rgba(255,255,255,.15));
	color: var(--qm-text);
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 13px;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.qm-toggle-btn:hover { border-color: var(--qm-primary); }
.qm-measure-container { width: 100%; }
.qm-ruler-wrap { padding: 8px 0; }
.qm-ruler-viewport {
	position: relative;
	width: 100%;
	height: 80px;
	overflow: hidden;
	background: var(--qm-card);
	border-radius: var(--qm-radius);
	touch-action: pan-y;
	cursor: grab;
}
.qm-ruler-viewport.is-dragging { cursor: grabbing; }
.qm-ruler-track {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	will-change: transform;
}
.qm-ruler-tick {
	position: absolute;
	top: 50%;
	width: 1px;
	height: 14px;
	background: var(--qm-border, rgba(255,255,255,.25));
	transform: translateY(-50%);
}
.qm-ruler-tick.is-mid { height: 22px; background: var(--qm-border, rgba(255,255,255,.45)); }
.qm-ruler-tick.is-major { height: 34px; background: var(--qm-text); width: 2px; }
.qm-ruler-label {
	position: absolute;
	top: 38px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 11px;
	color: var(--qm-muted);
	white-space: nowrap;
}
.qm-ruler-cursor {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 3px;
	height: 100%;
	background: var(--qm-primary);
	border-radius: 2px;
	pointer-events: none;
	box-shadow: 0 0 8px rgba(244,236,220,.4);
}
.qm-ruler-steps {
	display: flex;
	justify-content: space-between;
	margin-top: 12px;
	gap: 12px;
}
.qm-ruler-step {
	flex: 0 0 56px;
	height: 40px;
	border-radius: 999px;
	background: var(--qm-card);
	border: 1px solid var(--qm-border, rgba(255,255,255,.15));
	color: var(--qm-text);
	font-size: 22px;
	cursor: pointer;
	font-weight: 600;
}
.qm-ruler-step:hover { border-color: var(--qm-primary); }
.qm-measure-input-wrap { padding: 8px 0; }
.qm-measure-input-row {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 280px;
	margin: 0 auto;
}
.qm-measure-input { flex: 1; text-align: center; font-size: 24px; }
.qm-measure-unit { font-size: 18px; color: var(--qm-muted); min-width: 40px; }
/* Variante BetterMe (input_style:'betterme') — card c/ campo grande + unidade grande + faixa (img44/45/49). */
.qm-measure-bm { display: flex; justify-content: center; }
.qm-measure-bm-card { width: 100%; max-width: 460px; background: var(--qm-card); border: 1px solid var(--qm-border, rgba(255,255,255,.07)); border-radius: 18px; padding: 30px 28px; }
.qm-measure-bm-row { display: flex; align-items: baseline; gap: 10px; border-bottom: 2px solid var(--qm-border, rgba(255,255,255,.16)); padding-bottom: 10px; }
.qm-measure-bm-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--qm-text); font-family: inherit; font-size: clamp(24px, 7vw, 40px); font-weight: 700; padding: 0; text-align: center; text-overflow: ellipsis; }
.qm-measure-bm-input::placeholder { color: var(--qm-muted); opacity: .7; font-weight: 700; }
.qm-measure-bm-input::-webkit-outer-spin-button, .qm-measure-bm-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qm-measure-bm-input[type=number] { -moz-appearance: textfield; }
.qm-measure-bm-unit { font-size: clamp(22px, 6vw, 34px); font-weight: 800; color: var(--qm-text); flex-shrink: 0; }
.qm-measure-bm-hint { margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--qm-muted); text-align: center; }
.qm-measure-bm-hint.is-error { color: var(--qm-warning); }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 480px) {
	/* .qm-title já usa clamp() — não precisa override */
	.qm-diagnostic-title { font-size: 22px; }
	.qm-number-value { font-size: 44px; width: 130px; }
	.qm-number-value::placeholder { font-size: 24px; }
	.qm-number-value:placeholder-shown { width: 190px; }
	.qm-number-unit { font-size: 26px; }
	.qm-slider-value { font-size: 44px; }
	.qm-measure-display { font-size: 44px; }
}

/* ===================================================================== */
/* F3 — Advanced Blocks                                                  */
/* ===================================================================== */

/* audio — player WhatsApp/Insta/dark */
.qm-block-audio {
	display: flex; align-items: center; gap: 12px;
	background: var(--qm-card); border-radius: 16px; padding: 14px; margin: 16px 0;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.qm-block-audio-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.qm-block-audio-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.qm-block-audio-name { font-weight: 600; font-size: 14px; color: var(--qm-text); }
.qm-block-audio-player { width: 100%; height: 36px; }
.qm-block-audio-duration { font-size: 12px; color: var(--qm-muted); }
.qm-block-audio-empty { font-size: 12px; color: #b91c1c; padding: 8px 0; }
.qm-audio--whatsapp { background: #dcf8c6; }
.qm-audio--instagram { background: linear-gradient(135deg, #fad776 0%, #f58529 30%, #dd2a7b 60%, #8134af 90%, #515bd4 100%); color: #fff; }
.qm-audio--instagram .qm-block-audio-name, .qm-audio--instagram .qm-block-audio-duration { color: #fff; }
.qm-audio--dark { background: #1f2937; color: #f3f4f6; }
.qm-audio--dark .qm-block-audio-name { color: #f3f4f6; }
.qm-audio--dark .qm-block-audio-duration { color: #9ca3af; }

/* level — barra fixa 0-100% com faixas */
.qm-block-level { margin: 20px 0; padding: 16px; background: var(--qm-card); border-radius: 12px; }
.qm-block-level-title { font-weight: 600; margin-bottom: 12px; text-align: center; }
.qm-block-level-bar {
	position: relative; height: 14px; border-radius: 7px; overflow: hidden;
	display: flex; background: #f3f4f6;
}
.qm-block-level-seg { height: 100%; }
.qm-block-level-marker {
	position: absolute; top: -4px; width: 4px; height: 22px;
	background: #111; transform: translateX(-50%); border-radius: 2px;
	box-shadow: 0 0 0 2px #fff;
}
.qm-block-level-value { text-align: center; font-size: 22px; font-weight: 700; margin: 8px 0 12px; }
.qm-block-level-legend { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; font-size: 12px; }
.qm-block-level-legend-item { display: flex; align-items: center; gap: 6px; }
.qm-block-level-legend-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* argument — texto+imagem lista/grid */
/* ---- phone_mockup: moldura de telefone com lista por cima (et.32 do Shadow Boxing) ---- */
.qm-block-phone { margin: 20px 0; display: flex; justify-content: center; }
/* O palco reserva a altura pela PROPORÇÃO da moldura, não pela imagem: sem isso a lista salta
   quando o PNG termina de carregar. */
/* `container-type: inline-size` deixa o miolo medir em `cqw` — porcentagem da largura do
   APARELHO. Tipografia em px fixo encolhia em relação ao aparelho quando o palco crescia, e no
   print do BM o nome da refeição tem 5% da largura do cartão em qualquer tamanho. */
/* A tela vaza de propósito (`--qm-phone-vaza`), então o teto do palco tem de contar com esse
   vazamento: sem isso a lista encostava nas duas bordas e empurrava a página 3px para o lado
   num aparelho de 375px. O mesmo número serve aos dois lugares, para não divergirem. */
.qm-phone-palco { --qm-phone-vaza: 1.36; position: relative; width: 100%;
	max-width: min(340px, calc((100vw - 24px) / var(--qm-phone-vaza)));
	aspect-ratio: var(--qm-phone-ratio, 0.6865);
	container-type: inline-size; }
.qm-phone-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Forro da TELA. O recorte foi medido no próprio arquivo (618×900): o miolo transparente começa
   a 9,78% do topo e a 5,02% de cada lado, e desce até a base — o aparelho é cortado embaixo. Os
   cantos do recorte são praticamente retos (raio de ~4px em 555 de largura); quem arredonda é a
   moldura, que fica POR CIMA. Sem cor própria, o telefone mostra por dentro o que estiver atrás
   dele: com o painel ligado, a cor do painel. */
.qm-phone-forro { position: absolute; top: 9.78%; left: 5.02%; right: 5.02%; bottom: 0;
	background: var(--qm-fone-aparelho, transparent); border-radius: 1.5% 1.5% 0 0; }
/* A lista é MAIS LARGA que o aparelho e vaza pelas bordas — é assim no BetterMe, os cartões
   passam por cima do contorno. Daí o palco ter `overflow` visível e a tela usar largura > 100%. */
/* Medido no print da etapa 32 do BM: o cartão tem 1,385× a largura do aparelho e o primeiro
   começa a 25,7% da altura dele. O `top` desconta o título, que fica acima da lista. */
.qm-phone-tela { position: absolute; left: 50%; transform: translateX(-50%); top: 19.5%;
	width: calc(var(--qm-phone-vaza, 1.36) * 100%); }
.qm-phone-titulo { text-align: center; font-size: 6.9cqw; font-weight: 700; color: var(--qm-text, #f4ecdc); margin-bottom: 4cqw; }
.qm-phone-lista { display: grid; gap: 4cqw; }
/* Proporções MEDIDAS no print da et.32 do BM (`shots/31.png`, janela de 1440), lendo os degraus
   de luminância pixel a pixel em vez de estimar a olho: aparelho 275 de largura, cartão 394×94,
   foto 80×80, tique de 20, vão de 11 entre cartões. Tudo aqui é % da largura do APARELHO:
   94/275 = 34,2cqw de altura · 80/275 = 29,1cqw de foto · 20/275 = 7,3cqw de tique.
   O número antigo (0,138 de altura/largura) fazia o cartão ter 65px onde o BM tem o
   equivalente a 110 — era o "itens de refeição mais altos" do achado 32. */
.qm-phone-item { display: flex; align-items: center; gap: 3.5cqw; padding: 2.5cqw 4cqw 2.5cqw 2.2cqw;
	min-height: 34.2cqw; box-sizing: border-box;
	background: var(--qm-fone-cartao, var(--qm-card, #141414)); border-radius: 4.7cqw; box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.qm-phone-item-foto { flex: 0 0 auto; width: 29.1cqw; height: 29.1cqw; border-radius: 3.5cqw; overflow: hidden; }
.qm-phone-item-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qm-phone-item-txt { flex: 1 1 auto; min-width: 0; }
.qm-phone-item-titulo { font-size: 6.8cqw; font-weight: 700; color: var(--qm-text, #f4ecdc); line-height: 1.2; }
/* achado 34: o respiro entre o nome da refeição e as calorias. Eram 0,6cqw (2px no computador),
   e no print do BM a distância é ~8px num aparelho de 275 — 2,9cqw. */
.qm-phone-item-sub { font-size: 4.5cqw; color: var(--qm-muted, #8a8a8a); margin-top: 2.6cqw; }
/* A marca é um anel vazio; só o item `done` fica preenchido com o tique. */
/* A cor é a do ÍCONE, não a do botão. No Shadow Boxing o `--qm-primary` virou creme (achado 1) e
   o tique foi junto — no print do BM ele é laranja, como todo sinal gráfico da tela. Onde o tema
   não separa os dois, o `--qm-icon` cai no primary e nada muda. */
.qm-phone-item-marca { flex: 0 0 auto; width: 7.3cqw; height: 7.3cqw; border-radius: 50%;
	border: .55cqw solid var(--qm-icon, var(--qm-primary, #F88E28)); opacity: .55; }
.qm-phone-item.is-done .qm-phone-item-marca { opacity: 1; border-color: transparent;
	background: var(--qm-icon, var(--qm-primary, #F88E28)) no-repeat center/58% 58%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
/* No celular só o palco encolhe — o miolo acompanha sozinho, porque é tudo `cqw`. */
/* O teto de 340px já é relativo à largura da tela; o antigo 280px fixo no celular era o que
   fazia a lista de 136% dar 381px numa janela de 378. */
/* ---- painel atrás do aparelho (achado 31; `backdrop` no bloco) ---- */
/* Medido no mesmo print: painel de 500×459 em rgb(35,33,29) em volta de um aparelho de 275, com
   os cartões de 394 sobrando 53 de cada lado. 592 = 340 (nosso aparelho) × 500/275, arredondado
   para o par de 462 dos cartões + 65 de folga. No celular o `max-width` deixa o painel encostar
   nos cartões em vez de empurrar a página: decoração cede espaço, conteúdo não. */
.qm-fone-painel {
	width: 100%; max-width: 592px; box-sizing: border-box;
	display: flex; justify-content: center;
	padding: 5% 0 6.8%;
	background: var(--qm-fone-painel-bg, #1f1f1f);
	border-radius: 28px;
}
/* TRÊS superfícies, do claro para o escuro: painel → aparelho → cartão. O painel do BetterMe é
   quente (rgb(35,33,29), puxa para o marrom); o Iago pediu cinza neutro, e o aparelho um passo
   mais escuro ainda — senão a tela vazada do telefone some dentro do painel. */
.qm-block-phone--painel { --qm-fone-aparelho: #121212; }
/* Dentro do painel o teto do palco passa a medir contra O PAINEL, não contra a janela. O teto
   original conta `100vw`, que é a largura certa quando o aparelho está sozinho no meio da página
   — mas aqui ele mora numa COLUNA. No celular a coluna tem 311 e a janela 375: o palco ficava com
   258, os cartões com 258×1,36 = 351, e sobravam 20px para fora do painel de cada lado. O número
   do vazamento é o mesmo dos cartões, lido da mesma variável, para os dois não divergirem. */
.qm-fone-painel .qm-phone-palco { max-width: min(340px, calc(100% / var(--qm-phone-vaza, 1.36))); }
/* Com o painel, quem é a superfície elevada é ELE — e o cartão passa a ser o fundo da página,
   como no print do BM (painel rgb(35,33,29), cartão rgb(5,3,0)). Sem painel o cartão continua
   sendo `--qm-card`, senão ficaria invisível sobre a página preta. */
.qm-block-phone--painel { --qm-fone-cartao: var(--qm-bg, #000); }
/* O painel já dá a folga lateral; sem isto o bloco somaria a margem dele à do painel. */
.qm-block-phone--painel { margin: 8px 0; }

.qm-block-argument { margin: 20px 0; }
.qm-block-argument-title { font-size: 18px; font-weight: 700; margin: 0 0 16px; text-align: center; }
.qm-block-argument-items { display: grid; gap: 16px; }
.qm-arg-list .qm-block-argument-items { grid-template-columns: 1fr; }
.qm-arg-grid2 .qm-block-argument-items { grid-template-columns: repeat(2, 1fr); }
.qm-arg-grid3 .qm-block-argument-items { grid-template-columns: repeat(3, 1fr); }
.qm-arg-grid4 .qm-block-argument-items { grid-template-columns: repeat(4, 1fr); }
.qm-block-argument-item {
	display: flex; align-items: flex-start; gap: 12px;
	background: var(--qm-card); border-radius: 12px; padding: 14px;
}
.qm-arg-img-top .qm-block-argument-item { flex-direction: column; align-items: center; text-align: center; }
.qm-block-argument-media { flex-shrink: 0; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #f3f4f6; overflow: hidden; }
.qm-arg-img-top .qm-block-argument-media { width: 72px; height: 72px; }
.qm-block-argument-media img { width: 100%; height: 100%; object-fit: cover; }
/* expert — o card de credencial do BetterMe (tela 41 do funil de calistenia).
   Medido no print deles: card 464x104, foto 98x97 — ou seja 0,21 da largura e 0,93 da
   ALTURA do card, colada na borda esquerda. O padrão de lista deixa a foto num
   quadradinho de 56px flutuando com respiro em volta, e aí o bloco lê como "lista de
   itens" em vez de "credencial". Aqui o card é uma FAIXA estreita e centrada. */
.qm-arg-expert .qm-block-argument-items { max-width: 464px; margin: 0 auto; gap: 14px; }
.qm-arg-expert .qm-block-argument-item {
	/* Fundo próprio, mais destacado que --qm-card: no BM o card é #22211D contra uma
	   página #050300, um degrau visível. Com --qm-card o contraste ficava sutil demais. */
	background: var(--qm-card-2, #22211D);
	border-radius: 14px;
	padding: 0;               /* zero: quem afasta o texto é o padding do .text */
	gap: 0;
	align-items: stretch;     /* a foto acompanha a altura do card */
	overflow: hidden;         /* recorta a foto nos cantos arredondados */
	min-height: 110px;        /* 8 + 94 + 8: a folga em volta da foto sempre cabe */
}
/* A foto fica DENTRO do card, com folga e canto arredondado — não colada na borda.
   Medido no print: foto 94px de largura contra card de 464, com 8px de recuo.
   QUADRADO FIXO, e não `stretch`: com stretch a ALTURA da foto vinha da altura do card,
   que por sua vez vem do texto — e no mobile, onde a certificação quebra em mais linhas,
   cada especialista acabava com uma foto de tamanho diferente. Agora as três são iguais
   em qualquer largura de tela. */
.qm-arg-expert .qm-block-argument-media {
	width: 94px; height: 94px; flex: none; align-self: center;
	margin: 8px 0 8px 8px;
	border-radius: 10px; background: transparent; overflow: hidden;
}
.qm-arg-expert .qm-block-argument-text { align-self: center; padding: 14px 16px; }
.qm-arg-expert .qm-block-argument-item-title { font-size: 19px; font-weight: 700; margin-bottom: 6px; }
/* A certificação usa a MESMA cor do nome. Com --qm-muted ela apagava demais. */
.qm-arg-expert .qm-block-argument-item-body { font-size: 13.5px; line-height: 1.5; color: var(--qm-text); }
@media (max-width: 600px) {
	.qm-arg-expert .qm-block-argument-media { width: 78px; height: 78px; }
	.qm-arg-expert .qm-block-argument-item { min-height: 94px; }
	.qm-arg-expert .qm-block-argument-item-title { font-size: 17px; }
}
/* Uma linha de certificação: selo + texto. É FLEX para o selo centrar na linha —
   com o selo solto no meio do texto ele encostava na base das letras. */
.qm-cert { display: flex; align-items: center; gap: 7px; }
.qm-cert + .qm-cert { margin-top: 5px; }
/* O selo: círculo PREENCHIDO com o check vazado, como o BM — não o glifo solto. */
.qm-cert-ok {
	display: inline-flex; align-items: center; justify-content: center;
	width: 13px; height: 13px; border-radius: 50%; flex: none;
	background: var(--qm-primary); color: var(--qm-primary-text);
	font-size: 8px; font-weight: 700; line-height: 1;
}
/* Selo com ARTE no lugar do glifo: o BetterMe usa um brasão serrilhado, não o disco liso, e é
   a própria arte que carrega a cor. Sem o fundo do disco atrás, senão sobram dois selos. */
.qm-cert-ok.is-arte { background: none; width: 15px; height: 15px; }
.qm-cert-ok.is-arte img { width: 100%; height: 100%; display: block; object-fit: contain; }
/* coach — a fala do treinador e a credencial dele num CARTÃO SÓ, separados por um filete.
   É a tela de projeção do BetterMe (print 50). Medido lá: cartão 552x299 em #22211D,
   respiro de 26px, filete em y=870, foto 80x80, citação em serifada itálica ~19px/1.62 com
   uma aspa grande à esquerda, e o trecho em destaque na cor de acento (rgb 223,129,49 —
   praticamente o nosso laranja). Detalhe que só se vê medindo: aqui o selo da certificação
   é CREME, não laranja; o laranja fica por conta do trecho da citação. */
.qm-arg-coach {
	max-width: 552px; margin: 24px auto 0;
	background: var(--qm-card-2, #22211D); border-radius: 16px; padding: 26px;
}
.qm-arg-coach .qm-block-argument-quote {
	position: relative; padding-left: 44px;
	font-family: Georgia, 'Times New Roman', serif; font-style: italic;
	font-size: 19px; line-height: 1.45; color: var(--qm-text);
}
.qm-arg-coach .qm-block-argument-quote::before {
	content: '\201C'; position: absolute; left: 0; top: -4px;
	font-size: 46px; line-height: 1; color: var(--qm-text); opacity: .5;
}
.qm-arg-coach .qm-block-argument-quote .qm-par { height: 0.45em; }
/* O filete só existe para SEPARAR a citação da credencial. Sem citação — a tela do treinador do
   Shadow Boxing é assim — ele virava um risco solto no topo do cartão, separando nada. Por isso
   o seletor de irmão adjacente: quem tem citação continua igual. */
.qm-arg-coach .qm-block-argument-quote + .qm-block-argument-items {
	margin-top: 20px; padding-top: 26px;
	border-top: 1px solid var(--qm-border, rgba(255,255,255,.10));
}
.qm-arg-coach .qm-block-argument-item {
	background: none; padding: 0; gap: 16px; align-items: center; border-radius: 0;
}
.qm-arg-coach .qm-block-argument-media {
	width: 96px; height: 96px; flex: none; border-radius: 10px;
	background: transparent; overflow: hidden;
}
.qm-arg-coach .qm-block-argument-item-title { font-size: 20px; font-weight: 700; margin-bottom: 7px; }
.qm-arg-coach .qm-block-argument-item-body { font-size: 13.5px; line-height: 1.5; color: var(--qm-text); }
/* Cargo do treinador, entre o nome e as credenciais: menor e apagado, como no BetterMe. */
.qm-arg-coach .qm-coach-cargo { color: var(--qm-muted); margin-bottom: 9px; }
/* O selo da certificação segue a MARCA (laranja), como na tela dos três especialistas.
   No BetterMe ele é creme nas duas telas — o laranja é escolha nossa, e ter dois selos
   de cor diferente no mesmo funil seria pior do que divergir deles. */
@media (max-width: 600px) {
	.qm-arg-coach { padding: 20px; }
	/* A citação é o texto mais apertado do funil de propósito: no celular ela dividia a
	   tela com a foto do especialista e, arejada, empurrava o botão para fora da dobra.
	   1,4 a 17px dá 23,8px entre linhas — abaixo do passo de 25,6px do corpo comum, e é
	   isso que se quer aqui. O desktop desceu junto (1,45) pelo mesmo motivo. */
	.qm-arg-coach .qm-block-argument-quote { font-size: 17px; line-height: 1.4; padding-left: 34px; }
	.qm-arg-coach .qm-block-argument-quote::before { font-size: 38px; }
	.qm-arg-coach .qm-block-argument-media { width: 76px; height: 76px; }
	.qm-arg-coach .qm-block-argument-item-title { font-size: 18px; }
}

/* hero — variante BetterMe-style: imagem grande ao lado de texto */
.qm-arg-hero .qm-block-argument-item { gap: 24px; align-items: center; padding: 20px; }
.qm-arg-hero .qm-block-argument-media { width: 45%; max-width: 360px; height: auto; aspect-ratio: 4/3; border-radius: 16px; background: transparent; }
.qm-arg-hero .qm-block-argument-item-title { font-size: 22px; font-weight: 800; line-height: 1.2; margin-bottom: 8px; }
.qm-arg-hero .qm-block-argument-item-body { font-size: 15px; }
@media (max-width: 600px) {
	.qm-arg-hero .qm-block-argument-item { flex-direction: column !important; gap: 16px; text-align: center; }
	.qm-arg-hero .qm-block-argument-media { width: 100%; max-width: 100%; }
	.qm-arg-hero .qm-block-argument-item-title { font-size: 18px; }
}
.qm-block-argument-emoji { font-size: 32px; }
.qm-block-argument-text { flex: 1; min-width: 0; }
.qm-block-argument-item-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.qm-block-argument-item-body { font-size: 13px; color: var(--qm-muted); line-height: 1.5; }
@media (max-width: 600px) {
	.qm-arg-grid2 .qm-block-argument-items,
	.qm-arg-grid3 .qm-block-argument-items,
	.qm-arg-grid4 .qm-block-argument-items { grid-template-columns: 1fr; }
}

/* carousel — slides autoplay */
.qm-block-carousel { position: relative; margin: 20px 0; overflow: hidden; border-radius: 12px; }
.qm-block-carousel-viewport { overflow: hidden; }
.qm-block-carousel-track { display: flex; transition: transform 0.45s cubic-bezier(.22,.61,.36,1); }
.qm-block-carousel-slide { flex-shrink: 0; padding: 16px; box-sizing: border-box; text-align: center; background: var(--qm-card); }
.qm-block-carousel-img { max-width: 100%; height: auto; border-radius: 8px; margin-bottom: 12px; }
.qm-block-carousel-title { font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.qm-block-carousel-body { font-size: 13px; color: var(--qm-muted); line-height: 1.5; }
.qm-block-carousel-dots { display: flex; justify-content: center; gap: 8px; padding: 12px 0; }
.qm-block-carousel-dot {
	width: 8px; height: 8px; border-radius: 50%; background: #d1d5db;
	border: 0; padding: 0; cursor: pointer; transition: background .2s;
}
.qm-block-carousel-dot.is-active { background: var(--qm-primary); }
.qm-block-carousel-arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 40px; height: 40px; border-radius: 50%; border: 0;
	background: rgba(255,255,255,0.95); color: #111; font-size: 24px; line-height: 1; font-weight: 700;
	cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.25);
	display: flex; align-items: center; justify-content: center;
	z-index: 5; transition: background .15s, transform .15s;
}
.qm-block-carousel-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.qm-block-carousel-arrow.qm-arrow-prev { left: 10px; }
.qm-block-carousel-arrow.qm-arrow-next { right: 10px; }
/* PARTE 7: carousel com efeito 3D (slides empilhados, rotateY+scale na transição) — estilo
   BetterMe "app tudo em um". Ideal p/ prints de tela (portrait). */
.qm-carousel-3d { overflow: visible; background: transparent; }
.qm-carousel-3d .qm-block-carousel-viewport { overflow: visible; perspective: 1200px; height: clamp(380px, 78vw, 520px); position: relative; }
.qm-carousel-3d .qm-block-carousel-track { display: block; width: 100%; height: 100%; transform: none; transition: none; transform-style: preserve-3d; }
.qm-carousel-3d .qm-block-carousel-slide {
	position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; background: transparent;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .6s ease;
	backface-visibility: hidden; will-change: transform, opacity;
}
.qm-carousel-3d .qm-block-carousel-img { height: 100%; width: auto; max-width: 100%; object-fit: contain; margin: 0; border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.qm-carousel-3d .qm-block-carousel-slide.is-active { transform: rotateY(0) translateX(0) scale(1); opacity: 1; z-index: 2; }
.qm-carousel-3d .qm-block-carousel-slide.is-left  { transform: rotateY(-38deg) translateX(-42%) scale(.82); opacity: 0; z-index: 1; }
.qm-carousel-3d .qm-block-carousel-slide.is-right { transform: rotateY(38deg) translateX(42%) scale(.82); opacity: 0; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
	.qm-carousel-3d .qm-block-carousel-slide { transition: opacity .4s ease; }
	.qm-carousel-3d .qm-block-carousel-slide.is-left, .qm-carousel-3d .qm-block-carousel-slide.is-right { transform: none; }
}

/* effect:"fan" — vitrine de 5 telas de app em leque estático (BetterMe seção app).
   Todos os slides visíveis; central maior/à frente, laterais recuados/dimmer (transform inline no JS). */
.qm-carousel-fan { overflow: visible; background: transparent; }
.qm-carousel-fan .qm-block-carousel-viewport {
	overflow: visible; perspective: 1400px; height: clamp(320px, 42vw, 480px);
	display: flex; align-items: flex-end; justify-content: center;
}
.qm-carousel-fan .qm-block-carousel-track {
	display: flex; align-items: flex-end; justify-content: center; height: 100%;
	transform: none; transition: none; transform-style: preserve-3d; width: auto;
}
.qm-carousel-fan .qm-block-carousel-slide {
	position: relative; inset: auto; width: auto; height: 100%; padding: 0; background: transparent;
	margin: 0 -2.5%; transform-origin: bottom center; transition: transform .4s ease;
	display: flex; align-items: flex-end;
}
.qm-carousel-fan .qm-block-carousel-img {
	height: 100%; width: auto; max-width: none; object-fit: contain; margin: 0;
	border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
/* Mobile: leque não cabe → vira scroll horizontal com snap (swipeable), telas legíveis. */
@media (max-width: 720px) {
	.qm-carousel-fan .qm-block-carousel-viewport { overflow-x: auto; scroll-snap-type: x mandatory; perspective: none; justify-content: flex-start; height: 62vh; -webkit-overflow-scrolling: touch; }
	.qm-carousel-fan .qm-block-carousel-track { width: max-content; }
	.qm-carousel-fan .qm-block-carousel-slide { transform: none !important; opacity: 1 !important; margin: 0 6px; scroll-snap-align: center; }
}

/* MARQUEE — telas do app em LOOP CONTÍNUO (réplica do alcateia-elementor, que o user validou):
   gap pequeno, MÁSCARA nas bordas (dissolve), aspect 9/16 + drop-shadow, 2 cópias = sem emenda.
   NÃO pausa no hover — só o slide sob o cursor dá um leve zoom. Respeita prefers-reduced-motion. */
.qm-carousel-marquee {
	overflow: hidden; background: transparent; padding: 28px 0;
	/* Fura o cap do .qm-result (860px) → banda mais larga estilo BetterMe (~5 mockups à vista em vez de 4).
	   Capado em 1280px pra não ficar 100vw absurdo em telas ultrawide (mostraria 7+). */
	width: min(100vw, 1280px); margin-left: 50%; transform: translateX(-50%);
	-webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.qm-carousel-marquee .qm-block-carousel-viewport { overflow: visible; }
.qm-carousel-marquee .qm-block-carousel-track { display: flex; gap: 2px; width: max-content; align-items: center; transition: none; animation: qm-marquee 38s linear infinite; }
/* O respiro entre os mockups NÃO vem do gap (2px): os prints são mais estreitos (~0.49)
   que o slot 9/16 (0.563), então o object-fit:contain deixa ~6,5% de vão vazio de cada
   lado DENTRO do slide. A margem negativa come esse vão e aproxima as telas, sem mexer
   na altura do bloco (o que mudar o aspect-ratio faria). */
.qm-carousel-marquee .qm-block-carousel-slide { flex: 0 0 auto; width: clamp(175px, 21vw, 250px); padding: 0; margin: 0 -10px; background: transparent; transition: transform .3s ease; }
.qm-carousel-marquee .qm-block-carousel-slide:hover { transform: scale(1.1); position: relative; z-index: 2; }
.qm-carousel-marquee .qm-block-carousel-img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: contain; filter: var(--qm-mockup-shadow, drop-shadow(0 18px 30px rgba(0,0,0,.45))); display: block; margin: 0; border-radius: 0; }
@keyframes qm-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 1px)); } }
@media (prefers-reduced-motion: reduce) { .qm-carousel-marquee .qm-block-carousel-track { animation: none; } }
/* Mobile: slide menor → o vão interno também é menor, então a margem negativa acompanha. */
@media (max-width: 600px) { .qm-carousel-marquee .qm-block-carousel-slide { width: clamp(165px, 52vw, 225px); margin: 0 -8px; } }
/* Mobile: mockups PNG têm topo transparente → o gap ACIMA do carrossel parecia maior que as demais
   seções mesmo com o total = title-gap. Enxuga o padding-top no mobile p/ compensar (gap real ~16px). */
@media (max-width: 720px) { .qm-result .qm-carousel-marquee { padding-top: 12px; } }

/* COVERFLOW — trilho contínuo (base marquee) + JS rAF escala/desbota slides pela distância ao centro.
   Tela central dá ZOOM e opaca; laterais encolhem/desbotam; bordas DISSOLVEM via máscara (fim do corte seco). */
.qm-carousel-coverflow { overflow: hidden; background: transparent; }
.qm-carousel-coverflow .qm-block-carousel-viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
}
.qm-carousel-coverflow .qm-block-carousel-track { display: flex; width: max-content; align-items: center; transition: none; animation: qm-marquee 30s linear infinite; will-change: transform; }
/* CONTÍNUO: sem pausa no hover (user quer rodando sempre). */
/* margin negativo = telefones JUNTOS/sobrepostos (o central, com z-index maior, fica na frente) = BetterMe. */
.qm-carousel-coverflow .qm-block-carousel-slide { flex: 0 0 auto; width: auto; padding: 0; background: transparent; margin-right: -16px; transform-origin: center center; }
.qm-carousel-coverflow .qm-block-carousel-img { height: 340px; width: auto; max-width: none; object-fit: contain; border-radius: 18px; display: block; margin: 0; }
@media (prefers-reduced-motion: reduce) { .qm-carousel-coverflow .qm-block-carousel-track { animation: none; } }
@media (max-width: 600px) { .qm-carousel-coverflow .qm-block-carousel-img { height: 240px; } .qm-carousel-coverflow .qm-block-carousel-slide { margin-right: -10px; } }

/* Raspadinha (et.73-74) — cupom com canvas raspável (scratch_card) ------- */
.qm-scratch { display: flex; flex-direction: column; align-items: center; padding: 8px 0 4px; }
.qm-scratch-card {
	position: relative; width: 100%; max-width: 300px;
	/* o bilhete é escuro em todo tema escuro; o tema claro troca por `scratch_bg`/`scratch_text` */
	background: var(--qm-scratch-bg, #241c14); border-radius: 18px;
	box-shadow: 0 10px 30px rgba(0,0,0,.35);
	/* mata a seleção azul de texto ao arrastar/raspar */
	user-select: none; -webkit-user-select: none; -ms-user-select: none; -webkit-touch-callout: none;
}
/* Topo = área revelável (desconto) — canvas fica por cima via position absolute. */
.qm-scratch-top {
	position: relative; min-height: 200px; padding: 26px 22px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; overflow: hidden;
	border-radius: 18px 18px 0 0;
}
.qm-scratch-amount { line-height: .9; }
.qm-scratch-pct { font-size: 64px; font-weight: 800; color: var(--qm-highlight); letter-spacing: -1px; }
.qm-scratch-disc { font-size: 26px; font-weight: 700; color: var(--qm-scratch-text, #ffffff); margin-top: 2px; }
.qm-scratch-note { font-size: 14px; color: var(--qm-muted); margin-top: 10px; line-height: 1.4; max-width: 220px; }
.qm-scratch-canvas {
	position: absolute; inset: 0; width: 100%; height: 100%;
	border-radius: 18px 18px 0 0; cursor: pointer; touch-action: none;
	transition: opacity .4s ease;
}
.qm-scratch-canvas:active { cursor: pointer; }
.qm-scratch-card.is-revealed .qm-scratch-canvas { opacity: 0; pointer-events: none; }
/* Perfuração (linha tracejada com recortes laterais) entre desconto e código. */
.qm-scratch-perf {
	position: relative; height: 0; border-top: 2px dashed var(--qm-border, rgba(255,255,255,.22));
	margin: 0 14px;
}
.qm-scratch-perf::before, .qm-scratch-perf::after {
	content: ''; position: absolute; top: -11px; width: 20px; height: 20px;
	border-radius: 50%; background: var(--qm-bg);
}
.qm-scratch-perf::before { left: -24px; }
.qm-scratch-perf::after { right: -24px; }
.qm-scratch-bottom { padding: 16px 22px 20px; text-align: center; }
.qm-scratch-promo-label { font-size: 13px; color: var(--qm-muted); margin-bottom: 4px; }
.qm-scratch-promo-code { font-size: 20px; font-weight: 800; color: var(--qm-scratch-text, #ffffff); display: flex; align-items: center; justify-content: center; gap: 8px; word-break: break-all; }
.qm-scratch-check { color: var(--qm-accent, #22c55e); }
/* Fallback p/ revelar sem raspar (mobile/sem-canvas). Some após revelar. */
.qm-scratch-reveal-btn {
	margin-top: 18px; background: transparent; border: 1px solid var(--qm-border, rgba(255,255,255,.2));
	color: var(--qm-muted); font-size: 13px; font-weight: 600; padding: 9px 20px;
	border-radius: 999px; cursor: pointer; transition: border-color .15s, color .15s;
}
.qm-scratch-reveal-btn:hover { border-color: var(--qm-primary); color: var(--qm-text); }
.qm-scratch-card.is-revealed ~ .qm-scratch-reveal-btn { display: none; }
/* PARTE 6: aviso "desconto aplicado no checkout" — surge ao revelar (verde, com fade). */
.qm-scratch-applied {
	margin-top: 16px; max-height: 0; opacity: 0; overflow: hidden;
	font-size: 13.5px; font-weight: 700; color: var(--qm-accent, #22c55e); text-align: center;
	transition: opacity .45s ease .15s, max-height .45s ease;
}
.qm-scratch-card.is-revealed ~ .qm-scratch-applied { max-height: 60px; opacity: 1; }

/* Alinhamento responsivo de título/subtítulo (config no builder, desktop+mobile SEPARADOS).
   qm-ald-* = desktop (≥768px) · qm-alm-* = mobile (<768px). Vêm depois de .qm-title/.qm-subtitle
   no arquivo → sobrescrevem o text-align:center base por ordem de fonte. */
/* `margin-left/right` junto do text-align porque .qm-title/.qm-subtitle têm
   `max-width: 560px; margin: … auto` — a CAIXA fica centrada mesmo com o texto à
   esquerda. Numa etapa de 680px isso jogava o título 60px para dentro enquanto o
   parágrafo abaixo começava na borda: título e corpo desencontrados (medido ao vivo em
   "Pode contar com a gente!", título em x=440 e texto em x=380). Alinhar o texto tem
   que alinhar a caixa também.
   Só esquerda e direita mexem na margem: o centro já é o comportamento nativo de quem
   tem `margin: auto`, e quem NÃO tem (o .qm-subtitle, de propósito) não deve ganhar. */
@media (min-width: 768px) {
	.qm-ald-left   { text-align: left;   margin-left: 0; margin-right: auto; }
	.qm-ald-center { text-align: center; }
	.qm-ald-right  { text-align: right;  margin-left: auto; margin-right: 0; }
}
@media (max-width: 767px) {
	.qm-alm-left   { text-align: left;   margin-left: 0; margin-right: auto; }
	.qm-alm-center { text-align: center; }
	.qm-alm-right  { text-align: right;  margin-left: auto; margin-right: 0; }
}

/* Selo do cabeçalho (step.badge) — o chip redondo com que o BetterMe abre as telas de
   acolhimento. Medido no print deles: círculo de 48px, ícone apagado, colado na mesma
   margem esquerda do título, com 14px até ele. Só existe onde a etapa pedir. */
.qm-badge-linha { margin: var(--qm-r-top) 0 0; }
.qm-badge {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 50%;
	/* O desenho sai na cor da marca — laranja no masculino, rosa no feminino — em vez do
	   cinza apagado do BetterMe. O disco atrás segue em --qm-card, então o selo continua
	   discreto; só o glifo ganha cor. Vale para TODA etapa com `badge`. */
	background: var(--qm-card); color: var(--qm-primary);
}
.qm-badge-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px;
	font-size: 21px; line-height: 1; letter-spacing: -.14em; text-indent: -.07em;
}
/* O glifo de pessoa do biótipo desenha uma silhueta inteira dentro do viewBox, então
   ocupa menos caixa que o "✓✓" das outras telas de selo e sai pequeno demais no mesmo
   círculo de 48px. Só ele cresce; os demais selos seguem nos 28px. */
.qm-badge-ic--pessoa { width: 34px; height: 34px; }
.qm-badge-linha + .qm-title,
.qm-badge-linha + .qm-affirmation-title { margin-top: 14px; }

/* before_after — slider 2 imagens */
.qm-block-before-after { margin: 20px 0; }
.qm-block-ba-stage {
	position: relative; user-select: none; touch-action: none;
	overflow: hidden; border-radius: 12px; aspect-ratio: 16/10;
	background: #000;
}
.qm-block-ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.qm-block-ba-before-wrap { position: absolute; inset: 0; }
.qm-block-ba-handle {
	position: absolute; top: 0; bottom: 0; width: 4px; background: #fff; cursor: ew-resize;
	transform: translateX(-50%); box-shadow: 0 0 8px rgba(0,0,0,0.4);
}
.qm-block-ba-handle-knob {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 40px; height: 40px; border-radius: 50%; background: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 18px; color: #111; box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.qm-block-ba-label {
	position: absolute; top: 12px; padding: 4px 10px;
	background: rgba(0,0,0,0.65); color: #fff; font-size: 12px; font-weight: 600;
	border-radius: 4px; pointer-events: none;
}
.qm-block-ba-label-before { left: 12px; }
.qm-block-ba-label-after { right: 12px; }

/* chart_cartesian — plano XY + marker */
.qm-block-chart-cartesian { background: var(--qm-card); padding: 16px; border-radius: 12px; margin: 16px 0; }
.qm-block-chart-cartesian-wrap { width: 100%; }
.qm-block-chart-cartesian-svg { width: 100%; height: auto; display: block; }
.qm-block-chart-cartesian-legend { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; font-size: 12px; margin-top: 8px; }
.qm-block-chart-cartesian-legend-item { display: flex; align-items: center; gap: 6px; }
.qm-block-chart-cartesian-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* metrics — cards numéricos */
.qm-block-metrics { margin: 20px 0; }
.qm-block-metrics-title { font-size: 16px; font-weight: 700; margin: 0 0 12px; text-align: center; }
.qm-block-metrics-grid {
	display: grid; gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.qm-block-metric-card {
	background: var(--qm-card); padding: 14px 16px; border-radius: 10px;
	border-left: 4px solid var(--qm-primary);
	display: flex; flex-direction: column; gap: 4px;
	min-width: 0; overflow: hidden;
}
.qm-block-metric-value {
	font-size: clamp(18px, 4vw, 28px); font-weight: 800; line-height: 1.1;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	max-width: 100%;
}
.qm-block-metric-label { font-size: 12px; color: var(--qm-muted); overflow: hidden; text-overflow: ellipsis; }

/* ── ⓘ de explicação nos atributos do perfil + modal ──────────────────
   Usado no "perfil de bem-estar" (tipo de corpo etc). O botão só aparece
   quando o item traz `info` no schema. O modal é anexado no <body>, então
   não sofre com overflow/stacking do card. */
.qm-attr-info {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	width: 16px; height: 16px; margin-left: 7px; padding: 0; vertical-align: middle;
	font: 700 11px/1 var(--qm-font); font-style: italic;
	color: var(--qm-muted); background: none; cursor: pointer;
	border: 1px solid var(--qm-border, rgba(255,255,255,.28)); border-radius: 50%;
	transition: color .15s ease, border-color .15s ease;
}
/* O círculo fica com 16px (discreto, como no BetterMe), mas a área de TOQUE cresce
   para 28px via pseudo-elemento — no celular um alvo de 16px erra o dedo. */
.qm-attr-info::after { content: ''; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%); }
.qm-attr-info:hover { color: var(--qm-text); border-color: var(--qm-text); }
.qm-attr-info:focus-visible { outline: 2px solid var(--qm-primary); outline-offset: 2px; }

.qm-info-modal-backdrop {
	position: fixed; inset: 0; z-index: 99999;
	display: flex; align-items: center; justify-content: center; padding: 18px;
	background: rgba(0, 0, 0, .62);
}
.qm-info-modal-box {
	position: relative; width: 100%; max-width: 360px;
	background: var(--qm-surface-raised, #141414); color: var(--qm-text);
	border: 1px solid var(--qm-border, rgba(255,255,255,.1)); border-radius: 16px;
	padding: 18px 20px 20px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
/* padding-right = 8 (offset do X) + 28 (largura do X) + folga, senão um título longo passa por baixo do ×. */
.qm-info-modal-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; padding-right: 40px; }
.qm-info-modal-body { font-size: 15px; line-height: 1.5; color: var(--qm-muted); }
.qm-info-modal-x {
	position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
	display: flex; align-items: center; justify-content: center;
	font: 400 22px/1 var(--qm-font); color: var(--qm-muted);
	background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.qm-info-modal-x:hover { color: var(--qm-text); }
.qm-info-modal-x:focus-visible { outline: 2px solid var(--qm-primary); outline-offset: 2px; }