/* QuizFunnel — estilos del motor genérico de embudos gamificados (10 landings de embudo).

   Paleta OFICIAL del Manual de Marca: navy #12154C, cian #50C7E7, azul #3038CF, naranja #F6530E
   (acento escaso). Antes este archivo repetía la paleta anterior a la marca (el ink, el azul y el
   cielo viejos) y Montserrat: como estiliza TODO el cuerpo del quiz —tarjeta, opciones, progreso,
   resultado y la
   puerta de captura de lead, que se pintan por JS—, los embudos se veían con la identidad anterior
   aunque su landing contenedora ya estuviera migrada.

   Los colores se leen de las variables que declara _LandingLayout.cshtml (fuente de verdad única,
   Regla #16); el hex del fallback está solo para el caso de que el CSS se sirva fuera de ese layout. */

.quiz-funnel {
    /* Tokens locales derivados de la marca: un solo punto de cambio dentro del archivo. */
    --qf-ink: var(--brand-navy, #12154C);
    --qf-blue: var(--brand-blue, #3038CF);
    --qf-cyan: var(--brand-cyan, #50C7E7);
    --qf-tint: #EEF0FC;        /* tinte claro del azul de marca (fondos de estado seleccionado) */
    --qf-tint-border: #C9CEF4; /* borde del mismo tinte */
    --qf-body-font: var(--bs-body-font-family, 'Inter', sans-serif);
    --qf-display-font: var(--bs-display-font-family, 'Bebas Neue', 'Inter', sans-serif);

    max-width: 640px; margin: 0 auto; min-height: 420px; position: relative;
}

.qf-card {
    background: #fff; border-radius: 18px; padding: 2.2rem 2rem;
    box-shadow: 0 20px 50px rgba(18, 21, 76, .16);
    transition: opacity .18s ease, transform .18s ease;
}
.qf-enter { opacity: 0; transform: translateY(14px); }
/* La tarjeta saliente vive ~180ms más en el DOM: no debe seguir aceptando clics. */
.qf-leave { opacity: 0; transform: translateY(-14px); pointer-events: none; }

.qf-kicker {
    display: inline-block; font-family: var(--qf-body-font); font-weight: 600;
    font-size: .74rem; letter-spacing: 2.2px; text-transform: uppercase;
    color: var(--qf-blue); background: var(--qf-tint); border: 1px solid var(--qf-tint-border);
    padding: .4rem .9rem; border-radius: 30px; margin-bottom: 1rem;
}
/* Titulares en Bebas Neue (Manual de Marca pág. 18): solo los titulares; el enunciado de la
   pregunta y el cuerpo siguen en Inter, que es lo legible en texto corrido. */
.qf-title { font-family: var(--qf-display-font); font-weight: 400; font-size: 2rem; color: var(--qf-ink); letter-spacing: .5px; text-wrap: balance; margin-bottom: .6rem; line-height: 1.1; }
.qf-sub { color: #5b6b7d; font-size: 1rem; line-height: 1.55; margin-bottom: 1.1rem; }
.qf-meta { font-size: .8rem; color: #8393a3; margin: 1rem 0 0; }
.qf-meta i { margin-right: .35rem; }

.qf-bullets { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.qf-bullets li { display: flex; gap: .6rem; align-items: flex-start; color: #33445a; font-size: .95rem; padding: .3rem 0; }
.qf-bullets li i { color: #16A34A; margin-top: .2rem; }

.qf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    border: none; border-radius: 12px; padding: .8rem 1.6rem;
    font-family: var(--qf-body-font);
    font-weight: 600; font-size: 1rem; cursor: pointer; text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
/* Gradiente azul->cian: es la firma visual de la marca. */
.qf-btn-primary { background: linear-gradient(135deg, var(--qf-blue), var(--qf-cyan)); color: #fff; }
.qf-btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(48, 56, 207, .4); }
.qf-btn-ghost { background: #fff; color: var(--qf-blue); border: 1px solid var(--qf-tint-border); }
.qf-btn-ghost:hover { color: var(--qf-blue); background: var(--qf-tint); }
.qf-btn-block { width: 100%; }
.qf-btn[disabled] { opacity: .7; cursor: default; transform: none; }

.qf-progress { margin-bottom: 1.4rem; }
.qf-progress-label { font-size: .78rem; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: #8393a3; margin-bottom: .45rem; }
.qf-progress-bar { height: 8px; border-radius: 6px; background: #eef1fa; overflow: hidden; }
.qf-progress-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--qf-blue), var(--qf-cyan)); transition: width .35s ease; }

.qf-qtext { font-family: var(--qf-body-font); font-weight: 700; font-size: 1.3rem; color: var(--qf-ink); line-height: 1.35; text-wrap: balance; margin-bottom: .4rem; }
.qf-qhelp { color: #8393a3; font-size: .88rem; margin-bottom: 1rem; }

.qf-options { display: flex; flex-direction: column; gap: .65rem; margin-top: 1.1rem; }
.qf-option {
    display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left;
    background: #f9fbfd; border: 1.5px solid #dbe4ee; border-radius: 12px;
    padding: .9rem 1.1rem; font-size: .98rem; color: #33445a; cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.qf-option:hover { border-color: var(--qf-cyan); background: #fff; transform: translateX(3px); }
.qf-option-dot { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #b9c9da; transition: all .15s ease; }
.qf-option:hover .qf-option-dot { border-color: var(--qf-cyan); }
.qf-option-picked { border-color: var(--qf-blue); background: var(--qf-tint); }
.qf-option-picked .qf-option-dot { border-color: var(--qf-blue); background: var(--qf-blue); box-shadow: inset 0 0 0 3px var(--qf-tint); }

.qf-number-wrap { display: flex; align-items: center; gap: .6rem; margin: 1.1rem 0 .4rem; }
.qf-number {
    flex: 1; border: 1.5px solid #dbe4ee; border-radius: 12px; padding: .85rem 1rem;
    font-size: 1.25rem; font-weight: 600; color: var(--qf-ink); background: #f9fbfd; min-width: 0;
}
.qf-number:focus { outline: none; border-color: var(--qf-cyan); box-shadow: 0 0 0 3px rgba(80, 199, 231, .25); background: #fff; }
.qf-number-prefix, .qf-number-suffix { font-weight: 600; color: #5b6b7d; white-space: nowrap; }

.qf-question .qf-btn { margin-top: .9rem; }
.qf-back { display: inline-flex; align-items: center; gap: .45rem; background: none; border: none; color: #8393a3; font-size: .85rem; margin-top: 1.2rem; cursor: pointer; padding: 0; }
.qf-back:hover { color: var(--qf-blue); }

.qf-error { color: #DC2626; font-size: .85rem; margin: .3rem 0 0; }

.qf-gate-ready { display: inline-flex; align-items: center; gap: .5rem; color: #16A34A; font-weight: 600; font-size: .9rem; margin-bottom: .9rem; }
.qf-gate-form .qf-gate-row { display: flex; gap: .75rem; }
.qf-gate-form input {
    width: 100%; border: 1px solid #dbe4ee; border-radius: 10px; padding: .7rem .9rem;
    margin-bottom: .75rem; font-size: .95rem; background: #f9fbfd; transition: border-color .2s, box-shadow .2s;
}
.qf-gate-form input:focus { outline: none; border-color: var(--qf-cyan); box-shadow: 0 0 0 3px rgba(80, 199, 231, .25); background: #fff; }
.qf-privacy { text-align: center; font-size: .75rem; color: #8393a3; margin: .8rem 0 0; }
.qf-privacy i { margin-right: .3rem; }

.qf-result { text-align: center; }
.qf-score { color: var(--qf-blue); margin-bottom: .4rem; }
.qf-score-num { font-family: var(--qf-display-font); font-weight: 400; font-size: 4.6rem; line-height: 1; letter-spacing: 1px; }
.qf-score-max { font-size: 1.4rem; font-weight: 600; color: #8393a3; }
.qf-result-headline { font-family: var(--qf-display-font); font-weight: 400; font-size: 2rem; color: var(--qf-ink); margin-bottom: .5rem; text-wrap: balance; letter-spacing: .5px; line-height: 1.15; }
.qf-result-line { font-size: 1.05rem; color: #33445a; margin: .4rem 0; }
.qf-result-line strong { color: var(--qf-ink); }

.qf-groups { text-align: left; margin: 1.4rem 0 .4rem; }
.qf-group { display: flex; align-items: center; gap: .7rem; padding: .32rem 0; }
.qf-group-label { flex: 0 0 128px; font-size: .85rem; font-weight: 600; color: #33445a; }
.qf-group-bar { flex: 1; height: 9px; border-radius: 6px; background: #eef1fa; overflow: hidden; }
.qf-group-fill { height: 100%; border-radius: 6px; transition: width .7s cubic-bezier(.2, .7, .3, 1); }
.qf-group-pct { flex: 0 0 42px; text-align: right; font-size: .82rem; font-weight: 700; color: #33445a; }

.qf-weakest { background: #fdf6ec; border: 1px solid #f3dfc0; border-radius: 10px; padding: .7rem .9rem; font-size: .9rem; color: #7a5218; text-align: left; margin-top: .9rem; }
/* Naranja de marca como acento ESCASO: solo el icono de "punto más débil". */
.qf-weakest i { color: var(--brand-orange, #F6530E); margin-right: .4rem; }

/* "Así lo resuelve SolMed": recomendaciones por área débil (config groupAdvice). Verde = solución,
   consistente con el acento funcional OK del sistema visual. */
.qf-advice { background: #f0f9f4; border: 1px solid #cde9d8; border-radius: 10px; padding: .8rem .95rem; text-align: left; margin-top: .7rem; }
.qf-advice-title { font-size: .78rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #16A34A; margin-bottom: .4rem; }
.qf-advice-title i { margin-right: .35rem; }
.qf-advice-item { font-size: .9rem; color: #33445a; margin: .3rem 0 0; line-height: 1.45; }
.qf-advice-item strong { color: var(--qf-ink); }

.qf-ctas { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.5rem; }

@media (max-width: 575.98px) {
    .qf-card { padding: 1.6rem 1.25rem; }
    .qf-gate-form .qf-gate-row { flex-direction: column; gap: 0; }
    .qf-group-label { flex-basis: 96px; font-size: .78rem; }
    .qf-score-num { font-size: 3.8rem; }
}