/* Motor visual dos apps da Fábrica, v5. Cores e fontes vêm de cada empresa, em :root, pelo Worker.
   Regra da casa: cada tela do app cabe inteira na altura do aparelho. #view não rola. */
*,*::before,*::after{box-sizing:border-box}
:root{--carta:color-mix(in srgb,var(--tinta) 6%,var(--fundo));--linha:color-mix(in srgb,var(--tinta) 11%,transparent);--sombra:0 18px 44px -30px rgba(0,0,0,.5);
  --vidro:linear-gradient(160deg,color-mix(in srgb,var(--tinta) 8%,transparent),color-mix(in srgb,var(--tinta) 2%,transparent));
  --gap:clamp(8px,1.7dvh,16px);--pad:clamp(12px,2.3dvh,22px);--alto:#FF4D4F;--medio:#F5A524;--baixo:#2FCB7E;--ease:cubic-bezier(.2,.7,.2,1)}
html,body{margin:0;height:100%;max-width:100%;overflow-x:clip;background:var(--fundo);color:var(--tinta);font:16px/1.4 var(--txt);-webkit-font-smoothing:antialiased}
html:has(.app),html:has(.app) body{overflow:hidden}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3{font-family:var(--tit);margin:0;letter-spacing:-.03em;line-height:1.04;font-weight:600}
p{margin:0}
.ic{width:1em;height:1em;flex:none;display:inline-block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter;overflow:visible;--ac:var(--acento)}
.app{height:100dvh;display:flex;flex-direction:column;max-width:520px;margin:0 auto;background:var(--fundo);position:relative;isolation:isolate;overflow:hidden}
/* luz e grade de fundo: dá profundidade sem imagem */
.app::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 40% at 85% -5%,color-mix(in srgb,var(--acento) 22%,transparent),transparent 70%),radial-gradient(60% 35% at -10% 105%,color-mix(in srgb,var(--cor) 70%,transparent),transparent 70%)}
.app::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(color-mix(in srgb,var(--tinta) 14%,transparent) 1px,transparent 1.4px);background-size:22px 22px;
  -webkit-mask:linear-gradient(180deg,#000,transparent 45%,transparent 70%,#000);mask:linear-gradient(180deg,#000,transparent 45%,transparent 70%,#000)}
body.moldura{background:#0A0D12}
html:not(.escuro) body.moldura{background:#E9E5DC}
@media(min-width:760px){body.moldura .app{height:min(860px,calc(100dvh - 40px));margin-top:20px;border-radius:34px;box-shadow:0 0 0 1px color-mix(in srgb,var(--tinta) 10%,transparent),0 40px 90px -40px rgba(0,0,0,.8)}}
#view{flex:1;min-height:0;overflow:hidden;position:relative}
@keyframes entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes sobe{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
#view.anim .tela>*{animation:entra .42s var(--ease) both}
#view.anim .tela>*:nth-child(2){animation-delay:.06s}#view.anim .tela>*:nth-child(3){animation-delay:.12s}#view.anim .tela>*:nth-child(4){animation-delay:.18s}#view.anim .tela>*:nth-child(5){animation-delay:.24s}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition:none!important}}
.tela{height:100%;display:flex;flex-direction:column;gap:var(--gap);padding:var(--pad) 20px;min-height:0}
.cresce{flex:1 1 auto;min-height:0}
.pe{display:grid;gap:8px}
.topo{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 20px;border-bottom:1px solid var(--linha);background:color-mix(in srgb,var(--fundo) 70%,transparent);backdrop-filter:blur(14px);z-index:2;flex:none}
.topo img{height:clamp(22px,3.4dvh,28px);max-width:150px;object-fit:contain;display:block}
.topo b{font-family:var(--tit);font-size:18px;letter-spacing:-.02em}
.ola{font-size:13px;color:var(--mudo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conta{font-size:11px;font-weight:700;color:var(--mudo);letter-spacing:.14em;text-transform:uppercase}
.tit h1{font-size:clamp(24px,4.2dvh,32px)}
.tit p{color:var(--mudo);margin-top:6px;font-size:clamp(13px,1.9dvh,15px)}
.nota{font-size:13px;color:var(--mudo)}
.aviso{font-size:14px;background:color-mix(in srgb,var(--acento) 14%,var(--carta));border-radius:14px;padding:12px 14px}
.rodape{font-size:11px;color:var(--mudo);opacity:.8;margin:0}
.hide{display:none!important}

/* botões */
.bt{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:clamp(48px,7dvh,58px);border:0;border-radius:18px;background:var(--bt,var(--cor));color:var(--sobre-bt,var(--sobre-cor));font-weight:700;font-size:16px;cursor:pointer;text-decoration:none;padding:10px 18px;position:relative;overflow:hidden;
  box-shadow:0 14px 34px -14px color-mix(in srgb,var(--bt,var(--cor)) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .12s ease,box-shadow .2s ease,opacity .2s;flex:none}
.bt .ic{font-size:20px;--ac:currentColor}
.bt:active{transform:scale(.985)}
.bt[disabled]{opacity:.35;cursor:not-allowed;box-shadow:none}
.bt.brilho:not([disabled])::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-100%);animation:reflexo 3.6s 1.2s ease-in-out infinite}
@keyframes reflexo{0%,55%{transform:translateX(-100%)}80%,100%{transform:translateX(100%)}}
.bt.leve{background:var(--vidro);color:var(--tinta);border:1px solid var(--linha);box-shadow:none;font-weight:600;min-height:clamp(44px,6.2dvh,52px)}
.bt.leve .ic{--ac:var(--acento)}
.link{background:none;border:0;color:var(--mudo);font-size:14px;font-weight:600;padding:6px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.volta{width:38px;height:38px;border-radius:12px;border:1px solid var(--linha);background:var(--vidro);display:grid;place-items:center;cursor:pointer;font-size:18px;flex:none}
.volta-v{width:38px;flex:none}
.consent{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:12.5px;line-height:1.35;align-items:center;cursor:pointer;color:color-mix(in srgb,var(--tinta) 78%,transparent)}
.consent input{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin:0;border-radius:6px;border:1.5px solid color-mix(in srgb,var(--tinta) 40%,transparent);background:color-mix(in srgb,var(--tinta) 6%,transparent);display:grid;place-items:center;cursor:pointer;transition:.15s}
.consent input:checked{background:var(--acento);border-color:var(--acento);box-shadow:0 0 12px -2px var(--acento)}
.consent input:checked::after{content:"";width:5px;height:10px;border:solid var(--sobre-bt,#000);border-width:0 2px 2px 0;transform:translate(0,-1px) rotate(45deg)}
.consent input:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.consent a{color:inherit}

/* ---------- capa ---------- */
.capa{padding-top:clamp(14px,2.6dvh,24px)}
.capa .lg{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}
.capa .lg img{height:clamp(30px,5dvh,42px);max-width:180px;object-fit:contain;display:block}
.capa .lg b{font-family:var(--tit);font-size:22px}
.meta-l{font-size:11px;font-weight:600;color:var(--mudo);text-align:right;letter-spacing:.02em}
.hero{display:grid;place-items:center;position:relative;container-type:size}
.radar{--s:min(92cqw,96cqh,300px);width:var(--s);aspect-ratio:1;position:relative;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--acento) 10%,transparent),transparent 62%)}
.radar i{position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--tinta) 13%,transparent)}
.radar .r1{inset:0;border-color:color-mix(in srgb,var(--acento) 30%,transparent);box-shadow:0 0 40px -6px color-mix(in srgb,var(--acento) 35%,transparent),inset 0 0 30px -10px color-mix(in srgb,var(--acento) 40%,transparent)}
.radar .r2{inset:17%}.radar .r3{inset:34%}
.radar .var{inset:0;border:0;background:conic-gradient(from 0deg,transparent 0 290deg,color-mix(in srgb,var(--acento) 10%,transparent) 320deg,color-mix(in srgb,var(--acento) 55%,transparent) 359.5deg,transparent 360deg);animation:varre 3.1s linear infinite;
  -webkit-mask:radial-gradient(circle,#000 69%,transparent 70.5%);mask:radial-gradient(circle,#000 69%,transparent 70.5%)}
@keyframes varre{to{transform:rotate(1turn)}}
.blip{position:absolute;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:var(--alto);color:var(--alto);opacity:.15;animation:pisca 3.1s var(--d) infinite}
.blip.m{background:var(--medio);color:var(--medio)}.blip.b{background:var(--baixo);color:var(--baixo)}
@keyframes pisca{0%{opacity:1;box-shadow:0 0 0 0 currentColor;transform:scale(1.25)}35%{opacity:.85;box-shadow:0 0 0 12px transparent;transform:scale(1)}100%{opacity:.15}}
.escudo{position:absolute;left:50%;top:50%;width:30%;transform:translate(-50%,-52%);fill:color-mix(in srgb,var(--fundo) 70%,transparent);stroke:var(--acento);stroke-width:2.2;stroke-linejoin:round;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--acento) 60%,transparent));animation:respira 3.1s ease-in-out infinite}
.escudo .cad{fill:none;stroke:var(--tinta);stroke-width:2.4}
.escudo circle{fill:var(--acento);stroke:none}
@keyframes respira{50%{filter:drop-shadow(0 0 24px color-mix(in srgb,var(--acento) 85%,transparent))}}
.capa .txt{display:grid;gap:8px;flex:none}
.capa h1{font-size:clamp(28px,5.2dvh,42px);line-height:1}
.capa .txt p{font-size:clamp(14px,2.1dvh,16px);color:color-mix(in srgb,var(--tinta) 75%,transparent);max-width:34ch}
.recebe{flex:none;border:1px solid var(--linha);background:var(--vidro);border-radius:18px;padding:clamp(10px,1.6dvh,14px) 14px;display:grid;gap:6px;backdrop-filter:blur(10px)}
.recebe ul{list-style:none;margin:0;padding:0;display:grid;gap:clamp(4px,.9dvh,8px)}
.recebe li{display:flex;align-items:center;gap:10px;font-size:clamp(13px,1.95dvh,15px);font-weight:600;animation:entra .5s calc(.35s + var(--k)*.12s) var(--ease) both}
.recebe li .ic{font-size:18px;color:var(--acento);--ac:var(--acento)}

/* ---------- perguntas ---------- */
.perg-top{display:flex;align-items:center;gap:12px;min-height:38px;flex:none}
.perg-top .conta{white-space:nowrap}
.sinal{margin-left:auto;display:grid;gap:4px;justify-items:end;font-size:10.5px;font-weight:700;color:var(--mudo);letter-spacing:.06em;text-transform:uppercase;--c:color-mix(in srgb,var(--alto) calc(var(--p)*1%),var(--baixo))}
.sinal i{width:92px;height:6px;border-radius:4px;background:color-mix(in srgb,var(--tinta) 12%,transparent);overflow:hidden;display:block}
.sinal b{display:block;height:100%;width:calc(var(--p)*1%);background:var(--c);border-radius:4px;box-shadow:0 0 10px var(--c);transition:width .6s var(--ease),background .6s}
.sinal.vazio b{width:0}
.prog{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:5px;flex:none}
.prog i{height:4px;border-radius:3px;background:color-mix(in srgb,var(--tinta) 12%,transparent);overflow:hidden;position:relative}
.prog i.on::after,.prog i.feita::after{content:"";position:absolute;inset:0;background:var(--acento);border-radius:3px;transform-origin:left}
.prog i.on::after{animation:preenche .5s var(--ease) both}
@keyframes preenche{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.perg .q{display:flex;flex-direction:column;justify-content:flex-end;flex:0 0 auto;margin-top:auto;gap:clamp(10px,2dvh,16px)}
.perg h2{font-size:clamp(26px,4.6dvh,36px)}
.porque{display:flex;gap:10px;align-items:flex-start;font-size:clamp(13px,1.9dvh,14.5px);color:color-mix(in srgb,var(--tinta) 72%,transparent);padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--acento) 8%,transparent);border-left:2px solid var(--acento)}
.porque .ic{font-size:16px;color:var(--acento);margin-top:1px}
.ops{display:grid;gap:clamp(8px,1.3dvh,10px);flex:none}
.chip{display:flex;align-items:center;gap:14px;width:100%;min-height:clamp(54px,8dvh,64px);padding:10px 48px 10px 12px;border-radius:18px;border:1px solid var(--linha);background:var(--vidro);text-align:left;font-weight:600;font-size:clamp(15px,2.2dvh,16px);cursor:pointer;color:var(--tinta);position:relative;transition:border-color .15s,background .2s,transform .12s,box-shadow .2s;animation:sobe .4s calc(.15s + var(--k,0)*.07s) var(--ease) both}
.chip-ic{width:clamp(36px,5.4dvh,42px);height:clamp(36px,5.4dvh,42px);border-radius:12px;background:color-mix(in srgb,var(--acento) 13%,transparent);color:var(--acento);display:grid;place-items:center;font-size:20px;flex:none;transition:.2s}
.chip::after{content:"";position:absolute;right:16px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--tinta) 26%,transparent);transition:.2s}
.chip:hover{border-color:color-mix(in srgb,var(--acento) 55%,transparent)}
.chip:active{transform:scale(.985)}
.chip[aria-pressed=true]{border-color:var(--acento);background:color-mix(in srgb,var(--acento) 14%,var(--carta));box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 18%,transparent),0 12px 30px -16px var(--acento)}
.chip[aria-pressed=true] .chip-ic{background:var(--acento);color:var(--sobre-bt,#000);--ac:var(--sobre-bt,#000)}
.chip[aria-pressed=true]::after{background:var(--acento);border-color:var(--acento);box-shadow:inset 0 0 0 4px var(--carta)}

/* ---------- anel de nível ---------- */
.tom-alto{--c:var(--alto)}.tom-medio{--c:var(--medio)}.tom-baixo{--c:var(--baixo)}
.anel{--t:clamp(96px,15dvh,140px);width:var(--t);height:var(--t);position:relative;flex:none;color:var(--c,var(--acento))}
.anel.grande{--t:clamp(120px,22dvh,190px)}
.anel.mini{--t:64px}
.anel svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible;position:relative}
.anel circle{fill:none;stroke-width:9}
.anel .trilho{stroke:color-mix(in srgb,var(--tinta) 10%,transparent)}
.anel .arco{stroke:currentColor;stroke-linecap:round;stroke-dasharray:var(--p) 100;filter:drop-shadow(0 0 8px currentColor);animation:arco 1.2s var(--ease) both}
@keyframes arco{from{stroke-dasharray:0 100}}
.anel .miolo{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1}
.anel .miolo b{font-family:var(--tit);font-size:calc(var(--t)*.3);letter-spacing:-.04em;color:var(--tinta)}
.anel .miolo small{font-size:calc(var(--t)*.085);color:var(--mudo);font-weight:600;margin-top:3px}
.anel.mini .miolo small{display:none}
.anel.grande::before{content:"";position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,currentColor 28%,transparent),transparent 65%);animation:respira 2.6s ease-in-out infinite}

