/* =====================================================
   VARIÁVEIS
===================================================== */

:root {

    --verde: #173b2b;
    --verde-escuro: #102c20;
    --verde-claro: #315844;

    --dourado: #bd8b2c;
    --dourado-claro: #d5ad61;

    --creme: #f7f4ed;
    --branco: #ffffff;

    --texto: #1d2b24;
    --cinza: #69716c;

}


/* =====================================================
   GERAL
===================================================== */

.faq-section,
.faq-hero,
.faq-contato {

    font-family: 'century';

}

.faq-section h1,
.faq-section h2,
.faq-section h3,
.faq-hero h1,
.faq-contato h2 {

    font-family: 'century';

}

.faq-hero {

    position: relative;

    min-height: 650px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            var(--verde-escuro) 0%,
            var(--verde) 55%,
            #244936 100%
        );

    overflow: hidden;

}


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

.faq-hero-content {

    position: relative;

    z-index: 2;

    padding: 70px 0;

}

.faq-hero .tag {

    display: inline-block;

    color: var(--dourado-claro);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 3px;

    margin-bottom: 25px;

}

.faq-hero h1 {

    color: var(--branco);

    font-size: clamp(60px, 7vw, 94px);

    font-weight: 500;

    line-height: .88;

    margin: 0;

}

.faq-hero .linha-dourada {

    margin: 35px 0 25px;

}

.faq-hero p {

    max-width: 480px;

    color: rgba(255,255,255,.78);

    font-size: 17px;

    line-height: 1.8;

    margin: 0;

}


/* =====================================================
   LINHA DOURADA
===================================================== */

.linha-dourada {

    width: 75px;

    height: 2px;

    background: var(--dourado);

}

.centralizada {

    margin-left: auto;
    margin-right: auto;

}


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

.faq-hero-imagem {

    position: relative;

    height: 560px;

    margin-right: -80px;

    overflow: hidden;

}

.faq-hero-imagem img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    filter: saturate(.82) contrast(1.03);

}

.faq-hero-imagem::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            var(--verde) 0%,
            rgba(23,59,43,.18) 35%,
            rgba(0,0,0,.05) 100%
        );

}

.hero-imagem-borda {

    position: absolute;

    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;

    border: 1px solid rgba(213,173,97,.65);

    z-index: 3;

    pointer-events: none;

}


/* =====================================================
   SEÇÃO FAQ
===================================================== */

.faq-section {

    padding: 110px 0 120px;

    background: var(--creme);

}

.faq-intro {

    max-width: 750px;

    margin: 0 auto 65px;

}

.faq-intro .tag {

    color: var(--dourado);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;

}

.faq-intro h2 {

    color: var(--verde);

    font-size: 52px;

    font-weight: 500;

    line-height: 1;

    margin: 18px 0 25px;

}

.faq-intro h2 span {

    color: var(--dourado);

}

.faq-intro p {

    color: var(--cinza);

    font-size: 15px;

    line-height: 1.8;

    max-width: 600px;

    margin: 25px auto 0;

}


/* =====================================================
   LISTA FAQ
===================================================== */

.faq-list {

    max-width: 1050px;

    margin: 0 auto;

}

.faq-item {

    background: var(--branco);

    border: 1px solid #e4ddcf;

    margin-bottom: 18px;

    transition: all .3s ease;

}

.faq-item:hover {

    border-color: var(--dourado-claro);

    box-shadow: 0 10px 35px rgba(22,48,35,.07);

}


/* =====================================================
   PERGUNTA
===================================================== */

.faq-question {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 28px;

    border: 0;

    background: transparent;

    padding: 30px 35px;

    text-align: left;

}

.faq-question:focus {

    outline: none;

}


/* =====================================================
   ÍCONE
===================================================== */

.faq-icone {

    flex: 0 0 65px;

    width: 65px;
    height: 65px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--verde);

    color: var(--dourado-claro);

    font-size: 25px;

}


/* =====================================================
   TEXTO
===================================================== */

