/* Nosso Clã · testes (quiz). Usa os tokens e componentes do style.css; aqui só o que é próprio dos testes. */

/* página do teste */
.tt-secao{padding-block:0 clamp(56px,8vw,96px)}
.tt-app{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:clamp(20px,4vw,40px);display:grid;gap:20px;scroll-margin-top:88px}
.tt-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tt-intro{display:grid;gap:18px}
.tt-intro ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.tt-intro li{position:relative;padding-left:26px;color:var(--grafite)}
.tt-intro li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:12px;border-radius:50%;background:var(--lima);border:1.5px solid var(--preto)}
.tt-aviso{font-size:13px;color:var(--cinza)}

/* pergunta */
.tt-topo{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tt-conta{font:400 13px/1.2 var(--mono);color:var(--azul)}
.tt-voltar,.tt-link{background:none;border:0;padding:8px 0;font:400 13px/1.2 var(--mono);color:var(--grafite);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.tt-voltar:hover,.tt-link:hover{color:var(--azul)}
.tt-barra{height:6px;background:var(--fundo);border-radius:999px;overflow:hidden}
.tt-barra span{display:block;height:100%;background:var(--azul);border-radius:999px;transition:width .3s}
.tt-q{font-size:clamp(22px,3vw,30px);line-height:1.2;outline:none}
.tt-opcoes{display:grid;gap:10px}
.tt-opcao{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fff;color:var(--preto);border:1.5px solid var(--linha);border-radius:12px;padding:14px 16px;min-height:56px;font:16px/1.4 var(--sans);cursor:pointer;transition:border-color .15s,background .15s}
.tt-opcao:hover{border-color:var(--preto)}
.tt-opcao[aria-pressed="true"]{border-color:var(--azul);background:var(--azul-suave)}
.tt-tecla{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--fundo);font:400 13px/1 var(--mono)}
.tt-opcao[aria-pressed="true"] .tt-tecla{background:var(--azul);color:#fff}
.tt-dica{font-size:13px;color:var(--cinza)}
@media (hover:none){.tt-dica{display:none}}

/* resultado */
.tt-resultado{display:grid;gap:22px}
.tt-aviso-comp{background:var(--ceu);border-radius:10px;padding:12px 14px;font-size:15px}
.tt-aviso-comp .tt-link{color:var(--preto);padding:0;font:inherit;text-decoration:underline}
.tt-perfil{background:var(--preto);color:#F4F4F4;border-radius:var(--raio);padding:clamp(22px,4vw,36px);display:grid;gap:12px}
.tt-perfil .chapeu{color:var(--lima)}
.tt-perfil h2{font-size:clamp(32px,5vw,48px);outline:none}
.tt-perfil p{color:#C9C9C9}
.tt-perfil .tt-frase{color:#fff;font-size:clamp(18px,2vw,21px);font-weight:600;letter-spacing:-.01em;line-height:1.35}
.tt-selos{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.tt-bloco{display:grid;gap:14px}
.tt-eixos{display:grid;gap:16px}
.tt-eixo{display:grid;gap:6px}
.tt-eixo-topo{display:flex;justify-content:space-between;gap:10px;font-weight:600}
.tt-eixo-num{font:400 13px/1.6 var(--mono);color:var(--grafite);white-space:nowrap}
.tt-trilho{height:10px;background:var(--fundo);border-radius:999px;overflow:hidden}
.tt-trilho span{display:block;height:100%;width:0;background:var(--azul);border-radius:999px;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.tt-eixo p{font-size:14px;color:var(--grafite)}
.tt-alerta{border:1.5px solid var(--preto);border-radius:12px;padding:18px;display:grid;gap:8px;background:#FFFBEA}
.tt-alerta .tag{justify-self:start}
.tt-alerta p{color:var(--grafite);font-size:15px}
/* oferta em destaque do perfil (ex.: a modalidade de mentoria indicada no diagnóstico da agência) */
.tt-oferta{background:var(--azul);color:#fff;border-radius:var(--raio);padding:clamp(20px,3.5vw,30px);display:grid;gap:10px}
.tt-oferta .chapeu{color:var(--lima)}
.tt-oferta h3{font-size:clamp(24px,3vw,30px)}
.tt-oferta p{color:#DCD8FF}
.tt-oferta .btn{margin-top:6px}
.tt-passo{background:var(--lima);border-radius:12px;padding:20px;display:grid;gap:8px}
.tt-passo .chapeu{color:var(--preto)}
.tt-passo p{font-size:18px;line-height:1.5;font-weight:500}
.tt-recs{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.tt-rec{display:grid;gap:6px;align-content:start;text-decoration:none;border:1px solid var(--linha);border-radius:12px;padding:16px;background:#fff;transition:border-color .15s,transform .15s}
.tt-rec:hover{border-color:var(--preto);transform:translateY(-2px)}
.tt-rec b{font-size:17px;letter-spacing:-.01em;line-height:1.25}
.tt-rec > span:not(.chapeu):not(.ir){font-size:14px;color:var(--grafite)}
.tt-rec .ir{font:400 13px/1 var(--mono);color:var(--azul);margin-top:4px}
.tt-partilha{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.tt-partilha-msg{font-size:14px;color:var(--grafite)}
.tt-link-campo{font:14px var(--sans);padding:8px 10px;border:1.5px solid var(--linha);border-radius:8px;width:min(100%,360px);margin-top:6px}
.tt-plano{border-top:1px solid var(--linha);padding-top:24px;display:grid;gap:14px}
.tt-plano ul{margin:0;padding-left:1.2em;color:var(--grafite);display:grid;gap:4px}
.form-msg.tt-sem-envio{background:var(--azul-suave);color:var(--preto);display:grid;gap:12px}
.tt-sem-envio-acoes{display:flex;flex-wrap:wrap;gap:10px}
.tt-refazer{justify-self:start}

/* hub */
.tt-cartoes{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.tt-cartao .meta{gap:6px 10px}
.tt-cartao h2,.tt-cartao h3{font-size:clamp(21px,2vw,25px);letter-spacing:-.02em;line-height:1.15}
.tt-breve{border-style:dashed;background:transparent}
.tt-breve:hover{transform:none;border-color:var(--linha)}

/* fotos (geradas por IA; registro em data/imagens.json, docs/imagens.md) */
.tt-cartao-com-foto{padding-top:0;overflow:hidden}
.tt-cartao-foto{margin:0 -24px 6px;aspect-ratio:16/10;overflow:hidden;background:var(--linha)}
.tt-cartao-foto img{width:100%;height:100%;object-fit:cover}
.tt-capa{margin:28px 0 0;border-radius:var(--raio);overflow:hidden;aspect-ratio:21/9;background:var(--linha)}
.tt-capa img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:600px){.tt-capa{aspect-ratio:16/10}}