/* ===== Evolua · refinamentos para celular (carregado por último; só complementa os outros CSS) ===== */

/* --- base: iOS/Android --- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overflow-x:clip}
body{overflow-x:clip;overflow-wrap:break-word}                       /* nada empurra a página para o lado (clip não quebra position:sticky) */
a,button,summary,label,input,select,textarea,[role=button]{touch-action:manipulation}   /* sem atraso de 300 ms e sem zoom por toque duplo */
button{-webkit-touch-callout:none}
img{max-width:100%;height:auto}
.alt>span:not(.tg){min-width:0;overflow-wrap:anywhere}               /* nomes longos (ex.: Química) quebram em vez de vazar da alternativa */

/* --- hover "grudado": no celular o :hover fica ativo depois do toque (alternativa/cartão ficam marcados) --- */
@media(hover:none){
 .alt:hover:not(:disabled):not(.sel){background:var(--card)}
 .card:hover{border-color:var(--bd)}
 .sj:hover:not(.on),.sj[style*="--c"]:hover:not(.on){border-color:var(--bd);background:var(--card)}
 .sj2:hover,.sj2[style*="--c"]:hover{border-color:var(--bd);background:var(--card)}
 .btn.sec:hover:not(:disabled),.btn.ghost:hover:not(:disabled){background:transparent;border-color:var(--bd2)}
 .btn:hover:not(:disabled):not(.sec):not(.ghost){filter:none}
 .sb-cta:hover{transform:none;filter:none}
 .sb-opt:hover:not(.on){border-color:var(--bd)}
 .sb-ghost:hover,.au-me:hover{background:none;color:var(--mu)}
 .ib:hover:not(:disabled){background:none}   /* só o fundo: a cor dos botões ativos (coração, som) continua */
 .au-out:hover{background:none;border-color:var(--bd2,var(--bd))}
}

/* --- alvos de toque de pelo menos 44 px --- */
@media(pointer:coarse){
 .pn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
 .seg button{min-height:44px}
 .au-out,.rvb{min-height:40px}
 .elinfo .btn{min-height:40px}
}

/* --- campos: 16 px evita o zoom automático do iOS ao focar --- */
.sb-copy input{font-size:16px}
@media(max-width:700px){input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:max(16px,1em)}}

/* --- janelas (assinatura, perfil, apoio, zoom): a página de trás não rola junto --- */
@media(max-width:899px){html:has(.sb,.pf,.dn,.xpm,.zv){overflow:hidden}}
.sb,.sb-box,.pf-box,.dn,.zv,.xpm,.side.open{overscroll-behavior:contain}
.side.open{max-height:55dvh}

/* --- tela de entrada: altura exata (o cabeçalho tem 72 px + 1 px de borda; antes sobrava ~7 px de rolagem) --- */
.lp-hero{min-height:calc(100dvh - 74px)}

/* --- telas com recorte (notch) e modo paisagem --- */
@media(max-width:899px){
 main:not(.lp),#hd{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
 nav{padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right))}
 .dock,.dock2{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
}
.xpg{top:calc(76px + env(safe-area-inset-top,0px))}
@media(max-height:480px) and (max-width:899px){            /* celular deitado, barra baixa */
 nav{padding-top:2px;padding-bottom:calc(2px + env(safe-area-inset-bottom,0px))}
 nav button{min-height:40px;flex-direction:row;gap:6px;font-size:12px}
 nav button svg{width:18px;height:18px}
 main:not(.lp){padding-bottom:72px}
 .sb-box,.pf-box{max-height:100dvh}
}
@media(min-width:900px) and (max-height:520px){            /* celular grande deitado vira barra lateral: cabe os 6 botões */
 nav{padding:8px;gap:2px;overflow-y:auto}
 nav button{min-height:44px;gap:1px}
 nav button svg{width:20px;height:20px}
}

/* --- telas pequenas (iPhone SE, Androids compactos) --- */
@media(max-width:380px){
 main:not(.lp){padding-top:16px}
 h1{font-size:26px}.hero2 h1{font-size:28px}.lp-hero h1{font-size:clamp(32px,10vw,38px)}
 .alt{padding:14px 12px;font-size:16px}
 .kpi b{font-size:26px}.kpi{padding:12px 14px}
 .sts b{font-size:21px}
 .xpc-n{font-size:22px}
 .lp-stats>div{padding-right:14px;margin-right:14px}.lp-stats dd{font-size:24px}
 .cont{flex-direction:column;align-items:stretch}.cont .btn{width:100%}
 .sb-title{font-size:23px}.sb-num{font-size:48px}.sb-pop-pr b{font-size:21px}
 .sb-box{padding-left:12px;padding-right:12px}
 .pf-box{padding-left:14px;padding-right:14px}
 .w{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
}

/* ===== Correções: simulado, página inicial e "Mais filtros" ===== */

/* Simulado: espaço livre embaixo para a barra fixa (Voltar/Próxima) nunca tapar a última alternativa */
body.ins main{padding-bottom:calc(190px + env(safe-area-inset-bottom,0px))}
.sim>div:first-child{padding-bottom:24px}
.qtop .btn.sm{min-height:40px}
/* painel de questões: rola por dentro e o botão Finalizar fica sempre visível */
@media(min-width:900px){
 .side,.side.open{top:16px;max-height:calc(100dvh - 130px);overflow-y:auto}
}
.side.open{max-height:50dvh;padding-bottom:calc(16px + 96px + env(safe-area-inset-bottom,0px))}

/* Página inicial: o cabeçalho com a logo não flutua mais por cima do texto ao rolar */
header.lp-bar{position:relative;top:auto;max-width:none;margin:0;padding:0;background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}

/* Mais filtros: um grupo embaixo do outro, chips quebrando linha, sem invadir o resumo "Sua sessão" */
.cfg>div:first-child{min-width:0}
.mfl .lb{margin:18px 0 8px}
.mfl .lb:first-child{margin-top:4px}
.mfl .chip{max-width:100%;margin:0}
.sumc{max-height:calc(100dvh - 32px);overflow-y:auto}

/* Simulado: a barra Voltar/Próxima é position:fixed. A animação de entrada (#app>*{animation:in both}) deixava
   o .sim como "caixa" da barra fixa, que então ficava colada no fim do conteúdo, em cima da alternativa E. */
#app>.sim,#app>.sim>div:first-child{animation:none;transform:none}

/* Painel "Questões" do simulado: cabeçalho com botão Fechar (só no celular; no computador o painel é lateral e fixo) */
.sdh{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sdx{min-height:40px;width:auto;padding:0 16px}
@media(min-width:900px){.sdx{display:none}}
.pn svg{width:14px;height:14px;margin-left:4px;vertical-align:-2px}