/* =========================================
   FAQ · TREZE
========================================= */

/* =============================
   BASE
============================= */

.c-faq{
  padding: clamp(80px, 10vh, 120px) 0;
}


/* =============================
   INNER (CONTAINER TREZE)
============================= */

.c-faq__inner{
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
}


/* =============================
   CONTAINER (CAJA VISUAL)
============================= */

.c-faq__container{
  width: 100%;
  padding: clamp(48px,6vw,72px) clamp(24px,5vw,80px);
  border-radius: 30px;
  background: linear-gradient(135deg, #0A052D 0%, #291F46 100%);
}


/* =============================
   TITLE
============================= */

.c-faq__title{
  margin: 0 0 60px;
  color: #FFF;
  font-family: "Lexend Deca", sans-serif;
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 600;
  text-align: center;
  line-height: 1.1;
}


/* =============================
   LIST
============================= */

.c-faq__list{
  display: flex;
  flex-direction: column;
}


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

.c-faq__item{
  border-bottom: 1px solid rgba(201,128,40,.6);
}


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

.c-faq__question{
  width: 100%;
  padding: 22px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}


/* QUESTION TEXT */

.c-faq__question-text{
  flex: 1 1 auto;
  min-width: 0;

  color: #FFF;
  font-family: "Lexend Deca", sans-serif;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 400;
  line-height: 1.5;

  overflow-wrap: anywhere;
  word-break: normal;
}


/* DOT */

.c-faq__dot{
  width: 12px;
  height: 12px;
  margin-top: 0.45em;

  background: #C98028;
  border-radius: 50%;
  flex: 0 0 auto;

  transition: all .3s ease;
}


/* ACTIVE DOT */

.c-faq__item.is-open .c-faq__dot{
  background: transparent;
  border: 2px solid #C98028;
}


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

.c-faq__answer{
  height: 0;
  overflow: hidden;

  color: #FFF;
  font-family: "Lexend Deca", sans-serif;
  font-size: 16px;
  line-height: 1.6;

  opacity: 0;
  padding-top: 0;

  transition:
    height .4s ease,
    opacity .3s ease,
    padding-top .3s ease;
}

.c-faq__answer-inner{
  padding-bottom: 4px;
}

.c-faq__answer p{
  margin: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

.c-faq__answer p + p{
  margin-top: 1em;
}


/* OPEN STATE */

.c-faq__item.is-open .c-faq__answer{
  opacity: 1;
  padding-top: 12px;
}


/* =========================================
   LIGHT VARIANT
========================================= */

.c-faq--light .c-faq__container{
  background: transparent;
}


/* TITLE */

.c-faq--light .c-faq__title{
  color: #C98028;
}


/* LINE */

.c-faq--light .c-faq__item{
  border-bottom: 1px solid rgba(10,5,45,.25);
}


/* QUESTION */

.c-faq--light .c-faq__question-text{
  color: #0A052D;
}


/* DOT */

.c-faq--light .c-faq__dot{
  background: #0A052D;
}

.c-faq--light .c-faq__item.is-open .c-faq__dot{
  border: 2px solid #0A052D;
  background: transparent;
}


/* ANSWER */

.c-faq--light .c-faq__answer{
  color: #291F46;
}


/* =========================================
   GLOBAL SAFETY
========================================= */

.c-faq *{
  box-sizing: border-box;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1024px){

  .c-faq__container{
    padding: 56px 40px;
  }

  .c-faq__title{
    text-align: left;
    margin-bottom: 48px;
  }

  .c-faq__question{
    padding: 20px 0;
  }

  .c-faq__question-text{
    font-size: 20px;
  }

}


/* =========================================
   TABLET SMALL
========================================= */

@media (max-width: 768px){

  .c-faq__container{
    padding: 48px 28px;
  }

  .c-faq__question-text{
    font-size: 18px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 640px){

  .c-faq{
    padding: 64px 0;
  }

  .c-faq__inner{
    width: 100%;
    padding: 0 20px;
  }

  .c-faq__container{
    padding: 32px 20px;
    border-radius: 22px;
  }

  .c-faq__title{
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 32px;
  }

  .c-faq__question{
    padding: 18px 0;
    gap: 12px;
  }

  .c-faq__question-text{
    font-size: 16px;
  }

  .c-faq__dot{
    width: 10px;
    height: 10px;
  }

  .c-faq__answer{
    font-size: 14px;
  }

}