/* =========================
   FAQ PAGE (faq.html)
   PREMIUM — mesmo visual
   Classes exclusivas: faqp-*
========================= */

/* =========================
   GRID
========================= */
.faqp__grid{
  padding-top: 25px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 1100px;

  margin: 0 auto; /* 👈 centraliza */
}

/* =========================
   CARD
========================= */
.faqp__item{
  border-radius: 18px;
  overflow: hidden;
  position: relative;

  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    0 18px 60px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);

  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

/* linha neon topo */
.faqp__item::before{
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  top: 10px;
  height: 2px;
  border-radius: 999px;
  background: rgba(40,199,0,.0);
  box-shadow: 0 0 18px rgba(40,199,0,0);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .22s ease, transform .22s ease, background .22s ease, box-shadow .22s ease;
}

.faqp__item:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.055);
  box-shadow:
    0 22px 70px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.faqp__item:hover::before{
  opacity: .45;
  transform: translateY(0);
  background: rgba(40,199,0,.75);
  box-shadow: 0 0 22px rgba(40,199,0,.22);
}

/* =========================
   QUESTION
========================= */
.faqp__question{
  width: 100%;
  border: 0;
  background: transparent;
  color: #fff;
  padding: 18px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  text-align: left;

  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
}

.faqp__question span:first-child{
  max-width: 90%;
}

/* =========================
   ICON
========================= */
.faqp__icon{
  width: 38px;
  height: 38px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  font-size: 20px;
  line-height: 1;

  color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);

  transition:
    transform .22s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.faqp__item:hover .faqp__icon{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

/* =========================
   ANSWER
========================= */
.faqp__answer{
  height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    height .28s ease,
    opacity .18s ease,
    transform .22s ease;
  will-change: height;
}

.faqp__answer p{
  margin: 0;
  padding: 0 18px 18px;
  color: rgba(255,255,255,.72);
  font-size: 15px;
  line-height: 1.7;
}

/* =========================
   OPEN STATE
========================= */
.faqp__item.is-open{
  border-color: rgba(40,199,0,.28);
  box-shadow:
    0 26px 80px rgba(0,0,0,.46),
    0 0 0 1px rgba(40,199,0,.12),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.faqp__item.is-open::before{
  opacity: .75;
  transform: translateY(0);
  background: rgba(40,199,0,.90);
  box-shadow: 0 0 26px rgba(40,199,0,.28);
}

.faqp__item.is-open .faqp__icon{
  transform: rotate(45deg);
  border-color: rgba(40,199,0,.35);
  box-shadow: 0 0 22px rgba(40,199,0,.18);
}

.faqp__item.is-open .faqp__answer{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   CTA CARD
========================= */
.faqp__cta{
  margin-top: 22px;
  max-width: 1100px;
}

.faqp__cta-card{
  border-radius: 18px;
  position: relative;
  overflow: hidden;

  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    0 18px 60px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);

  padding: 22px;
}

.faqp__cta-card::after{
  content:"";
  position:absolute;
  inset: -40%;
  background: linear-gradient(120deg,
    rgba(40,199,0,0) 35%,
    rgba(40,199,0,.10) 50%,
    rgba(40,199,0,0) 65%
  );
  transform: rotate(12deg);
  opacity: .35;
  pointer-events: none;
}

.faqp__cta-title{
  margin: 0 0 8px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.faqp__cta-text{
  margin: 0 0 16px;
  color: rgba(255,255,255,.72);
  line-height: 1.65;
  position: relative;
  z-index: 1;
}

/* =========================
   BUTTON
========================= */
.faqp__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;

  font-weight: 600;
  letter-spacing: .08em;
  color: #ffffff;

  background: rgba(40,199,0,.10);
  border: 1px solid rgba(255,255,255,.18);

  position: relative;
  overflow: hidden;

  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.faqp__btn:hover{
  transform: translateY(-1px);
  background: rgba(40,199,0,.18);
  border-color: rgba(40,199,0,.55);
}

.faqp__btn::after{
  content:"";
  position:absolute;
  inset:-60px;
  background: linear-gradient(120deg,
    transparent 40%,
    rgba(255,255,255,.20) 50%,
    transparent 60%);
  transform: translateX(-35%) rotate(10deg);
  opacity: 0;
  transition: opacity .25s ease, transform .65s ease;
  pointer-events:none;
}

.faqp__btn:hover::after{
  opacity: 1;
  transform: translateX(35%) rotate(10deg);
}









/* =========================
   RESPONSIVO — FAQ (faqp-*)
   Regras:
   - não altera desktop
   - sem scroll horizontal
   - mais respiro lateral (nada colado nas bordas)
   - botões com alvo de toque no mobile
========================= */


/* =========================
   MOBILE (<= 575.98px)
========================= */
@media (max-width: 575.98px){

  /* ✅ respiro lateral + evita “corte” por padding */
  .faqp__grid{
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* ✅ pergunta mais confortável no touch */
  .faqp__question{
    padding: 16px;
    font-size: 15px;
  }

  /* ✅ evita quebrar feio: deixa texto ocupar mais e quebrar corretamente */
  .faqp__question span:first-child{
    max-width: 100%;
    word-break: break-word;
  }

  /* ✅ ícone um pouco menor pra caber bem */
  .faqp__icon{
    width: 34px;
    height: 34px;
    font-size: 18px;
    flex: 0 0 auto;
  }

  /* ✅ resposta com fonte levemente menor e padding alinhado */
  .faqp__answer p{
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
    font-size: 14px;
  }

  /* ✅ CTA com respiro lateral e sem estourar */
  .faqp__cta{
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  .faqp__cta-card{
    padding: 18px;
  }

  /* ✅ botão em largura total no mobile (mais conversão + touch) */
  .faqp__btn{
    width: 100%;
    min-height: 48px;
    padding: 14px 18px;
  }
}


/* =========================
   TABLET MINI (576px – 991.98px)
========================= */
@media (min-width: 576px) and (max-width: 991.98px){

  /* ✅ respiro lateral consistente */
  .faqp__grid{
    padding-left: 22px;
    padding-right: 22px;
    box-sizing: border-box;
  }

  .faqp__question{
    padding: 18px 18px;
    font-size: 16px;
  }

  .faqp__question span:first-child{
    max-width: 100%;
  }

  /* ✅ CTA alinhado ao grid + respiro */
  .faqp__cta{
    padding-left: 22px;
    padding-right: 22px;
    box-sizing: border-box;
  }

  .faqp__cta-card{
    padding: 20px;
  }

  /* ✅ botão com alvo de toque melhor (sem virar gigante) */
  .faqp__btn{
    min-height: 46px;
    padding: 12px 18px;
  }
}




/* =========================
   FAQ — BOTÃO CTA RESPONSIVO
========================= */


/* MOBILE */
@media (max-width: 575.98px){

  .faqp__btn{
    width: 100%;              /* ocupa largura do card */
    max-width: 100%;
    min-height: 50px;         /* área de toque confortável */

    padding: 2px 3px;
    font-size: 12px;
    letter-spacing: .06em;

    border-radius: 999px;
  }

  /* garante respiro lateral do card */
  .faqp__cta-card{
    padding: 20px 18px;
  }
}


/* TABLET */
@media (min-width: 576px) and (max-width: 991.98px){

  .faqp__btn{
    width: auto;              /* não precisa full width no tablet */
    min-height: 48px;

    padding: 15px 22px;
    font-size: 14px;
  }

  .faqp__cta-card{
    padding: 22px;
  }
}