/* ============================================================
   FAQ – IBPIC® Educação
   /educacao/assets/css/faq.css
   ============================================================ */

.faq-page {
    --faq-dark: var(--brand-900, #163E59);
    --faq-text: var(--text-default, #263A4F);
    --faq-muted: var(--text-muted, #667687);
    --faq-border: var(--border-light, #E2E8ED);
    --faq-soft: var(--edu-light, #FFF0E8);
    --faq-accent: var(--edu-accent, #E8844F);
    --faq-primary: var(--edu-dark, #C96A3A);

    color: var(--faq-text);
    background: var(--surface-page, #F7F9FC);
}


.faq-page .container {
    width: min(100% - 32px, 1120px);
    margin-inline: auto;
}


/* ============================================================
   HERO
   ============================================================ */

.faq-hero {
    padding:
        clamp(56px, 8vw, 92px)
        0
        clamp(48px, 7vw, 76px);

    color: #FFFFFF;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(242, 166, 122, 0.18),
            transparent 33%
        ),
        linear-gradient(
            135deg,
            var(--faq-dark),
            #0F2A44
        );

    text-align: center;
}


.faq-eyebrow {
    display: inline-flex;

    margin-bottom: 14px;

    padding:
        6px 13px;

    border:
        1px solid rgba(255, 255, 255, 0.26);

    border-radius:
        999px;

    font-size:
        0.76rem;

    font-weight:
        750;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.faq-hero h1 {
    margin:
        0 0 14px;

    color:
        #FFFFFF;

    font-size:
        clamp(2.2rem, 6vw, 3.8rem);

    letter-spacing:
        -0.045em;

    line-height:
        1.05;
}


.faq-hero > .container > p {
    max-width:
        760px;

    margin:
        0 auto;

    color:
        rgba(255, 255, 255, 0.84);

    font-size:
        clamp(1rem, 2vw, 1.16rem);

    line-height:
        1.75;
}


.faq-search-wrap {
    position:
        relative;

    max-width:
        680px;

    margin:
        30px auto 0;
}


.faq-search-wrap > i {
    position:
        absolute;

    top:
        50%;

    left:
        18px;

    transform:
        translateY(-50%);

    color:
        #7A8794;

    pointer-events:
        none;
}


.faq-search {
    width:
        100%;

    min-height:
        54px;

    padding:
        14px 18px 14px 48px;

    color:
        var(--faq-text);

    background:
        #FFFFFF;

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius:
        14px;

    font:
        inherit;

    box-shadow:
        0 16px 34px rgba(4, 19, 30, 0.18);

    outline:
        none;
}


.faq-search:focus {
    border-color:
        var(--faq-accent);

    box-shadow:
        0 0 0 4px rgba(232, 132, 79, 0.18),
        0 16px 34px rgba(4, 19, 30, 0.18);
}


/* ============================================================
   CONTEÚDO
   ============================================================ */

.faq-main {
    padding:
        clamp(52px, 8vw, 86px)
        0;
}


.faq-heading {
    max-width:
        780px;

    margin:
        0 auto 30px;

    text-align:
        center;
}


.faq-heading h2 {
    margin:
        12px 0;

    color:
        var(--faq-dark);

    font-size:
        clamp(1.85rem, 4vw, 2.6rem);

    letter-spacing:
        -0.035em;

    line-height:
        1.15;
}


.faq-heading .highlight {
    color:
        var(--faq-primary);
}


.faq-heading > p {
    margin:
        0;

    color:
        var(--faq-muted);

    line-height:
        1.75;
}


.faq-filters {
    display:
        flex;

    justify-content:
        center;

    gap:
        9px;

    flex-wrap:
        wrap;

    margin:
        0 0 34px;
}


.faq-filter {
    padding:
        9px 15px;

    color:
        var(--faq-dark);

    background:
        #FFFFFF;

    border:
        1px solid var(--faq-border);

    border-radius:
        999px;

    font:
        inherit;

    font-size:
        0.88rem;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background 160ms ease;
}


.faq-filter:hover {
    transform:
        translateY(-1px);

    border-color:
        var(--faq-accent);
}


.faq-filter.is-active {
    color:
        #FFFFFF;

    background:
        var(--faq-dark);

    border-color:
        var(--faq-dark);
}


/* ============================================================
   ACCORDION
   ============================================================ */

.faq-list {
    display:
        grid;

    gap:
        12px;

    max-width:
        900px;

    margin:
        0 auto;
}


.faq-item {
    background:
        #FFFFFF;

    border:
        1px solid var(--faq-border);

    border-radius:
        14px;

    box-shadow:
        0 6px 20px rgba(20, 43, 61, 0.045);

    overflow:
        clip;
}


.faq-item[hidden] {
    display:
        none !important;
}


.faq-item h3 {
    margin:
        0;
}


.faq-question {
    display:
        flex;

    width:
        100%;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        20px 22px;

    color:
        var(--faq-dark);

    background:
        transparent;

    border:
        0;

    font:
        inherit;

    font-size:
        1rem;

    font-weight:
        750;

    text-align:
        left;

    cursor:
        pointer;
}


.faq-question:hover {
    background:
        rgba(242, 166, 122, 0.07);
}


.faq-question:focus-visible {
    outline:
        3px solid rgba(232, 132, 79, 0.28);

    outline-offset:
        -3px;
}


.faq-question > i {
    flex:
        0 0 auto;

    color:
        var(--faq-primary);

    transition:
        transform 180ms ease;
}


.faq-question[aria-expanded="true"] > i {
    transform:
        rotate(180deg);
}


.faq-answer {
    padding:
        0 22px 22px;

    color:
        var(--faq-muted);

    line-height:
        1.75;
}


.faq-answer[hidden] {
    display:
        none;
}


.faq-answer p {
    margin:
        0;
}


.faq-answer p + p {
    margin-top:
        12px;
}


.faq-note {
    padding:
        12px 14px;

    background:
        var(--faq-soft);

    border-left:
        3px solid var(--faq-accent);

    border-radius:
        8px;
}


.faq-links {
    display:
        flex;

    gap:
        8px;

    flex-wrap:
        wrap;

    margin-top:
        16px;
}


.faq-links a {
    display:
        inline-flex;

    align-items:
        center;

    padding:
        8px 12px;

    color:
        var(--faq-dark);

    background:
        #FFFFFF;

    border:
        1px solid var(--faq-border);

    border-radius:
        8px;

    font-size:
        0.85rem;

    font-weight:
        700;

    text-decoration:
        none;
}


.faq-links a:hover {
    border-color:
        var(--faq-accent);
}


/* ============================================================
   VAZIO / CONTATO
   ============================================================ */

.faq-empty {
    max-width:
        700px;

    margin:
        28px auto 0;

    padding:
        30px;

    background:
        #FFFFFF;

    border:
        1px dashed var(--faq-border);

    border-radius:
        14px;

    text-align:
        center;
}


.faq-empty[hidden] {
    display:
        none;
}


.faq-empty > i {
    margin-bottom:
        10px;

    color:
        var(--faq-primary);

    font-size:
        1.7rem;
}


.faq-empty h3 {
    margin:
        0 0 8px;

    color:
        var(--faq-dark);
}


.faq-empty p {
    margin:
        0 0 18px;

    color:
        var(--faq-muted);
}


.faq-contact {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 320px);

    gap:
        32px;

    align-items:
        center;

    max-width:
        900px;

    margin:
        48px auto 0;

    padding:
        clamp(24px, 5vw, 38px);

    color:
        #FFFFFF;

    background:
        linear-gradient(
            135deg,
            var(--faq-dark),
            #0F2A44
        );

    border-radius:
        18px;
}


.faq-contact-label {
    color:
        #F6C7AB;

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;
}


.faq-contact h2 {
    margin:
        8px 0;

    color:
        #FFFFFF;

    font-size:
        clamp(1.5rem, 4vw, 2.1rem);
}


.faq-contact p {
    max-width:
        620px;

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.78);

    line-height:
        1.7;
}


.faq-contact-actions {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        10px;

    width:
        100%;
}


.faq-contact-actions .btn {
    display:
        inline-flex;

    width:
        100%;

    min-height:
        52px;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        12px 16px;

    white-space:
        nowrap;

    text-align:
        center;
}


.faq-email-btn {
    color:
        #FFFFFF !important;

    background:
        transparent;

    border:
        1px solid rgba(255, 255, 255, 0.45);
}


.sr-only {
    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    padding:
        0 !important;

    margin:
        -1px !important;

    overflow:
        hidden !important;

    clip:
        rect(0, 0, 0, 0) !important;

    white-space:
        nowrap !important;

    border:
        0 !important;
}


/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 860px) {

    .faq-question {
        padding:
            18px;
    }


    .faq-answer {
        padding:
            0 18px 18px;
    }


    .faq-contact {
        grid-template-columns:
            1fr;
    }


    .faq-contact-actions {
        width:
            min(100%, 340px);
    }
}


@media (max-width: 520px) {

    .faq-page .container {
        width:
            min(100% - 24px, 1120px);
    }


    .faq-filters {
        justify-content:
            flex-start;
    }


    .faq-filter {
        flex:
            1 1 auto;

        text-align:
            center;
    }


    .faq-contact-actions {
        grid-template-columns:
            1fr;

        width:
            100%;
    }


    .faq-contact-actions .btn {
        width:
            100%;

        justify-content:
            center;
    }
}


@media (prefers-reduced-motion: reduce) {

    .faq-filter,
    .faq-question > i {
        transition:
            none;
    }
}