/* =========================================================
   WheyProtein · FAQ — CSS do hub
   v2.0.0 · Mediahouse Digital

   Tudo escopado em .wpm-faq. Na 1.4.0 este CSS era inline,
   entrava em TODA página do portal e usava 15 cores escritas
   à mão. Nenhum :root, nenhum seletor de elemento nu, nenhum
   hexadecimal: só tokens do tema.

   O HERO SAIU. A faixa de abertura usava 100vw com
   translateX para atravessar a tela — dentro do quadro de
   1080 do portal isso cria barra de rolagem horizontal, e
   hero é da página, não do plugin.

   CORES SUBSTITUÍDAS:
     #2F3A55 → --navy      #592C3D → --vinho
     #2E2D32 → --chumbo    #7A9DA5 → --heron
     #7C8B6E → --sage      rgba(46,45,50,.14) → --linha
     rgba(46,45,50,.6)  → --tinta2
   ========================================================= */

.wpm-faq{
  --tom:var(--navy);
  color:var(--tinta);
  font-family:var(--corpo);
}
.wpm-faq *{box-sizing:border-box}

/* ---------- BUSCA ----------
   O campo apenas esconde o que já veio do servidor. Sem JavaScript ele fica
   inerte e todas as perguntas continuam visíveis. */
.wpm-faq .wpm-faq-busca{width:100%; font-family:var(--corpo); font-size:15px;
  padding:11px 14px; border:1px solid var(--linha); border-radius:var(--r);
  background:var(--papel); color:var(--tinta); margin:0 0 16px}
.wpm-faq .wpm-faq-busca:focus{outline:2px solid var(--tom); outline-offset:2px}

/* ---------- CHIPS DE SUBCATEGORIA ---------- */
.wpm-faq .wpm-faq-chips{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 32px}
.wpm-faq .wpm-faq-chips button{font-family:var(--corpo); font-size:12.5px;
  background:none; cursor:pointer; border:1px solid var(--linha);
  border-radius:100px; padding:5px 12px; color:var(--tinta2)}
.wpm-faq .wpm-faq-chips button:hover{border-color:var(--linha2); color:var(--tinta)}
.wpm-faq .wpm-faq-chips button:focus-visible{outline:2px solid var(--tom); outline-offset:2px}
.wpm-faq .wpm-faq-chips button[aria-pressed="true"]{background:var(--chumbo);
  border-color:var(--chumbo); color:var(--gesso)}
.wpm-faq-pag{margin-top:28px}
.wpm-faq-pag a.lzm-post-loop-pagination__page{color:inherit; text-decoration:none}
.wpm-faq-pag .lzm-post-loop-pagination__page[aria-disabled="true"]{opacity:.35; cursor:default}

/* ---------- LISTA ----------
   Cada pergunta é uma caixa. Fechada, o mais. Aberta, a borda
   em vinho e a resposta dentro. A faixa escolhe a categoria. */
.wpm-faq .wpm-faq-lista{display:flex; flex-direction:column; gap:12px}
.wpm-faq .wpm-faq-perg{background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--r)}
.wpm-faq .wpm-faq-perg.is-aberta{border-color:var(--vinho)}
.wpm-faq .wpm-faq-perg-botao{width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:none; border:0; color:inherit; font-family:var(--corpo); text-align:left;
  cursor:pointer; box-shadow:none; border-radius:var(--r); text-transform:none;
  letter-spacing:0; padding:16px 20px; font-size:.875rem; font-weight:400; line-height:1.5rem}
.wpm-faq .wpm-faq-perg-botao > span:first-child{flex:1 1 auto; min-width:0}
.wpm-faq .wpm-faq-mais{flex:none; margin-left:auto; width:1.2em; text-align:right; font-weight:400; line-height:1}
.wpm-faq .wpm-faq-resp{display:none}
.wpm-faq .wpm-faq-perg.is-aberta > .wpm-faq-resp{display:block}
.wpm-faq .wpm-faq-resp > .wpm-faq-dentro{padding:0 20px 16px}
.wpm-faq .wpm-faq-resp p{margin:0; font-size:.875rem; font-weight:400; line-height:1.5rem}
.wpm-faq .wpm-faq-link{margin:10px 0 0; font-size:.875rem}
.wpm-faq .wpm-faq-link a{color:var(--vinho)}

/* ---------- ESTADOS ---------- */
.wpm-faq .wpm-faq-nada{padding:32px 0; color:var(--tinta2); font-style:italic}
.wpm-faq .wpm-faq-aviso{padding:16px 18px; background:var(--areia);
  border:1px solid var(--areia-b); border-radius:var(--r); color:var(--castanho);
  font-size:14px}

/* ---------- PAGINAÇÃO ----------
   Links de verdade, uma URL por página. Nada é carregado por AJAX. */
.wpm-faq-pag{margin:40px 0 0; padding-top:24px; border-top:1px solid var(--linha)}
.wpm-faq-pag .wpm-faq-conta{margin:0 0 16px; font-size:13.5px; color:var(--tinta2)}
.wpm-faq-pag .wpm-faq-pag-links{display:flex; flex-wrap:wrap; align-items:center; gap:5px}
.wpm-faq-pag .wpm-faq-pag-num,
.wpm-faq-pag .wpm-faq-pag-nav{display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; font-family:var(--corpo); font-size:14px;
  border:1px solid var(--linha); border-radius:var(--r); color:var(--vinho)}
.wpm-faq-pag .wpm-faq-pag-num{min-width:36px; height:36px; padding:0 7px}
.wpm-faq-pag .wpm-faq-pag-nav{height:36px; padding:0 13px}
.wpm-faq-pag .wpm-faq-pag-num:hover,
.wpm-faq-pag .wpm-faq-pag-nav:hover{border-color:var(--linha2); background:var(--gesso)}
.wpm-faq-pag .wpm-faq-pag-num.is-atual{background:var(--tom); border-color:var(--tom);
  color:var(--papel); font-weight:600}
.wpm-faq-pag .wpm-faq-pag-gap{padding:0 3px; color:var(--tinta2)}

/* ---------- TELAS ESTREITAS ---------- */
@media (max-width:640px){
  .wpm-faq-pag .wpm-faq-pag-links{gap:4px}
  .wpm-faq-pag .wpm-faq-pag-num{min-width:32px; height:32px; font-size:13.5px}
}