/* Testes de Perfil Engine v1.7 — layout estrutural.
 * v1.7 (só CSS/layout): (1) TODO botão de ação centraliza o texto na
 * horizontal E na vertical (inline-flex + align-items/justify-content no
 * CONTAINER — lição dos Diários: não basta text-align no filho). Com o
 * padrão da casa button_padding_y=0 (v1.6), a altura vem de min-height
 * (em, escala com a fonte) e o texto centra por align-items, nunca por
 * padding. Vale para: começar/avançar/voltar, splash (clássico), submit
 * do lead, CTA/refazer do resultado, overlay tempo-acabou e pop-up trivia.
 * (2) Botões de GÊNERO (.pf-gender-opt) com texto centrado nos dois eixos,
 * inclusive rótulo em 2 linhas — as demais opções de resposta (.pf-option)
 * seguem à esquerda de propósito (opção longa lê melhor assim).
 * (3) Barra de progresso ganha respiro (18px) antes do texto seguinte —
 * no formulário de lead ela ficava COLADA no título "Pronto! ...".
 * v1.5 acrescenta o bloco de HARMONIA (.pf-harmony) no resultado e reusa
 * .pf-range-text/.pf-result-name para as FAIXAS do modelo Perfil (saúde).
 * v1.3 acrescenta a TRAVA DE CONSENTIMENTO (.pf-consent) na tela inicial
 * e o estado desabilitado do botão Começar (inclusive na splash).
 * v1.1 acrescenta os blocos dos MODELOS portados do Quiz Engine:
 * chips + pop-up + score/faixas (trivia) e splash + card de categoria
 * (clássico), com prefixo pf-. O modelo "perfil" segue intocado.
 * Cores/medidas vêm das vars --pf-* do <style> escopado por instância
 * (valores concretos + !important nas peças críticas — lição do Quiz Engine
 * contra tema/builder/otimizador de CSS). */

