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

.faq-list{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:32px;

}


/* =========================================================
   FAQ ITEM
========================================================= */

.faq-item{

    overflow:hidden;

    border-radius:20px;

    border:1px solid rgba(69,172,171,.12);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.03),
            rgba(255,255,255,.015)
        );

    transition:
        border-color .35s ease,
        box-shadow .35s ease,
        transform .35s ease;

}

/* Só com mouse: em touchscreen o navegador aplica :hover no toque, e
   esse transform + box-shadow entravam no mesmo frame da abertura do
   painel — trabalho extra justo no momento mais caro da animação. */
@media(hover:hover){

    .faq-item:hover{

        transform:translateY(-3px);

        border-color:rgba(69,172,171,.28);

        box-shadow:

            0 15px 35px rgba(0,0,0,.25),

            0 0 20px rgba(69,172,171,.08);

    }

}


/* =========================================================
   QUESTION
========================================================= */

/* O <h3> é apenas um envoltório semântico: não altera a tipografia */
.faq-heading{

    margin:0;

    font-size:inherit;

    font-weight:inherit;

}

.faq-question{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:22px 26px;

    cursor:pointer;

    border:none;

    background:none;

    color:#fff;

    font-size:1.05rem;

    font-weight:600;

    text-align:left;

}


/* =========================================================
   PLUS ICON
========================================================= */

.faq-question span{

    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    flex-shrink:0;

    border-radius:50%;

    background:rgba(69,172,171,.10);

    color:var(--cyan);

    font-size:1.35rem;

    /* Específico em vez de `all`: sem isto o navegador interpola toda
       propriedade animável do elemento a cada frame. */
    transition:
        transform .35s ease,
        background-color .35s ease,
        color .35s ease;

}


/* =========================================================
   ANSWER
========================================================= */

.faq-answer{

    display:grid;

    grid-template-rows:0fr;

    transition:grid-template-rows .35s ease;

}

.faq-answer>div{

    overflow:hidden;

    /* Isola o painel: o que muda dentro dele não obriga o navegador a
       repintar/recalcular o resto da seção a cada frame da abertura. */
    contain:layout paint;

}

.faq-answer p{

    padding:0 26px 24px;

    color:var(--muted);

    line-height:1.8;

}


/* =========================================================
   ACTIVE
========================================================= */

.faq-item.active{

    border-color:rgba(69,172,171,.35);

}

.faq-item.active .faq-answer{

    grid-template-rows:1fr;

}

.faq-item.active .faq-question span{

    transform:rotate(45deg);

    background:rgba(69,172,171,.18);

    color:#fff;

}


/* =========================================================
   HOVER
========================================================= */

.faq-item:hover .faq-question span{

    transform:scale(1.08);

}


/* =========================================================
   FAQ HEADER
========================================================= */

.faq .section-title{

    margin-bottom:12px;

}


/* =========================================================
   SMALL DETAIL
========================================================= */

/* Anima `transform` (composto na GPU) em vez de `width` — animar
   largura recalcula layout a cada frame, e isso acontecia junto com a
   abertura do painel. */
.faq-item::before{

    content:"";

    display:block;

    height:2px;

    width:100%;

    background:

        linear-gradient(
            90deg,
            var(--cyan),
            var(--blue)
        );

    transform:scaleX(0);

    transform-origin:left center;

    transition:transform .4s ease;

}

.faq-item.active::before{

    transform:scaleX(1);

}

@media(hover:hover){

    .faq-item:hover::before{

        transform:scaleX(1);

    }

}


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

@media(max-width:600px){

    .faq-question{

        gap:14px;

        padding:18px 18px;

        font-size:.98rem;

    }

    .faq-question span{

        width:30px;

        height:30px;

        font-size:1.2rem;

    }

    .faq-answer p{

        padding:0 18px 20px;

    }

}