/* -------------------------
BARRA DE PROGRESO
------------------------- */

.pf-progress{
    width:100%;
    height:6px;
    background:#eee;
    margin-bottom:20px;
    border-radius:3px;
    overflow:hidden;
}

.pf-progress-bar{
    height:6px;
    width:0%;
    background:#1e2c4c;
    transition:width .3s ease;
}

.pf-progress-text{
    margin-top:10px;
    font-size:14px;
    color:#666;
}


/* -------------------------
PASOS DE LA QUIZ
------------------------- */

.pf-step{
    display:none;
}

.pf-step.active{
    display:block;
}


/* -------------------------
RESPUESTAS
------------------------- */

.pf-answer{
    display:flex;
    align-items:center;
    justify-content:space-around;
    flex-wrap:wrap;
    gap:10px;
}

.pf-answer-btn{
    display:block;
    width:100%;
    margin:10px 0;
    padding:14px 16px;
    background:#fff;
    border:1px solid #ddd;
    border-radius:6px;
    cursor:pointer;
    text-align:left;
    font-size:15px;
    transition:all .2s ease;
}

.pf-answer-btn:hover{
    background:#f5f5f5;
    border-color:#ccc;
}


/* -------------------------
BOTÓN VOLVER
------------------------- */

.pf-back{
    margin-top:20px;
    background:#eee;
    border:0;
    padding:10px 16px;
    border-radius:4px;
    cursor:pointer;
    transition:background .2s;
}

.pf-back:hover{
    background:#ddd;
}


/* -------------------------
RESULTADOS PRODUCTOS
------------------------- */

.pf-results-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.pf-product{
    text-align:center;
}

.pf-product img{
    max-width:100%;
    height:auto;
}