/* teste.hqplay.com.br — tema HQ Play (mobile-first) */
:root{
  --navy:#0d1b3e; --ink:#0a1230; --gold:#e0a92e; --gold-2:#f4c752; --gold-3:#f0b429; --wa:#25d366;
  --gold-rgb:224,169,46; --ink-rgb:10,18,48; --on-gold:#2a2000;
  --text:#141b2e; --muted:#5b6478; --line:#e3e7f1; --ok:#16a34a; --bad:#c02626;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Manrope',system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);line-height:1.55;min-height:100vh;
  background:var(--ink);position:relative;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:-30px;z-index:-2;
  background:var(--t-hero) center/cover no-repeat;
  filter:blur(12px) brightness(.38) saturate(1.1);transform:scale(1.05);
}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(700px 420px at 50% -8%,rgba(var(--gold-rgb),.22),transparent 65%)}
a{color:var(--navy)}
h1,h2,h3{font-family:'Sora','Manrope',sans-serif;letter-spacing:-.01em;line-height:1.2;color:var(--navy)}

.t-wrap{width:min(100% - 28px,480px);margin:0 auto;padding:26px 0 40px}
.t-wrap.wide{width:min(100% - 28px,560px)}
.t-logo{display:block;margin:4px auto 18px;height:46px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}
.t-card{background:rgba(255,255,255,.97);border-radius:22px;box-shadow:0 24px 70px rgba(0,0,0,.45);padding:24px 20px}
.t-card+.t-card{margin-top:14px}
.t-head{text-align:center;margin-bottom:18px}
.t-head h1{font-size:1.45rem}
.t-head p{color:var(--muted);font-size:.95rem;margin-top:6px}
.t-badge{display:inline-flex;align-items:center;gap:6px;background:#fff6de;color:#8a6200;border:1px solid #f3dc9c;border-radius:999px;padding:5px 12px;font-weight:800;font-size:.76rem;letter-spacing:.03em;margin-bottom:10px}

/* formulário */
.t-field{margin-bottom:14px}
.t-field label{display:block;font-weight:700;font-size:.9rem;color:var(--navy);margin-bottom:6px}
.t-field input{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:1rem;color:var(--text);background:#fff}
.t-field input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(var(--gold-rgb),.25)}
.t-field small{display:block;color:var(--muted);font-size:.8rem;margin-top:5px}
.t-check{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--text);margin:10px 0;cursor:pointer}
.t-check input{width:20px;height:20px;accent-color:var(--gold);flex:none;margin-top:1px}
.t-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.t-via{background:#f0fdf4;border:1px solid #bbf7d0;color:#14532d;padding:12px 14px;border-radius:12px;font-size:.9rem;line-height:1.5;margin-bottom:16px}
.t-via b{color:#166534}
.t-err{background:#fef2f2;border:1px solid #fecaca;color:var(--bad);padding:11px 14px;border-radius:12px;font-size:.9rem;margin-bottom:14px}
.t-foot{color:rgba(255,255,255,.72);text-align:center;font-size:.82rem;margin-top:16px}
.t-foot a{color:var(--gold-2)}

/* botões */
.t-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:52px;padding:13px 18px;border:0;border-radius:13px;
  font:inherit;font-weight:800;font-size:1.02rem;cursor:pointer;text-decoration:none;transition:transform .12s,box-shadow .2s,filter .2s}
.t-btn:active{transform:scale(.99)}
.t-btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold-3));color:var(--on-gold);box-shadow:0 10px 24px -10px rgba(var(--gold-rgb),.9)}
.t-btn.gold:hover{filter:saturate(1.08) brightness(1.03)}
.t-btn.wa{background:var(--wa);color:#062b16;box-shadow:0 10px 24px -12px rgba(37,211,102,.9)}
.t-btn.line{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.t-btn.buy{background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;font-size:1.2rem;min-height:58px;box-shadow:0 10px 28px -8px rgba(22,163,74,.7);animation:pulso 2s ease-in-out infinite}
.t-btn svg{width:20px;height:20px;flex:none}
.t-btn[disabled]{opacity:.6;cursor:wait}
@keyframes pulso{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.t-link{background:none;border:0;color:var(--muted);font:inherit;font-size:.86rem;cursor:pointer;padding:0;margin-bottom:10px;display:inline-flex;gap:6px;align-items:center}

/* dados do teste */
.t-ok{color:var(--ok);font-size:1.4rem}
.t-dados{border:1px solid var(--line);border-radius:14px;padding:4px 14px;margin:16px 0 10px}
.t-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.t-row:last-child{border-bottom:0}
.t-row span{color:var(--muted);font-size:.88rem}
.t-row b{font-family:ui-monospace,Consolas,monospace;font-size:1rem;color:var(--navy);word-break:break-all;text-align:right}
.t-copy{background:#f3f5fb;border:1px solid var(--line);border-radius:8px;width:34px;height:34px;flex:none;cursor:pointer;display:grid;place-items:center;color:var(--navy)}
.t-copy svg{width:16px;height:16px}
.t-val{display:flex;align-items:center;gap:8px;min-width:0}
.t-mail{color:var(--muted);font-size:.84rem;text-align:center}
.t-timer{text-align:center;margin:18px 0 6px}
.t-timer .box{display:inline-flex;align-items:center;gap:10px;font-family:'Sora',sans-serif;font-size:1.9rem;font-weight:800;color:#b45309;background:#fff7ed;border:2px solid #fdba74;border-radius:16px;padding:8px 22px}
.t-timer small{display:block;color:var(--muted);margin-top:6px;font-size:.84rem}

/* passo a passo */
.passo{display:none}
.passo.ativo{display:block;animation:entra .25s ease}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.passo h2{font-size:1.08rem;margin-bottom:14px}
.t-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.t-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.t-opt{border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:14px 8px;cursor:pointer;font:inherit;font-weight:700;font-size:.9rem;color:var(--navy);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:96px;transition:border-color .15s,background .15s,transform .1s}
.t-opt{text-align:center;line-height:1.25}
.t-opt:hover{border-color:var(--gold);background:#fffbf0}
.t-opt:active{transform:scale(.98)}
.t-opt img{height:44px;max-width:100%;object-fit:contain}
.t-opt.marca{min-height:68px}
.t-opt.marca img{height:30px}
.t-opt.row{flex-direction:row}
.t-opt.row img{height:26px}
.t-opt.dash{border-style:dashed}
.t-instr{font-size:.93rem;line-height:1.65;background:#f7f8fc;border:1px solid var(--line);border-radius:14px;padding:14px 16px;white-space:pre-line}
.t-instr b{color:var(--navy)}
.t-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.t-duo .t-btn{font-size:.95rem;min-height:48px}
.t-center{text-align:center}
.t-emoji{font-size:2.4rem;line-height:1;margin-bottom:8px}
.t-muted{color:var(--muted);font-size:.9rem}

/* modal de planos */
dialog.t-modal{border:0;border-radius:20px;padding:0;width:min(440px,calc(100vw - 24px));margin:auto;box-shadow:0 30px 80px rgba(0,0,0,.5)}
dialog.t-modal::backdrop{background:rgba(6,10,26,.6);backdrop-filter:blur(3px)}
.t-modal-h{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.t-modal-h h3{font-size:1.1rem}
.t-x{border:1px solid var(--line);background:#fff;width:36px;height:36px;border-radius:10px;font-size:1.2rem;cursor:pointer;color:var(--muted)}
.t-modal-b{padding:16px 20px 20px}
.t-grupo{font-weight:800;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:12px 0 8px}
.t-grupo:first-child{margin-top:0}
.t-plano{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:13px 14px;margin-bottom:8px;font:inherit;cursor:pointer;color:var(--navy);text-align:left}
.t-plano:hover{border-color:var(--gold);background:#fffbf0}
.t-plano b{font-family:'Sora',sans-serif;font-size:1.05rem;white-space:nowrap}
.t-plano small{display:block;color:var(--muted);font-size:.8rem}

.t-resumo{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#f7f8fc;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:14px;color:var(--navy);font-weight:700}
.t-resumo b{font-family:'Sora',sans-serif;font-size:1.1rem;white-space:nowrap}

/* PIX manual */
.t-pix{border:1.5px solid #9fe3d9;background:#f2fbf9;border-radius:14px;padding:14px}
.t-pix-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.t-pix-h strong{display:block;color:var(--navy)}
.t-pix-h small{display:block;color:var(--muted);font-size:.8rem}
.t-pix-logo{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#32bcad,#1a8f84);color:#fff;font-weight:800;font-size:.78rem;flex:none}
.t-pix-chave{background:#fff;border:1px dashed #32bcad;border-radius:10px;padding:10px 12px;text-align:center}
.t-pix-chave b{font-family:ui-monospace,Consolas,monospace;color:var(--navy);word-break:break-all;font-size:.98rem}
.t-pix-passos{margin:12px 0 12px 18px;font-size:.86rem;color:var(--text);line-height:1.5}
.t-pix-passos li+li{margin-top:4px}
.t-pix-ok{color:var(--ok);font-weight:700;font-size:.86rem;text-align:center;margin-top:8px}

/* retorno de pagamento */
.t-status{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;font-size:1.8rem}
.t-status.ok{background:#eafaf0;color:var(--ok)}.t-status.aviso{background:#fff7ed;color:#c2410c}.t-status.erro{background:#fef2f2;color:var(--bad)}

/* aviso de cookies */
.t-consent{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.4);padding:14px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;max-width:560px;margin:0 auto;font-size:.86rem}
.t-consent[hidden]{display:none}
.t-consent p{flex:1 1 240px;color:var(--text)}
.t-consent .acts{display:flex;gap:8px}
body.consent-open .t-wrap{padding-bottom:170px}
.t-consent button{min-height:40px;padding:8px 14px;border-radius:10px;font:inherit;font-weight:800;cursor:pointer;border:1.5px solid var(--line);background:#fff;color:var(--navy)}
.t-consent button.sim{background:var(--navy);border-color:var(--navy);color:#fff}

@media (min-width:560px){ .t-card{padding:30px 28px} .t-head h1{font-size:1.65rem} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }

/* Checkout: plano (lista) -> telas (barra) -> meses (botões) */
.t-lbl{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.92rem;color:var(--navy);margin:14px 0 8px}
.t-lbl:first-child{margin-top:0}
.t-lbl>span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;font-size:.74rem;flex:none}
.t-ck-tag{margin-left:auto;background:#fff6de;color:#7a5a12;border-radius:99px;padding:2px 10px;font-size:.82rem}
.t-select{width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--line);border-radius:12px;font:inherit;font-weight:700;color:var(--navy);background:#fff;cursor:pointer}
.t-select:focus{outline:none;border-color:var(--gold)}
.t-ck-desc{color:var(--muted);font-size:.82rem;margin-top:5px;min-height:1px}
.t-range{width:100%;-webkit-appearance:none;appearance:none;height:8px;border-radius:99px;margin:10px 0 4px;cursor:pointer;
  background:linear-gradient(90deg,var(--gold) var(--pct,0%),var(--line) var(--pct,0%))}
.t-range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--gold);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.t-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--gold)}
.t-range-marcas{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);padding:0 6px}
.t-periodos{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.t-per{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:11px 12px;font:inherit;cursor:pointer;text-align:left;color:var(--navy)}
.t-per b{font-family:'Sora',sans-serif;font-size:.98rem}
.t-per small{color:var(--muted);font-size:.78rem}
.t-per em{font-style:normal;font-size:.72rem;font-weight:800;color:#15803d;background:#ecfdf3;border-radius:99px;padding:1px 8px;margin-top:3px}
.t-per:hover{border-color:var(--gold)}
.t-per.on{border-color:var(--gold);background:#fffbf0;box-shadow:0 0 0 3px rgba(var(--gold-rgb),.18)}
.t-ck-total{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;background:var(--navy);color:#fff;border-radius:14px;padding:14px 16px;margin:16px 0 12px}
.t-ck-total small{display:block;font-size:.76rem;opacity:.75;text-transform:uppercase;letter-spacing:.05em}
.t-ck-total b{font-family:'Sora',sans-serif;font-size:1.5rem}
.t-ck-mes{font-size:.82rem;opacity:.85;text-align:right}
.t-btn:disabled{opacity:.5;cursor:not-allowed}

/* PIX automático (PushinPay) */
.t-pp-qr{display:block;margin:4px auto 0;width:220px;height:220px;max-width:100%;background:#fff;border-radius:12px;border:1px solid #d7efe9;padding:6px}
.t-pp-cod{font-size:.74rem !important;line-height:1.35;display:block;max-height:4.2em;overflow:hidden}
.t-pp-status{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.84rem;color:var(--muted);text-align:center;margin-top:10px}
.t-pp-spin{width:14px;height:14px;border-radius:50%;border:2px solid #9fe3d9;border-top-color:#1a8f84;animation:tppgira .9s linear infinite;flex:none}
@keyframes tppgira{to{transform:rotate(360deg)}}
.t-pp-erro{color:#b91c1c;font-size:.86rem;font-weight:700;text-align:center;margin-top:8px}
.t-pp-ok{text-align:center;padding:8px 4px}
.t-pp-ok strong{display:block;color:var(--navy);font-size:1.1rem;margin:4px 0}
.t-pp-aviso{background:#fff;border:1px solid #d7efe9;border-left:4px solid #1a8f84;border-radius:10px;padding:10px 12px;margin:0 0 12px;font-size:.8rem;line-height:1.45;color:var(--text)}
.t-pp-msg{font-size:.84rem;color:var(--navy);background:#fff7e6;border-radius:10px;padding:8px 10px;margin-top:8px;text-align:center}

/* Janela de instalação (abre na frente ao gerar o teste): dados no topo, fixos ao rolar, e o passo a passo embaixo */
dialog.t-inst{width:min(480px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:hidden}
dialog.t-inst[open]{display:flex;flex-direction:column}
.t-inst .t-modal-h{flex:none;padding:12px 16px}
.t-inst .t-modal-h h3{font-size:1.05rem}
.t-inst-b{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:0 16px 18px}
.t-cred-fixo{position:sticky;top:0;z-index:3;background:#fff;padding:12px 0 12px;margin-bottom:4px}
.t-cred{border:1.5px solid var(--gold);border-radius:14px;background:#fffdf6;padding:10px 12px;
  box-shadow:0 14px 30px -12px rgba(var(--gold-rgb,224,169,46),.55),0 4px 12px rgba(10,18,48,.08)}
.t-cred-i{min-width:0}
.t-cred-i>span{display:block;font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.t-cred-i>div{display:flex;align-items:center;gap:6px;min-width:0}
.t-cred-i b{flex:1;min-width:0;font-family:ui-monospace,Consolas,monospace;font-size:.98rem;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-cred-i.url b{font-size:.86rem}
.t-cred-i .t-copy{width:32px;height:32px}
.t-cred-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.t-cred-i.url+.t-cred-2{margin-top:9px;padding-top:9px;border-top:1px dashed rgba(var(--gold-rgb,224,169,46),.5)}
.t-cred-2 .t-cred-i+.t-cred-i{border-left:1px dashed rgba(var(--gold-rgb,224,169,46),.5);padding-left:10px}
.t-inst .t-card{background:none;box-shadow:none;border-radius:0;padding:4px 0 0}
.t-inst .t-card+.t-card{margin-top:0}
.t-inst .passo h2{font-size:1.02rem;margin-bottom:12px}
.t-inst .t-opt{min-height:88px}

/* Página do teste montada por blocos (Testes ▸ Personalizar página do teste, includes/crm/teste-pagina.php) */
.tp .tp-b{margin-bottom:10px}
.tp .tp-b:last-child{margin-bottom:0}
.tp-topo,.tp-rodape{color:rgba(255,255,255,.82)}
.tp-topo{margin-bottom:18px}
.tp-rodape{margin-top:16px}
.tp-topo a,.tp-rodape a{color:var(--gold-2)}
.tp-topo .tp-titulo,.tp-rodape .tp-titulo{color:#fff}
.tp-topo .tp-sub,.tp-rodape .tp-sub{color:rgba(255,255,255,.78)}
.tp-logo img{max-width:100%;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35));vertical-align:middle}
.tp-cartao .tp-logo img{filter:none}
.tp-titulo{font-size:1.45rem}
.tp-titulo.tp-t-p{font-size:1.15rem}.tp-titulo.tp-t-g{font-size:1.8rem}.tp-titulo.tp-t-gg{font-size:2.2rem}
.tp-sub{color:var(--muted);font-size:.95rem}
.tp-texto{font-size:.95rem;line-height:1.55}
.tp-texto.tp-x-p{font-size:.82rem}.tp-texto.tp-x-g{font-size:1.1rem}
/* lista: bloco centralizado no cartão, ícone numa bolinha com respiro e texto alinhado à esquerda */
.tp-lista{list-style:none;margin-left:auto;margin-right:auto;padding:4px 6px;width:fit-content;max-width:100%;display:grid;gap:9px;font-size:.93rem;text-align:left}
.tp-lista li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:11px;align-items:start;line-height:1.45}
.tp-lista .tp-ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(22,163,74,.12);color:#16a34a;font-size:.72rem;font-weight:800;line-height:1;margin-top:-1px}
.tp-topo .tp-lista .tp-ic,.tp-rodape .tp-lista .tp-ic{background:rgba(255,255,255,.14);color:#fff}
.tp-aviso{border:1px solid;border-radius:12px;padding:12px 16px;font-size:.9rem;line-height:1.5}
.tp-div{border:0;border-top:1px solid var(--line)}
.tp-topo .tp-div,.tp-rodape .tp-div{border-top-color:rgba(255,255,255,.2)}
.t-badge.tp-cor-amarelo,.tp-aviso.tp-cor-amarelo{background:#fff6de;color:#8a6200;border-color:#f3dc9c}
.t-badge.tp-cor-verde,.tp-aviso.tp-cor-verde{background:#f0fdf4;color:#166534;border-color:#bbf7d0}
.t-badge.tp-cor-azul,.tp-aviso.tp-cor-azul{background:#eff6ff;color:#1e3a8a;border-color:#bfdbfe}
.t-badge.tp-cor-vermelho,.tp-aviso.tp-cor-vermelho{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.t-badge.tp-cor-escuro,.tp-aviso.tp-cor-escuro{background:var(--navy);color:#fff;border-color:var(--navy)}
.t-badge.tp-cor-claro,.tp-aviso.tp-cor-claro{background:#fff;color:var(--navy);border-color:var(--line)}
.tp .t-badge{margin-bottom:0}
.t-field label .tp-opc{display:inline;margin:0;font-weight:500;font-size:.8rem;color:var(--muted)}