.faq {
    padding: 1.667vw;
    border-radius: 16px;
    background: var(--grigio-chiaro, #F3F3F3);
}

/* Ora è un <button>: azzeriamo lo stile nativo. */
.faq_title {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.972vw;
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.faq_icon {
    width: 1.667vw;
    flex-shrink: 0;
}

/* Chiuso -> plus (espandi). Aperto -> minus (chiudi). Ne mostriamo sempre una sola. */
.faq_title[aria-expanded="false"] .faq_icon_minus {
    display: none;
}

.faq_title[aria-expanded="true"] .faq_icon_plus {
    display: none;
}

/* ------------------------------------------------------------
   Apertura graduale senza conoscere l'altezza del testo.
   Il trucco: la riga della griglia passa da 0fr a 1fr, e quella
   transizione è animabile. L'inner ha overflow hidden per tagliare
   il testo mentre la riga si apre.
   ------------------------------------------------------------ */

.faq_testo {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}

.faq_testo_inner>div {
    padding: 0.972vw 0 0 0;
}

.faq_title[aria-expanded="true"]+.faq_testo {
    grid-template-rows: 1fr;
}

.faq_testo_inner {
    overflow: hidden;
}

@media screen and (max-width: 750px) {

    .faq {
        padding: 6.154vw;
    }

    .faq_title {
        gap: 3.59vw;
    }

    .faq_icon {
        width: 6.154vw;
    }

    .faq_testo_inner>div{
        padding: 3.59vw 0 0 0;

    }

}