/* Mental LifeFit — quiz 030 "clean": mesma identidade visual do app 014 (v5).
   Fundo cinza claro, cartões brancos com borda fina, um destaque violeta, botão escuro, Manrope.
   Fotos sempre inteiras dentro de molduras arredondadas em tom pastel; nada de texto sobre foto.
   Só sobrescreve src/style.css quando o <html> tem a classe "clean". */
html.clean{--bg:#f6f6f8;--bg2:#eeeef2;--card:#fff;--tx:#14151a;--sub:#5d606a;--fraco:#9a9ca5;--borda:#e6e6ec;
  --ac:#e10600;--acC:#ffece6;--ac2:#fa8072;--verde:#16955f;--verdeC:#e5f6ee;--alerta:#d23a40;--alertaC:#fdeeee;
  --lilas:#ffece6;--menta:#e5f6f1;--rosa:#f3f1f6;--serif:"Manrope","Plus Jakarta Sans",system-ui,sans-serif;--r:16px}
html.clean,html.clean body{background:var(--bg);color:var(--tx);font-family:"Manrope","Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Arabic","Noto Sans JP",sans-serif}
html.clean .app{padding:0 18px 130px}

/* topo: barra branca fina, marca com o ponto violeta do app */
html.clean header{background:var(--bg);padding:10px 0 8px}
html.clean .logo{font-size:16px;font-weight:800;letter-spacing:-.2px;display:flex;align-items:center;justify-content:center;gap:0}
html.clean .logo span{color:var(--tx);margin-inline-start:.28em}
html.clean .logo .marca{width:22px;height:22px;border-radius:7px;background:var(--ac);display:inline-block;position:relative;flex:none;margin-inline-end:7px}
html.clean .logo .marca::after{content:"";position:absolute;inset:6px;border-radius:50%;border:2.5px solid #fff;border-bottom-color:transparent;transform:rotate(45deg)}
html.clean .lang{background:var(--card);border-color:var(--borda);border-radius:10px}
html.clean .secao{font-size:11.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--ac);margin-top:6px}
html.clean .segs{max-width:150px;gap:5px}
html.clean .segs i{height:3px;background:var(--borda)}html.clean .segs i.on{background:var(--ac)}
html.clean .barra{height:3px;background:var(--borda);margin-top:8px}html.clean .barra i{background:var(--ac)}

/* tipografia: uma escala só, alinhada à esquerda como no app */
html.clean h1{font-family:var(--serif);font-size:25px;font-weight:800;letter-spacing:-.5px;line-height:1.2;text-align:start;margin:16px 0 8px;text-wrap:balance}
html.clean h1 em{color:var(--ac)}
html.clean .sub{text-align:start;color:var(--sub);font-size:15px;line-height:1.5}
html.clean .txt{color:var(--sub);font-size:15.5px}html.clean .txt b{color:var(--tx)}
html.clean .tag{text-align:start;color:var(--ac);font-size:11.5px;letter-spacing:.8px;font-weight:800;margin:14px 0 4px}
html.clean .legal,html.clean .priv{color:var(--fraco)}

/* fotos: moldura arredondada pastel, foto inteira, sem círculo */
html.clean .hero{height:min(27vh,210px);margin:10px 0 0;border-radius:20px;background:linear-gradient(180deg,var(--lilas),#f7f6fd);overflow:hidden;border:1px solid var(--borda);align-items:flex-end}
html.clean .hero::before{display:none}
html.clean .hero img{height:94%;filter:none}

/* opções: cartões brancos com borda fina, seleção violeta */
html.clean .ops{gap:8px;margin-top:14px}
html.clean .op{background:var(--card);border:1.5px solid var(--borda);box-shadow:none;border-radius:14px;padding:16px;font-size:15.5px;font-weight:700}
html.clean .op:active{transform:scale(.99)}
html.clean .op.sel{border-color:var(--ac);background:var(--acC)}
html.clean .op .ck{border-radius:50%;border-color:#cfd0d6}
html.clean .op.sel .ck{background:var(--ac);border-color:var(--ac)}

/* escolha de gênero: layout em src/style.css (foto inteira, rótulo abaixo) */

/* escala 1–5 */
html.clean .likert button{border-radius:14px;border-color:var(--borda);background:var(--card)}
html.clean .likert button.sel{background:var(--ac);border-color:var(--ac);color:#fff}
html.clean .likert-l{color:var(--sub)}

/* botões: escuro como no app; o violeta fica para destaque */
html.clean .rodape{background:linear-gradient(transparent,var(--bg) 30%)}
html.clean .btn{background:var(--tx);color:#fff;border-radius:14px;box-shadow:none;font-weight:800;letter-spacing:0}
html.clean .btn:disabled{background:#c9cad1}
html.clean .btn.ac{background:var(--ac)}
html.clean .link{color:var(--ac)}
html.clean .campo{border-radius:14px;border-color:var(--borda);background:var(--card)}
html.clean .campo:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--acC)}

/* caixas de informação */
html.clean .caixa{border-radius:14px;background:var(--card);border:1px solid var(--borda)}
html.clean .caixa.alerta{background:var(--alertaC);border-color:#f3cfd1}
html.clean .caixa.ok{background:var(--verdeC);border-color:#c7e8d7}
html.clean .caixa.fato{background:var(--acC);border-color:#ffd2c4}

/* análise / carregando */
html.clean .pct{font-weight:800;letter-spacing:-1px;color:var(--tx)}
html.clean .barra-load{height:6px;background:var(--borda)}html.clean .barra-load i{background:var(--ac)}
html.clean .etapas div{color:var(--fraco)}html.clean .etapas div.ok2{color:var(--tx)}
html.clean .etapas .ok2 i{background:var(--verde);border-color:var(--verde)}
html.clean .modal{background:rgba(20,21,26,.45);backdrop-filter:blur(2px)}
html.clean .box{border-radius:20px;border:1px solid var(--borda)}
html.clean .row button{border-radius:14px;border-color:var(--borda)}
html.clean .row button:last-child{background:var(--tx);border-color:var(--tx);color:#fff}

/* depoimentos e mapa */
html.clean .depo{border-radius:16px;border-color:var(--borda);background:var(--card)}
html.clean .mapa{background:linear-gradient(180deg,var(--lilas),#f7f6fd);border:1px solid var(--borda);border-radius:20px}

/* resultado e oferta: cartão escuro violeta como os destaques do app */
html.clean .res-card{background:linear-gradient(150deg,#161616,#3a0a08 60%,#e10600);color:#fff;border-radius:20px;border:0}
html.clean .res-card h2,html.clean .res-card b{color:#fff}
html.clean .res-card .niveis span{color:rgba(255,255,255,.75)}
html.clean .bloco h2{font-size:19px;font-weight:800;letter-spacing:-.3px;text-align:start}
html.clean .lista-at div,html.clean .inclui div{background:var(--card);border:1px solid var(--borda);border-radius:14px}
html.clean .inclui i{background:var(--ac);color:#fff}
html.clean .barra-of{background:var(--tx);color:#fff}
html.clean .barra-of button{background:var(--ac);color:#fff}
html.clean .promo{border-radius:20px;border:0;background:linear-gradient(135deg,#161616,#3a0a08 55%,#e10600);color:#fff;padding:16px}
html.clean .promo .cod small{color:#ffd2c4;letter-spacing:.4px;text-transform:uppercase;font-size:11.5px}
html.clean .promo .cod div{background:#ffd84d;color:#1a1400;border:2px dashed #b88a00;border-radius:12px;font-size:19px;font-weight:800;padding:12px 10px}
html.clean .promo .cod div span{background:#1a1400;color:#ffd84d}
html.clean .promo .tm{color:#ffd2c4}html.clean .promo .q b{color:#fff}html.clean .promo .q span{color:#ffd2c4}
html.clean .planos{gap:10px}
html.clean .plano{border-radius:18px;border:1.5px solid var(--borda);background:var(--card);padding:16px 14px;transition:border-color .15s,transform .15s}
html.clean .plano .nome{font-size:14.5px;font-weight:800;letter-spacing:.2px}
html.clean .plano .de{color:#b3485a}
html.clean .plano > div:not(.dia) b{font-size:17px;font-weight:800}
html.clean .plano .dia{background:var(--bg2);border-radius:14px;padding:8px 12px;min-width:92px}
html.clean .plano .dia b{font-size:21px;font-weight:800;letter-spacing:-.3px}
html.clean .plano .dia span{color:var(--sub)}
html.clean .plano.sel{border:2px solid var(--ac);background:var(--acC);box-shadow:0 8px 22px rgba(225,6,0,.18);transform:scale(1.01)}
html.clean .plano.sel .r{background:var(--ac);border-color:var(--ac);box-shadow:inset 0 0 0 4px #fff}
html.clean .plano.sel .dia{background:var(--ac)}
html.clean .plano.sel .dia b,html.clean .plano.sel .dia span{color:#fff}
html.clean .plano.pop{padding-top:40px}
html.clean .selo{background:linear-gradient(90deg,#3a0a08,#e10600);font-size:12px;letter-spacing:.6px;padding:7px;border-radius:16px 16px 0 0}
html.clean .garantia{border-radius:16px;border:1px solid var(--borda);background:var(--card)}
html.clean .garantia .sel30{background:var(--verde);color:#fff}
html.clean .faq details{border-color:var(--borda)}

/* checkout */
html.clean .ckx{background:var(--bg)}
html.clean .ckx .linha,html.clean .ckx .cod,html.clean .ckx .total{border-color:var(--borda)}
html.clean .ck-planos .on{border-color:var(--ac);background:var(--acC)}
html.clean .ck-metodos .on{border-color:var(--ac);background:var(--acC)}
html.clean .ckx input:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--acC)}
html.clean .promo .q div{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff}
html.clean .depo-of{border-color:var(--borda);background:var(--card)}
html.clean .depo-of img{box-shadow:0 0 0 3px var(--acC)}
html.clean .oferta2 h2{font-size:21px}
html.clean .ad-col,html.clean .proj{border-color:var(--borda);background:var(--card)}
html.clean .saida-box{font-family:Manrope,system-ui,sans-serif}
html.clean .historia{background:var(--card);border-color:var(--borda)}html.clean .hist-itens div{background:var(--bg2)}
@media (max-width:370px){html.clean .promo{flex-wrap:wrap}html.clean .promo .cod{flex:1 1 100%}html.clean .promo .tm{flex:1 1 100%;display:flex;align-items:center;justify-content:space-between;gap:10px}html.clean .promo .q{justify-content:flex-end}}