/* ---------- resultado ---------- */
.hero-nivel{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(6px,1.2dvh,10px)}
.hero-nivel h1{font-size:clamp(26px,4.4dvh,36px);color:var(--c,var(--tinta))}
.hero-nivel p{font-size:clamp(13.5px,2dvh,15.5px);color:color-mix(in srgb,var(--tinta) 75%,transparent);max-width:32ch}
.card-form{background:var(--vidro);border:1px solid var(--linha);border-radius:20px;padding:clamp(10px,1.6dvh,14px);display:grid;gap:clamp(8px,1.2dvh,10px);flex:none;backdrop-filter:blur(10px)}
.card-form>b{font-size:14px;display:flex;gap:8px;align-items:center}
.card-form>b .ic{font-size:18px;color:var(--acento)}
.duas{display:grid;grid-template-columns:1fr 1.12fr;gap:8px}
.campo{display:grid;gap:5px;font-size:14px;font-weight:600}
.campo input,.campo textarea{width:100%;min-height:clamp(42px,6dvh,50px);padding:10px 12px;border-radius:13px;border:1px solid var(--linha);background:color-mix(in srgb,var(--fundo) 70%,transparent);font-size:16px;font-weight:400;color:var(--tinta);transition:border-color .15s,box-shadow .15s}
.campo input::placeholder{color:var(--mudo)}
.campo input:focus,.campo textarea:focus{outline:0;border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 20%,transparent)}
.revela .pe{justify-items:center}

