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

.faq{
    padding:120px 8%;
    background:#08121d;
}

/* ===================================
   TITULO
=================================== */

.faq .section-title{
    text-align:center;
    margin-bottom:80px;
}

.faq .section-title span{
    display:inline-block;
    font-size:2.3rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:6px;
    margin-bottom:20px;
    background:
    linear-gradient(
        135deg,
        #1ba83e,
        #1cdd36,
        #38ef7d
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.faq .section-title h2{
    color:white;
    font-size:3rem;
    font-weight:800;
    margin-bottom:20px;
}

.faq .section-title p{
    color:#a7f3d0;
    max-width:850px;
    margin:auto;
    line-height:1.8;
}

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

.faq-container{
    max-width:1000px;
    margin:auto;
}

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

.faq-item{
    margin-bottom:25px;
    border-radius:20px;
    overflow:hidden;
    background:
    linear-gradient(
        145deg,
        rgba(15,25,38,.95),
        rgba(18,35,52,.95)
    );
    border:
    1px solid rgba(27,168,62,.15);
    box-shadow:
    0 15px 35px rgba(0,0,0,.25);
}

/* ===================================
   PREGUNTA
=================================== */

.faq-question{
    width:100%;
    background:none;
    border:none;
    color:white;
    font-size:1.15rem;
    font-weight:700;
    padding:28px 30px;
    text-align:left;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.faq-question i{
    color:#1ba83e;
    transition:.4s;
}

.faq-item.active .faq-question i{
    transform:rotate(45deg);
}

/* ===================================
   RESPUESTA
=================================== */

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:.4s ease;
}

.faq-item.active .faq-answer{
    max-height:1200px;
}

.faq-answer p{
    color:#a7f3d0;
    line-height:1.9;
    padding:0 30px 20px;
}

.faq-answer ul{
    padding:
    0 30px 20px 55px;
}

.faq-answer li{
    color:#a7f3d0;
    line-height:1.9;
    margin-bottom:10px;
}

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

.faq-item:hover{
    border-color:#1ba83e;
    box-shadow:
    0 20px 50px rgba(27,168,62,.25);
}

/* ===================================
   RESPONSIVE
=================================== */

@media(max-width:768px){
    .faq{
        padding:100px 6%;
    }
    .faq .section-title h2{
        font-size:2.2rem;
    }
    .faq-question{
        font-size:1rem;
        padding:22px;
    }
}

/* ==========================
   BOTÓN REGRESAR
========================== */

.btn-regresar{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:white;
    font-weight:700;
    padding:12px 24px;
    border-radius:14px;
    background:
    linear-gradient(
        135deg,
        #1ba83e,
        #1cdd36
    );
    transition:.3s;
}

.btn-regresar:hover{
    transform:translateY(-3px);
    box-shadow:
    0 10px 25px rgba(27,168,62,.35);
}

@media(max-width:768px){
    .btn-regresar{
        padding:10px 18px;
        font-size:.9rem;
    }
}