/* ==========================================================================
   extras.css — FAQ redesenhado
   (carrega DEPOIS do style.min.css, por isso sobrescreve o FAQ antigo)
   ========================================================================== */

/* ===== FAQ redesenhado ===== */
.faq-grid { grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; }
.faq-intro { position: sticky; top: 110px; }
.faq-intro > p { font-size: 14px; }

.faq-help { display: flex; align-items: center; gap: 14px; max-width: 380px; margin-top: 38px; padding: 16px 18px; border: 1px solid #d3e0da; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(30,61,66,.06); }
.faq-help__icon { display: grid; width: 40px; height: 40px; flex: none; place-items: center; border-radius: 12px; color: #2f745e; background: #edf6ee; font-size: 18px; }
.faq-help div { flex: 1; min-width: 0; }
.faq-help b, .faq-help div > span { display: block; }
.faq-help b { color: #142737; font-family: "Manrope", sans-serif; font-size: 13px; }
.faq-help div > span { margin-top: 3px; color: #71818a; font-size: 12px; line-height: 1.5; }
.faq-help > a { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border-radius: 50%; color: #142519; background: #baf36a; transition: transform .25s var(--ease-out); }
.faq-help > a:hover { transform: rotate(45deg); }

.faq-list { display: grid; gap: 10px; border-top: 0; }
.faq-item { border: 1px solid #dbe5e0; border-radius: 18px; background: rgba(255,255,255,.55); transition: background .35s var(--ease-out), border-color .35s, box-shadow .35s var(--ease-out), transform .35s var(--ease-out); }
.faq-item:hover { border-color: #c5d6ce; background: rgba(255,255,255,.85); }
.faq-item--open { border-color: rgba(128,207,116,.65); background: #fff; box-shadow: 0 18px 44px rgba(30,61,66,.09); }

.faq-question { min-height: 72px; grid-template-columns: 34px 1fr 34px; gap: 14px; padding: 16px 18px; border-radius: 18px; }
.faq-index { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #6d8a86; background: #edf3f0; font-size: 10px; letter-spacing: .04em; transition: background .3s, color .3s; }
.faq-item--open .faq-index { color: #15251d; background: #baf36a; }
.faq-question > span:nth-child(2) { font-size: 15px; letter-spacing: -.02em; }
.faq-toggle { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #dbe5e0; border-radius: 50%; color: #4d6b6e; background: #fff; transition: transform .45s var(--ease-out), background .3s, border-color .3s, color .3s; }
.faq-toggle .icon { width: 16px; height: 16px; }
.faq-item--open .faq-toggle { transform: rotate(180deg); border-color: transparent; color: #15251d; background: #baf36a; }

/* abre/fecha suave: anima a altura real do conteúdo */
.faq-answer { display: grid; grid-template-rows: 0fr; padding: 0; transition: grid-template-rows .5s var(--ease-out); }
.faq-item--open .faq-answer { grid-template-rows: 1fr; }
.faq-answer-inner { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s .5s; }
.faq-item--open .faq-answer-inner { visibility: visible; transition-delay: 0s; }
.faq-answer p { max-width: 560px; margin: 0; padding: 0 64px 22px 66px; color: #5f7079; font-size: 13.5px; line-height: 1.8; opacity: 0; transform: translateY(-8px); transition: opacity .35s var(--ease-out), transform .5s var(--ease-out); }
.faq-item--open .faq-answer p { opacity: 1; transform: none; transition-delay: .12s; }
.faq-answer b { color: #142737; font-family: "DM Mono", monospace; font-weight: 500; letter-spacing: .04em; }

@media (max-width: 980px) { .faq-grid { gap: 50px; } }
@media (max-width: 700px) {
  .faq-grid { grid-template-columns: 1fr; gap: 37px; }
  .faq-intro { position: static; }
  .faq-help { max-width: none; }
  .faq-question { min-height: 64px; grid-template-columns: 28px 1fr 30px; gap: 10px; padding: 14px; }
  .faq-index { width: 26px; height: 26px; font-size: 9px; }
  .faq-question > span:nth-child(2) { font-size: 13px; }
  .faq-toggle { width: 28px; height: 28px; }
  .faq-answer p { padding: 0 16px 18px 50px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-answer, .faq-answer p, .faq-toggle, .faq-item { transition: none !important; }
}

/* "overflow:hidden" no .site-shell quebrava o position:sticky do FAQ; "clip" corta igual sem criar área de rolagem */
.site-shell { overflow: hidden; overflow: clip; }

/* aviso de uso único do cupom (ocupa a linha inteira embaixo do banner) */
.coupon-terms { flex: 0 0 100%; margin: 0; padding-top: 14px; border-top: 1px dashed rgba(128,207,116,.55); color: #6b7b84; font-size: 12px; line-height: 1.6; }