/* === Erwise Questionários — design legacy Dominus (replica do Laravel original) === */

/* Fonts Vistol Sans */
@font-face { font-family: 'Vistol Sans'; src: url('../fonts/VistolSans-Thin.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Vistol Sans'; src: url('../fonts/VistolSans-ExtraLight.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Vistol Sans'; src: url('../fonts/VistolSans-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Vistol Sans'; src: url('../fonts/VistolSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Vistol Sans'; src: url('../fonts/VistolSans-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Vistol Sans'; src: url('../fonts/VistolSans-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Vistol Sans'; src: url('../fonts/VistolSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Vistol Sans'; src: url('../fonts/VistolSans-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Vistol Sans'; src: url('../fonts/VistolSans-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

html { scroll-behavior: smooth; }
body { font-family: 'Vistol Sans', system-ui, -apple-system, sans-serif; }
.font-vistol-sans, .font-vistol { font-family: 'Vistol Sans', sans-serif !important; }

/* Componentes (do app.css original) */
.category-icon {
    width: 5rem; height: 5rem;
    border-top-left-radius: 9999px; border-top-right-radius: 9999px; border-bottom-right-radius: 9999px;
    display: flex; justify-content: center; align-items: center;
}

.form-description {
    display: block; font-size: 0.75rem; font-weight: 200; font-family: 'Vistol Sans', sans-serif; color: #fff;
}
.form-description ul { list-style: disc; padding-left: 1rem; }

.diagnosis-btn-submit {
    width: 100%; transition: transform 0.15s, background-color 0.15s;
    border-radius: 9999px; display: block;
    font-size: 1.25rem; font-weight: 700; font-family: 'Vistol Sans', sans-serif;
    text-align: center; color: #fff; background: #FFCD00;
    cursor: pointer; padding: 1.25rem 1rem; border: 0;
}
@media (min-width: 1536px) { .diagnosis-btn-submit { font-size: 1.5rem; } }
.diagnosis-btn-submit:hover { transform: scale(0.95); background: #FFCD20; }
.diagnosis-btn-submit:disabled { background: rgba(34,197,94,0.5); cursor: not-allowed; }

.question-label {
    display: block; height: 100%; flex: 1; transition: all 0.15s;
    border-radius: 1rem;
    font-size: 1.125rem; font-weight: 200; font-family: 'Vistol Sans', sans-serif;
    color: #303030; background: #fff; cursor: pointer; padding: 1rem;
}
@media (min-width: 1024px) {
    .question-label {
        height: 3.5rem;
        border-radius: 0;
        border-top-left-radius: 9999px;
        border-top-right-radius: 9999px;
        border-bottom-right-radius: 9999px;
    }
}
@media (min-width: 1536px) { .question-label { font-size: 1.5rem; } }
.question-label:hover { color: #fff; background: #e51f43; }
.question-radio { display: none; }
.question-radio:checked ~ .question-label { color: #fff; background: #0891b2; }

.question-description { display: block; word-break: break-all; color: #1f2937; }
.question-description a { color: #3b82f6; }
.question-description a:hover { text-decoration: underline; }

.border-color-0 { border-color: #ef4444 !important; }
.border-color-1 { border-color: #22c55e !important; }
.border-color-2 { border-color: #eab308 !important; }

.category-item {
    border-color: #06b6d4;
    font-size: 1.25rem; font-weight: 400; font-family: 'Vistol Sans', sans-serif;
    color: #120199; cursor: pointer; padding: 0.75rem 1.5rem;
    transition: all 0.15s; list-style: none;
}
@media (min-width: 1536px) { .category-item { font-size: 1.5rem; } }
.category-item:hover { color: #fff; background: #00B9A3; }
.category-item.is-active { font-weight: 500; color: #fff; background: #00B9A3; }

.section-question { width: 100%; display: none; }
.section-question.is-active { display: block; }

.funnel-content { display: block; font-weight: 300; font-family: 'Vistol Sans', sans-serif; }
.funnel-content strong { font-weight: 700; color: #FF003C; }

.funnel-box-description {
    width: 100%; min-height: 400px;
    border-top-left-radius: 9999px; border-top-right-radius: 9999px; border-bottom-right-radius: 9999px;
    display: flex; justify-content: center; background: #F0004A;
    margin-bottom: 2rem; padding: 6rem 3rem 0;
}
@media (min-width: 1024px) { .funnel-box-description { width: 500px; min-height: 500px; padding: 6rem 6rem 0; } }
@media (min-width: 1536px) { .funnel-box-description { width: 620px; min-height: 620px; padding: 10rem 6rem 0; } }

.funnel-description {
    display: block; font-size: 1.5rem; font-weight: 600; font-family: 'Vistol Sans', sans-serif;
    text-align: center; color: #fff;
}
@media (min-width: 1024px) { .funnel-description { font-size: 1.875rem; } }
@media (min-width: 1536px) { .funnel-description { font-size: 2.25rem; } }
.funnel-description strong { color: #FFCD00; }

/* Header / Footer */
.dominus-header {
    background: #fff;
    padding: 1.1rem 0;
    display: flex; justify-content: center;
    box-shadow: 0 2px 8px rgba(15,23,42,0.06);
    border-bottom: 1px solid #f1f5f9;
}
.dominus-header img {
    max-height: 64px; max-width: 220px;
    object-fit: contain; display: block;
    transition: transform 0.2s;
}
.dominus-header a:hover img { transform: scale(1.04); }

.dominus-footer { background: #17048B; padding: 1rem 0; text-align: center; }
.dominus-footer p { color: #fff; font-size: 0.85rem; margin: 0; font-family: 'Vistol Sans', sans-serif; }
.dominus-footer a { color: #FFCD00; text-decoration: none; font-weight: 600; }
.dominus-footer a:hover { text-decoration: underline; }
.dominus-footer strong { color: #fff; font-weight: 700; }

/* Cores utilitárias do design */
.text-dominus-teal { color: #00BAA3; }
.text-dominus-blue { color: #17048B; }
.bg-dominus-teal  { background: #00B9A3; }
.bg-dominus-yellow{ background: #FFCD00; }
.bg-dominus-red   { background: #FF003C; }

/* Quiz: letras A/B/C/D */
.quiz-letter {
    width: 3.5rem; height: 3.5rem;
    border-top-left-radius: 9999px; border-top-right-radius: 9999px; border-bottom-left-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: #fff; background: #06b6d4;
    margin-right: 0.5rem; flex-shrink: 0;
}

/* Relatório: ícone + caixa de resposta */
.report-icon-box {
    width: 3.5rem; height: 3.5rem;
    border-top-left-radius: 9999px; border-top-right-radius: 9999px; border-bottom-left-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    margin-right: 0.5rem; padding: 1rem;
}
.report-icon-box svg { width: 1.5rem; height: 1.5rem; fill: #fff; }
.report-answer-pill {
    flex: 1; border-width: 2px; border-style: solid;
    border-radius: 1.5rem; padding: 1rem 1rem 1rem 1rem;
}
@media (min-width: 1024px) {
    .report-answer-pill {
        border-radius: 0;
        border-top-left-radius: 9999px; border-top-right-radius: 9999px; border-bottom-right-radius: 9999px;
    }
}
.report-answer-pill p {
    font-size: 1.125rem; font-family: 'Vistol Sans', sans-serif; color: #303030; margin: 0;
}
@media (min-width: 1536px) { .report-answer-pill p { font-size: 1.5rem; } }

.weight-0 { background: #CB0033; }
.weight-1 { background: #FFCD00; }
.weight-2 { background: #00B9A3; }
.border-weight-0 { border-color: #CB0033; }
.border-weight-1 { border-color: #FFCD00; }
.border-weight-2 { border-color: #00B9A3; }

/* PDF button flutuante */
.pdf-fab {
    position: fixed; right: 2rem; bottom: 2rem; z-index: 50;
    display: inline-flex; align-items: center;
    background: #FFCD00; color: #fff; font-weight: 500;
    border: 1px solid #fff; border-radius: 9999px;
    padding: 0.5rem 1.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: transform 0.15s; cursor: pointer; text-decoration: none;
}
.pdf-fab:hover { transform: scale(0.95); color: #fff; }
.pdf-fab svg { width: 1rem; height: 1rem; fill: #fff; margin-right: 0.5rem; }

/* Swiper override visual */
.swiper-button-prev, .swiper-button-next { display: none !important; }

/* ===========================================================
   RICH CONTENT (feedback / descrição vindos do editor admin)
   =========================================================== */
.rich-content { line-height: 1.6; }
.rich-content > *:first-child { margin-top: 0; }
.rich-content > *:last-child  { margin-bottom: 0; }
.rich-content p { margin: 0 0 0.75em; }
.rich-content p:empty { display: none; }
.rich-content strong, .rich-content b { font-weight: 700; color: inherit; }
.rich-content em, .rich-content i { font-style: italic; }
.rich-content u { text-decoration: underline; }
.rich-content s { text-decoration: line-through; }
.rich-content h1, .rich-content h2, .rich-content h3,
.rich-content h4, .rich-content h5, .rich-content h6 {
    font-weight: 700; margin: 1em 0 0.5em; line-height: 1.25; color: inherit;
}
.rich-content h1 { font-size: 1.5em; }
.rich-content h2 { font-size: 1.3em; }
.rich-content h3 { font-size: 1.15em; }
.rich-content h4 { font-size: 1.05em; }
.rich-content ul, .rich-content ol {
    margin: 0.5em 0 0.75em; padding-left: 1.5em;
}
.rich-content ul { list-style: disc; }
.rich-content ol { list-style: decimal; }
.rich-content li { margin-bottom: 0.35em; line-height: 1.55; }
.rich-content li > p { margin: 0; }
.rich-content li::marker { color: currentColor; opacity: 0.7; }
.rich-content a {
    color: #0891b2; text-decoration: underline;
    text-underline-offset: 2px; font-weight: 500;
}
.rich-content a:hover { color: #00B9A3; }
.rich-content blockquote {
    border-left: 3px solid currentColor;
    margin: 0.75em 0; padding: 0.25em 0 0.25em 1em;
    opacity: 0.85; font-style: italic;
}
.rich-content hr { border: 0; border-top: 1px solid #e2e8f0; margin: 1em 0; }
.rich-content br { line-height: 1.5; }

/* Variante "light" (texto branco sobre fundo escuro — usado no relatorio.php hero) */
.rich-content.rich-light a { color: #FFCD00; }
.rich-content.rich-light a:hover { color: #fff; }
.rich-content.rich-light blockquote { border-color: rgba(255,255,255,0.5); }
.rich-content.rich-light hr { border-top-color: rgba(255,255,255,0.2); }

/* ===========================================================
   MOBILE OVERRIDES (≤ 640px)
   Garante que perguntas, relatório e funil ficam confortáveis
   em telas pequenas (360–414px).
   =========================================================== */
@media (max-width: 640px) {
    /* questoes.php — cabeçalho da pergunta */
    .swiper-slide > div:first-child {
        padding: 1.75rem 1.25rem !important;
    }
    .swiper-slide h3 {
        font-size: 1.15rem !important;
        line-height: 1.35 !important;
        word-wrap: break-word;
    }
    .swiper-slide p.text-lg {
        font-size: 0.85rem !important;
        margin-bottom: 0.5rem !important;
        letter-spacing: 0.05em;
    }
    /* opções A/B/C/D */
    .quiz-letter {
        width: 2.5rem !important; height: 2.5rem !important;
        font-size: 0.95rem;
        margin-right: 0.35rem !important;
    }
    .question-label {
        font-size: 0.95rem !important;
        padding: 0.85rem 0.85rem !important;
        line-height: 1.3;
    }
    .swiper-slide > div:nth-child(2) > div {
        padding: 0 0.5rem !important;
    }

    /* botões "Voltar / Próxima / Finalizar" */
    .js-button-next, .js-button-prev, button[type="submit"].js-button-next-12 {
        font-size: 0.85rem !important;
        padding: 0.65rem 0.5rem !important;
    }

    /* relatório (questions): pontuação gigante */
    h3.text-\[80px\], h3.lg\:text-\[120px\] {
        font-size: 4.5rem !important;
        line-height: 1 !important;
        margin: 0.5rem 0 1rem !important;
    }
    h5.text-3xl {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
    }
    p.text-xl {
        font-size: 1rem !important;
        line-height: 1.4 !important;
    }

    /* relatório: categorias-tab (rolagem horizontal) */
    .category-item {
        font-size: 0.85rem !important;
        padding: 0.55rem 0.9rem !important;
        white-space: nowrap;
    }
    /* relatório: ícone + resposta */
    .report-icon-box {
        width: 2.5rem !important; height: 2.5rem !important;
        padding: 0.5rem !important;
    }
    .report-icon-box svg { width: 1rem; height: 1rem; }
    .report-answer-pill {
        padding: 0.7rem 0.9rem !important;
        border-radius: 0.9rem !important;
    }
    .report-answer-pill p { font-size: 0.9rem !important; line-height: 1.35 !important; }
    h6.text-xl { font-size: 1rem !important; line-height: 1.35 !important; }

    /* funil-resultado: cards de números */
    .text-5xl.font-black {
        font-size: 2.25rem !important;
        line-height: 1.05 !important;
    }
    .text-4xl.font-black { font-size: 1.75rem !important; }
    .container { padding-left: 1rem !important; padding-right: 1rem !important; }

    /* botão CTA do relatório */
    .diagnosis-btn-submit { font-size: 1rem !important; padding: 0.9rem 1rem !important; }

    /* show.php — título e descrição da ferramenta */
    h1.text-4xl.lg\:text-5xl { font-size: 1.85rem !important; line-height: 1.15 !important; }

    /* funil — labels e inputs */
    input[type="number"] { font-size: 1rem !important; }

    /* ações finais (já tem grid auto-fit, mas garante padding) */
    .final-actions-wrap { padding: 22px 14px !important; margin-top: 32px !important; }
    .final-actions-wrap h3 { font-size: 1.15rem !important; }
    .final-actions-wrap .subtitle { font-size: 0.85rem !important; margin-bottom: 18px !important; }
    .final-action-btn { padding: 18px 12px !important; }
    .final-action-btn .label { font-size: 0.95rem !important; }
}

/* Telas muito estreitas (≤ 380px) */
@media (max-width: 380px) {
    h3.text-\[80px\] { font-size: 3.5rem !important; }
    .text-5xl.font-black { font-size: 1.9rem !important; }
    .quiz-letter { width: 2.2rem !important; height: 2.2rem !important; font-size: 0.85rem; }
    .question-label { font-size: 0.88rem !important; padding: 0.7rem 0.7rem !important; }
    .swiper-slide h3 { font-size: 1.05rem !important; }
}