/* ---------- plano ---------- */
.resumo{display:flex;gap:16px;align-items:center;padding:clamp(10px,1.8dvh,16px);border-radius:22px;background:linear-gradient(150deg,color-mix(in srgb,var(--c,var(--acento)) 16%,transparent),transparent 70%),var(--vidro);border:1px solid color-mix(in srgb,var(--c,var(--acento)) 30%,var(--linha));flex:none}
.resumo h1{font-size:clamp(21px,3.4dvh,26px);color:var(--c,var(--tinta));margin-top:2px}
.resumo p{font-size:clamp(12.5px,1.85dvh,14px);color:color-mix(in srgb,var(--tinta) 72%,transparent);margin-top:4px}
.passos-v{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(6px,1.2dvh,10px);justify-content:center}
.passos-v li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:clamp(9px,1.5dvh,14px) 14px;border-radius:18px;background:var(--vidro);border:1px solid var(--linha);animation:sobe .45s calc(.2s + var(--k,0)*.09s) var(--ease) both}
.passos-v b{display:block;font-size:clamp(14.5px,2.15dvh,16px)}
.passos-v p{font-size:clamp(12.5px,1.85dvh,14px);color:var(--mudo);margin-top:2px;line-height:1.35}
.passos-v .num{font-size:11px;font-weight:700;color:var(--mudo);align-self:start;border:1px solid var(--linha);border-radius:7px;padding:2px 6px}
.passos-v li.perigo{background:linear-gradient(150deg,color-mix(in srgb,var(--alto) 16%,transparent),transparent 75%),var(--vidro);border-color:color-mix(in srgb,var(--alto) 35%,var(--linha))}
.passos-v li.perigo .nodo{background:color-mix(in srgb,var(--alto) 20%,transparent);color:var(--alto);--ac:var(--alto)}
.nodo{width:clamp(38px,5.6dvh,46px);height:clamp(38px,5.6dvh,46px);border-radius:13px;background:color-mix(in srgb,var(--acento) 14%,transparent);color:var(--acento);display:grid;place-items:center;font-size:21px;flex:none}
.pts{font-size:13px;font-weight:600;color:var(--acento);margin-top:4px;display:block}

