/* ========================================================================== 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 { --qm-space-top: 24px; /* topo do conteúdo */ --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) { .qm-main--wide { justify-content: center; padding-left: 40px; padding-right: 40px; } } /* 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). */ html { 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) */ .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 { position: fixed; bottom: 0; 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. */ width: min(calc(46vw * var(--split-bg-scale-d, 1)), calc((100dvh - var(--qm-shell-top)) * 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; } .qm-split-right.qm-split-blend .qm-split-img::after { background: linear-gradient(to right, var(--qm-bg) 0, var(--qm-bg) 8%, transparent 52%), linear-gradient(to top, var(--qm-bg) 0, transparent 14%); } .qm-split-left.qm-split-blend .qm-split-img::after { background: linear-gradient(to left, var(--qm-bg) 0, var(--qm-bg) 8%, transparent 52%), linear-gradient(to top, var(--qm-bg) 0, transparent 14%); } /* ── 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; } .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) 8%, transparent 52%), linear-gradient(to bottom, var(--qm-bg) 0, transparent 26%); } .qm-split-left.qm-split-blend .qm-split-img::after { background: linear-gradient(to left, var(--qm-bg) 0, var(--qm-bg) 8%, transparent 52%), linear-gradient(to bottom, var(--qm-bg) 0, transparent 26%); } /* 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 nas palavras-chave de títulos/afirmações/benefícios. Cor de destaque do projeto. */ .qm-hl { color: var(--qm-highlight); font-weight: 700; } .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; } .qm-consent-txt a { color: var(--qm-text); text-decoration: underline; } /* Aviso vermelho quando tenta continuar sem marcar o consentimento obrigatório. */ .qm-consent-warn { color: #ff5a5a; font-size: 13px; font-weight: 600; margin: 6px 2px 0; 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)); } } /* 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; } .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); } .qm-option-desc { font-size: 13px; font-weight: 400; line-height: 1.3; color: var(--qm-muted); } /* Altura das opções — PRESET GLOBAL (config no construtor → Design → classe no ). 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). */ .qm-options--2col .qm-option { padding: calc(16px + var(--opt-pad-d, 0px)) 18px; align-items: flex-start; } .qm-options--2col .qm-option .qm-option-radio, .qm-options--2col .qm-option .qm-option-check { margin-top: 2px; } .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 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 { grid-template-columns: repeat(4, 1fr); gap: 24px; /* D2: cards expandidos (estilo BetterMe) — ~1040px com respiro lateral. 4 cards ≈ 235px cada. Aspect ratio da imagem é configurável por step (classes abaixo). */ 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). */ .qm-option-img img { width: 100%; aspect-ratio: 4/5; height: auto; 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 */ } /* 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; 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; } /* 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; } /* 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

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; } /* 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: 12px; 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: 12px; 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: 24px; } .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: 11px; } .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; } /* 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)); } .qm-feature-list--cards .qm-feature-item-icon { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; background: var(--qm-border, rgba(255,255,255,.06)); color: var(--qm-primary); font-size: 24px; 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; } .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; } .qm-plan-card { display: flex; flex-direction: column; 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; } /* 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); } /* 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; } } /* 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; } /* 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 8px 20px rgba(0,0,0,.45)); } .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); } @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; } } .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; } .qm-rheader-brand { font-size: 16px; } .qm-rheader-right { gap: 9px; } .qm-rheader-cta { padding: 9px 13px; font-size: 12px; } .qm-rheader-burger { width: 36px; height: 36px; } .qm-rheader-num { font-size: 20px; } .qm-rheader-colon { font-size: 17px; } .qm-rheader-unit-lbl { display: none; } .qm-rheader-clockwrap { gap: 4px; } } /* 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) ------ */ .qm-block-text { font-size: 16px; line-height: 1.6; margin: 0 0 16px; color: var(--qm-text); } .qm-block-text.qm-text-lead { font-size: 18px; color: var(--qm-muted); } .qm-block-text.qm-text-small { font-size: 13px; 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 — 3 cards de resultado antes/depois (BetterMe et.75). Prefixo rgrid p/ não colidir com .qm-result-* */ .qm-rgrid-wrap { padding: 8px 0; } .qm-rgrid { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); 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: 16px; } .qm-rgrid-result { font-weight: 700; font-size: 14px; color: var(--qm-highlight); } .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; } @media (max-width: 900px) { .qm-rgrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .qm-rgrid { grid-template-columns: 1fr; max-width: 420px; } } /* 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: .9; display: inline-block; } .qm-featured-logos { display: flex; justify-content: center; align-items: center; gap: 36px; flex-wrap: wrap; } .qm-featured-logos img { height: 30px; width: auto; filter: grayscale(1) brightness(1.6); opacity: .7; } @media (max-width: 600px) { .qm-featured-logos { gap: 20px; } .qm-featured-logos img { height: 22px; } } /* 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; } .qm-imc-connector { position: absolute; left: 0; top: 26px; bottom: 7px; width: 2px; transform: translateX(-50%); background: 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; } .qm-projection-predict { text-align: center; font-size: 19px; color: var(--qm-muted); line-height: 1.4; margin: 0 0 14px; } .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 auto 20px; } .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; } .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; } /* 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; } /* 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; } .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-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"; } .qm-wellness-imc { padding: 16px 16px 4px; } .qm-wellness-attrs { padding: 8px 12px 16px 16px; gap: 8px; } .qm-wellness-right { padding: 0; } .qm-wellness-avatar { object-fit: cover; object-position: center top; } .qm-wellness-attr { padding: 9px 11px; gap: 10px; } .qm-wellness-attr-ic { font-size: 16px; width: 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-bottom: 10px; } .qm-projection-badge { margin-bottom: 14px; } .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 */ .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; } /* 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; } .qm-carousel-marquee .qm-block-carousel-slide { flex: 0 0 auto; width: clamp(175px, 21vw, 250px); padding: 0; margin: 0; 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: 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; } } @media (max-width: 600px) { .qm-carousel-marquee .qm-block-carousel-slide { width: clamp(165px, 52vw, 225px); } } /* 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; background: #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-text); 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-text); 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. */ @media (min-width: 768px) { .qm-ald-left { text-align: left; } .qm-ald-center { text-align: center; } .qm-ald-right { text-align: right; } } @media (max-width: 767px) { .qm-alm-left { text-align: left; } .qm-alm-center { text-align: center; } .qm-alm-right { text-align: right; } } /* 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; }