/* Tela inicial: os 4 perfis como bolhas colecionáveis */
.hero-h{font-size:clamp(40px,11vw,60px)}
.hero-h em{font-style:normal;color:var(--accent)}
.bub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.bub{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:16px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;overflow:hidden;
  animation:bub-in .6s cubic-bezier(.2,.8,.3,1.2) both;animation-delay:calc(var(--i)*110ms)}
.bub::before{content:"";position:absolute;inset:auto -30% -55% -30%;height:70%;border-radius:50%;background:var(--c);opacity:.10}
.bub .orb{position:relative;width:clamp(64px,18vw,92px);aspect-ratio:1;border-radius:50%;background:var(--c);display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:clamp(32px,9vw,46px);color:#fff;
  box-shadow:0 10px 24px -10px var(--c);animation:float 4.5s ease-in-out infinite;animation-delay:calc(var(--i)*-1.1s)}
.bub .orb::after{content:"";position:absolute;top:14%;left:20%;width:22%;height:22%;border-radius:50%;background:rgba(255,255,255,.35)}
.bub b{position:relative;font-family:var(--display);font-weight:800;font-size:clamp(19px,5vw,23px);line-height:1.1}
.bub small{position:relative;font-size:clamp(14px,3.7vw,16px);line-height:1.3;color:var(--muted)}
.cta{position:relative;width:100%;font-size:clamp(20px,5.4vw,24px)!important;min-height:68px!important;animation:pulse 2.6s ease-in-out infinite 1.2s}
.which{font-family:var(--display);font-weight:800;font-size:clamp(22px,6vw,28px);text-align:center;margin:4px 0 -4px}
@keyframes bub-in{from{transform:translateY(14px) scale(.92)}to{transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}50%{box-shadow:0 0 0 10px transparent}}
/* perguntas e resultado */
.opt{animation:opt-in .35s ease-out both}
.opt:nth-child(2){animation-delay:.05s}.opt:nth-child(3){animation-delay:.1s}.opt:nth-child(4){animation-delay:.15s}
.res-head .badge{animation:pop .7s cubic-bezier(.2,.8,.3,1.4) both}
@keyframes opt-in{from{transform:translateX(18px)}to{transform:none}}
@keyframes pop{0%{transform:scale(.4)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.bub,.bub .orb,.cta,.opt,.res-head .badge{animation:none!important}}
.compact small{display:none}.compact .bub{padding:14px 12px}
.invite{padding:16px 18px!important}.invite .badge{width:64px;height:64px;font-size:28px}.invite h2{font-size:clamp(22px,6vw,26px)!important}.invite .lead{font-size:clamp(16px,4.2vw,19px)}
/* v4: piso de leitura de 20px (exceto o aviso final) */
body{font-size:clamp(20px,5.2vw,23px)}
.tag{font-size:clamp(17px,4.4vw,19px);letter-spacing:.04em}
.langs button{font-size:18px;min-height:48px}
.lead,.invite .lead,.bub small,.vs p,input[type=text],.bar,.pct,.toast,.pair span{font-size:clamp(20px,5.2vw,23px)!important}
.bub small{line-height:1.25}
.bub b{font-size:clamp(21px,5.6vw,25px)}
.bub-grid{gap:12px}.bub{padding:14px 10px}
.bar{grid-template-columns:118px 1fr 56px!important}
details summary{font-size:clamp(20px,5.2vw,23px)}
/* v4b: bolhas em linha */
.hero-h{font-size:clamp(36px,9.5vw,52px)!important}
.bub-grid{grid-template-columns:1fr!important;gap:10px!important}
.bub{flex-direction:row!important;text-align:left!important;align-items:center!important;gap:16px!important;padding:12px 16px!important;border-radius:999px 24px 24px 999px}
.bub::before{inset:-40% auto -40% -10%!important;width:45%;height:auto!important}
.bub .orb{width:clamp(60px,16vw,76px)!important;font-size:clamp(28px,8vw,38px)!important;flex:none}
.bt{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0}
.compact .bub{padding:10px 14px!important}
/* v5: mascotes */
.mascot{background:transparent!important;box-shadow:none!important;overflow:visible}
.mascot svg{width:118%;height:118%;margin:-9%;display:block}
.bub .orb.mascot::after{display:none}
.bub .orb{width:clamp(70px,19vw,88px)!important}
/* v6: só mascote + nome na tela inicial (explicação fica pro resultado) */
.bub-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
.bub{flex-direction:column!important;text-align:center!important;gap:8px!important;padding:18px 10px 16px!important;border-radius:28px!important}
.bub::before{inset:auto -30% -60% -30%!important;width:auto!important;height:70%!important}
.bub .orb{width:clamp(96px,27vw,132px)!important}
.bt{align-items:center}