/* ---------- cenários ---------- */
.carrossel{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:2px 20px;scrollbar-width:none}
.carrossel::-webkit-scrollbar{display:none}
.cen{scroll-snap-align:center;display:flex;flex-direction:column;border-radius:24px;overflow:hidden;border:1px solid color-mix(in srgb,var(--acento) 22%,var(--linha));background:var(--vidro);min-height:0;box-shadow:0 30px 60px -40px color-mix(in srgb,var(--acento) 60%,transparent)}
.arte{flex:1 1 auto;min-height:0;position:relative;display:grid;place-items:center;background:radial-gradient(70% 70% at 50% 60%,color-mix(in srgb,var(--acento) 20%,transparent),transparent 70%),color-mix(in srgb,var(--fundo) 60%,#000)}
.arte::after{content:"";position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--acento) 30%,transparent) 1px,transparent 1.5px);background-size:14px 14px;-webkit-mask:linear-gradient(0deg,#000,transparent 55%);mask:linear-gradient(0deg,#000,transparent 55%);opacity:.6}
.arte .n{position:absolute;top:12px;right:14px;font:700 12px var(--txt);color:var(--mudo);letter-spacing:.1em}
.cena{width:min(78%,240px);max-height:88%;overflow:visible;fill:none;stroke:var(--tinta);stroke-width:2;stroke-linejoin:round;position:relative;z-index:1;filter:drop-shadow(0 0 16px color-mix(in srgb,var(--acento) 40%,transparent))}
.cena .fd{fill:color-mix(in srgb,var(--fundo) 80%,#000);stroke:color-mix(in srgb,var(--acento) 80%,var(--tinta))}
.cena .fd2{fill:color-mix(in srgb,var(--alto) 25%,var(--fundo));stroke:var(--alto)}
.cena .ln{stroke:color-mix(in srgb,var(--tinta) 45%,transparent)}
.cena .pt{fill:var(--acento);stroke:none}
.cena .carta{fill:color-mix(in srgb,var(--tinta) 92%,var(--fundo));stroke:none}
.cena .carta+.ln{stroke:color-mix(in srgb,var(--fundo) 60%,transparent)}
.cena .anzol{stroke:var(--acento);animation:pesca 3.2s ease-in-out infinite}
@keyframes pesca{0%,100%{transform:translateY(-6px)}50%{transform:translateY(4px)}}
.cena .env .carta,.cena .env .carta+.ln{animation:sai 3.2s ease-in-out infinite}
@keyframes sai{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.cena .trava{animation:treme 2.4s ease-in-out infinite;transform-origin:110px 90px}
.cena .trava path:not(.fd2){stroke:var(--alto)}.cena .trava .pt{fill:var(--alto)}
@keyframes treme{0%,70%,100%{transform:none}74%{transform:rotate(-4deg)}78%{transform:rotate(4deg)}82%{transform:rotate(-2deg)}86%{transform:none}}
.cena .cod{stroke:color-mix(in srgb,var(--tinta) 70%,transparent);stroke-width:2.4}
.cena .troca{fill:color-mix(in srgb,var(--alto) 22%,transparent);stroke:var(--alto);animation:alerta 2s ease-in-out infinite}
@keyframes alerta{50%{fill:color-mix(in srgb,var(--alto) 45%,transparent)}}
.cena .seta{stroke:var(--alto);animation:desvia 2s ease-in-out infinite}
@keyframes desvia{0%,100%{transform:translateX(0);opacity:.4}50%{transform:translateX(8px);opacity:1}}
.cena-ic{font-size:72px;color:var(--acento);position:relative;z-index:1}
.corpo{padding:clamp(12px,2dvh,18px) 16px;display:grid;gap:6px;flex:none}
.corpo b{font-family:var(--tit);font-size:clamp(18px,2.9dvh,22px);letter-spacing:-.02em;line-height:1.1}
.corpo p{font-size:clamp(13px,1.9dvh,14.5px);color:color-mix(in srgb,var(--tinta) 72%,transparent)}
.corpo .evita{display:flex;gap:8px;align-items:flex-start;color:var(--tinta);font-weight:600;padding-top:8px;border-top:1px solid var(--linha);margin-top:4px}
.corpo .evita .ic{color:var(--baixo);--ac:var(--baixo);font-size:16px;margin-top:2px}
.pontos{display:flex;gap:6px;justify-content:center;flex:none}
.pontos i{width:6px;height:6px;border-radius:4px;background:color-mix(in srgb,var(--tinta) 22%,transparent);transition:.3s}
.pontos i.on{width:22px;background:var(--acento)}

/* ---------- relatório ---------- */
.cartao{border-radius:24px;padding:clamp(14px,2.2dvh,20px);display:flex;flex-direction:column;gap:clamp(8px,1.4dvh,12px);position:relative;overflow:hidden;
  background:linear-gradient(150deg,color-mix(in srgb,var(--cor) 92%,#fff),color-mix(in srgb,var(--cor) 60%,#000));color:var(--sobre-cor);border:1px solid color-mix(in srgb,var(--acento) 25%,transparent);box-shadow:0 30px 60px -36px color-mix(in srgb,var(--acento) 55%,transparent)}
.cartao::before{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;background:color-mix(in srgb,var(--acento) 45%,transparent);filter:blur(46px)}
.cartao>*{position:relative}
.c-top{display:flex;justify-content:space-between;gap:12px;align-items:center}
.cartao h2{font-size:clamp(22px,3.6dvh,28px);margin-top:2px}
.cartao small{opacity:.75;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.cartao .data{font-size:12px;opacity:.7}
.cartao .anel .miolo b{color:inherit}
.resp{list-style:none;margin:0;padding:0;display:grid;gap:0;flex:1 1 auto;min-height:0;align-content:center}
.resp li{display:flex;justify-content:space-between;gap:10px;font-size:clamp(12.5px,1.85dvh,14px);padding:clamp(5px,1dvh,8px) 0;border-top:1px solid rgba(255,255,255,.1)}
.resp li span{opacity:.7}
.resp li b{text-align:right;font-weight:600;display:flex;align-items:center;gap:7px}
.resp li b::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.resp li.r2 b::before{background:var(--alto);box-shadow:0 0 8px var(--alto)}.resp li.r1 b::before{background:var(--medio)}.resp li.r0 b::before{background:var(--baixo)}
.cartao .itens{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px}
.cartao .itens li{display:flex;gap:8px;align-items:center}

/* ---------- falar ---------- */
.linha{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;gap:0;position:relative}
.linha li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:center;padding:clamp(10px,2dvh,18px) 0;position:relative;font-size:clamp(14.5px,2.2dvh,17px);font-weight:600;animation:sobe .45s calc(.2s + var(--k)*.12s) var(--ease) both}
.linha li:not(:last-child)::after{content:"";position:absolute;left:19.5px;top:calc(50% + 22px);height:calc(100% - 44px);width:1px;background:linear-gradient(var(--acento),transparent)}
.linha i{font-style:normal;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--tit);font-weight:700;color:var(--acento);border:1px solid color-mix(in srgb,var(--acento) 45%,transparent);background:color-mix(in srgb,var(--acento) 10%,transparent);box-shadow:0 0 18px -4px color-mix(in srgb,var(--acento) 60%,transparent)}

/* ---------- barra inferior ---------- */
.nav{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;margin:0 12px calc(10px + env(safe-area-inset-bottom));padding:6px;border-radius:22px;border:1px solid var(--linha);background:color-mix(in srgb,var(--fundo) 75%,transparent);backdrop-filter:blur(16px);box-shadow:0 20px 40px -20px rgba(0,0,0,.6);flex:none}
.nav a{display:grid;justify-items:center;gap:2px;padding:clamp(6px,1dvh,9px) 2px;font-size:11px;text-decoration:none;color:var(--mudo);border-radius:16px;transition:background .2s,color .2s;font-weight:600}
.nav a .ic{font-size:22px;--ac:var(--mudo);transition:transform .2s}
.nav a.on{color:var(--tinta);background:color-mix(in srgb,var(--acento) 16%,transparent)}.nav a.on .ic{--ac:var(--acento);transform:translateY(-1px)}

/* telas muito baixas: corta o que é enfeite antes de cortar conteúdo */
@media(max-height:640px){.recebe .conta,.meta-l{display:none}.porque{padding:8px 10px}.radar{--s:min(92cqw,96cqh)}.rodape{display:none}}
@media(max-height:560px){.recebe{display:none}.hero-nivel p{display:none}}
/* painel */
.pn{max-width:1040px;margin:0 auto;padding:22px 16px 48px;display:grid;gap:20px}
body.painel{height:auto;overflow:auto}
html.painel-h{height:auto}
.pn header{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}
.pn header img{height:34px;max-width:170px;object-fit:contain}
.pn h1{font-size:clamp(28px,5vw,38px)}
.pn h2{font-size:20px}
.sel{font-size:13px;font-weight:600;background:color-mix(in srgb,var(--acento) 22%,var(--carta));border-radius:999px;padding:4px 11px;white-space:nowrap}
.guia{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.guia div{background:var(--carta);border:1px solid var(--linha);border-radius:18px;padding:16px;display:grid;gap:6px;align-content:start}
.guia i{font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--bt,var(--cor));color:var(--sobre-bt,var(--sobre-cor));display:grid;place-items:center;font-weight:700;font-size:14px}
.guia b{font-size:16px}.guia p{font-size:14px;color:var(--mudo)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.kpi{background:var(--carta);border:1px solid var(--linha);border-radius:20px;padding:18px 20px;display:grid;gap:6px;box-shadow:var(--sombra)}
.kpi span{font-size:14px;color:var(--mudo)}
.kpi b{font-family:var(--tit);font-size:34px;line-height:1;letter-spacing:-.02em}
.kpi small{font-size:13px;color:var(--acento);font-weight:600}
.tb{overflow-x:auto;border:1px solid var(--linha);border-radius:18px;background:var(--carta);box-shadow:var(--sombra)}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--linha);vertical-align:middle}
th{font-size:12px;color:var(--mudo);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
tr:last-child td{border-bottom:0}
.tag{display:inline-block;padding:4px 10px;border-radius:999px;font-size:13px;font-weight:600;background:color-mix(in srgb,var(--tinta) 10%,var(--carta));white-space:nowrap}
.tag.alerta{background:color-mix(in srgb,#E5484D 22%,var(--carta));color:#E5484D}
.tag.atencao{background:color-mix(in srgb,#F0A31F 22%,var(--carta));color:#D98A12}
.acao{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--sobre-bt,var(--sobre-cor));text-decoration:none;white-space:nowrap;padding:8px 14px;border-radius:999px;background:var(--bt,var(--cor))}
html.painel-h{overflow:auto}

.q-num{display:flex;align-items:baseline;gap:6px;line-height:.8;font-family:var(--tit);animation:entra .5s var(--ease) both}
.q-num b{font-size:clamp(64px,13dvh,128px);font-weight:700;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px var(--acento);text-shadow:0 0 34px color-mix(in srgb,var(--acento) 45%,transparent)}
.q-num span{font-size:clamp(16px,2.6dvh,22px);font-weight:600;color:var(--mudo);letter-spacing:-.02em}
@media(max-height:640px){.q-num b{font-size:clamp(44px,9dvh,64px)}}
@media(max-height:560px){.q-num{display:none}}

/* pergunta e respostas andam juntas, centradas na altura livre */
.perg .ops{margin-top:clamp(6px,1.6dvh,14px);margin-bottom:auto}
.perg .perg-top{min-height:38px}
.q-num b{font-family:var(--txt);font-weight:700;letter-spacing:-.07em;-webkit-text-stroke:1.3px var(--acento)}
.q-num span{font-family:var(--txt)}
/* modo cliente: convite com o nome da empresa e campo com erro */
.capa .para{display:block;margin-bottom:6px;color:var(--acento)}
.campo.erro input{border-color:#E5484D;box-shadow:0 0 0 3px color-mix(in srgb,#E5484D 22%,transparent)}