.pf-app{max-width:720px;margin:0 auto;box-sizing:border-box;font-family:var(--pf-ff-content,inherit);height:auto;min-height:0;overflow:visible}
.pf-app *,.pf-app *:before,.pf-app *:after{box-sizing:border-box}
.pf-stage{min-width:0;position:relative}
.pf-loading{text-align:center;color:#999;padding:30px 0}
.pf-screen{animation:pffade .25s ease}
@keyframes pffade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- intro ---------- */
.pf-title{margin:0 0 10px;color:var(--pf-title-color,#241A44);font-family:var(--pf-ff-title,inherit);font-size:var(--pf-fs-title,30px);line-height:1.25}
.pf-subtitle{margin:0 0 12px;color:var(--pf-subtitle-color,#6b6257);font-family:var(--pf-ff-subtitle,inherit);font-size:var(--pf-fs-subtitle,18px)}
.pf-intro-text{margin:0 0 16px;color:var(--pf-intro-color,#6b6257);font-family:var(--pf-ff-intro,inherit);font-size:var(--pf-fs-intro,16px);line-height:1.6}

/* ---------- EXTRA A: contador ---------- */
.pf-counter{margin:8px 0 16px;color:var(--pf-counter-color,#6b6257);font-size:14px;font-weight:700;letter-spacing:.02em}
.pf-counter-dot{color:var(--pf-progress-fill,#E0B15E);font-size:10px;vertical-align:2px}

/* ---------- gênero (opcional no início) ---------- */
.pf-gender{margin:6px 0 14px}
.pf-gender-title{margin:0 0 10px;color:var(--pf-question-color,#241A44);font-weight:700;font-size:var(--pf-fs-option,15px)}
.pf-gender-row{display:flex;gap:10px;flex-wrap:wrap}
/* v1.7 — as 3 caixas de gênero têm texto CENTRADO nos dois eixos (inclusive
 * o rótulo em 2 linhas). O reforço escopado com !important vive no PHP,
 * porque a regra escopada de .pf-option (text-align:left/flex-start) vence. */
.pf-gender-row .pf-gender-opt{width:auto !important;flex:1 1 140px;text-align:center;align-items:center;justify-content:center}
.pf-gender-opt .pf-opt-label{flex:0 1 auto;text-align:center}

/* ---------- v1.3: trava de consentimento (tela inicial) ---------- */
.pf-consent{margin:14px 0 16px;padding:14px 16px;border:1px solid var(--pf-option-border,#d9d2c6);border-radius:12px;background:#fff;text-align:left}
.pf-consent-text{margin:0 0 10px;color:var(--pf-disclaimer-color,#6b6257);font-size:14px;line-height:1.6}
.pf-consent-check{display:flex;align-items:flex-start;gap:9px;cursor:pointer;color:var(--pf-question-color,#241A44);font-weight:700;font-size:var(--pf-fs-option,15px);line-height:1.4}
.pf-consent-check input.pf-consent-cb{flex:0 0 auto;width:19px;height:19px;margin:1px 0 0;cursor:pointer;accent-color:var(--pf-likert-dot-selected,#E0B15E)}
.pf-consent-label{flex:1 1 auto;min-width:0}
/* splash (modelo Clássico): consentimento dentro do card colorido */
.pf-splash .pf-consent{text-align:left;margin:0 auto 18px;max-width:440px}
/* botão Começar desabilitado até o "Li e concordo" (v1.3) */
.pf-start:disabled,.pf-start[disabled],.pf-splash-btn:disabled,.pf-splash-btn[disabled]{opacity:.45;cursor:not-allowed}
.pf-splash-btn:disabled:hover,.pf-splash-btn[disabled]:hover{filter:none}

/* ---------- topo da pergunta: progresso + cronômetro ---------- */
.pf-q-top{display:flex;align-items:flex-start;gap:14px;margin:0 0 18px}
/* v1.7 — respiro de 18px entre a barra e o que vem abaixo (o caso do print:
 * tela de lead, barra colada no título "Pronto! Seu perfil está calculado.").
 * Dentro de .pf-q-top o respiro já vem do próprio .pf-q-top (18px), então
 * lá o margin zera pra não somar em dobro. */
.pf-progress-wrap{flex:1 1 auto;min-width:0;margin:0 0 18px}
.pf-q-top .pf-progress-wrap{margin:0}
.pf-progress-text{color:var(--pf-progress-label-color,#241A44);font-family:var(--pf-ff-progress,inherit);font-size:var(--pf-fs-progress,13px);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px}
.pf-progress{border-radius:999px;overflow:hidden}
.pf-progress-fill{display:block;height:100%;border-radius:999px;transition:width .35s ease}
.pf-timer{flex:0 0 auto;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:800;letter-spacing:.03em;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- pergunta ---------- */
.pf-question-text{margin:0 0 22px;text-align:center;color:var(--pf-question-color,#241A44);font-family:var(--pf-ff-question,inherit);font-size:var(--pf-fs-question,22px);line-height:1.4}

/* ---------- escala LIKERT (16personalities-like) ---------- */
.pf-likert{text-align:center}
.pf-likert-ends{display:flex;justify-content:space-between;margin:0 0 10px;gap:12px}
.pf-likert-end{color:var(--pf-likert-label-color,#6b6257);font-size:var(--pf-fs-option,15px);font-weight:700}
.pf-likert-end-left{text-align:left}
.pf-likert-end-right{text-align:right}
.pf-likert-row{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:520px;margin:0 auto}
.pf-likert-dot{flex:0 0 auto;border-radius:50%;background:#fff;cursor:pointer;padding:0;transition:transform .12s ease,background .12s ease,border-color .12s ease}
.pf-likert-dot:hover{transform:scale(1.1)}
.pf-likert-dot.is-selected{transform:scale(1.06)}
.pf-likert-picked{min-height:22px;margin:12px 0 0;color:var(--pf-likert-label-color,#6b6257);font-size:var(--pf-fs-option,15px);font-weight:700}

/* ---------- opções de escolha ---------- */
.pf-options-list{display:flex;flex-direction:column;gap:10px;min-width:0;height:auto}
.pf-option{cursor:pointer;font-family:var(--pf-ff-option,inherit);font-size:var(--pf-fs-option,15px);font-weight:700;transition:background .15s ease,color .15s ease;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.pf-opt-label{flex:1 1 auto;display:block;min-width:0;white-space:normal;overflow-wrap:anywhere;word-break:break-word;line-height:1.45;height:auto}

/* ---------- navegação ---------- */
.pf-nav{display:flex;justify-content:space-between;gap:12px;margin:26px 0 0}
.pf-nav .pf-forward{margin-left:auto}
.pf-nav .pf-btn:disabled{opacity:.45;cursor:default}

/* ---------- botões ---------- */
/* v1.7 — centralização nos DOIS eixos feita no CONTAINER do botão:
 * inline-flex + align-items + justify-content (text-align cobre a 2a linha).
 * Altura com button_padding_y=0 vem do min-height (não de padding). */
.pf-btn{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;font-weight:700;font-family:var(--pf-ff-btn,inherit);font-size:var(--pf-fs-btn,16px);text-decoration:none;transition:background .15s ease,color .15s ease;text-align:center;vertical-align:middle;min-height:2.6em;box-sizing:border-box;max-width:100%}
.pf-btn .pf-btn-label{display:inline-block;float:none;margin:0;text-align:center;line-height:1.3}
/* display:flex (nível de bloco) mantém o margin:auto centrando o PRÓPRIO
 * botão na tela; <button> não estica: largura segue fit-content */
.pf-start,.pf-submit{display:flex;margin:18px auto 0}
.pf-ghost{background:transparent !important;border:2px solid var(--pf-button-background,#241A44) !important;color:var(--pf-button-background,#241A44) !important}
a.pf-btn{line-height:normal}

/* ---------- EXTRA B: overlay "Seu tempo acabou!" ---------- */
.pf-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(20,14,40,.62);display:flex;align-items:center;justify-content:center;z-index:99999;padding:16px}
.pf-overlay-box{border-radius:16px;max-width:460px;width:100%;padding:30px 26px;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.pf-overlay-icon{font-size:44px;line-height:1;margin:0 0 10px}
.pf-overlay-title{margin:0 0 10px;font-size:24px;font-family:var(--pf-ff-title,inherit)}
.pf-overlay-sub{margin:0 0 18px;line-height:1.55;font-size:15px;opacity:.85}
.pf-overlay-actions{display:flex;flex-direction:column;gap:10px;align-items:center}
.pf-overlay-actions .pf-btn{width:100%}

/* ---------- formulário de lead ---------- */
.pf-form-title{margin:0 0 8px;color:var(--pf-title-color,#241A44);font-family:var(--pf-ff-title,inherit);font-size:var(--pf-fs-title,26px)}
.pf-form-note{margin:0 0 16px;color:var(--pf-intro-color,#6b6257);font-size:var(--pf-fs-content,16px);line-height:1.55}
.pf-field{margin:0 0 14px}
.pf-field label{display:block;margin:0 0 5px;color:var(--pf-label-color,#241A44);font-family:var(--pf-ff-label,inherit);font-size:var(--pf-fs-label,15px);font-weight:700}
.pf-field input{width:100%;max-width:100%;padding:11px 12px;border:1px solid var(--pf-option-border,#d9d2c6);border-radius:8px;font-size:16px;background:#fff;color:#222}
.pf-field.has-error input{border-color:#c0392b}
.pf-error{color:#c0392b;font-size:13px;margin:5px 0 0}
.pf-hp{position:absolute !important;left:-9999px !important;opacity:0;height:0;width:0}
.pf-skip-wrap{text-align:center;margin:12px 0 0}
.pf-skip{color:var(--pf-skip-color,#8a8378);font-size:14px;text-decoration:underline}

/* ---------- resultado ---------- */
.pf-screen-result{text-align:center}
.pf-result-badge{display:inline-block;color:var(--pf-badge-color,#a8853b);border:1px solid var(--pf-badge-color,#a8853b);border-radius:999px;padding:5px 16px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px}
.pf-result-label{color:var(--pf-badge-color,#a8853b);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0 0 4px}
.pf-result-name{margin:0 0 14px;color:var(--pf-result-title-color,#241A44);font-family:var(--pf-ff-title,inherit);font-size:var(--pf-fs-title,28px)}
.pf-result-type{font-size:44px;font-weight:900;letter-spacing:.12em;color:var(--pf-result-title-color,#241A44);font-family:var(--pf-ff-title,inherit);margin:0 0 6px}
.pf-result-tagline{margin:0 0 14px;color:var(--pf-subtitle-color,#6b6257);font-style:italic;font-size:var(--pf-fs-subtitle,18px)}
.pf-section-title{margin:22px 0 10px;color:var(--pf-result-title-color,#241A44);font-size:16px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;text-align:left}
.pf-chart-wrap{margin:0 0 8px}
.pf-chart{display:block}
.pf-dim-block{text-align:left;margin:0 0 12px;padding:14px 16px;border:1px solid var(--pf-container-border,#e8e1d4);border-radius:12px;background:#fff}
.pf-dim-dominant{border-width:2px}
.pf-dim-name{margin:0 0 6px;font-size:17px}
.pf-dim-desc{margin:0;color:var(--pf-text-color,#2a231c);line-height:1.65;font-size:var(--pf-fs-content,16px)}
.pf-offer{margin:20px 0 6px;padding:18px;border:1px solid var(--pf-option-border,#d9d2c6);border-radius:12px;background:#fff;text-align:center}
.pf-offer-image{display:block;max-width:100%;height:auto;border-radius:10px;margin:0 auto 12px}
.pf-offer-title{margin:0 0 8px;color:var(--pf-offer-title-color,#241A44);font-size:20px;font-family:var(--pf-ff-title,inherit)}
.pf-offer-text{margin:0;color:var(--pf-offer-text-color,#2a231c);line-height:1.6;font-size:var(--pf-fs-content,16px)}
.pf-actions{display:flex;flex-direction:column;gap:12px;align-items:center;margin:18px 0 0}

/* ---------- rodapé responsável ---------- */
.pf-help{margin:22px 0 0;padding:14px 16px;border-radius:12px;text-align:left}
.pf-help-title{display:block;margin:0 0 4px;font-size:15px}
.pf-help-text{margin:0;line-height:1.6;font-size:15px}
.pf-disclaimer{margin:16px 0 0;color:var(--pf-disclaimer-color,#6b6257);font-size:14px;line-height:1.6;text-align:left;border-left:3px solid var(--pf-badge-color,#a8853b);padding-left:12px}
.pf-orientation{text-align:left;color:var(--pf-text-color,#2a231c);line-height:1.65;font-size:var(--pf-fs-content,16px)}
.pf-orientation p{margin:0 0 10px}
.pf-refs{text-align:left;margin:0;padding:0 0 0 18px;color:var(--pf-refs-color,#6b6257);font-size:14px;line-height:1.7}
.pf-ref a{color:inherit;text-decoration:underline}

/* ---------- v1.1: chips da abertura (modelo Trivia) ---------- */
.pf-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.pf-chip{display:inline-block;color:#fff;border-radius:999px;padding:4px 14px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;font-size:13px}

/* ---------- v1.1: splash de abertura (modelo Clássico) ---------- */
.pf-splash{border-radius:16px;padding:46px 26px;text-align:center;background-size:cover;background-position:center;margin:0 0 14px}
.pf-splash-title{margin:0 0 10px;color:var(--pf-splash-title-color,#fff);font-family:var(--pf-ff-title,inherit);font-size:var(--pf-fs-title,30px);line-height:1.25}
.pf-splash-subtitle{margin:0 0 20px;color:var(--pf-splash-subtitle-color,#efe9dc);font-family:var(--pf-ff-subtitle,inherit);font-size:var(--pf-fs-subtitle,18px);line-height:1.5}
.pf-splash-btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;vertical-align:middle;min-height:2.6em;border:0;cursor:pointer;border-radius:999px;padding:13px 32px;font-weight:800;font-family:var(--pf-ff-btn,inherit);font-size:var(--pf-fs-btn,16px);line-height:1.3;transition:filter .15s ease}
.pf-splash-btn:hover{filter:brightness(.94)}

/* ---------- v1.1: pop-up de resposta (modelo Trivia) ---------- */
.pf-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(20,14,40,.62);display:flex;align-items:center;justify-content:center;z-index:99999;padding:16px}
.pf-popup{position:relative;border-radius:14px;max-width:520px;width:100%;max-height:86vh;overflow:auto;padding:26px;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.pf-popup-close{position:absolute;top:8px;right:12px;border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:inherit}
.pf-popup-test{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin:0 0 8px}
.pf-popup-title{margin:0 0 12px;font-size:20px;font-family:var(--pf-ff-question,inherit)}
.pf-popup-text{margin:0 0 14px;line-height:1.6;font-size:var(--pf-fs-content,16px)}
.pf-popup-dots{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.pf-popup-dot{width:22px;height:22px;border-radius:50%;background:#eee;font-size:11px;display:flex;align-items:center;justify-content:center;color:#666}
.pf-popup-dot.is-on{background:var(--pf-progress-fill,#E0B15E);color:#fff}
.pf-popup-continue{display:block;margin:16px auto 0}

/* ---------- v1.1: score + faixas (modelo Trivia) ---------- */
.pf-score-card{background:linear-gradient(135deg,var(--pf-score-grad1,#241A44),var(--pf-score-grad2,#37295e));border-radius:16px;padding:34px 22px;color:var(--pf-score-text-color,#fff);margin:0 0 18px}
.pf-score-headline{font-size:var(--pf-fs-subtitle,18px);font-weight:700;letter-spacing:.03em;margin:0 0 8px}
.pf-score-pct{font-size:56px;font-weight:900;line-height:1}
.pf-ranges-label{text-align:left}
.pf-ranges{list-style:none;margin:0 0 14px;padding:0;text-align:left}
.pf-range{padding:9px 12px;border:1px solid var(--pf-option-border,#d9d2c6);border-radius:8px;margin:0 0 8px;color:var(--pf-text-color,#2a231c);font-size:var(--pf-fs-content,16px)}
.pf-range.is-hit{border-color:var(--pf-range-hit-border,#E0B15E);border-width:2px;font-weight:700}
.pf-range-text{color:var(--pf-text-color,#2a231c);text-align:left;line-height:1.6;margin:0 0 14px;font-size:var(--pf-fs-content,16px)}

/* ---------- v1.1: card da categoria vencedora (modelo Clássico) ---------- */
.pf-cat-card{margin-top:6px}

/* ---------- v1.5: bloco HARMONIA no resultado (amor/trabalho/amizade) ---------- */
.pf-harmony{text-align:left}
.pf-harmony-block{text-align:left;margin:0 0 10px;padding:12px 16px;border:1px solid var(--pf-container-border,#e8e1d4);border-left:3px solid var(--pf-badge-color,#a8853b);border-radius:12px;background:#fff}
.pf-harmony-title{margin:0 0 6px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--pf-badge-color,#a8853b)}
.pf-harmony-text{margin:0;color:var(--pf-text-color,#2a231c);line-height:1.65;font-size:var(--pf-fs-content,16px)}
/* v1.5: faixa como manchete do resultado (modelo Perfil c/ faixas) */
.pf-range-name{line-height:1.3}

/* ---------- mobile ---------- */
@media(max-width:680px){
  .pf-result-type{font-size:36px}
  .pf-score-pct{font-size:44px}
  .pf-splash{padding:34px 16px}
}
@media(max-width:480px){
  .pf-q-top{flex-wrap:wrap}
  .pf-timer{order:-1;margin-left:auto}
  .pf-likert-row{gap:6px}
  .pf-likert-end{font-size:12px}
  .pf-start,.pf-submit{width:100%}
  .pf-nav{flex-wrap:wrap}
  .pf-overlay-box{padding:22px 16px}
  .pf-gender-row .pf-gender-opt{flex:1 1 100%}
  .pf-popup{padding:18px 14px}
}