/* ---------- Vitademia: motor central das áreas (mascotes, escolha de área, questões, baralhos, comunidade) ---------- */

/* itens da clínica que não são da área do aluno somem (versões por área: data-area) */
[data-area].na,.lightcone.na{display:none!important}

/* mascotes de outras áreas */
.m .feet,.m .disco{transition:opacity .4s}
.m.a-fisio.h-profunda .bodyg,.m.a-fisio.h-dor .bodyg,.m.a-fisio.h-canal .bodyg{transform:rotate(-7deg);transform-origin:60px 110px}
.m.a-medicina.h-brilho .mbody{animation:tum 1.2s ease-in-out infinite;transform-origin:60px 72px}
@keyframes tum{0%,100%{transform:scale(1)}12%{transform:scale(1.04)}24%{transform:scale(1)}36%{transform:scale(1.025)}}
.m.a-medicina .sz,.m.a-enfermagem .sz,.m.a-fisio .sz{transform-origin:60px 112px}

/* ---------- bracinhos: acompanham o humor do mascote ---------- */
.m .arm{transition:transform .45s var(--spring)}
.m .arm-l{animation:armL 3.6s ease-in-out infinite}
.m .arm-r{animation:armR 3.6s ease-in-out infinite}
@keyframes armL{50%{transform:rotate(7deg)}}
@keyframes armR{50%{transform:rotate(-7deg)}}
.m.happy .arm-r,.m.jump .arm-r{animation:aceno .42s ease-in-out 4}
.m.jump .arm-l{animation:none;transform:rotate(38deg)}
@keyframes aceno{0%,100%{transform:rotate(-30deg)}50%{transform:rotate(-78deg)}}
.m.wow .arm-l{animation:none;transform:rotate(48deg)}.m.wow .arm-r{animation:none;transform:rotate(-48deg)}
.m.sad .arm,.m.h-dor .arm,.m.h-canal .arm{animation:none}
.m.sad .arm-l,.m.h-dor .arm-l,.m.h-canal .arm-l{transform:rotate(-22deg)}
.m.sad .arm-r,.m.h-dor .arm-r,.m.h-canal .arm-r{transform:rotate(22deg)}
.m.think .arm-r{animation:none;transform:rotate(-95deg)}
.m.focus .arm{animation:none}.m.focus .arm-l{transform:rotate(30deg)}.m.focus .arm-r{transform:rotate(-30deg)}
.m.walking .arm-l{animation:passo .38s ease-in-out infinite}.m.walking .arm-r{animation:passo .38s ease-in-out infinite reverse}
@keyframes passo{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
.m.st4 .arm-r{display:none} /* Mestre segura o livro com a mão direita */

/* ---------- jeito de cada mascote ---------- */
/* Moli: brilho que atravessa o dente */
.m .x-shine{opacity:0;transition:opacity .4s}
.m.a-odonto.h-brilho .x-shine{opacity:1}
.m.a-odonto .x-shine .sw{animation:brilhoDente 5.5s ease-in-out infinite}
@keyframes brilhoDente{0%,55%{transform:translateX(0)}100%{transform:translateX(190px)}}
/* Tum: batimento com onda de pulso */
.m .x-pulse{opacity:0}
.m.a-medicina.h-brilho .x-pulse,.m.a-medicina.h-tartaro .x-pulse{animation:pulsoTum 1.2s ease-out infinite;transform-origin:60px 66px}
@keyframes pulsoTum{0%{transform:scale(1);opacity:.65}45%{transform:scale(1.2);opacity:0}100%{opacity:0}}
.m.a-medicina.h-carie .mbody,.m.a-medicina.h-profunda .mbody{animation:tum .7s ease-in-out infinite;transform-origin:60px 72px} /* pressão alta: bate rápido */
/* Pingo: soro balançando dentro da gotinha, bolhinhas e uma gota pingando */
.m .x-soro{transition:transform 1s var(--spring)}
.m .x-soro .wave{animation:soro 2.6s linear infinite}
@keyframes soro{to{transform:translateX(60px)}}
.m.a-enfermagem.h-tartaro .x-soro{transform:translateY(14px)}
.m.a-enfermagem.h-carie .x-soro{transform:translateY(24px)}
.m.a-enfermagem.h-profunda .x-soro{transform:translateY(32px)}
.m.a-enfermagem.h-dor .x-soro,.m.a-enfermagem.h-canal .x-soro{transform:translateY(42px)}
.m .x-soro circle{animation:bolha 3s ease-in infinite}
.m .x-soro .bub2{animation-delay:1s}.m .x-soro .bub3{animation-delay:2s}
@keyframes bolha{0%{transform:translateY(0);opacity:0}20%{opacity:.8}100%{transform:translateY(-34px);opacity:0}}
.m.a-enfermagem .mbody{animation:gelatina 3.4s ease-in-out infinite;transform-origin:60px 112px}
@keyframes gelatina{0%,100%{transform:scale(1,1)}20%{transform:scale(1.035,.965)}40%{transform:scale(.975,1.025)}60%{transform:scale(1.012,.988)}80%{transform:scale(1,1)}}
.m .x-drip{opacity:0}
.m.a-enfermagem.h-brilho .x-drip{animation:pinga 3.8s ease-in infinite}
@keyframes pinga{0%,55%{transform:translateY(-6px) scale(.4);opacity:0}65%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(16px) scale(.9);opacity:0}}
/* Verti: alongamento de lado a lado, com os discos amortecendo */
.m.a-fisio.h-brilho .mbody,.m.a-fisio.h-tartaro .mbody{animation:alonga 4.2s ease-in-out infinite;transform-origin:60px 110px}
@keyframes alonga{0%,100%{transform:rotate(0)}22%{transform:rotate(-6deg)}50%{transform:rotate(0)}72%{transform:rotate(6deg)}}
.m.a-fisio .disco ellipse{animation:disco 4.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes disco{0%,50%,100%{transform:scale(1,1)}22%,72%{transform:scale(1.06,.8)}}
.m.a-fisio.h-brilho.happy .mbody{animation:none}
/* assinante Elite: brilho dourado em volta do mascote */
.m.elite .bodyg{filter:drop-shadow(0 0 5px rgba(242,196,109,.55))}

/* ---------- evolução: a pele muda a cada fase ---------- */
/* tamanho: cresce do Iniciante (st0) ao Especialista (st3) */
.m.st1 .sz{transform:scale(.88)}.m.st2 .sz{transform:scale(.94)}
.m .evo>*{opacity:0;transition:opacity .6s}
.m .evo-rim{stroke:var(--evo,#5EEAD4)}
.m.a-odonto{--evo:#2DD4BF}.m.a-medicina{--evo:#FB7185}.m.a-enfermagem{--evo:#38BDF8}.m.a-fisio{--evo:#E0A84A}
.m.st1 .evo-rim{opacity:.85}
.m.st2 .evo-rim{opacity:1;stroke:#CBD5E1}
.m.st3 .evo-rim,.m.st4 .evo-rim{opacity:1;stroke:#F2C46D}
.m.st4 .evo-rim{stroke-width:3.4;filter:drop-shadow(0 0 3px rgba(242,196,109,.9))}
.m.st2 .evo-gloss,.m.st3 .evo-gloss,.m.st4 .evo-gloss{opacity:1}
.m.st3 .evo-x,.m.st4 .evo-x{opacity:1}
.m.st4 .evo-gold{opacity:1}.m .evo-gold .sw{animation:brilhoDente 4.2s ease-in-out infinite}
/* estrelas de patente: 1 no Estagiário, 2 no Residente, 3 no Especialista e douradas no Mestre */
.m .evo-st{opacity:1}.m .evo-s{opacity:0;fill:#94A3B8;stroke:rgba(15,23,42,.55);stroke-width:.8;transition:opacity .5s,fill .5s}
.m.st1 .e2,.m.st2 .e1,.m.st2 .e3,.m.st3 .evo-s,.m.st4 .evo-s{opacity:1}
.m.st3 .evo-s,.m.st4 .evo-s{fill:#F2C46D}
.m.st4 .evo-s{animation:tw 2.2s ease-in-out infinite}.m.st4 .e2{animation-delay:.5s}.m.st4 .e3{animation-delay:1s}
/* roupa por cima esconde as estrelas; doente, o brilho some */
.m:not(.h-brilho):not(.h-tartaro) .evo-gold,.m:not(.h-brilho):not(.h-tartaro) .evo-gloss{opacity:0}
/* Verti: discos dourados no Especialista e no Mestre */
.m.a-fisio.st3 .disco ellipse,.m.a-fisio.st4 .disco ellipse{fill:url(#vDiscG)}

/* ---------- reações a cada dano ---------- */
.m .sweat,.m .tear{opacity:0;transition:opacity .4s}
.m.h-carie .sweat,.m.h-profunda .sweat,.m.h-dor .sweat{opacity:1;animation:suor 2.4s ease-in infinite}
@keyframes suor{0%{transform:translateY(-2px);opacity:0}25%{opacity:1}100%{transform:translateY(12px);opacity:0}}
.m.h-canal .tear{opacity:1;animation:lagrima 3s ease-in infinite}
@keyframes lagrima{0%,20%{transform:translateY(0);opacity:0}35%{opacity:1}100%{transform:translateY(14px);opacity:0}}
/* estremecer: cárie de vez em quando, cárie profunda mais vezes */
.m.h-carie .bodyg{animation:estremece 4.5s ease-in-out infinite;transform-origin:60px 110px}
.m.h-profunda .bodyg{animation:estremece 2.6s ease-in-out infinite;transform-origin:60px 110px}
@keyframes estremece{0%,82%,100%{transform:translateX(0)}85%{transform:translateX(-1.6px) rotate(-1.5deg)}88%{transform:translateX(1.6px) rotate(1.5deg)}91%{transform:translateX(-1px)}94%{transform:translateX(1px)}}
/* bracinhos meio caídos na cárie e na cárie profunda */
.m.h-carie:not(.happy):not(.jump) .arm,.m.h-profunda:not(.happy):not(.jump) .arm{animation-duration:6s}
.m.h-profunda:not(.happy):not(.jump):not(.wow) .arm-l{animation:none;transform:rotate(-12deg)}
.m.h-profunda:not(.happy):not(.jump):not(.wow) .arm-r{animation:none;transform:rotate(12deg)}
/* último estágio: cansado, balança devagar */
.m.h-canal .bodyg{animation:fraco 5s ease-in-out infinite;transform-origin:60px 112px}
@keyframes fraco{50%{transform:rotate(-3deg) translateY(1.5px)}}
/* Moli: abscesso na raiz e a polpa exposta latejam (precisa de canal, não de extração) */
.m .absc,.m .polpa{animation:lateja 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes lateja{50%{transform:scale(1.18);opacity:.8}}
/* Tum: cansado bate devagar, arritmia bate fora do ritmo, dor no peito acelera, no último estágio quase não bate */
.m.a-medicina.h-tartaro .mbody{animation:tum 2.2s ease-in-out infinite;transform-origin:60px 72px}
.m.a-medicina.h-tartaro .x-pulse{animation-duration:2.2s}
.m.a-medicina.h-profunda .mbody{animation:arritmia 2.4s linear infinite;transform-origin:60px 72px}
@keyframes arritmia{0%,100%{transform:scale(1)}6%{transform:scale(1.05)}12%{transform:scale(1)}18%{transform:scale(1.04)}24%{transform:scale(1)}52%{transform:scale(1.06)}58%{transform:scale(1)}}
.m.a-medicina.h-dor .mbody{animation:tum .55s ease-in-out infinite;transform-origin:60px 72px}
.m.a-medicina.h-canal .mbody{animation:tum 3.4s ease-in-out infinite;transform-origin:60px 72px}
/* Pingo: acesso infiltrado incha; precisando trocar, murcha */
.m.a-enfermagem.h-dor .mbody{animation:incha 1.8s ease-in-out infinite;transform-origin:60px 112px}
@keyframes incha{0%,100%{transform:scale(1.04,.97)}50%{transform:scale(1.09,.94)}}
.m.a-enfermagem.h-canal .mbody{animation:none;transform:scale(.97,.92);transform-origin:60px 112px}
.m.a-enfermagem.h-profunda .x-soro .wave,.m.a-enfermagem.h-dor .x-soro .wave,.m.a-enfermagem.h-canal .x-soro .wave{animation-duration:6s}
/* Verti: rigidez alonga pouco, contratura treme, último estágio trava */
.m.a-fisio.h-tartaro .mbody{animation:alongaDuro 5s ease-in-out infinite;transform-origin:60px 110px}
@keyframes alongaDuro{0%,100%{transform:rotate(0)}30%{transform:rotate(-2deg)}70%{transform:rotate(2deg)}}
.m.a-fisio.h-carie .mbody,.m.a-fisio.h-profunda .mbody{animation:treme .18s linear infinite;transform-origin:60px 110px}
@keyframes treme{50%{transform:translateX(.5px)}}
.m.a-fisio.h-profunda .bodyg,.m.a-fisio.h-canal .bodyg,.m.sad .bodyg{animation:none} /* mantém a inclinação (fora do alinhamento) e o "triste" */
@media (prefers-reduced-motion:reduce){.m .arm,.m .mbody,.m .bodyg,.m .x-soro .wave,.m .x-shine .sw,.m .x-pulse,.m .x-drip,.m .evo-gold .sw,.m .evo-s,.m .sweat,.m .tear,.m .absc,.m .polpa{animation:none!important}}

/* cenário das clínicas */
#roomSvg .base{pointer-events:none}
.bliz{animation:pulse 1.6s ease-in-out infinite}

/* marca */
.brand small{letter-spacing:.2px}

/* escolher a área: cartões com o mascote de cada uma */
.area-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 6px}
.area-pick.auth{grid-template-columns:repeat(2,minmax(0,1fr));margin:6px 0 4px}
.area-btn{--ac:var(--pri);display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 8px 12px;border-radius:18px;background:var(--glass);border:1px solid var(--stroke);transition:transform .3s var(--spring),border-color .25s,background .25s;text-align:center;min-width:0}
.area-btn:hover{transform:translateY(-2px)}
.area-btn .am,.area-btn .m{width:74px;height:86px}
.area-pick.auth .area-btn .m{width:58px;height:68px}
.area-btn b{font-size:13.5px;font-family:var(--display);letter-spacing:-.2px}
.area-btn small{font-size:11px;color:var(--muted);line-height:1.3}
.area-btn.sel{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,transparent);box-shadow:0 8px 26px color-mix(in srgb,var(--ac) 22%,transparent)}
.area-btn.sel b{color:var(--ac)}
.area-pick.mini .area-btn{flex-direction:row;gap:10px;padding:8px 12px;text-align:left}
.area-pick.mini .area-btn .m{width:46px;height:54px;flex:none}
.area-pick.mini .area-btn div:not(.am){min-width:0}
@media (max-width:640px){
  .area-pick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .area-pick.mini .area-btn{flex-direction:column;text-align:center;gap:2px}
}

/* novidades */
.novas .nov-list{list-style:none;display:grid;gap:8px;margin:14px 0 4px}
.novas .nov-list li{display:flex;gap:10px;align-items:center;font-size:14px;padding:10px 12px;border-radius:14px;background:var(--glass);border:1px solid var(--stroke)}
.novas .nov-list .ico{color:var(--pri);width:18px;height:18px;flex:none}

/* Estudar: 4 abas */
.seg.seg4{max-width:520px}
.seg.seg4 button{gap:6px;padding:10px 6px}
@media (max-width:520px){ .seg.seg4 button{font-size:11.5px;flex-direction:column;gap:3px;padding:8px 2px} }

/* baralhos prontos */
.bar-list{display:grid;gap:10px;margin-top:14px}
.bar-item{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--glass);border:1px solid var(--stroke)}
.bar-item .sw{width:10px;align-self:stretch;border-radius:6px;flex:none}
.bar-item b{display:block;font-size:14px}
.bar-item small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.bar-item small.fonte{color:var(--dim);display:flex;gap:6px;align-items:flex-start}
.bar-item small.fonte .ico{width:13px;height:13px;flex:none;margin-top:1px}
.bar-item .btn,.bar-item .owned{flex:none;white-space:nowrap}
@media (max-width:520px){ .bar-item{flex-wrap:wrap} .bar-item .btn,.bar-item .owned{margin-left:22px} }

/* questões comentadas */
.qhead .eyebrow2{display:flex;gap:6px;align-items:center}.qhead .eyebrow2 .ico{width:14px;height:14px}
.qhead h3{font-family:var(--display);font-size:20px;letter-spacing:-.4px;margin:6px 0 4px}
.qstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 4px}
.qstats div{padding:12px;border-radius:14px;background:rgba(0,0,0,.2);border:1px solid var(--stroke);text-align:center}
.qstats b{display:block;font-family:var(--display);font-size:24px}
.qstats span{font-size:12px;color:var(--muted)}
.chips.qf{margin:10px 0 0}.chips.qf .chip{font-size:12px;padding:7px 12px}
.qhead .pwrow{margin-top:16px}
.qlist-card{margin-top:14px}
.qlist{display:grid;gap:8px;margin-top:12px;max-height:520px;overflow:auto;padding-right:4px}
.qrow{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--glass);border:1px solid var(--stroke);text-align:left;transition:border-color .2s,transform .25s var(--spring)}
.qrow:hover{border-color:rgba(45,212,191,.35);transform:translateX(2px)}
.qrow b{display:block;font-size:13.5px}.qrow small{display:block;font-size:12px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrow .grow{min-width:0;flex:1}
.qrow .arrow{color:var(--dim)}
.qst{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;font-weight:800;font-size:12px;background:rgba(255,255,255,.06);color:var(--muted)}
.qst .ico{width:16px;height:16px}
.qst.ok{background:var(--pri-soft);color:var(--pri)}.qst.no{background:var(--red-soft);color:var(--red)}
.qcard{padding:24px 26px}
.qtags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.qtxt{font-size:15px;line-height:1.65;color:var(--ink)}
.qtxt p+p{margin-top:12px}
.qalts{display:grid;gap:10px;margin-top:20px}
.qalt{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:13px 15px;border-radius:14px;background:var(--glass);border:1px solid var(--stroke);font-size:14.5px;line-height:1.5;transition:border-color .2s,background .2s,transform .25s var(--spring)}
.qalt:not(:disabled):hover{border-color:rgba(45,212,191,.45);transform:translateX(3px)}
.qalt b{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.07);font-family:var(--display);font-size:13px}
.qalt:disabled{cursor:default}
.qalt.certa{border-color:var(--pri);background:var(--pri-soft)}.qalt.certa b{background:var(--pri);color:#03241F}
.qalt.errada{border-color:var(--red);background:var(--red-soft)}.qalt.errada b{background:var(--red);color:#2A0505}
.qalt:disabled:not(.certa):not(.errada){opacity:.55}
.qfb{margin-top:20px;padding:18px;border-radius:18px;background:rgba(0,0,0,.25);border:1px solid var(--stroke);animation:rise .45s var(--spring) both}
.qfb.ok{border-color:rgba(45,212,191,.4)}.qfb.no{border-color:rgba(248,113,113,.4)}
.qres{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-weight:800;font-size:16px}
.qres .ico{width:20px;height:20px}
.qfb.ok .qres{color:var(--pri)}.qfb.no .qres{color:var(--red)}
.qres small{font-weight:600;font-size:11.5px;color:var(--muted)}
.qfb h4{margin:14px 0 6px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--gold)}
.qcom{font-size:14.5px;line-height:1.65}.qcom p+p{margin-top:10px}
.qfontes{margin-top:12px;font-size:12.5px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.qfontes .ico{width:14px;height:14px}
.qfontes a{color:var(--pri);text-decoration:underline;text-underline-offset:2px}
.qfb .pwrow{margin-top:16px}
@media (max-width:1000px){ .qcard{padding:18px} .qtxt{font-size:14.5px} .qalt{font-size:14px} .qfb .pwrow .btn{flex:1} }

/* comunidade */
.comu-areas{margin:4px 0 12px}
.comu-areas .chip{display:inline-flex;align-items:center;gap:7px}
.emb-ic{width:15px;height:15px;fill:currentColor;flex:none}
#teachBox .teach-two{margin-top:22px}
#teachBox .rcard{text-align:left;width:100%}

/* celular: o menu de baixo ganhou Comunidade; a Loja abre pela clínica e pelas moedas */
@media (max-width:1000px){ .nav[data-v="loja"]{display:none} }
.bar-item .grow{flex:1;min-width:0}
@media (max-width:520px){ .bar-item .grow{flex:1 1 calc(100% - 30px)} }