/* =====================================================
QUIZ AUTOAVALIAÇÃO
===================================================== */

.progress{
height:8px;
background:#e5e7eb;
border-radius:999px;
overflow:hidden;
margin:8px 0 20px
}

.progress i{
display:block;
height:100%;
width:0%;
background:linear-gradient(90deg,var(--brand),var(--brand-2));
transition:width .3s
}

.step{
display:none
}

.step.active{
display:block;
animation:fade .25s ease
}

@keyframes fade{
from{opacity:.5;transform:translateY(4px)}
to{opacity:1;transform:none}
}

.row{
display:grid;
gap:12px
}

@media(min-width:680px){

.row.cols-2{
grid-template-columns:1fr 1fr
}

.row.cols-3{
grid-template-columns:repeat(3,1fr)
}

}

.input,
select,
textarea{

width:100%;

padding:.75rem .9rem;

border-radius:10px;

border:1px solid rgba(0,0,0,.15);

font:inherit

}

.input:focus,
select:focus{

outline:none;
border-color:var(--brand)

}

.help{
font-size:.9rem;
color:var(--muted)
}

.nav{

display:flex;
justify-content:space-between;
margin-top:1rem

}

.result{
border-left:4px solid var(--brand);
padding-left:12px
}

.kpis{

display:grid;
gap:.5rem;
margin:1rem 0

}

.kpi{

padding:.6rem;

border:1px dashed rgba(0,0,0,.15);

border-radius:8px;

font-size:.9rem

}

.switch{

display:flex;
align-items:center;
gap:.6rem

}

.footer-cta{

display:flex;
flex-wrap:wrap;
gap:.5rem;
margin-top:1rem

}