.faq-texto {

    flex: 1;

}

.faq-texto h3 {

    color: var(--verde);

    font-size: 29px;

    font-weight: 500;

    line-height: 1.05;

    margin: 0 0 8px;

}

.faq-texto span {

    color: var(--dourado);

    font-size: 13px;

    font-weight: 500;

}


/* =====================================================
   SETA
===================================================== */

.faq-seta {

    width: 40px;

    display: flex;

    justify-content: center;

    color: var(--dourado);

    font-size: 20px;

    transition: transform .3s ease;

}

.faq-question[aria-expanded="true"] .faq-seta {

    transform: rotate(180deg);

}


/* =====================================================
   RESPOSTA
===================================================== */

.faq-resposta {

    border-top: 1px solid #e8e2d7;

    padding: 25px 105px 30px 128px;

    background: #fcfaf6;

}

.faq-resposta p {

    color: #626b65;

    font-size: 15px;

    line-height: 1.9;

    margin: 0;

    max-width: 800px;

}


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

.faq-contato {

    padding: 100px 0;

    background: var(--verde);

}

.faq-contato-box {

    max-width: 700px;

    margin: auto;

    text-align: center;

}

.contato-icone {

    width: 65px;
    height: 65px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0 auto 25px;

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

    border-radius: 50%;

    color: var(--dourado-claro);

    font-size: 24px;

}

.faq-contato .tag {

    color: var(--dourado-claro);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

}

.faq-contato h2 {

    color: var(--branco);

    font-size: 48px;

    font-weight: 500;

    margin: 18px 0 10px;

}

.faq-contato p {

    color: rgba(255,255,255,.7);

    font-size: 15px;

    line-height: 1.8;

    margin: 0 auto 30px;

    max-width: 500px;

}


/* =====================================================
   BOTÃO
===================================================== */

.botao-contato {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 15px 28px;

    background: var(--dourado);

    color: #fff;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    transition: all .3s ease;

}

.botao-contato:hover {

    background: var(--dourado-claro);

    color: #fff;

    transform: translateY(-2px);

}


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

@media (max-width: 991px) {

    .faq-hero {

        min-height: auto;

    }

    .faq-hero-content {

        padding: 90px 0 50px;

    }

    .faq-hero-imagem {

        height: 400px;

        margin-right: 0;

    }

    .faq-hero-imagem::after {

        background:
            linear-gradient(
                0deg,
                rgba(16,44,32,.45),
                transparent
            );

    }

    .faq-section {

        padding: 80px 0;

    }

    .faq-intro h2 {

        font-size: 44px;

    }

    .faq-texto h3 {

        font-size: 25px;

    }

    .faq-resposta {

        padding: 25px 35px 30px 128px;

    }

}


@media (max-width: 767px) {

    .faq-hero-content {

        padding: 70px 20px 40px;

    }

    .faq-hero h1 {

        font-size: 58px;

    }

    .faq-hero-imagem {

        height: 330px;

    }

    .hero-imagem-borda {

        top: 15px;
        right: 15px;
        bottom: 15px;
        left: 15px;

    }

    .faq-section {

        padding: 65px 15px;

    }

    .faq-intro {

        margin-bottom: 40px;

    }

    .faq-intro h2 {

        font-size: 38px;

    }

    .faq-question {

        gap: 15px;

        padding: 22px 18px;

    }

    .faq-icone {

        flex: 0 0 50px;

        width: 50px;
        height: 50px;

        font-size: 20px;

    }

    .faq-texto h3 {

        font-size: 21px;

        line-height: 1.15;

    }

    .faq-texto span {

        font-size: 11px;

    }

    .faq-seta {

        width: 20px;

        font-size: 16px;

    }

    .faq-resposta {

        padding: 20px 20px 25px 83px;

    }

    .faq-resposta p {

        font-size: 14px;

    }

    .faq-contato {

        padding: 75px 20px;

    }

    .faq-contato h2 {

        font-size: 40px;

    }

}